[部落] WP | 文章彙整模板

會製作野兔村文章彙整是因為這個WP佈景沒有提供野兔想要的樣式，而從痞X邦跳槽到WP的野兔卻是很懷念原先的文章列表，因為在一張網頁上就可以把所有的文章一覽無遺，很方便的呢！
在WP佈景裡尋尋覓覓已久，反倒是對WP內建的函數更進一步瞭解了，乾脆自己做一個吧！

WP有內建的文章彙整，不過顯示出來的效果就像首頁那樣，標題加內容，並不是野兔想要的那樣，所一併修改調整
野兔希望的是文章以列表方式呈現，在列表上可以看到文章的日期、標題、人氣跟迴響數，在日期上還可以連結至當年或當月裡所有的文章，這樣就更完美了

本文將分為兩部份說明，第一部份為插頁的文章彙整，第二部份為修改內建文章彙整

新增文章彙整插頁：

在不同的佈景新增的方式也會不同，野兔僅說明自己新增的過程

在佈景主題資料夾內找到page.php，將內容複制另存成archives.php，然後利用Notepad++開啟
首先在開頭的部份加入下面一段，來宣告為插頁的模板

 <?php /*
Template Name: archives
*/ ?>

接著在archives.php內找到<div id="content">在後面新增文章彙整的語法

下面這一段是取得文章的方法，其中$limit=50，可以自由修改成想要顯幾條文章數

<?php
$limit = get_option('posts_per_page');
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
query_posts('showposts=' . $limit=50 . '&paged=' . $paged);
$wp_query->is_archive = true; $wp_query->is_home = false;
?>

接著緊接後頭新增顯示文章標題的語法，利用四欄表格呈現，在同一行裡可一併顯示時間、標題、人氣、迴響，其中人氣是利用WP-PostViews Plus來實現
野兔在日期的年跟月上加上連結，連結過去可以顯示當年、月內所發表的文章

