實現WordPress主題側邊欄切換功能的PHP腳本詳解

2020-03-22 17:34:29

字體：大中小

來源：轉載

供稿：網友

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

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

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

下一篇：詳解WordPress中創建和添加過濾器的相關PHP函數