實現(xiàn)WordPress主題側(cè)邊欄切換功能的PHP腳本詳解

2020-03-22 17:34:29

字體：大中小

供稿：網(wǎng)友

作為主題的制作者, 除了實現(xiàn)功能, 展示界面, 還有責任使主題靈活多變, 以滿足更多人不同的需求.
可能一些朋友曾為選用雙欄主題 (單側(cè)邊欄) 還是三欄主題 (雙側(cè)邊欄) 而煩惱過. 下面我們以 Classic 主題為例, 談談如何在主題中方便地切換單側(cè)邊欄和雙側(cè)邊欄. 最后我會提供修改后的主題.
添加管理選項
后臺處理
首先, 我們要修改 function.php, 主要的處理工作都在這個文件里面, 如果主題沒有這個文件, 就創(chuàng)建一個吧. (沒有 function.php 說明主題不支持 Widget, 可不是一個好習慣哦, 還是趕緊新建一個吧）
我的處理包括 3 大塊: 獲取選項, 初始化, 標簽頁操作界面. 這里只創(chuàng)建一個公告欄, 包括兩個選項 (是否顯示公告欄和公告欄內(nèi)容). 如果要添加更多選項, 也只需要代碼中 3 個 TODO 的位置上追加一些代碼而已. 當然, 你還需要改一下選項名稱, 將 Classic 和 html' target='_blank'>classic 全部之換掉.
* 選項組類型class ClassicOptions { /* -- 獲取選項組 -- */ function getOptions() { // 在數(shù)據(jù)庫中獲取選項組 $options = get_option('classic_options'); // 如果數(shù)據(jù)庫中不存在該選項組, 設(shè)定這些選項的默認值, 并將它們插入數(shù)據(jù)庫 if (!is_array($options)) { $options['notice'] = false; $options['notice_content'] = ''; // TODO: 在這里追加其他選項 update_option('classic_options', $options); // 返回選項組 return $options; /* -- 初始化 -- */ function init() { // 如果是 POST 提交數(shù)據(jù), 對數(shù)據(jù)進行限制, 并更新到數(shù)據(jù)庫 if(isset($_POST['classic_save'])) { // 獲取選項組, 因為有可能只修改部分選項, 所以先整個拿下來再進行更改 $options = ClassicOptions::getOptions(); // 數(shù)據(jù)限制 if ($_POST['notice']) { $options['notice'] = (bool)true; } else { $options['notice'] = (bool)false; $options['notice_content'] = stripslashes($_POST['notice_content']); // TODO: 在這追加其他選項的限制處理 // 更新數(shù)據(jù) update_option('classic_options', $options); // 否則, 重新獲取選項組, 也就是對數(shù)據(jù)進行初始化 } else { ClassicOptions::getOptions(); // 在后臺 Design 頁面追加一個標簽頁, 叫 Current Theme Options add_theme_page("Current Theme Options", "Current Theme Options", 'edit_themes', basename(__FILE__), array('ClassicOptions', 'display')); /* -- 標簽頁 -- */ function display() { $options = ClassicOptions::getOptions();
form action="#" method="post" enctype="multipart/form-data" name="classic_form" id="classic_form" div h2 php _e('Current Theme Options', 'classic'); /h2 !-- 公告欄 -- table tbody tr valign="top" th scope="row" php _e('Notice', 'classic'); br/ small php _e('HTML enabled', 'classic') /small /th !-- 是否顯示公告欄 -- label input name="notice" type="checkbox" value="checkbox" php if($options['notice']) echo "checked='checked'"; / php _e('Show notice.', 'classic'); /label br/ !-- 公告欄內(nèi)容 -- label textarea name="notice_content" cols="50" rows="10" id="notice_content" php echo($options['notice_content']); /textarea /label /td /tr /tbody /table !-- TODO: 在這里追加其他選項內(nèi)容 -- !-- 提交按鈕 -- input type="submit" name="classic_save" value=" php _e('Update Options ', 'classic'); " / /div /form * 登記初始化方法add_action('admin_menu', array('ClassicOptions', 'init'));
前臺處理要公告欄在首頁上顯示, 需要修改一下 index.php, 這個比較簡單, 只是通過一些判斷語句決定東西要不要顯示出來而已. 當然, 你可以進行其他操作, 關(guān)鍵是獲取到選項的值, 并對它們進行處理.
其實可以分為兩步:獲取選項 (對每個 PHP 文件, 獲取一次就行了, 可以在文件頂部執(zhí)行)
對選項進行處理 (這里判斷成立的話就將公告內(nèi)容顯示出來)
!-- 獲取選項 -- php $options = get_option('classic_options'); !-- 如果用戶選擇顯示公告欄, 并且公告欄有內(nèi)容, 則顯示出來 -- php if($options['notice'] && $options['notice_content']) : div id="notice" div php echo($options['notice_content']); /div /div php endif; 可以使用管理項來控制側(cè)邊欄的數(shù)量, 在主題文件中獲取側(cè)邊欄的數(shù)量, 對不同的數(shù)量作出不同的處理, 以達到在不同數(shù)量側(cè)邊欄之間切換的目的.// 側(cè)邊欄數(shù)量, 默認為單側(cè)邊欄$options['sidebar'] = 1;// 獲得最新提交的值$options['sidebar'] = $_POST['sidebar']; select name="sidebar" size="1" !-- 單側(cè)邊欄 -- option value="1" php if($options['sidebar'] != 2) echo ' selected '; php _e('Single', 'classic'); /option !-- 雙側(cè)邊欄 -- option value="2" php if($options['sidebar'] == 2) echo ' selected '; php _e('Double', 'classic'); /option /select php _e('sidebar(s)', 'classic'); .添加 Widget 支持因為要在單側(cè)邊欄和雙側(cè)邊欄中切換, 所以我們需要對不同的兩種模式定義兩個 Widget 初始化的分支.
這里比較特殊, 為了在代碼中正確獲取 Widget 信息, 就算是單側(cè)邊欄也需要起一個別名. 就像代碼中的 Sidebar_single. 當側(cè)邊欄個數(shù)為 1 時, 登記 Sidebar_single. 當側(cè)邊欄個數(shù)為 2 時, 登記 Sidebar_top 和 Sidebar_bottom.// Widgets$options = get_option('classic_options');// 單側(cè)邊欄if(function_exists('register_sidebar') && $options['sidebar'] == 1) { register_sidebar(array( 'name' = 'Sidebar_single', 'before_widget' = ' li id="%1$s" ', 'after_widget' = ' /li ', 'before_title' = ' h3 ', 'after_title' = ' /h3 '// 雙側(cè)邊欄} else if(function_exists('register_sidebar') && $options['sidebar'] == 2) { register_sidebar(array( 'name' = 'Sidebar_bottom', 'before_widget' = ' li id="%1$s" ', 'after_widget' = ' /li ', 'before_title' = ' h3 ', 'after_title' = ' /h3 ' register_sidebar(array( 'name' = 'Sidebar_top', 'before_widget' = ' li id="%1$s" ', 'after_widget' = ' /li ', 'before_title' = ' h3 ', 'after_title' = ' /h3 '修改側(cè)邊欄結(jié)構(gòu)首先要明確, 我們現(xiàn)在需要雙側(cè)邊欄結(jié)構(gòu). 怎樣將雙側(cè)邊欄變?yōu)閱蝹?cè)邊欄呢只要將前一個側(cè)邊欄的結(jié)束標簽和后一個側(cè)邊欄的開始標簽刪除, 兩個側(cè)邊欄就合并為一個側(cè)邊欄了. 單純的文字很難將我的想法和實現(xiàn)表達出來, 你可以接著看下面的代碼和示例圖片. php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar_single') ) : // single php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar_top') ) : // top !-- TODO: 頂部側(cè)邊欄內(nèi)容 -- php endif; // top php if ($options['sidebar'] = 2) : /ul php endif; php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar_bottom') ) : // bottom !-- TODO: 底部側(cè)邊欄內(nèi)容 -- php endif; // bottom php endif; // single /ul OK, 這就是側(cè)邊欄代碼結(jié)構(gòu)了. 它可以完美得實現(xiàn)單雙側(cè)邊欄間的切換. 但它是怎么工作的呢我將在后面用圖片列出它的 6 種可能出現(xiàn)的狀態(tài).
因為主題已經(jīng)支持 Widget 了, 所以代碼中 function_exists('dynamic_sidebar') === true, 則 !function_exists('dynamic_sidebar') === false.
記得添加 Widget 支持時寫的代碼嗎側(cè)邊欄為 1 時 sidebar_single 有效, 側(cè)邊欄為 2 時, sidebar_top 和 sidebar_bottom 有效. 這是貫穿整個思路的關(guān)鍵.備注: 紅色: 表示選中代碼的值是 false, 不通過綠色: 表示選中代碼的值是 true, 通過藍色: 表示選中部分將被選用的 widgets 所取代灰色: 表示選中部分代碼將會失效狀態(tài)一: 單側(cè)邊欄, 沒使用 Widget
狀態(tài)二:雙側(cè)邊欄, 沒使用 Widget
狀態(tài)三: 單側(cè)邊欄, 使用 Widget
狀態(tài)四: 雙側(cè)邊欄, 頂部側(cè)邊欄使用 Widget
狀態(tài)五: 雙側(cè)邊欄, 底部側(cè)邊欄使用 Widget
狀態(tài)六: 雙側(cè)邊欄, 頂部和底部側(cè)邊欄都使用 Widget
PHP教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。

上一篇：WordPress中用于獲取及自定義頭像圖片的PHP腳本詳解

下一篇：詳解WordPress中創(chuàng)建和添加過濾器的相關(guān)PHP函數(shù)