久久精品人妻一区二区三区,久久精品无码一区二区app,欧美牲交A欧牲交aⅴ久久

網格/報紙/雜志模板在 wordpress 皮膚和主題社區中變得越來越占主導地位。它們看起來很優雅，但不知道從哪里開始可能會令人畏懼。在本教程中，我們使用 jquery 的強大功能來創建帶有大小降低標題的網格布局！

前言

本教程假設您有一個在服務器上運行的 WordPress 引擎，您有權上傳文件、下載文件和瀏覽。如果您想在安裝了 WordPress 的計算機上運行本地服務器，這里有關于 Windows 的教程，這里有關于 OS X 的教程。

使用 WordPress 和 jQuery 構建基本報紙樣式布局

第 1 步 – 讓我們從必需品開始……

使用 WordPress 和 jQuery 構建基本報紙樣式布局

在“wp-content/themes/”文件夾中創建一個新文件夾，并將其命名為您想要為我們即將制作的皮膚命名的名稱。在此新文件夾中創建 2 個新文件，一個名為“index.php”，另一個名為“style.css”。我們將從一些基本的 WordPress 代碼開始。每次我創建完整 WordPress 皮膚時，都會從這個“基本代碼”開始，因為它包含了大部分必要的信息。我把它放在這里是因為你可能想把它開發成完整的皮膚。我還為我的主題使用默認樣式表，因此將此代碼片段復制到“style.css”中，并分別編輯內容。樣式表與以下行相關：

<link rel="stylesheet" href="&lt;?php%20bloginfo('stylesheet_url');%20?&gt;" type="text/css" media="screen">

您還需要 2 個 JavaScript 文件，其中一個是 jQuery 的副本，另一個是名為 myTheme.js 的空 .js 文件。不要忘記將它們與 head 元素中的 this 關聯起來：

<script type="text/javascript" src="&lt;?php%20bloginfo('template_directory');%20?&gt;/jquery-1.2.6.min.js"></script><script type="text/javascript" src="&lt;?php%20bloginfo('template_directory');%20?&gt;/myTheme.js"></script>

如果您使用的是與我不同的包（您很可能就是這樣），請不要忘記更改 jQuery rel 的名稱。 “myTheme.js”必須位于 jQuery 鏈接下方，不能位于上方。

注意：jQuery 1.2.6 也與 WordPress 2.2 及更高版本一起打包，因此如果您不想下載它，可以在 wp-includes/js/ 中找到它jquery/jquery.js。 要包含此 jQuery 文檔，請使用它而不是上面的 jQuery rel。不過，您仍然需要 myTheme.js！

<script type="text/javascript" src="&lt;?php%20bloginfo('url');%20?&gt;/wp-includes/js/jquery.js"></script>

第 2 步 – PHP/Wordpress/XHTML 代碼。

選擇并激活新主題后，使用您最喜歡的編輯器打開“index.php”，然后開始編碼！

這里是我們設置每個帖子的內容和元數據所需的所有 XHTML/PHP/Wordpress 代碼。將其粘貼或鍵入到 html 打開和關閉標記之間。下面我會一點點解釋！

<div id="wrapper"> 	<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?><div class="post">  			<div class="left"> 				<p class="postmetadata"> 					<strong>Post Details</strong><br> 					Posted: <em><?php the_time('l, jS F, Y'); ?></em> 					at <em><?php the_time('g:i a'); ?></em>.<br> 					Written by: <em><?php the_author(); ?>.</em><br> 					Number of comments: <em><?php the_comments_number('none', '1', '%'); ?></em>.<br> 					Posted in: <em><?php the_category(', '); ?></em>. 				</p> 			</div> <!-- end div.left -->  			<div class="right"> 				<h2><?php the_title(); ?></h2> 				<div class="entry"> 					<?php the_content('more...'); ?> </div> 			</div> <!-- end div.right -->  		</div> <!-- end div.post -->  	<?php endwhile; ?><?php endif; ?> </div><!-- end div#wrapper -->

div

