導讀:今天我們來製作單文章頁 single php,有了之前製作 index php 的經驗,製作 single php 也不再那麼難了,這裏將直接略過一些內容,直接給出結果
今天我們來製作單文章頁 single.php,有了之前製作 index.php 的經驗,製作 single.php 也不再那麼難了,這裏將直接略過一些內容,直接給出結果。如果對某些修改不太清楚,可以先參考:WordPress 主題製作全過程 (八):製作 index.php
1 、添加文章標題:
- <h3 class=「title」><a href=「single.html」>Loreum ipsium massa cras phasellus</a></h3>
改成:
- <h3 class=」title」><a href=」<?php the_permalink(); ?>「><?php the_title(); ?></a></h3>
2 、添加文章標籤
- <a href=「#」>News</a>, <a href=「#」>Products</a>
改成:
- <?php the_tags(『標籤:』, 『, 『, 」); ?>
3 、添加日期
找到:31st Sep, 09 改成:
- <?php the_time(『Y 年 n 月 j 日』) ?>
4 、顯示評論數
- <a href=「#」>7 Comments</a>
改成:
- <?php comments_popup_link(』0 條評論』, 』1 條評論』, 『% 條評論』, 」, 『評論已關閉』); ?>
5 、添加編輯按鈕
接上面的評論代碼,改成:
- <?php comments_popup_link(』0 條評論』, 』1 條評論』, 『% 條評論』, 」, 『評論已關閉』); ?><?php edit_post_link(『編輯』, 『 • 『, 」); ?>
6 、添加文章內容
將<!-- Post Content --> 和 <!-- Post Links --> 之間的代碼全部刪除,替換成:
另外,你可以將文章頁那張圖片刪除了,刪除以下代碼:
- <img class=「thumb」 src=「<?php bloginfo(『template_url』); ?>/images/610×150.gif」 alt=」」/>
7 、添加返回博客首頁和發表評論按鈕
其實就是添加博客首頁和評論錨點鏈接,在製作 header.php,我們已經知道可以通過 get_option('home'); 來獲取博客地址。
- <p class=「clearfix」> <a href=「blog.html」 class=「button float」 ><< Back to Blog</a> <a href=「#commentform」 class=「button float right」 >Discuss this post</a> </p>
改成:
- <p class=」clearfix」> <a href=」<?php echo get_option(『home』); ?>」 class=」button float」 ><< 返回首頁</a> <a href=」#commentform」 class=」button float right」 > 發表評論</a> </p>
好了,基本上的修改就這些了,但是你的文章頁仍然不能顯示文章內容,你得給它加上一個條件語句,這樣 WordPress 才會去數據庫讀出你的文章內容。搜索代碼:<!-- Column 1 /Content -->
改成:
- <!– Column 1 /Content –>
- <?php if (have_posts()) : the_post(); update_post_caches($posts); ?>
將:
- </div>
- <?php get_sidebar(); ?>
改成:
- </div>
- <?php else : ?>
- <div class=」errorbox」>
- 沒有文章!
- </div>
- <?php endif; ?>
- <?php get_sidebar(); ?>
現在你的文章內容應該都可以正常顯示了,一個文章頁基本上也成型了。下節我們將講解如何製作評論頁,本次不提供修改的主題文件下載,下次一起提供。
另外,文章頁頂部會有一段文字:
Our blog, keeping you up-to-date on our latest news.
可以替換成你的內容。如果不需要,可以將以下代碼刪除:
- <h2 class=「grid_12 caption clearfix」>Our <span>blog</span>, keeping you up-to-date on our latest news.</h2>
- <div class=「hr grid_12 clearfix」> </div>
好了今天的教程就講到這。