之前我寫了一個函數就搞定系列來介紹使用 WPJAM Basic 開發,一共有5篇,分別涉及設置選項,文章選項,後台文章列表欄目,分類選項,後台分類列表欄目這五個方面的快速開發。
為了大家使用,我還還提供了 PDF 文檔下載,大概有20多頁,當作「WordPress果醬」公眾號的第一本電子書發布。
但是還是有些同學覺得難以上手,所以今天想了一下,就簡單更新了一下 Sweet 主題,並且出了一個主題的選項開發框架,並且不到50行代碼。
什麼意思呢?一般來說新人接觸 WordPress 開發,最早肯定是想自己做一個 WordPress 主題,而做 WordPress 主題,在後台做一個設置選項頁面,然後在主題中調用這些選項是最繁瑣。
現在網上有很多這方面適合二次開發的選項框架(Option Framework),所以我把 Sweet 主題這部分代碼單獨整理成一個文件,然後只需要修改或者增加設置的選項字段,和其他的一些名字即可直接使用。
首先在自己開發的主題中引入該文件,假設我們把它放到主題的 inc 目錄下,那麼在主題的 functions.php 文件增加引入的代碼如下:
include TEMPLATEPATH.'/inc/option.php';
然後我們先看看效果,目前在後台增加了一個「主題設置」的後台主菜單:

「主題設置」這個名字和左邊的圖標,你可以修改成你主題的名字即可,修改的位置大概在30行,相關的代碼:
public static function get_menu_page(){ return [ 'menu_slug' => 'wpjam-theme', 'menu_title' => '主題設置', // 改成你主題的名字 'icon' => 'dashicons-hammer', // 改成自己喜歡的 icon 'capability' => 'manage_options', 'position' => '59', 'function' => 'option', 'option_name' => 'wpjam_theme', ];}
修改的位置,我都通過注釋做了標記。
然後點擊進去,可以看到設置頁面有兩個標籤頁:

第一個標籤頁有兩個圖片上傳按鈕和一個多圖上傳器。
然後第二個標籤頁,我簡單羅列了常用的幾種表單字段:

標籤頁名字和這些字段如何修改也非常簡單,相關的代碼在get_sections方法中:
public static function get_sections(){ return [ 'section1' => [ 'title' =>'標籤頁1', 'fields' =>[ 'logo' => ['title'=>'網站 LOGO', 'type'=>'img', 'item_type'=>'url', ], 'favicon' => ['title'=>'Favicon', 'type'=>'img', 'item_type'=>'url', ], 'images' => ['title'=>'多圖上傳', 'type'=>'mu-img', 'item_type'=>'url', ], ] ], 'section2' => [ 'title' =>'標籤頁2', 'fields' =>[ 'text' => ['title'=>'普通輸入框', 'type'=>'text'], 'number' => ['title'=>'數字輸入框', 'type'=>'number'], 'checkbox' => ['title'=>'選擇框', 'type'=>'checkbox', 'description'=>'你要開啟該功能'], 'checkboxs' => ['title'=>'複選框', 'type'=>'checkbox', 'options'=>[1=>'選項1', 2=>'選項2', 3=>'選項3', ]], 'radio' => ['title'=>'單選框', 'type'=>'radio', 'options'=>[1=>'選項1', 2=>'選項2', 3=>'選項3', ]], 'textarea' => ['title'=>'文本框', 'type'=>'textarea'], ] ], ];}
可以說完全是配置型代碼,可以先備份一下,然後自己嘗試去修改一下看看效果。
選項字段都設置好了,並且也保存了設置,最後怎麼獲取呢?對的,這個框架還提供了獲取函數:
wpjam_theme_get_setting($name, $default=null);
它有兩個參數,$name是選項名稱,$default是默認值,一眼就明白怎麼用了吧?
有了這個選項框架,製作 WordPress 主題的選項頁面,和應用這些選型,變得異常的簡單,但多說無用,最重要的是自己親手試一下。
最後說一下,使用該框架製作的後台設置頁面,都是 WordPress 默認的 UI 樣式,感覺和 WordPress 後台原生的頁面幾乎一樣,對於用戶的體驗是最好的。
大家對 WPJAM Basic 進行二次開發有什麼想法和建議,也可以給我留言。
該文件我也一起打包到了「使用 WPJAM Basic 進行快速開發指南」電子書的下載包裡面,文件名是option.php,下載方式還是一樣: