八月13

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

2009年 08月13日 , 12:52

會製作野兔村文章彙整是因為這個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>



利用E-mail訂閱野兔最新的文章
輸入你的電子郵件地址: 發送者為 FeedBurner
本篇文章引用網址:

引用列表 (0)

目前有 27 個迴響 (訪客:14 篇, 格主:12 篇)

  1. 1
    xD~碳 Windows XP Firefox 3.5.2 says:

    碳碳喜歡技術性文章, :xd:
    雖然野兔葛葛可能比較適合拍照… ❓

  2. 2
    小咪 Windows XP Firefox 3.0.13 says:

    野兔現在對WP
    也變得很專業耶~

  3. 3
    小笠 Windows other version Firefox 3.5.2 says:

    看到程式碼,我就會很興奮~~哈哈

  4. 4
    朱玉婷 Windows XP Internet Explorer 7.0 says:

    不好意思,我已交換連結

    請放置本站連結

    http://tw.myblog.yahoo.com/let-tingting

    因為我找不到”本版回響”在哪裡…
    只好留在這裡了.請見諒

  5. 5
    兔爸 Windows XP Internet Explorer 6.0 says:

    好像有點硬斗!
    定下心看了一下仍不懂!
    如有需要再次拜訪^^

  6. 6
    小蘋果 Windows XP Firefox 3.5.2 says:

    兔子懂的真多呢~那天有機會小蘋果想弄wp時還要多跟兔子學習啦 🙄 🙄

  7. 7
    willin Windows XP Firefox 3.0.13 says:

    這個想法不錯! 有空再試試.
    原來是台南人咧~ 隔壁的..
    我是嘉義人, 從小住台北, 現在長期住四川.

  8. 8
    犬 Windows XP Google Chrome 2.0.172.39 says:

    完全看不懂… ❓
    愈來愈厲害了說,一堆功能愈加愈多..愈來愈好.. ➡

  9. 9
    魏風 Windows Vista Google Chrome 4.0.249.0 says:

    問問題一下

    我在 table 的上方刪除了「?php include”ingroup/archives-page.php” ; //彙整 ?」的程式碼,這樣ok嗎? 還是會有其他問題產生?

    因為我不刪掉他的話,就會顯示出錯。

  10. 10
    Alexander. Windows XP Google Chrome 4.0.249.78 says:

    你是不是 archive.php 少一個
    因為用了會出錯,最後補上一個就好了
    應該是 沒結束掉吧 (不然可能我眼殘了 XD)

  11. 11
    Marty Windows XP Google Chrome 4.1.249.1036 says:

    最近也想幫我的BLOG加上新玩意(改版了!),所以重新來用功!有問題可以請教你嗎?

  12. 12
    鉑思 Windows other version Internet Explorer 9.0 says:

    有點複雜呀

留下迴響

放心, 您留下的電子郵件不會被公開或散佈。


野兔村 支援 Gravatar 大頭貼,您可於「Gravatar官方網站」免費取得專屬大頭貼。


使用Facebook來留言
blank

无觅相关文章插件,快速提升流量