WordPress主題制作進(jìn)階#4展示博客文章

我們之前創(chuàng)建了主題并添加了標(biāo)題和導(dǎo)航欄誉碴，接下來學(xué)習(xí)如何用WordPress提供的主循環(huán)展示博客文章凹耙，我們現(xiàn)在頁面上的博客是寫在HTML中的靜態(tài)內(nèi)容谱俭，但是在集成了WordPress的頁面中履肃，所有的內(nèi)容都應(yīng)該是動態(tài)的。

1丹诀、添加主循環(huán)

回到我們的index.php文件中，然后轉(zhuǎn)到container content div的地方翁垂，我們把博客的主循環(huán)創(chuàng)建在main block div內(nèi)部铆遭。代碼如下：

<div class="main block">
       <?php if(have_posts()) : ?>
            <?php while(have_posts()) : the_post(); ?>
                <article class="post">
                    <h2><?php the_title(); ?></h2>
                    <p class="meta">Posted at 11:00 on May 9 by admin</p>
                    <?php the_content(); ?>
                    <a class="button" href="#">Read More</a>
                </article>
            <?php endwhile; ?>
       <?php else : ?>
            <?php echo wpautop('Sorry, no posts were found'); ?>
       <?php endif; ?>  
</div>

保存代碼，到前端刷新頁面：

展示博客

2沿猜、添加分類

我們到后臺再添加一篇博客枚荣，同時創(chuàng)建一個IT類別，你也可以創(chuàng)建一些其他類別邢疙，但它們并不重要棍弄。我們并不是真正處理特定內(nèi)容望薄，而是僅僅針對示例內(nèi)容：

創(chuàng)建類別

你會發(fā)現(xiàn)元數(shù)據(jù)仍然是靜態(tài)的，Read More按鈕也是如此呼畸，當(dāng)我們點擊這個按鈕時痕支，它什么也沒做。

3蛮原、添加動態(tài)元數(shù)據(jù)

第二篇博客

接下來讓我們解決這個問題卧须。回到我們的post循環(huán)中，找到class =“meta”的p標(biāo)簽儒陨，我們進(jìn)行以下更改讓它變成動態(tài)的花嘶。

時間格式化&顯示作者

<p class="meta">
    發(fā)布于 <?php the_time('F j, Y g:i a');  ?> by <?php the_author(); ?>
</p>
<?php the_content(); ?>
<a class="button" href="#">Read More</a>

這段代碼與php日期函數(shù)的參數(shù)有關(guān)，the_time('F j, Y g:i a')函數(shù)內(nèi)的參數(shù)是為了將輸出的時間格式化蹦漠。the_author()會調(diào)用博客作者的用戶名椭员。

如果我們希望能夠單擊作者姓名，然后看到該用戶歸檔的所有帖子笛园。這也很容易做到隘击。我們只需要提供一個鏈接，如下所示研铆。在鏈接中埋同，我們輸入php echo get_author_posts_url（），然后傳遞get_the_author_meta（）和ID：

<a href="<?php echo get_author_posts_url( get_the_author_meta('ID')); ?>">
    <?php the_author(); ?>
</a>

保存代碼棵红，到前端刷新頁面

作者看不見了

我們發(fā)現(xiàn)作者看不見了凶赁，鼠標(biāo)經(jīng)過時其變?yōu)楹谏Ｎ覀冞M(jìn)入CSS文件中找到meta類逆甜，在article.post .meta下方添加一段樣式將其修復(fù)虱肄。

article.post .meta a{
    color:#fff;
}

獲取文章類別

現(xiàn)在我們希望可以獲得帖子的類別。為此忆绰，我們回到index.php文件浩峡，我們來更新代碼，在前面提到的the_author()的a結(jié)束標(biāo)簽之后添加如下代碼塊：

</a>
 | Posted In
    <?php
          $categories = get_the_category();
          $separator = ", ";     $output = '';
          if($categories){
                foreach($categories as $category){
                      $output .= '<a href="'.get_category_link($category->term_id).'">'.
                      $category->cat_name.'</a>'.$separator;
                }
          }
          echo trim($output, $separator);
    ?>
</p>

到前端刷新看看：

IT分類

現(xiàn)在如果我點擊IT错敢，它會把我們帶到類別/IT翰灾，你只能看到這個帖子在這里。

4稚茅、削減博客字?jǐn)?shù)&修正Read More按鈕

現(xiàn)在我們想要的最后一件事是文本更短纸淮，讓閱讀更多按鈕工作。因此亚享，我們將轉(zhuǎn)到我們放置內(nèi)容的位置咽块，并將其縮短，我們可以將the_content()更改為the_excerpt()欺税，并修改Read more按鈕的a標(biāo)簽侈沪，如此處所示：

</p>
<?php the_excerpt(); ?>
<a class="button" href="<?php the_permalink(); ?>"> Read More</a>

回到前端頁面刷新揭璃，文章變短了

縮略

默認(rèn)縮略字?jǐn)?shù)是55，如果你想調(diào)整字?jǐn)?shù)多少亭罪，我們在上一個項目中學(xué)過瘦馍，只需在functions.php中加入以下代碼：

// Excerpt Length
function set_excerpt_length(){
    return 33;
}
add_filter('excerpt_length', 'set_excerpt_length');

點擊 Read More 按鈕，會跳轉(zhuǎn)到特定的帖子：