iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 20
1
Modern Web

讓0基礎的你也能製作簡單wordpress主題系列 第 20

【Day 20】來為你的Wordpress主題,加設分類,標籤和獨立訂立列出文章數吧

  • 分享至 

  • xImage
  •  

分類和tag,對於文章來說,是一個很重要的功能,沒有了分類與標籤,用家也就很難找尋到,合適他們的文章,不過怎樣用編碼來加入,讓您的主題有分類與標籤?分類頁面和標籤頁面,又該怎樣用編碼來修改或者加設?這篇文章將帶你一探分類與標籤的小世界。另外這篇文章,也會說說怎樣為不同頁面,訂立不同文章數啊。有興趣就看下去吧。

Wordpress設定

雖然這些真的很基本,但無論怎樣,你也要知道怎樣在wordpress裏設定吧,不然之後教的,你根本就沒辦法去測試,所以這裡還是說說吧。

我們先點選分類,然後增新一個分類

如何在wordpress加入新的分類

我們點選文章,點選標題,在上方的選擇欄位裡選擇編輯,然後套用,接著選擇合適的分類,並輸入合適的標籤就可以了

如何快速在wordpress為大量文章加設分類和標籤

為文章加設分類和標籤連結

這個說易不易,說難不難,照慣例,先上編碼給大家過目一下,這裡以標籤作為例子,大家有興趣也可以到wordpress官方網站了解一下:

 <?php  
 <ul class="postcontentTags_ul  ">
  <?php $tags=get_the_tags();foreach($tags as $tag):?>
   <li class="postcontentTags_li ">
    <a role="button" class=" btn btn-light btn-sm mb-2 mr-2"  href="<?php echo get_tag_link($tag->term_id);?>">
     <?php echo $tag->name;?>
    </a>
   </li>
  <?php endforeach;?>
 </ul> 

loop

雖然看起來有點不像不過它其實也是一個loop。之前那個loop的核心位置是在while這個字裏,透過while,就能夠做到:如果怎樣怎樣,就怎樣怎樣,如果沒有發生,那麼就停止這個loop,這樣的句式結構。不過這裡的情況又是怎樣?

這次的核心是foreach,透過foreach,就能夠簡單地把每個生成出來的標籤,都加入適當的連結,以及標籤名字,直到沒有標籤了,那麼就把這循環結束。你會發現這次,不像while那樣那麼複雜,需要設定該在甚麼情況下才會開始這個loop,它可以簡單地不需要任何條件,就會開始,這個也就是foreach的一大特點。既然它是這麼隨便,那麼當然還是會有他的隱患在,假若在一些複雜的loop裏,那麼這個方便也就會成為麻煩了。

get_the_tags()/get_the_category()

這是一個wordpress編碼,透過這,就能夠讓wordpress系統找出,這篇post,設定了的tag/category了。而我們在前方設定了$tags這個變數來代表get_the_tags(),這樣假若你之後有需要使用到時,也只需要輸入$tags就可以了,讓編碼變得更為簡潔,這裡變數名字並沒有規定,不要和其他重複使用就可以了。

雖然我們這裡並不是經常重複使用,但還是建議這樣做,以養成一個好習慣。

foreach($tags as $tag)

foreach loop裏的基本寫法,必須要x as $y 這樣,那麼forloop才能夠正常運作,同樣這裡設定的變數名字並沒有規定。

get_tag_link/get_category_link

<?php echo get_tag_link($tag->term_id);?>的主要用途,主要讓tag,能夠生成出一個連結,以前往屬於那tag/分類的頁面,get_tag_link代表著獲取連結,$tag->term_id就是代表著那個連結,->符號代表著你是去拿的資料,或者可以說是參數,例如這裡就是要term_id了。

別和=>這個符號混在一起啊,他們是不同的,=>是要來修改參數,而不是要來取資料,所以我們之前在修改數值時都是用=>,而不是用->就是這原因了。

不過,為什麼要term_id?因為只有知道正確的term_id,wordpress才能找出符合的tag/分類頁面,不然你就什麼也看不到了

echo $tag->name

echo 要來把字簡單快捷地顯示出來,要顯示什麼?後面就有說呀,就是name:tag/category的名字了。

ul li

情況就和之前的數字列表一樣,不過因為這次我們可以在這裡直接設定class,所以可以使用bootstrap而不需要css去進行編輯,botstrap部分就不再多說了,這裡也是用著之前教的技巧,大家自己嘗試一下吧。

你說我怎麼不教category?因為真的沒分別啊,只要記緊是用get_category_link和 get_category_link,變數重新命名一下就可以了。

結果

tag link 完成後的樣式

為分類和標籤加設頁面

這裡就簡單了,因為大家也是用到列出文章的loop,這裡我們只需要把之前在index.php的編碼,直接複製過來就可以了,沒看過的可以點這裡。接著你可以開設一個檔案,把之前負責index 樣式的編碼,複製過來,並修改一下,最後也把get_template_part連接的檔案,更改一下,以連接新的樣式,這樣就完成了。/images/emoticon/emoticon42.gif

為不同頁面,訂立不同的列出文章數

記得我們之前是怎樣設定,我們是在wordpress裏直接設定的,不過其實還有另外一個方法,我們可以在
loop裏,加入額外編碼來設定:

編碼片段:

<?php query_posts( 'posts_per_page=5' ); ?>
  <?php if(have_posts()): while( have_posts()):the_post(); ?>

這裡最重要的編碼,是query_posts,他能夠為我們的loop,篩選出希望顯示什麼文章,所以說,除了為頁面列出的文章數,作出規限外,query_posts還能夠和id ,分類,作者名稱等合作,篩選文章,這看起來像是很棒,不過他還是有他的問題在,有關這個部分,我們將會在wp_query的文章,再詳細談及。

結語

接下來就會開始sidebar的部份,大家可以先利用bootstrap,修飾一下文章的頁面,這次大家還是可以利用card等基本技巧,來裝飾,因為還是用都之前所教導的bootstrap部分,所以我就不再詳述了,不知道怎樣弄的可以回去看啊。


上一篇
【Day 19】 文章要有分頁(page-break)?其實wordpress也能做到
下一篇
簡單操作,為你的wordpress主題,加入額外sidebar
系列文
讓0基礎的你也能製作簡單wordpress主題30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言