WordPress： 建立一個最新文章清單範本 Template

不得不說WordPress其實非常好用，當初有點後悔沒在念書時好好研究他，除了可以讓一般人建立自己的網站之外，也能用來學習網站程式，甚至面對專業的IT人員，前後端設計師等等，更不會因為受限於WordPress的框架，而無法做出自己的效果，相反的，其實WrodPress更容易做出屬於自己網站版面特色，並通過後臺管理系統(CMS)，輕鬆管理各種內容。

正文開始

今天是學習如何建立WrodPress的範本，標題之所以特便強調"文章清單"，主要是因為我想弄出當前主題風格的範本時，無法正確載入我的文章(posts)項目，一方面記錄自己的問題，另一方面就是記下建立範本的方式。

這邊先說明一下製作這個範本的動機，大部分主題的首頁都會放最新文章，但是許多網站都會把首頁傾向網站資訊，而最新文章清單是另外放置在其他頁面，所以會想做出這個部落格文章列表頁面來區隔文章跟首頁。

目前是用Ajax Load More這個外掛去弄出文章清單，但是我買的虛擬伺服器可能效能不太夠了，所以有時候載入起來很吃力，server loading很重，乾脆直接把首頁的程式碼直接當作範本去建一個頁面出來。

如何建立範本

要建立範本其實蠻容易的，只要在檔案最上方加入範本註解，就可以讓WordPress去分辨這是不是範本。

<?php
/**
 * Template Name: my-template
 *
 * @author yang10001
 *
 * @package WordPress
 * @subpackage Ashe
 * @version 1.0
 */
?>

而範本檔案需要放在./wp-content/themes/主題名稱/範本名稱.php這路徑底下。
例如：我是使用Ashe的子主題來存放我的程式，所以路徑會是./wp-content/themes/ashe-child/範本名稱.php

放好之後在你編輯文章或頁面時，就可以看到項目中的頁面屬性多了一個下拉式範本選單

其實做到這邊就已經算完成範本檔案建立了，只是這時候網頁並不具有任何版面樣式，接下來就是將版面嘉進範本，並以做出首頁為目標。

加入主題樣式，並做出部落格首頁

首先，我先將ashe資料夾中的index.php檔案，找出我要放的程式碼。

除了檔案開頭要放範本註解外，接著就是要放<?php get_header(); ?>跟<?php get_footer(); ?>，這是讓版面能夠套入主題的重要步驟

• php get_header(): 把版面樣式表或是JS程式及一些網站資訊加進來。
• php get_footer(): 把頁尾加進來。

在這兩行程式碼中間就是我們要放入的文章清單內容：

<!-- 網站標頭，用來套入版面樣式等功能 -->
<?php get_header(); ?>

<!-- 範本內容，這邊我是放入文章清單 -->
<div class="main-content clear-fix<?php echo esc_attr(ashe_options( 'general_content_width' )) === 'boxed' ? ' boxed-wrapper': ''; ?>" data-layout="<?php echo esc_attr( ashe_options( 'general_home_layout' ) ); ?>" data-sidebar-sticky="<?php echo esc_attr( ashe_options( 'general_sidebar_sticky' ) ); ?>">

    <?php

    // Sidebar Left
    get_template_part( 'templates/sidebars/sidebar', 'left' ); 

    // Blog Feed Wrapper
    if ( strpos( ashe_options( 'general_home_layout' ), 'list' ) === 0 ) {
        get_template_part( 'templates/grid/blog', 'list' );
    } else {
        get_template_part( 'templates/grid/blog', 'grid' );
    }

    // Sidebar Right
    get_template_part( 'templates/sidebars/sidebar', 'right' ); 

    ?>

</div>

<!-- 網站頁尾，把當前主題的頁尾加進範本中 -->
<?php get_footer(); ?>

接著我就去建立一個測試頁面，結果就是沒有正確載入文章清單

最後成功載入最新文章清單了

這表示範本是只抓握們打的頁面內容，其實怎麼解決我也不知道，只知道我之前用的WordPress主題 MyNote，是可以加入最新文章清單的首頁範本，所以就去挖他的source code來看，加入一些程式之後，就可以成功載入文章清單了。

<!-- 網站標頭，用來套入版面樣式等功能 -->
<?php get_header(); ?>

<!-- 範本內容，這邊我是放入文章清單 -->
<div class="main-content clear-fix<?php echo esc_attr(ashe_options( 'general_content_width' )) === 'boxed' ? ' boxed-wrapper': ''; ?>" data-layout="<?php echo esc_attr( ashe_options( 'general_home_layout' ) ); ?>" data-sidebar-sticky="<?php echo esc_attr( ashe_options( 'general_sidebar_sticky' ) ); ?>">

    <?php
    // Sidebar Left
    get_template_part( 'templates/sidebars/sidebar', 'left' ); 
    ?>

    <?php
    // Blog Feed Wrapper

    // 借鏡MyNote的程式碼來取得最新文章
    //----------------------------------------------------
    if ( get_query_var( 'paged' ) ) {
            $paged = get_query_var( 'paged' );
    } elseif ( get_query_var( 'page' ) ) {
        $paged = get_query_var( 'page' );
    } else {
        $paged = 1;
    }

    $wp_query = new WP_Query(
        array( 
            'post_type'      => 'post', 
            'posts_per_page' => get_option( 'posts_per_page' ), 
            'paged'          => $paged 
        )
    );
    //----------------------------------------------------

    if ( have_posts() ) {       
        if ( strpos( ashe_options( 'general_home_layout' ), 'list' ) === 0 ) {
            get_template_part( 'templates/grid/blog', 'list' );
        } else {
            get_template_part( 'templates/grid/blog', 'grid' );
        }
    }

    ?>

    <?php
    // Sidebar Right
    get_template_part( 'templates/sidebars/sidebar', 'right' ); 
    ?>

</div>

<!-- 網站頁尾，把當前主題的頁尾加進範本中 -->
<?php get_footer(); ?>

結語

這次純粹有用過MyNote這個主題，所以才能夠在幾天內就找到解決方法，也學習了如何建立WordPress範本，雖然具體程式實現還是一知半解，但至少可以做出我要的效果了，本來還想說要拖到假日才能解決XD。

參考

• Page Templates | Theme Developer Handbook | WordPress Developer Resources
• The Loop | Theme Developer Handbook | WordPress Developer Resources
• mynote/page-landing.php at master · terrylinooo/mynote (github.com)