標題看上去有些費解,到底是什麼意思?很簡單,假設你的博客中有許多文章,其中一部分文章都有着共同的標籤」 網頁設計」,那麼當別人訪問你的博客,點擊」 網頁設計」 這個標籤的時候,所有包含這個標籤的日誌都會顯示在一個頁面當中。那麼,這個頁面就是我們在這篇文章中所要創建的頁面。在這個頁面中,一般來説,日誌會按照時間順序排列,頁面最上方的是最新發布的日誌,最下方是最早發佈的日誌。這些日誌還可以以不同方式顯示,比如顯示整篇日誌內容,或者只顯示日誌摘要,甚至只是標題。如果你還不理解的話,可以試着點擊一下飛魚的聲納日誌標題下方的任何一個標籤,之後將會顯示一個頂部標題為」 所有關於』XXX』 的日誌」 頁面,其中的日誌內容會以摘要加縮略圖的方式顯示出來,這個頁面就是以某一個標籤過濾之後的日誌頁面。

工作原理

在創建這個頁面之前,我們先要了解一下 WordPress 的工作原理。當點擊一個標籤之後,WordPress 會首先尋找 tag-xx.php 文件,其中的 xx 是指標籤的 ID,也就是一個數字。假設在你的博客中有一個日誌標籤是」 網頁設計」,它的 ID 為 211,那麼如果在你博客的主題中包含 tag-211.php 這個文件的話,當你點擊」 網頁設計」 這個標籤之後,WordPress 就會讀取這個文件,將其顯示出來。那麼如何知道一個標籤的 ID 是多少呢?很簡單,登錄你的 WordPress 後台控制板,在左側的」 文章」 區域中找到」 文章標籤」 這一欄,點擊進入,你的博客的所有標籤都會顯示出來。將你的鼠標懸停於某一個標籤之上,在瀏覽器的左下角會顯示出一長串鏈接,最後的」ID=xx」 中的數字就是這個標籤的 ID 。那麼如果你的 WordPress 主題中不存在 tag-xx.php 這個文件呢?WordPress 會怎麼做?如果不存在 tag-xx.php 這個文件的話,WordPress 接下來會尋找 tag.php 這個文件,讀取其中的內容,將其顯示在頁面上。如果 tag.php 文件也不存在的話,WordPress 接下來會尋找 archive.php 文件,archive.php 文件也沒有的話,最後就是 index.php 文件了。所以,WordPress 尋找這四個文件的順序為:

1.tag-xx.php

2.tag.php

3.archive.php

4.index.php

按照這個原理,如果你想讓」 網頁設計」 這個標籤頁面和」 時間管理」 這個標籤頁面不同的話,就可以在 WordPress 主題中創建一個 tag-xx.php 文件,其中的 xx 是」 網頁設計」 這個標籤的 ID 數字。或者你想讓所有標籤都顯示為統一的頁面樣式而和存檔頁面的樣式有所區別的話,就創建一個 tag.php 頁面就行了。

頁面代碼

那麼,我知道了自己該創建什麼頁面,接下來,頁面中該寫些什麼代碼呢?我以飛魚的聲納的標籤頁面為例來具體説明。首先我們需要讓別人在點擊一個日誌標籤後知道自己正在查看的是關於這個標籤的所有日誌,這樣別人就清楚自己所處的位置。就像飛魚的聲納的頁面頂部所顯示的那樣」 所有關於」xxx」 的日誌」 。代碼為:

<?php the_excerpt('繼續閲讀 &raquo;'); ?>

如果只想顯示文章標題的話,使用如下代碼:

<a title="Permanent Link to <?php the_title(); ?>" href="<?php%20the_permalink()%20?>" rel="bookmark"><?php the_title(); ?></a>

以下是一個標準的 tag.php 文件代碼內容,你可以將它拷貝下來,或者略作修改,用到你的主題中。

<div id="content">
<div >
<h2> 所有關於&quot;<?php single_tag_title(); ?>&quot; 的日誌</h2>
</div>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div >
<div ><?php the_time('j') ?></div>
<div ><?php the_time('F') ?></div>
<div ><?php the_time('Y') ?></div>
</div>
<h1><a title="Permanent Link to <?php the_title(); ?>" href="<?php%20the_permalink()%20?>"
rel="bookmark"><?php the_title(); ?></a></h1>
<div >
分類: <?php the_category(', ') ?> |
<?php the_tags(); ?> |
<?php comments_popup_link('0 條評論', '1 條評論', '% 條評論'); ?> |
<?php edit_post_link('Edit', '', ' | '); ?>
</div>
</div>
<div >
<?php the_excerpt('繼續閲讀 &raquo;'); ?>
</div>
<?php endwhile; ?>
<?php endif; ?>
<div id="pagenavi">
<?php previous_posts_link('&laquo; Newer Entries'); ?>
<?php next_posts_link('&laquo; Older Entries') ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

示例

以下是一些優秀的網站的標籤頁面範例。雖然説按照標籤過濾的日誌頁面不像其它頁面那樣重要,網頁設計中也常常會忽視這個頁面,但是從信息的快速檢索上來講這個頁面的功能不可小覷。它能夠幫助訪問者快速的尋找到自己想要的內容。所以一個好的網站應該在這些細節上都會有所注意。

1 、 SmashingMagezine

SmashingMagezine 的標籤頁面非常清晰,標籤標題下方還附帶了小字號的説明文字。日誌以摘要和縮略圖的方式顯示出來。

smashing-magazine.png

2 、 PremiumPixels

PremiumPixels 的標籤日誌很簡單,就一個標題,但是也很清晰。

premium-pixels.png

3 、 WebDesign from Scratch

和 PremiumPixels 一樣,WebDesign from Scratch 也只是簡單的顯示一個標籤標題。

web-design-from-scratch.png

4 、千鳥志

千鳥志以存檔的形式顯示出標籤過濾後的日誌頁面。日誌以摘要的形式顯示出來。

qian-niao-zhi.png

5 、幸福收藏夾

幸福收藏夾以導航的方式讓訪問者清楚目前所處的位置。

xing-fu-shou-cang-jia.png

(來源:飛魚的聲納)