[WordPress Dev] 建立一個佈景主題時可以自定義的功能

2016-09-21

建立一個 WordPress (以下簡稱 WP )的佈景主題沒有想像中的困難

(當然是指入門 要做到相當深入也是很複雜的我想)

請注意:本文發表時的 WP 版本為 4.6.1 ,未來有可能因為新版本的推出導致本文內容與實際情況有落差。

只要有基本的 PHP, HTML, CSS 知識
其他的就只是要了解有哪些 API 可以使用即可

首先只有 index.php 跟 style.css 是必須的
而額外還可以再切為 header.php, footer.php, sidebar.php, single.php 等等
再細分更可以客製化需要的每個頁面
這邊就不深入討論
這篇文章主要是記錄一下可以讓使用者在後台可以自定義的功能

選單 Menu

在 functions.php 中加入:

if (function_exists('register_nav_menus')) {
    register_nav_menus( array(
        'primary' => 'Primary Menu',
        'footer'  => 'Footer Menu',
    ) );
}

function_exists() 先確認是否有這個函式可以用,雖然新寫的佈景主題應該比較少會有用舊版 WP 的人用,但還是加一下以防萬一。

接著就使用 register_nav_menus() 來註冊選單,要讓使用者可以用幾個選單就註冊幾個(就看你的佈景主題需要多少個),陣列的 key 值可以說是這個選單的 id ,而 value 值則是後台顯示的名稱。這邊註冊兩個選單,分別放在不同的地方。

加好後在 WP 後台的左側選單就可以看到外觀下有選單可以選(當然要先啟用這個佈景主題),如下圖:
[外觀]中的[選單]
點選後就可以設定你的選單要顯示什麼(文章、頁面或是分類都可以,很活)。

接著就是在佈景主題的前台顯示選單,在要顯示的頁面(像是 index.php 或 header.php )中加入:

wp_nav_menu(array('theme_location'=>'footer'));

使用 wp_nav_menu() 來顯示一個選單,可以傳入一個陣列參數來做額外的設定,像上面寫的 theme_location 就是指這邊要顯示哪一個選單(前面註冊的兩個其中一個)。更多可以設定的功能可以參考文件

側邊欄位 Sidebar Widgets

除了可以在佈景主題的側邊欄中加入預設固定的項目(月曆、分類、最近文章這種),也可以讓使用者在後台可以自由編排側邊欄要顯示的項目與順序。先在 functions.php 中加入:

function theme_widgets_init() {
    if (function_exists('register_sidebar')) {
        register_sidebar(array(
            'name' => 'Sidebar Widgets',
            'id' => 'sidebar-widgets',
            'description' => '',
            'before_widget' => '
', 'after_widget' => '
', 'before_title' => '

', 'after_title' => '

' )); } } add_action( 'widgets_init', 'theme_widgets_init' );

使用 register_sidebar() 來註冊一個自定義側邊欄,可以傳入一個陣列參數作額外的設定,更多可以設定的內容可以參考文件

上述將註冊動作用一個函式包起來,並使用 add_action( ‘widgets_init’, ‘theme_widgets_init’ ) 來加入這個註冊動作, add_action() 是 WP 特殊功能,可以在不碰到核心程式的情況下,在不同階段加入自定義的程式,像是製作 PlugIn 也是很常用到這個功能。

加好後在 WP 後台的左側選單就可以看到外觀下有小工具可以選(當然要先啟用這個佈景主題),如下圖:
[外觀]中的[小工具]

接著在前台顯示的地方( index.php 或是有切出來的 sidebar.php )加入:


    

    '']); ?>

先用 dynamic_sidebar() 來判斷使用者有沒有在後台啟用自定義側邊欄,沒有的話才會顯示 if 條件式裡的內容,上述裡面的內容就是顯示預設固定的項目。

首頁圖片 Header Image

首先在 functions.php 中加入:

function theme_custom_setup() {
    if (function_exists('add_theme_support')) {
    	add_theme_support( 'custom-header', array(
    	    'width'         => 1600,
    	    'height'        => 1200,
    	    'default-image' => get_template_directory_uri() . '/images/header.jpg',
    	    'uploads'       => true
    	));
    }
}

add_action( 'after_setup_theme', 'theme_custom_setup' );

使用 add_theme_support(‘custom-header’) 來註冊一個首頁圖片,第一個參數是可以自定義的類型( WP 把一些項目都整合到這個函式了,另外還有像是 custom-logo 可以設定),還可以傳入第二個陣列參數作額外的設定,更多可以設定的內容可以參考文件

上述將註冊動作用一個函式包起來,並使用 add_action( ‘after_setup_theme’, ‘theme_custom_setup’ ) 來加入這個註冊動作, add_action() 是 WP 特殊功能,可以在不碰到核心程式的情況下,在不同階段加入自定義的程式,像是製作 PlugIn 也是很常用到這個功能。

加好後在 WP 後台的左側選單就可以看到外觀下有頁首可以選(當然要先啟用這個佈景主題),如下圖:
[外觀]中的[頁首]

接著在前台顯示的地方( index.php 或是有切出來的 header.php )加入:


使用 header_image() 來取得 Header Image 的圖片路徑。

網站 Logo

首先在 functions.php 中加入:

function theme_custom_setup() {
    if (function_exists('add_theme_support')) {
    	add_theme_support( 'custom-logo', array(
    	    'width'         => 200,
    	    'height'        => 200,
    	    'flex-width' => true,
    	    'flex-height' => true
    	));
    }
}

add_action( 'after_setup_theme', 'theme_custom_setup' );

與前面講過的 Header Image 類似(可以寫在同一個 theme_custom_setup() 中一起註冊)。第二個傳入的陣列參數可以作額外的設定,更多設定的內容可以參考文件

加好後在 WP 後台的左側選單… 看不到 LOGO !!! (我卡在這邊兩三個小時!這也太不人性化了吧!誰知道你突然有個選項是藏在裡面的啦!)

他是藏在外觀下的自訂,點進去後要先選網站識別,接著在裡面就可以看到標誌( logo )了,如下面三張圖片:

[外觀]中的[自訂] -> [自訂]中的[網站識別] -> [網站識別]中的[標誌]

接著在前台顯示的地方( index.php 或是有切出來的 header.php )加入:


get_custom_logo() 會自動顯示一個 a 標籤包著一個 img 標籤(不知道為什麼要這麼多餘,直接給個 image src 不就好了?!)。

ref:

Using the new WordPress custom-logo theme support with Genesis