之前說了那麼多關於loop的一些設定，教大家怎樣利用loop，來列出文章，但卻一直沒怎麼說，怎樣設定文章的版面，那麼我們今天就來開始製作，文章的版面吧。不過，大家不用這麼擔心，假若你前面的那些內容，是有跟到的話，那麼對你而言，這裡絕對不難，為什麼呢？因為地方雖然不同，但我們用著的，還是差不多的編碼，所以呀，很多的地方，你們也是已經學會了。

好，那麼我們就正式開始吧

檔案準備

和之前一樣，我們也並不希望在single.php檔案裏面，包含過多內容。所以我們也會像之前loop那樣，另開一個php檔案，並且用get_template_part，在single.php裏連接這php檔案。

編碼：

<?php get_template_part('include/postcontent');?>

當然，你也可以加入div contianer， 把這段編碼包起來。

基本編碼

這裡，在一開始時，也是會用到，我們在之前學的loop基本編碼：

<?php if(have_posts()): while( have_posts()):the_post(); ?>

<?php endwhile; else: endif;?>

你心裡應該會納悶道，我明明不是要列出文章啊，為何這裡又要用到loop？這件事驟眼看起來，確實是很奇怪的。不過，其實也有它的道理在的。

大家可以回想一下，loop的運作原理是什麼？沒錯，就是看看有沒有wordpress文章，需要列出來，有就會列，當列完了就會停下來。而我們之前是把它放到去主頁／分類的檔案裏，所以系統就會努力去找尋，你想要列出的文章。

不過，若果到了文章的檔案裡，又會發生什麼事？大家都知道，每篇你編寫好的文章，wordpress都會為該文章，自動生成一個連結吧。因為這次我們把它放在文章的檔案裡，聰明的wordpress系統就會由列出文章，改為根據連結，去列出文章。而同一連結就只有一篇文章，所以當然就只會列出一篇文章吧。也因為這樣，我們在點擊連結時，才會看到我們想看的文章內容。

怎樣，現在明白了吧

加入文章內容

既然和loop也是一樣道理，那麼加入文章內容，是不是也是用<?php the_content();?>？

答對了

我們在loop內加入這個編碼，就會出現文章內容了：

加入標題、時間和作者

我們可以用相同的方法，把標題、時間和作者放進來。

編碼參考：

<?php if(have_posts()): while( have_posts()):the_post(); ?>

 <h1 class="content-head"><?php the_title();?></h1>
 <p class="content-meta">Posted by <?php the_author_posts_link(); ?></p>
 <p class="content-time"> <?php the_time(get_option('date_format')); ?> <?php the_time(get_option('time_format')); ?></p>

 <?php the_content();?>

<?php endwhile; else: endif;?>

關於h1

這裡注意一下是，文章的標題，我們盡量都會建議使用h1。h1，在seo裡面，有著很重要的重要性。大家要知道，h1－h6除了有效去改變外觀外，正確地使用，亦能夠提升文章編碼的清晰度，更有效地讓瀏覽器，清楚知道文章的內容和架構。當中的H1，代表著它是文章裏最重要的，瀏覽器會以h1的設定，作為其中一個參考，去設定搜尋結果的標題。而另外，H1亦都可以幫助閱讀器，更容易去解讀文章。

為了讓文章的格式更為清晰，所以我們一般會建議，只在標題裏，使用h1，這樣瀏覽器就不會錯誤找出一些不必要的資料，作為文章標題。使用閱讀器的用家也會更清楚知道，那裡才是正文了。

結果

接下來，我們來掌握一些新的技術吧。

文章封面圖片

一篇博文，很常會設有文章封面圖片，這樣就能夠讓你的文章內容裏，以及你列出的文章，加入圖片，讓您的網站看起來美美的，不會那麼沉悶，不過該怎樣加入？

加入精選圖片

我們首先要在funtion裏加入編碼，讓系統允許我們使用文章封面圖片這功能：