<div id="wrapper">  <p>包裝 div 基本上包裝了整個內容，以便我們稍后可以很好地對其進行布局。所有的 div 都非常不言自明，我也在 div 的末尾進行了評論，所以我在解釋時會跳過它們。簡而言之，我已經相應地包裝了所有內容，因此很容易設計。 .left div 是左列，.right div 是右列，.entry div 是帖子條目，依此類推。我在循環中使用了類，就好像有多個帖子一樣，ID 會備份并創建驗證錯誤。</p> <h4>著名的 WordPress 循環。</h4> <pre class="brush:php;toolbal:false;"><?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>

如果您不明白這是什么，請返回 WordPress 學校。它基本上循環遍歷與循環內進行的調用有關的數據庫信息。如果您詢問標題，循環將為您在數據庫中查找標題。

帖子的元數據。

<p class="postmetadata"> 	<strong>Post Details</strong><br> 	Posted: <em><?php the_time('l, jS F, Y'); ?></em> at <em><?php the_time('g:i a'); ?></em>.<br> 	Written by: <em><?php the_author(); ?>.</em><br> 	Number of comments: <em><?php comments_number('none', '1', '%'); ?></em>.<br> 	Posted in: <em><?php the_category(', '); ?></em>. </p>

現在來說說具體的內容。上面的所有內容都包含我們想要顯示的有關該帖子的信息。按照相應的順序，我們要求；

日期和時間 – 我們要求日期的格式為 l, jS F, Y （例如，星期日，2008 年 6 月 8 日），時間的格式為g:i a （例如下午 4:45）。我使用了 the_time(); 兩次，因為如果我們使用 the_date(); 來詢問日期，它每天只會顯示一次。如果您在同一天發布了多篇帖子，則日期不會在每個帖子上顯示一次，而是在當天的第一個帖子上顯示一次。
作者 – 這是不言自明的，我們只是詢問帖子的作者。
評論數量 – 這需要帖子的評論數量。如果帖子沒有評論，它將返回值“none”。如果它有一個，它將返回值“1”，是的，你猜對了！如果有多個，它將??返回一個值，如“21”或“6”，這取決于該帖子有多少評論。
類別 – the_category(); 向數據庫詢問帖子已分配到的類別。感謝 WordPress，我們不必擔心使用廣泛且原始的 php foreach 循環，因為 (‘, ‘); 用逗號分隔類別。感謝 WordPress！

內容。

<h2><?php the_title(); ?></h2> <div class="entry"> 	<?php the_content('more...'); ?> </div>

它是否比這更不言自明？我們要求提供標題（包裝在 h2 元素中，以便我們可以相應地設置其樣式）和內容（包裝在 .entry div 中，以便所有內容都嵌套在它有自己的 div，也可以輕松設置樣式和訪問。）。括號中的“more…”表示您在 WordPress 帖子編輯器中使用標簽時的情況。

來吧…循環結束！

<?php endwhile; ?><?php endif; ?>

編碼兔子應該明白這個…這又是基本循環！它關閉循環，以便只反復執行循環中包含的“函數”。

第 3 步 – CSS：布局。

唷！您已經掌握了本教程所需的所有 WordPress 代碼！做得好！它看起來應該像這樣丑陋：

使用 WordPress 和 jQuery 構建基本報紙樣式布局

注意：我使用了來自我自己的本地服務器的內容（恰好來自我自己的博客）作為填充內容，因此您的內容不會反映我的內容。

現在我們已經解決了所有的 xhtml 和 php 函數，我們可以繼續使用 css 讓它看起來更漂亮！快樂！

使用您最喜歡的編輯器再次打開“style.css”，如果尚未打開，請將此代碼粘貼到其中。但無論如何你都應該這樣做，因為否則你將無法激活主題！

在本教程中，我利用 CSS 的“float”和“clear”的優點來浮動帖子詳細信息（或元數據，無論您想如何稱呼它），以及并排的內容，并且一篇接著一篇。。這是基本的布局代碼：（注意：這不會讓您的頁面變得漂亮。）

