WordPress打造CMS教程(二):首頁模板

轉自E-space

教程(一)中講述了首頁和Blog頁面的區別和重要性,那么對于大多數的Blog需要自己設計一個包含指定內容的首頁,下面來講述這個首頁的制做方法。

WordPress2.1中可以選擇一個指定的Page頁面來做為wp的首頁,這時便需要使用者來自定義一個頁面模板。當然如果你選擇使用在頁面中運行php代碼的插件runphp來直接寫到Page也可以,不過無故多添一個插件沒有什么必要。

首先建立一個php文件,比如起名叫HomeTemp.php,意為首頁模板。然后在文件的頂部寫上如下代碼,其中的Homepage為Page模板的名稱,你也可以換成其它名字。

1
2
3
<?php /*
    Template Name: Homepage
*/
?>

之后添加的內容便和你的wp模板中的index.php內容差不多了,格式如下:

1
2
3
4
<?php get_header(); ?>
頁面內容
<?php get_sidebar(); ?>
<?php get_footer(); ?>


調用了wp模板的HeaderFooter,來保持樣式一致,同時如果是自己定義了和Blog頁面不同的邊欄則更換sidebar的名稱和內容。我的做法是沒有調用sidebar,而是直接把內容代碼用CSS定義到了邊欄。

其中的頁面內容則需要按自己的設計來添加了。我的選擇是顯示最新一片日志和最近5篇日志的摘要,也就是需要兩個Loop循環體來調用日志。參考WordPress的支持文檔中主循環The Loo的說明,在最下方的Multiple Loops in Action便是如何使用多重循環了。不過在使用這些代碼的時候出現了問題,能順利調用最新的日志,但在最近5篇日志中只顯示了第一篇標題,里面也沒有內容。看來應該是WordPress2.1的緣故。

無奈下我只能按自己的方法讓它顯示最新一篇日志,并且在最近的5篇中還重復了那一篇,很不爽,因為同一日志顯示了兩次。在和Michael探討后,一致認為很邪門兒,我放棄去做Logo了,他卻在堅持不懈,最后告訴我搞定了,在這里萬分感謝。(同時我的Logo設計方案也讓Since1984給否了,然后我按其意見做了修改,但還是不甚滿意,最后還是84親手給我定制了Log,也萬分感謝!!)代碼如下:

1
2
3
4
5
6
7
8
9
<?php $my_query = new WP_Query('showposts=1');
  while ($my_query->have_posts()) : $my_query->the_post();
  $do_not_duplicate = $post->ID;?>
第一篇日志調用(標題,時間,內容等)
<?php endwhile; ?>
<?php query_posts('showposts=6'); ?>
<?php while (have_posts()) : the_post(); if( $post->ID == $do_not_duplicate )  continue;  ?>
其中的6目的為顯示615,即最近的5篇日志調用(標題,時間,摘要等)
<?php endwhile; ?>

現在已經顯示了最新一篇日志和5篇日志的摘要了,關于如何顯示全文和摘要請參考此文,那么你需要規劃你的CSS來配合顯示方式,樣式,位置,字體等等。在我的首頁中還加入了熱門日志,這個是在使用WP-PostViews插件后調用的顯示次數最多的日志列表。

邊欄的About等內容我就是直接把加入了CSS定義的代碼寫在這個模板文件中,其中的Tag云輸出請參考此文:Ultimate Tag Warrior-Tag輸出展示簡介

如此已經成功做好了自己的首頁home頁面模板。然后進入WordPress的后臺,建立新的Page,在右面的模板選項Page Template里選擇剛建立好的“Homepage”,Page Slug填寫home好了,然后不用輸入任何內容,發布即可。

之后再建立一個新的Page,模板不用換使用默認Template即可,內容為空,Page Slug填寫blog,發布。

再來到Options的Reading下,在Front Page的選項里,選擇A static Page,在Front page中選擇Home,在Posts page中選擇blog即可。

現在再回來你的Blog主頁,是不是已經顯示了你自己定義的home首頁了呢?在你的域名后面加上/blog(這里的blog即為上面自己定義的Page Slug),回車后便是你原來的Blog頁面了。如此便已經大功告成了!

當然現在你可以需要頂部的導航菜單,或者是想像我一樣在首頁中同樣顯示出每篇日志的comment回復數量等等,這些便是wp的技巧了。請繼續關注教程(三)導航菜單