更改內容概要字數限制

我們回到昨天內容概要的部分，你會注意到，顯示的字數並不多，這是因為，wordpress把內容概要的字數限制，設定為55個（若把wordpress語言設定了為英文，那麼每一個英文詞語會為一個字，若把語言設定了為中文，那麼每一個英文字會為一個字，很奇怪對吧），

我們該怎樣改變這設定呢？我們可以透過在function內，加設編碼，來修改wordpress原先的設定。

完整編碼：

function custom_excerpt_length( $length ) {
	return 200;
}
add_filter( 'excerpt_length', 'custom_excerpt_length', 999 );

編碼解釋：

$length: 當中的$，代表著這是一個變數，簡單而言，他就是可以隨著你的設定，而去改變它的數值。而我們這裡特別指明了$length，目的就是讓系統知道，這次我們只是想更改length的數值，其他並不希望修改。

return 200： 對於我們需要什麼數值，我們可以在這裡設定，return您可以理解成數學的=符號，不過這裡有點特別的是，假若後面還有一個return，那麼就只有前方的那個，系統是會看到，例如：

function custom_excerpt_length( $length ) {
	return 200;
    return 150；
}

那麼系統就只會看到200，但不會看到150。

add_filter： 在修改內容概要長度時，必需要用到的編碼，加入後就能夠讓wordpress系統，根據你上方的指令，把字數更改到你理想的範圍。

999： 為優先度，數值越大，優先度就會越高，這樣wordpress系統就會優先採納，你對於內容概要長度的設定，假若沒有設定，有時候，會被wordpress系統的設定蓋過，這樣就會看不到有任何變化了。

結果

設定後就會像這樣：

加入連結

總要有read more 等連結，讓用家能夠看到文章的完整內容吧，不然把所有文章也是沒用，看不到內容又有什麼用呢？

完整編碼：

<a href="<?php the_permalink();?>"> Read more </a>

編碼解釋：

你會看到這篇碼，和平常加入超連結的方法並沒有什麼不同，都是使用html 的 a href， 分別就只是在於，中間多了php the permalink()這個編碼，來代替一般的連結。透過這個編碼，wordpress就會在每個列出的文章，都會自動添加一個能夠連接到那個文章頁面的連結，非常方便

結果：

成功的話，當你按下連結，你會進入一個什麼都沒有的畫面，不過為什麼是空空的？我們不是有放文章內容嗎？這是因為我們並沒有在負責文章的single.php,輸入什麼編碼，所以當然什麼也看不到吧。

設定每頁顯示的文章上限

假若你有一百遍文章，然後還把所有文章，放置到同一個版面，這可就苦了用家了，真不知道用家，要向下看多久，才會看到，自己想看到的文章呢。

這個設定並不難，甚至可以編碼也不用，就可以實現了

點擊，設定，然後點選閱讀，在blog顯示最多那裡，設定你希望每頁顯示多少文章，然後按底下的儲存變更就可以了，是不是很簡單呢^^

結果如下：

加入下頁按鈕

的確，現在只列出了三篇文章，但其他呢？這樣設定後，不是會看不到嗎

別緊張，我們還可以加入按鈕，來讓用家可以翻到下頁的，不過這裡有個複雜版和簡單版，我們這裡就先來說，較簡單的下頁按鈕吧，至於數字按鈕我們明天再說明。不過要注意的是，因為我們並不是要在每個列出的文章，都有這個按鈕，我們只希望在頁面的底部，能夠有按鈕，讓用家可以翻到下一頁，所以我們只需要放到index.php／archive.php就可以了

下頁按鈕

這個較為簡單，只需要兩個編碼，就能夠做到，我們來看看下方的編碼吧，

完整編碼

 <?php previous_posts_link('PREVIOUS »', 0);?>
 <?php next_posts_link( 'NEXT »', 0);?>

編碼解釋

previous的編碼代表著前一頁，而next的編碼代表著後一頁。我們可以透過改變括號內的第一部份'PREVIOUS »'，來改變這連結，最後會顯示出來的文字。假若不想設定，編碼則需要寫成：

<?php next_posts_link();?>

這樣就會按照系統的預設來顯示，看下圖：

假若加入了( 'NEXT »', 0)，則會是這樣子：

至於數字0，則是要來設定，您希望最多，顯示多少頁的。

最後，大家可以用一個div class="container "， ,把上方的編碼包裹著，這樣就會和上方列出的文章分開了

加入class

雖然能夠自然生成是很好，很理想，但因為沒有了class，我們沒辦法改變一下這按鈕的樣式，我們可以透過分function，為按鈕插入class，這樣我們就可以修改了。

完整編碼：

function posts_link_attributes() {
  return 'class="styled-button"';
}

add_filter('next_posts_link_attributes', 'posts_link_attributes');
add_filter('previous_posts_link_attributes', 'posts_link_attributes');
 

這個編碼和更改內容概要長度的編碼，也是相近，就只是把名字更改了，然後這次我們不再需要設定$,這是因為posts_link_attributes本身就是我們想改的地方了，不需要再特別指明。

接下來就是需要在style.css加入編碼就可以了，我們透過google開發者工具就會看到它在：a.styled-button，接著只需要像之前那樣加入編碼修改就可以了，例如希望改變background－color

a.styled-button{ background-color: aquamarine;}

這裡也給大家一個網站，讓大家哪怕不太懂css，也可以透過這網站，生成並加入css：https://html-css-js.com/css/generator/

修改樣式

確實現在，該有的大概都算是有了，不過這樣的樣式，未免太難看吧，還記得我們之前在學bootstrap時製作的card嗎，我們可以把之前的設定，套用到這裡去，沒看過的，可以按這裡。並且，我們可以在read more 的超連結裏加入class，來改變顏色，例如：class="btn btn-info"，及加入role="button"，方便使用閱讀器的用家。

因為我們是希望每個列出的文章，都能夠套用到這格式，所以我們可以把他放到，文章的loop裏，把標題到連結的部分，包裹著。至於相片的部分，待我們為文章版面加入樣式，並能夠加設封面圖片時，再補加吧。

這裡需要留意的是，container和row必須要在循環的外邊，不然就不能由左至右排列。

編碼參考：

<div class="container">
 <div class="row">
 <?php if(have_posts()): while( have_posts()):the_post(); ?>
  <div class="col-md-6 col-lg-4 mb-3"> 
      <div class="card" >
        <div class="card-body">
         <h3 class="card-title"><?php the_title();?></h3>
         <p class="card-text"> <?php the_excerpt();?></p>
         <a  class="btn btn-info" role= "button" href="<?php the_permalink();?>"> Read more </a>
        </div>
      </div>
    </div>
   <?php endwhile; else: endif;?>
  </div>
</div>

完成後就會像這樣子：

至於數字按鈕的部分，將會在我晚點更新的文章提及。