完整編碼：

add_theme_support('post-thumbnails');

接下來我們就可以正式開始了：

我們回到文章內容的loop內，加入編碼，這裡我們先給大家看看，我們需要加入的編碼吧

完整編碼：

 <?php if(has_post_thumbnail()):?>
  <img src="<?php the_post_thumbnail_url()?>" alt="<?php the_title_attribute()?>">
 <?php endif;?>

編碼解釋:

大家應該會注意到，其實這也是類似於loop的概念，而if那句和endif那句，其實也就和loop差不多，if那句就只是在說著，如果有封面圖片，而endif那句，則是在說著，這個編碼結束了。這裡不需要用到while，是因為只有一張照片，沒有什麼列完了沒的問題。

而這裡最大的分別，就是在中間的編碼，不過我想你應該也會發現，這怎麼這麼面善？沒錯，其實這裡就只是用著html img 的空殼，然後把中間的內容稍為改掉。

<?php the_post_thumbnail_url()?>：原本這裡是要來放圖片路徑的，不過因為現在我們會先上載到wordpress的圖片庫裏，然後再讓用家把它，設定為封面位置。所以，我們要讓wordpress系統，能夠自動獲取到，我們上載上去的圖片，究竟路徑是什麼，而這個編碼就能夠幫助我們，達成這目的了。url的()，則可以要來設定，圖片的大小，這個你看下去就會見到了。

<?php the_title_attribute()?>: 讓圖片的替代文字能夠正常顯示出來，所謂的替代文字，就是圖片在搜尋結果裏，會出現什麼的描述文字。

the_title_attribute()有一個夥伴是the_title，不過the_title並不能夠用在替代文字裏的，會較容易出現錯誤，這時由於the_title_attribute會經過特別的傳譯，所以在alt內使用，也不會出現什麼顯示錯誤的問題，這點是the_title做不到的，有時在坊間的例子會見到他們使用the_title，這是不正確的做法來。

完成後，就像平常那樣，點擊您想編輯的文章，然後在右邊欄位的精選圖片，加設合適的圖片就可以了。

調節大小

雖說已經設定好了，不過你會看到，圖片有點過大

我們可以透過在function裏加入編碼，來調整大小，

編碼

add_image_size('post-large', 800, 600, false );

編碼解釋

add_image_size： 要來加設對圖片大小的設定

post-large：為你這個設定的名稱，之後在url的（）內，把這個名稱放進去，就能夠把圖片大小改變

800, 600： 前面的數值代表著闊，後面的數值代表著高

false：這是要來要求wordpress，該怎樣剪裁圖片的，假若是true，那麼就會讓圖片大小一定會變為800×600，雖然這樣，能夠讓圖片一定在你的理想大小裏，但過度剪裁，也會導致圖片質量變差的情況，而false，則只會讓圖片剪裁到相對的大小，而又同時能確保圖片質量。

刷新

假若你把名字放到ur（）裏，然後刷新一下，你會發現，什麼也沒發生過，這並不代表你做錯了什麼，就只是wordpress是在你上載圖片時，就已經把該圖片可以使用的剪裁方法，放到上去。所以，你必須要把圖片剷除，並重新上載，那麼才能達成目的。

不過，假若你有很多圖片時，那麼我們就需要依賴一下wordpress的插件了。

我們可以在wordpress的外掛，安裝外掛裏，搜尋一下Force Regenerate Thumbnails，然後把它下載下來。

接著我們可以在工具裏找到它，打開並按一下regenerate，這樣就可以啦。

結果

小作業

大家自己嘗試一下，在列出文章那裡，加入文章封面的小圖片吧

完成編碼參考（僅圖片部份）：

<div class="card" >
  <?php if(has_post_thumbnail()):?>
   <img src="<?php the_post_thumbnail_url('post-small')?>" alt="<?php the_title_attribute()?>" class="img-fluid mt-2 card-img-top">
  <?php endif;?>

不知為何有點移位==