實(shí)現(xiàn)WordPress主題側(cè)邊欄切換功能的PHP腳本詳解
作為主題的制作者, 除了實(shí)現(xiàn)功能, 展示界面, 還有責(zé)任使主題靈活多變, 以滿足更多人不同的需求.
可能一些朋友曾為選用雙欄主題 (單側(cè)邊欄) 還是三欄主題 (雙側(cè)邊欄) 而煩惱過. 下面我們以 Classic 主題為例, 談?wù)勅绾卧谥黝}中方便地切換單側(cè)邊欄和雙側(cè)邊欄. 最后我會(huì)提供修改后的主題.
添加管理選項(xiàng)
后臺(tái)處理
首先, 我們要修改 function.php, 主要的處理工作都在這個(gè)文件里面, 如果主題沒有這個(gè)文件, 就創(chuàng)建一個(gè)吧. (沒有 function.php 說明主題不支持 Widget, 可不是一個(gè)好習(xí)慣哦, 還是趕緊新建一個(gè)吧)
我的處理包括 3 大塊: 獲取選項(xiàng), 初始化, 標(biāo)簽頁操作界面. 這里只創(chuàng)建一個(gè)公告欄, 包括兩個(gè)選項(xiàng) (是否顯示公告欄和公告欄內(nèi)容). 如果要添加更多選項(xiàng), 也只需要代碼中 3 個(gè) TODO 的位置上追加一些代碼而已. 當(dāng)然, 你還需要改一下選項(xiàng)名稱, 將 Classic 和 classic 全部之換掉.
<?php /** * 選項(xiàng)組類型 */ class ClassicOptions { /* -- 獲取選項(xiàng)組 -- */ function getOptions() { // 在數(shù)據(jù)庫(kù)中獲取選項(xiàng)組 $options = get_option('classic_options'); // 如果數(shù)據(jù)庫(kù)中不存在該選項(xiàng)組, 設(shè)定這些選項(xiàng)的默認(rèn)值, 并將它們插入數(shù)據(jù)庫(kù) if (!is_array($options)) { $options['notice'] = false; $options['notice_content'] = ''; // TODO: 在這里追加其他選項(xiàng) update_option('classic_options', $options); } // 返回選項(xiàng)組 return $options; } /* -- 初始化 -- */ function init() { // 如果是 POST 提交數(shù)據(jù), 對(duì)數(shù)據(jù)進(jìn)行限制, 并更新到數(shù)據(jù)庫(kù) if(isset($_POST['classic_save'])) { // 獲取選項(xiàng)組, 因?yàn)橛锌赡苤恍薷牟糠诌x項(xiàng), 所以先整個(gè)拿下來再進(jìn)行更改 $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: 在這追加其他選項(xiàng)的限制處理 // 更新數(shù)據(jù) update_option('classic_options', $options); // 否則, 重新獲取選項(xiàng)組, 也就是對(duì)數(shù)據(jù)進(jìn)行初始化 } else { ClassicOptions::getOptions(); } // 在后臺(tái) Design 頁面追加一個(gè)標(biāo)簽頁, 叫 Current Theme Options add_theme_page("Current Theme Options", "Current Theme Options", 'edit_themes', basename(__FILE__), array('ClassicOptions', 'display')); } /* -- 標(biāo)簽頁 -- */ function display() { $options = ClassicOptions::getOptions(); ?> <form action="#" method="post" enctype="multipart/form-data" name="classic_form" id="classic_form"> <div class="wrap"> <h2><?php _e('Current Theme Options', 'classic'); ?></h2> <!-- 公告欄 --> <table class="form-table"> <tbody> <tr valign="top"> <th scope="row"> <?php _e('Notice', 'classic'); ?> <br/> <small style="font-weight:normal;"><?php _e('HTML enabled', 'classic') ?></small> </th> <td> <!-- 是否顯示公告欄 --> <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" style="width:98%;font-size:12px;" class="code"><?php echo($options['notice_content']); ?></textarea> </label> </td> </tr> </tbody> </table> <!-- TODO: 在這里追加其他選項(xiàng)內(nèi)容 --> <!-- 提交按鈕 --> <p class="submit"> <input type="submit" name="classic_save" value="<?php _e('Update Options »', 'classic'); ?>" /> </p> </div> </form> <?php } } /** * 登記初始化方法 */ add_action('admin_menu', array('ClassicOptions', 'init')); ?>
前臺(tái)處理
要公告欄在首頁上顯示, 需要修改一下 index.php, 這個(gè)比較簡(jiǎn)單, 只是通過一些判斷語句決定東西要不要顯示出來而已. 當(dāng)然, 你可以進(jìn)行其他操作, 關(guān)鍵是獲取到選項(xiàng)的值, 并對(duì)它們進(jìn)行處理.
其實(shí)可以分為兩步:
獲取選項(xiàng) (對(duì)每個(gè) PHP 文件, 獲取一次就行了, 可以在文件頂部執(zhí)行)
對(duì)選項(xiàng)進(jìn)行處理 (這里判斷成立的話就將公告內(nèi)容顯示出來)
<!-- 獲取選項(xiàng) --> <?php $options = get_option('classic_options'); ?> <!-- 如果用戶選擇顯示公告欄, 并且公告欄有內(nèi)容, 則顯示出來 --> <?php if($options['notice'] && $options['notice_content']) : ?> <div id="notice"> <div class="content"><?php echo($options['notice_content']); ?></div> </div> <?php endif; ?>
可以使用管理項(xiàng)來控制側(cè)邊欄的數(shù)量, 在主題文件中獲取側(cè)邊欄的數(shù)量, 對(duì)不同的數(shù)量作出不同的處理, 以達(dá)到在不同數(shù)量側(cè)邊欄之間切換的目的.
// 側(cè)邊欄數(shù)量, 默認(rèn)為單側(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 支持
因?yàn)橐趩蝹?cè)邊欄和雙側(cè)邊欄中切換, 所以我們需要對(duì)不同的兩種模式定義兩個(gè) Widget 初始化的分支.
這里比較特殊, 為了在代碼中正確獲取 Widget 信息, 就算是單側(cè)邊欄也需要起一個(gè)別名. 就像代碼中的 Sidebar_single. 當(dāng)側(cè)邊欄個(gè)數(shù)為 1 時(shí), 登記 Sidebar_single. 當(dāng)側(cè)邊欄個(gè)數(shù)為 2 時(shí), 登記 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" class="widget %2$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" class="widget %2$s">', 'after_widget' => '</li>', 'before_title' => '<h3>', 'after_title' => '</h3>' )); register_sidebar(array( 'name' => 'Sidebar_top', 'before_widget' => '<li id="%1$s" class="widget %2$s">', 'after_widget' => '</li>', 'before_title' => '<h3>', 'after_title' => '</h3>' )); }
修改側(cè)邊欄結(jié)構(gòu)
首先要明確, 我們現(xiàn)在需要雙側(cè)邊欄結(jié)構(gòu). 怎樣將雙側(cè)邊欄變?yōu)閱蝹?cè)邊欄呢? 只要將前一個(gè)側(cè)邊欄的結(jié)束標(biāo)簽和后一個(gè)側(cè)邊欄的開始標(biāo)簽刪除, 兩個(gè)側(cè)邊欄就合并為一個(gè)側(cè)邊欄了. 單純的文字很難將我的想法和實(shí)現(xiàn)表達(dá)出來, 你可以接著看下面的代碼和示例圖片.
<ul class="sidebar_1"> <?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> <ul class="sidebar_2"> <?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)了. 它可以完美得實(shí)現(xiàn)單雙側(cè)邊欄間的切換. 但它是怎么工作的呢? 我將在后面用圖片列出它的 6 種可能出現(xiàn)的狀態(tài).
因?yàn)橹黝}已經(jīng)支持 Widget 了, 所以代碼中 function_exists('dynamic_sidebar') === true, 則 !function_exists('dynamic_sidebar') === false.
記得添加 Widget 支持時(shí)寫的代碼嗎? 側(cè)邊欄為 1 時(shí) sidebar_single 有效, 側(cè)邊欄為 2 時(shí), sidebar_top 和 sidebar_bottom 有效. 這是貫穿整個(gè)思路的關(guān)鍵.
備注:
- 紅色: 表示選中代碼的值是 false, 不通過
- 綠色: 表示選中代碼的值是 true, 通過
- 藍(lán)色: 表示選中部分將被選用的 widgets 所取代
- 灰色: 表示選中部分代碼將會(huì)失效
狀態(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
- WordPress主題制作中自定義頭部的相關(guān)PHP函數(shù)解析
- WordPress主題制作之模板文件的引入方法
- WordPress的主題編寫中獲取頭部模板和底部模板
- WordPress主題中添加文章列表頁頁碼導(dǎo)航的PHP代碼實(shí)例
- WordPress中使主題支持小工具以及添加插件啟用函數(shù)
- 編寫PHP腳本使WordPress的主題支持Widget側(cè)邊欄
- WordPress中編寫自定義存儲(chǔ)字段的相關(guān)PHP函數(shù)解析
- WordPress中給文章添加自定義字段及后臺(tái)編輯功能區(qū)域
- 在WordPress中獲取數(shù)據(jù)庫(kù)字段內(nèi)容和添加主題設(shè)置菜單
相關(guān)文章
php實(shí)現(xiàn)文本數(shù)據(jù)導(dǎo)入SQL SERVER
php將文本文件導(dǎo)入mysql我們經(jīng)常遇到,但是如果是導(dǎo)入到sqlserver又應(yīng)該如何操作呢,下面就給大家分享一下本人的操作方法,感覺效率還不錯(cuò),這里推薦給大家。2015-05-05docker-compose部署php項(xiàng)目實(shí)例詳解
在本篇文章里小編給大家整理了關(guān)于docker-compose部署php項(xiàng)目的相關(guān)實(shí)例以及代碼內(nèi)容,有需要的朋友們可以學(xué)習(xí)參考下。2019-07-07Laravel中基于Artisan View擴(kuò)展包創(chuàng)建及刪除應(yīng)用視圖文件的方法
這篇文章主要介紹了Laravel中基于Artisan View擴(kuò)展包創(chuàng)建及刪除應(yīng)用視圖文件的方法,簡(jiǎn)單分析了Laravel擴(kuò)展包的安裝及視圖的創(chuàng)建與刪除操作相關(guān)技巧,需要的朋友可以參考下2016-10-10通過php快速統(tǒng)計(jì)某個(gè)數(shù)據(jù)庫(kù)中每張表的數(shù)據(jù)量
在優(yōu)化數(shù)據(jù)庫(kù)的,或者在導(dǎo)入數(shù)據(jù)的時(shí)候,知道某個(gè)數(shù)據(jù)庫(kù)中哪張數(shù)據(jù)表的數(shù)據(jù)量最多,有時(shí)候?qū)ξ覀冞€是有幫助的2012-09-09淺談php中的訪問修飾符private、protected、public的作用范圍
下面小編就為大家?guī)硪黄獪\談php中的訪問修飾符private、protected、public的作用范圍。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11Yii數(shù)據(jù)讀取與跳轉(zhuǎn)參數(shù)傳遞用法實(shí)例分析
這篇文章主要介紹了Yii數(shù)據(jù)讀取與跳轉(zhuǎn)參數(shù)傳遞用法,結(jié)合實(shí)例形式分析了Yii中read()與readAll()方法的相關(guān)使用技巧,需要的朋友可以參考下2016-07-07