<div class="main-list">
<?php include"ingroup/archives-page.php" ; //彙整 ?>
<p>所有文章列表</p>
<table>
<tbody>
<tr>
<th class="list-date">發表時間</th>
<th class="list-title">文章標題</th>
<th class="list-visit">人氣</th>
<th class="list-comment">迴響</th>
</tr>
<?php while(have_posts()) : the_post(); if(!($first_post == $post->ID)) : ?>
<tr onMouseOver="this.style.backgroundColor='#EEE';" onMouseOut="this.style.backgroundColor='#FFF';">
<td class="list-date"><span id="list-date-a"><a title="觀看 <?php the_time('Y')?>年 所有文章" href="<?php bloginfo('url') ?>/archives/date/<?php the_time('Y') ?>/"><?php the_time('Y') ?></a>-<a title="觀看 <?php the_time('Y') ?>年<?php the_time('m')?>月 所有文章" href="<?php bloginfo('url') ?>/archives/date/<?php the_time('Y') ?>/<?php the_time('m') ?>/"><?php the_time('m') ?></a>-<?php the_time('d') ?></span></td>
<td class="list-title"><span><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></span></td>
<td class="list-visit"><span>(<?php if(function_exists('the_views')) { the_views(')', true); } ?></span></td>
<td class="list-comment"><span>(<?php comments_popup_link('0', '1', '%', 'commentmeta'); ?>)</span></td>
</tr>
<?php endif; endwhile; ?>
</tbody>
</table>
</div>

接著在後面新增的是分頁語法，如果有使用wp_pagenavi外掛，可直接顯示出wp_pagenavi外掛的分頁列，如果您使用別的分頁外掛，請自行修改

<div class="navigation">
<?php if(function_exists('wp_pagenavi')): ?>
<?php wp_pagenavi(); ?>
<?php else : ?>
<?php posts_nav_link(); ?>
<?php endif; ?>
<div class="alignleft"><?php next_posts_link('下一頁 &raquo;') ?></div>
<div class="alignright"><?php previous_posts_link('&laquo; 上一頁') ?></div>
</div>

最後在style.css裡加入下面的CSS控制語法，就可以跟野兔村的文章彙整顯示出一樣的樣式了，當然您也可以自由修改樣式

/* 列表模式的文章區塊 */
.main-list{padding:10px 0;}
.main-list table{margin:0 auto; width:97%;}
.main-list th{border:1px solid #BBB ; padding: 2px; }
.main-list td{border:1px solid #BBB ; padding: 2px; }
.main-list tr{font-size:15px;}
.list-date, .list-comment{text-align: center;}
.list-visit{text-align:right;}
#list-date-a a{color:#555;}
#list-date-a a:hover {color:#FF7400;}

這樣文章彙整的插頁模板就完成了
然後只要到後台新增插頁，模板選擇archives，儲存後就可以看到很優的文章彙整囉！

修改WP內建的文章彙整

在您的佈景找到archive.php，如果有這檔案WP內建的顯示方式就會依照archive.php的內容而呈現，野兔原先的佈景被並沒有這archive.php這個檔案，所以必需自己新增一個archive.php來完成

在這裡，WP會根據文章分類、標籤、年、月、日、作者的不同而判別需要顯示出來的文章
在下面找到 showposts=50，這裡可以自由修改欲在一頁中顯示的文章數量

<?php if (have_posts()) : ?>
<?php $post = $posts[0]; // Hack. Set $post so that the_date() works. ?>
<?php /* If this is a category archive */ if (is_category()) { $posts = query_posts($query_string . '&orderby=date&showposts=50'); ?>
<h2 class="pagetitle">分類：<?php single_cat_title(); ?> </h2>
<?php /* If this is a tag archive */ } elseif( is_tag() ) { $posts = query_posts($query_string . '&orderby=date&showposts=50'); ?>
<h2 class="pagetitle">標籤：<?php single_tag_title(); ?> </h2>
<?php /* If this is a daily archive */ } elseif (is_day()) { $posts = query_posts($query_string . '&orderby=date&showposts=50'); ?>
<h2 class="pagetitle">發表於<?php the_time('Y年 F j日,'); ?> </h2>
<?php /* If this is a monthly archive */ } elseif (is_month()) { $posts = query_posts($query_string . '&orderby=date&showposts=50'); ?>
<h2 class="pagetitle">發表於<?php the_time('Y年 F'); ?> </h2>
<?php /* If this is a yearly archive */ } elseif (is_year()){ $posts = query_posts($query_string . '&orderby=date&showposts=50'); ?>
<h2 class="pagetitle">發表於<?php the_time('Y年'); ?> </h2>
<?php /* If this is an author archive */ } elseif (is_author()) { $posts = query_posts($query_string . '&orderby=date&showposts=50'); ?>
<h2 class="pagetitle">Author Archive</h2>
<?php /* If this is a paged archive */ } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { ?>
<h2 class="pagetitle">Blog Archives</h2>
<?php } ?>

下面是顯示文章的語法，跟上面是完全一樣的

<div class="main-list">
<table>
<tbody>
<tr>
<th class="list-date">發表時間</th>
<th class="list-title">文章標題</th>
<th class="list-visit">人氣</th>
<th class="list-comment">迴響</th>
</tr>
<?php while (have_posts()) : the_post(); ?>
<tr onMouseOver="this.style.backgroundColor='#EEE';" onMouseOut="this.style.backgroundColor='#FFF';">
<td class="list-date"><span id="list-date-a"><a title="觀看 <?php the_time('Y')?>年 所有文章" href="<?php bloginfo('url') ?>/archives/date/<?php the_time('Y') ?>/"><?php the_time('Y') ?></a>-<a title="觀看 <?php the_time('Y') ?>年<?php the_time('m')?>月 所有文章" href="<?php bloginfo('url') ?>/archives/date/<?php the_time('Y') ?>/<?php the_time('m') ?>/"><?php the_time('m') ?></a>-<?php the_time('d') ?></span></td>
<td class="list-title"><span><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></span></td>
<td class="list-visit"><span>(<?php if(function_exists('the_views')) { the_views(')', true); } ?></span></td>
<td class="list-comment"><span>(<?php comments_popup_link('0', '1', '%', 'commentmeta'); ?>)</span></td>
</tr>
<?php endwhile; ?>
</tbody>
</table>
</div>

分頁的語法

<div class="navigation">
<?php if(function_exists('wp_pagenavi')): ?>
<?php wp_pagenavi(); ?>
<?php else : ?>
<?php posts_nav_link(); ?>
<?php endif; ?>
<div class="alignleft"><?php next_posts_link('下一頁 &raquo;') ?></div>
<div class="alignright"><?php previous_posts_link('&laquo; 上一頁') ?></div>
</div>

這樣就完成了，快去享受成果吧！

同場加映利用HS JS來增加彙整的功能性
野兔村有套用Highslide JS，還不知道什麼是Highslide JS快去看看我前面的文章吧

下面是野兔村所用的語法，如此一來就有了依年份、類別、標籤分類的一覽表，這樣就更方便了，其中依標籤的語法是利用Simple Tags這支外掛實現，如果沒有這外掛，請自行修改成WP內建的tag顯示函數

<div id="list">
文章
<a href="#" onclick="return hs.htmlExpand(this, { contentId: 'list-y' } )" class="highslide">依年份彙整</a>、
<a href="#" onclick="return hs.htmlExpand(this, { contentId: 'list-c' } )" class="highslide">依類別彙整</a>、
<a href="#" onclick="return hs.htmlExpand(this, { contentId: 'list-t' } )" class="highslide">依標籤彙整</a>
</div><div class="highslide-html-content" id="list-y">
<div class="highslide-header"><span>文章依年份彙整</span><ul><li class="highslide-move"><a href="#" onclick="return false">移動</a></li><li class="highslide-close"><a href="#" onclick="return hs.close(this)">關閉</a></li></ul></div>
<div class="highslide-body">
<?php wp_get_archives('type=yearly&limit=12&format=custom&before=★&after= &show_post_count=1'); ?>
</div></div>
<div class="highslide-html-content" id="list-c">
<div class="highslide-header"><span>文章依類別彙整</span><ul><li class="highslide-move"><a href="#" onclick="return false">移動</a></li><li class="highslide-close"><a href="#" onclick="return hs.close(this)">關閉</a></li></ul></div>
<div class="highslide-body">
<div class="list-cat"><ul><?php wp_list_categories('orderby=name&show_count=1&title_li='); ?></ul></div>
</div></div>
<div class="highslide-html-content" id="list-t">
<div class="highslide-header"><span>文章依標籤彙整</span><ul><li class="highslide-move"><a href="#" onclick="return false">移動</a></li><li class="highslide-close"><a href="#" onclick="return hs.close(this)">關閉</a></li></ul></div>
<div class="highslide-body">
<?php st_tag_cloud('title=&maxcolor=#2175BC&mincolor=#555'); ?>
</div></div>