???/??/?? ???? WordPress ?? ? ?? ?????? ?? ? ???? ?? ????. ??? ???? ????? ???? ?? ??? ??? ? ????. ? ??????? jQuery? ??? ??? ???? ??? ??? ??? ?? ??? ????? ????!

???

? ??????? ???? WordPress ??? ???? ?? ?? ???, ?? ???? ? ?? ??? ??? ?????. WordPress? ??? ????? ?? ??? ????? ???? Windows? ?????, ???? OS X? ????? ?????.

1?? - ?? ???? ???????…

"wp-content/themes/" ?? ?? ? ??? ??? ??? ???? ??? ??? ??? ?? ?????. ? ? ??? 2?? ? ??? ????. ??? "index.php"?? ?? ??? "style.css"???. ? ?? ???? WordPress ???? ???????. ?? ??? WordPress ??? ?? ??? ? "?? ???"? ?????. ???? ???? ??? ??? ??? ???? ?? ?????. ????? ???? ??? ??? ?? ? ?? ??? ??????. ?? ? ???? ?? ?????? ????? ? ??? "style.css"? ???? ??? ??? ?????. ??? ??? ?? ?? ?????:

???

?? 2?? JavaScript ??? ?????. ? ? ??? jQuery? ????? ?? ??? myTheme.js?? ? .js ?????. head ????

? ???? ?? ?? ???. ???

?? ?? ???? ???? ???(?? ?? ???? ??) jQuery rel? ??? ???? ?? ?? ???. "myTheme.js" ? jQuery ?? ?? ? ???? ?? ?? ??? ??

????.

??: jQuery 1.2.6? Wordpress 2.2 ???? ????? ???? ?????? ?? ??? wp-includes/js/jquery/jquery.js?? ?? ? ????.

? jQuery ??? ????? ?? jQuery rel ?? ??? ?????. ??? ??? myTheme.js? ?????!

???

2?? - PHP/Wordpress/XHTML ??.

? ??? ???? ???? ? ??? ???? ???? "index.php"? ?? ??? ?????!

? ???? ???? ?????? ???? ? ??? ?? XHTML/PHP/Wordpress ??? ??? ????. html

?? ??? ?? ?? ??? ????? ?????. ???? ???? ???????!

???

div

???

?? div? ????? ??? ??? ??? ? ??? ?? ???? ?????. ?? div? ??? ?? ???? div ??? ??? ????? ????? ???????. ???, ????? ??? ?? ?? ???? ???????. .left div? ?? ?, .right div? ??? ?, .entry div? ??? ?? ????. ???? ???? ???? ??? ?? ???? ?? ??? ID? ???? ??? ?? ??? ?????.

??? WordPress ??.

???

??? ???? ???? ???? WordPress School? ?????. ????? ?? ??? ???? ??? ??? ?????? ??? ?????. ??? ???? ??? ???????? ??? ????.

???? ?????.

???

?? ???? ??? ?? ???? ?????. ?? ?? ???? ???? ?? ????? ??? ???? ????. ?? ???? ??

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

內容。

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

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

來吧...循環(huán)結束！

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

編碼兔子應該明白這個...這又是基本循環(huán)！它關閉循環(huán)，以便只反復執(zhí)行循環(huán)中包含的“函數(shù)”。

第 3 步 - CSS：布局。

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

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

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

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

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