/*-----LAYOUT-----*/ #wrapper{ 	width: 600px; 	margin: 0 auto; }  .post{ 	clear: both; 	width: 600px; }  .post .left{ 	width: 180px; 	float: left; 	padding-right: 20px; }  .post .right{ 	width: 400px; 	float: right; 	padding: 0 25px 20px; }

簡單：

#wrapper – 這些屬性將我們擁有的所有內容放置在頁面中間，寬度為 600 像素。
#post – 這些帖子可能會意外地出現在之前浮動效果不佳的帖子旁邊，或者由于我們使用浮動而沒有足夠內容的帖子旁邊。無論如何，“clear”屬性可確保將其一直推到前一個元素的底部。
.left 和 .right div – 它們分別向左和向右浮動，因為這就是使它們并排的原因！如果我們沒有設置 div 的寬度，則此技術將不起作用。我使帖子詳細信息列比內容列稍微細一些，因為我們希望內容獲得更多關注和更多空間（考慮到“帖子詳細信息”列中的內容較少）。
我已經完成了數學計算，并確保總寬度總計為 600，因此兩列都很好地適合父“.post”div：180px+20px（填充，因此我們有一些間距）+400px= 600 像素

耶！現在，讓我們把它變得漂亮起來！

第 4 步 – CSS：樣式。

所以我們已經得到了骨架布局，但它看起來仍然有點難看：

使用 WordPress 和 jQuery 構建基本報紙樣式布局

這是我們使用級聯樣式表真正威力的時候。將以下內容復制或輸入到之前“布局”代碼下方的 style.css 中：

