Grid/newspaper/magazine templates are becoming more and more dominant in the WordPress skin and theme community. They look elegant, but not knowing where to start can be daunting. In this tutorial, we use the power of jQuery to create a grid layout with reduced-size headers!

Preface

This tutorial assumes you have a WordPress engine running on your server and that you have permission to upload files, download files, and browse. If you want to run a local server on a computer with WordPress installed, there are tutorials for Windows here and tutorials for OS X here .

Step 1 - Let’s start with the essentials…

Create a new folder in the "wp-content/themes/" folder and name it whatever you want to name the skin we are about to make. Create 2 new files in this new folder, one named "index.php" and the other named "style.css". We'll start with some basic WordPress code. Every time I create a complete WordPress skin, I start with this "code base" because it contains most of the necessary information. I put it here because you may want to develop it into a full skin. I also use a default stylesheet for my theme, so copy this snippet into "style.css" and edit the contents separately. The style sheet is related to the following lines:

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

You will also need 2 JavaScript files, one of which is a copy of jQuery and the other is an empty .js file called myTheme.js. Don't forget to associate them with this in the head element:

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

If you are using a different package than me (which you most likely are), don't forget to change the name of the jQuery rel. "myTheme.js" mustbelow the jQuery link, cannotbe above it.

Note: jQuery 1.2.6 is also packaged with WordPress 2.2 and above, so if you don't want to download it, you can find it in wp-includes/js/ jquery/jquery .js. To include this jQuery documentation, use this instead of the jQuery rel above. You still need myTheme.js, though!

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

Step 2 - PHP/Wordpress/XHTML Code.

After selecting and activating your new theme, open "index.php" using your favorite editor and start coding!

Here is all the XHTML/PHP/Wordpress code we need to set up the content and metadata for each post. Paste or type it between the html opening and closing tags. I will explain it bit by bit below!

<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><<!-- end div.entry -->
			</div><!-- end div.right -->

		</div><!-- end div.post -->

	<?php endwhile; ?>
	<?php endif; ?>
</div><!-- end div#wrapper -->

div

<div id="wrapper">

The wrapping div basically wraps the entire content so that we can lay it out nicely later. All the divs are pretty self-explanatory and I've also commented them at the end of the divs so I'll skip them in my explanation. In short, I've packaged everything accordingly so it's easy to design. .left div is the left column, .right div is the right column, .entry div is the post entry, and so on. I'm using the class in a loop and as if there are multiple posts the ID's are backed up and create validation errors.

The famous WordPress loop.

<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>

If you don’t understand what this is, go back to WordPress School. It basically loops through the database information related to the calls made within the loop. If you ask for a title, the loop will look for the title in the database for you.

Metadata of the post.

<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>

Now let’s talk about the specific content. Everything above contains the information we want to display about the post. In the corresponding order, we ask;

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

內(nèi)容。

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

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

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

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

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

第 3 步 - CSS：布局。

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

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

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

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

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

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

  我已經(jīng)完成了數(shù)學(xué)計算，并確?？倢挾瓤傆嫗?600，因此兩列都很好地適合父“.post”div：180px+20px（填充，因此我們有一些間距）+400px= 600 像素

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

第 4 步 - CSS：樣式。

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

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

CSS 應(yīng)該使它看起來像這樣：

第 5 步 - jQuery。

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

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

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

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

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

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

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

說明

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

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

  這是 jQuery 的超級特殊函數(shù)，用于啟動此行之后定義的 JavaScript 函數(shù)。當(dāng) $(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");
  

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

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

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

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

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

第 6 步 - jQuery CSS。

太棒了。完成所有這些后，我們現(xiàn)在可以專注于事物的視覺方面。無需更多解釋，讓我們深入研究 CSS。在“myTheme”文件夾中“style.css”的最底部添加或鍵入此內(nèi)容。要使“更多鏈接”正常工作，請從 famfamfam 絲綢圖標(biāo)包下載此箭頭，并將其放置在“myTheme”文件夾內(nèi)的新文件夾“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)在你們應(yīng)該已經(jīng)足夠熟悉 CSS 了，所以我將非常快速瀏覽一下這個新的 CSS。

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

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

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

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

總結(jié)

干得好！在本教程中，我們介紹了使用 jQuery 選擇器美化 WordPress 內(nèi)容的基本方法！然而它們并不是 jQuery 獨有的。您將在 CSS3 中找到所有這些選擇器（當(dāng)所有瀏覽器都支持時！）。我們只是喜歡 jQuery，因為他們現(xiàn)在將它們帶給我們。這是我們的最終產(chǎn)品。