/*-----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 - 這些帖子可能會意外地出現(xiàn)在之前浮動效果不佳的帖子旁邊，或者由于我們使用浮動而沒有足夠內容的帖子旁邊。無論如何，“clear”屬性可確保將其一直推到前一個元素的底部。
• .left 和 .right div - 它們分別向左和向右浮動，因為這就是使它們并排的原因！如果我們沒有設置 div 的寬度，則此技術將不起作用。我使帖子詳細信息列比內容列稍微細一些，因為我們希望內容獲得更多關注和更多空間（考慮到“帖子詳細信息”列中的內容較少）。

  我已經完成了數(shù)學計算，并確保總寬度總計為 600，因此兩列都很好地適合父“.post”div：180px+20px（填充，因此我們有一些間距）+400px= 600 像素

耶！現(xiàn)在，讓我們把它變得漂亮起來！

第 4 步 - CSS：樣式。

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

這是我們使用級聯(lián)樣式表真正威力的時候。將以下內容復制或輸入到之前“布局”代碼下方的 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;
}

故障。

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

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

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

第 5 步 - jQuery。

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

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

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

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

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

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

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

說明

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

• $(document).ready(function(){
  

  這是 jQuery 的超級特殊函數(shù)，用于啟動此行之后定義的 JavaScript 函數(shù)。當 $(document) 為 .ready() 時，啟動我們即將定義的 function(){}。使用 $(document).ready(function(){ 比使用 'default': window.onload() 函數(shù)快得多，因為window.onload()函數(shù)等待整個文檔加載。這包括所有圖像、iframe等。我們只需要等待核心 XHTML 文檔已完成加載以運行我們的腳本 - 因此我們使用 jQuery 的特殊 $(document).ready(function(){ 來加快速度，并減少初始瀏覽之間的延遲時間和 JavaScript 啟動。有點令人困惑吧？為了簡單起見，jQuery 的方法更快。記住這一點。

• $(".post:first").addClass("hero");
  

  強大的選擇器太棒了！ jQuery 有一系列令人驚嘆的選擇器，其中一些來自 CSS3，但我們現(xiàn)在就可以使用它們。這一行告訴我們獲?。?em>$() 第一個 '.post' 元素：.post:first 并添加英雄類：.addClass("英雄”） 。我們現(xiàn)在可以在 CSS 中設置樣式，但我們仍然沒有以任何方式觸及或更改“.post”div 的 XHTML 代碼。

• $(".post:nth-child(2)").addClass("villain");
  

  更多超強選擇器！ jQuery 不僅讓我們選擇一種元素的第一個元素，還讓我們選擇任意數(shù)量的元素！使用:nth-child(#)我們可以選擇頁面上我們想要的任何元素類型。如果我們想要頁面上的第 30 個

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

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

第 6 步 - jQuery CSS。

太棒了。完成所有這些后，我們現(xiàn)在可以專注于事物的視覺方面。無需更多解釋，讓我們深入研究 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;
}

說明

現(xiàn)在你們應該已經足夠熟悉 CSS 了，所以我將非常快速瀏覽一下這個新的 CSS。

這是更改“.hero”帖子外觀的 CSS。

• .hero .left p.postmetadata - 我們將其向下推一點，使其與新的標頭大小保持一致。
• .hero .left p.postmetadata Strong - 我們將粗體“帖子詳細信息”下的所有內容向下推，使其與內容文本保持一致。
• .hero .right h2 - 這使得我們的“英雄”標題脫穎而出。我們把它放大，并用斜體表示。
• .hero .right p - 增加英雄內容的字體大小。
• .hero a.more-link - 添加來自famfamfam絲綢包的綠色小箭頭。

還有更改“.villain”帖子的 CSS。

• .villain .left p.postmetadata - 與英雄 postmetadata 相同，將其向下推。
• .villain .left p.postmetadata Strong - 與英雄后元數(shù)據(jù)對齊相同。
• .villain .right h2 - 這里我們將惡棍標題設為灰色，不加粗，并且比制服帖子稍大。
• .villain .right p img - 反派形象必須脫穎而出，對嗎？我們只需將其浮動到右側（以便文本環(huán)繞它）并相應地更改填充。

總結

干得好！在本教程中，我們介紹了使用 jQuery 選擇器美化 WordPress 內容的基本方法！然而它們并不是 jQuery 獨有的。您將在 CSS3 中找到所有這些選擇器（當所有瀏覽器都支持時?。Ｎ覀冎皇窍矚g jQuery，因為他們現(xiàn)在將它們帶給我們。這是我們的最終產品。