/*-----STYLES-----*/  body{ 	font: 75%/18px Georgia, "Times New Roman", Times, serif; 	background-color: #e4e4e4; }  a{ 	color: #006082; 	text-decoration: none; }  .post .left{ 	text-align: right; 	color: #898989; }  .post .left p.postmetadata strong{ 	display: block; 	text-transform: uppercase; }  .right{ 	background-color: #fff; 	min-height: 150px; }  .entry{ 	color: #3c3c3c; }  .entry p img{ 	padding: 0 10px 7px 0; 	float: left; }  a.more-link{ 	display: block; 	padding-top: 10px; 	text-transform: uppercase; }

故障。

這是一些需要處理的代碼，看起來可能令人畏懼，但實際上非常簡單！因為你們中的大多數人可能都具備足夠的 CSS 能力，所以我會快速而敏捷地完成這一部分。

body – 在這里我們設置標準文本/字體大小和背景顏色
a – 使所有鏈接看起來都很漂亮。
.post .left – 將文本顏色更改為灰色陰影，并將段落右對齊。
.post .left。 p.postmetadata Strong – 通過大寫使“帖子詳細信息”脫穎而出，并將 Strong 元素更改為塊元素，以使帖子詳細信息與內容段落對齊。
.right – 這有點令人困惑，所以我將深入解釋這一點。顯然，背景顏色現在是白色，因此內容跳出了頁面。不過，“min-height”屬性的作用是，如果帖子內容實際上比帖子詳細信息短，它不會破壞頁面上連續的白色。
.entry – 將內容文本設為深灰色。
.entry p img – 使內容區域內的任何圖像都具有呼吸感，并且還允許文本環繞圖像。
a.more-link – wordpress 自動添加“more-link”類，以選出我們添加到“the_content()”函數中的“more…”。我們將其轉為大寫，因此用戶認為它不是常規/外部鏈接，并給它一些空間。

CSS 應該使它看起來像這樣：

使用 WordPress 和 jQuery 構建基本報紙樣式布局

第 5 步 – jQuery。

所以非常重要的是它在沒有任何 JavaScript 的情況下看起來一切都很好 – 上面的內容補償了我們。但要創建真正的報紙風格的降級標題，我們需要一些美味的 jQuery！打開“myTheme.js”，讓我們開始破解吧！我們想要實現的目標是這樣的（photoshop 模型）：

使用 WordPress 和 jQuery 構建基本報紙樣式布局

注意到區別了嗎？我們將增加第一個“英雄”帖子標題的大小，并更改顏色。

然后，第二個或“惡棍”帖子將呈淺灰色，尺寸更小，之后的連續帖子將保持統一的尺寸。

我們將通過分別向第一個和第二個“.post”div 添加類“hero”和“villain”來解決這個問題，然后我們將使用一些額外的 CSS 對其進行樣式設置。我們將類添加到 ‘.post’ div 而不是 h2 元素，因為我們也想更改一些包含的內容，例如內容的大小和更多的附加圖標 – “英雄”帖子中的鏈接。你問為什么是英雄和惡棍？因為惡棍總是在英雄之后出現。這是一個容易掌握的概念。

聽起來很復雜，但實際上只有 4 行（間隔的）代碼。這一切都進入“myTheme.js”：

$(document).ready(function(){ 	$(".post:first").addClass("hero"); 	$(".post:nth-child(2)").addClass("villain"); });

太棒了！非侵入式 JavaScript！我喜歡它！它應該位于“myTheme.js”中。

說明

我們剛剛使用了 jQuery 極其強大、有價值且多功能的選擇器的一小部分。現在，我們已經悄悄地將類“.hero”添加到頁面上的第一個“.post”div，并將類“.villain”添加到頁面上的第二個“.post”div。讓我解釋一下如何。

```
$(document).ready(function(){ 
```
這是 jQuery 的超級特殊函數，用于啟動此行之后定義的 JavaScript 函數。當 $(document) 為 .ready() 時，啟動我們即將定義的 function(){}。使用 $(document).ready(function(){ 比使用 ‘default’: window.onload() 函數快得多，因為window.onload()函數等待整個文檔加載。這包括所有圖像、iframe等。我們只需要等待核心 XHTML 文檔已完成加載以運行我們的腳本 – 因此我們使用 jQuery 的特殊 $(document).ready(function(){ 來加快速度，并減少初始瀏覽之間的延遲時間和 JavaScript 啟動。有點令人困惑吧？為了簡單起見，jQuery 的方法更快。記住這一點。
```
$(".post:first").addClass("hero"); 
```
強大的選擇器太棒了！ jQuery 有一系列令人驚嘆的選擇器，其中一些來自 CSS3，但我們現在就可以使用它們。這一行告訴我們獲取：$() 第一個 ‘.post’ 元素：.post:first 并添加英雄類：.addClass(“英雄”） 。我們現在可以在 CSS 中設置樣式，但我們仍然沒有以任何方式觸及或更改“.post”div 的 XHTML 代碼。
```
$(".post:nth-child(2)").addClass("villain"); 
```
更多超強選擇器！ jQuery 不僅讓我們選擇一種元素的第一個元素，還讓我們選擇任意數量的元素！使用:nth-child(#)我們可以選擇頁面上我們想要的任何元素類型。如果我們想要頁面上的第 30 個

，標記將為 $(“p:nth-child(30)”)。簡單易懂嗎？

jQuery 的選擇器并不限于數字！還有更多選擇器可讓您選擇所需的確切元素。您可以通過訪問 jQuery 文檔上的選擇器部分來查看它們。

第 6 步 – jQuery CSS。

太棒了。完成所有這些后，我們現在可以專注于事物的視覺方面。無需更多解釋，讓我們深入研究 CSS。在“myTheme”文件夾中“style.css”的最底部添加或鍵入此內容。要使“更多鏈接”正常工作，請從 famfamfam 絲綢圖標包下載此箭頭，并將其放置在“myTheme”文件夾內的新文件夾“images”中。

/*-----jQUERY-----*/  .hero .left p.postmetadata{ margin-top: 30px; }  .hero .left p.postmetadata strong{ margin-bottom: 20px; }  .hero .right h2{ font-size: 46px; font-style: italic; font-weight: normal; margin-bottom: 0.5em; }  .hero .right p{ font-size: 14px; }  .hero a.more-link{ background: url(images/arrow_right.png) no-repeat right bottom; float: left; padding-right: 20px; }  .villain .left p.postmetadata{ margin-top: 20px; }  .villain .left p.postmetadata strong{ margin-bottom: 15px; }  .villain .right h2{ font-size: 32px; font-weight: normal; color: #747474; }  .villain .right p img{ float: right; padding: 0 0 7px 10px; }