會製作野兔村文章彙整是因為這個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('下一頁 »') ?></div>
<div class="alignright"><?php previous_posts_link('« 上一頁') ?></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('下一頁 »') ?></div>
<div class="alignright"><?php previous_posts_link('« 上一頁') ?></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>
碳碳喜歡技術性文章, :xd:
雖然野兔葛葛可能比較適合拍照… ❓
😥 是野兔寫的不好嗎?
寫的很好,(猛點頭)
野兔寫技術性文章應該很花時間吧? 🙄
其實… 😐 (被野兔葛葛封嘴)
野兔:碳,你不用說了!我知道我寫的不好! 😥
碳碳:恩素的,爛爛不素者葛伊斯(不是的,碳碳不是這個意思) 😐
於是被野兔葛葛拿去燒碳結束碳碳的一生 😥
@碳:
碳不用解釋了!我瞭
野兔現在對WP
也變得很專業耶~
@小咪:
隨手玩玩,還好WP很簡單
看到程式碼,我就會很興奮~~哈哈
@小笠:
小笠走火入魔了~
不好意思,我已交換連結
請放置本站連結
http://tw.myblog.yahoo.com/let-tingting
因為我找不到”本版回響”在哪裡…
只好留在這裡了.請見諒
@朱玉婷:
不好意思,現已加入,感謝厚愛
好像有點硬斗!
定下心看了一下仍不懂!
如有需要再次拜訪^^
@兔爸:
呵,其實不難,只是在表格內填入WP函數而已
代碼copy回去使用就可以了,基本上不會有問題的
兔子懂的真多呢~那天有機會小蘋果想弄wp時還要多跟兔子學習啦 🙄 🙄
@小蘋果:
謝謝小蘋果誇獎,需要轉換跑道的話,有很多人會來幫忙呢!
這個想法不錯! 有空再試試.
原來是台南人咧~ 隔壁的..
我是嘉義人, 從小住台北, 現在長期住四川.
@willin:
我喜歡一目瞭然的列表,這樣做剛好很適合我
也謝謝willin的AXAJ comments,很受用呢!
完全看不懂… ❓
愈來愈厲害了說,一堆功能愈加愈多..愈來愈好.. ➡
@犬:
好用就好了!不用懂太多~
問問題一下
我在 table 的上方刪除了「?php include”ingroup/archives-page.php” ; //彙整 ?」的程式碼,這樣ok嗎? 還是會有其他問題產生?
因為我不刪掉他的話,就會顯示出錯。
@魏風:
因為我有加archives-page.php
而你沒有,所以把那一行刪掉即可
謝謝啊
了解了^^
你是不是 archive.php 少一個
因為用了會出錯,最後補上一個就好了
應該是 沒結束掉吧 (不然可能我眼殘了 XD)
@Alexander.:
之前找人測試是沒有問題
我再檢查一下囉!
最近也想幫我的BLOG加上新玩意(改版了!),所以重新來用功!有問題可以請教你嗎?
@Marty:
有問題當然可以來問問野兔囉!
我有空一定會全力幫忙,另外也可以問問敗家誌的阿諾,他也很熱心 ^^
有點複雜呀