實現WordPress主題側邊欄切換功能的PHP指令碼詳解_php執行個體

作為主題的製作者, 除了實現功能, 展示介面, 還有責任使主題靈活多變, 以滿足更多人不同的需求.
可能一些朋友曾為選用雙欄主題 (單側邊欄) 還是三欄主題 (雙側邊欄) 而煩惱過. 下面我們以 Classic 主題為例, 談談如何在主題中方便地切換單側邊欄和雙側邊欄. 最後我會提供修改後的主題.

添加管理選項
幕後處理
首先, 我們要修改 function.php, 主要的處理工作都在這個檔案裡面, 如果主題沒有這個檔案, 就建立一個吧. (沒有 function.php 說明主題不支援 Widget, 可不是一個好習慣哦, 還是趕緊建立一個吧）
我的處理包括 3 大塊: 擷取選項, 初始化, 標籤頁操作介面. 這裡只建立一個公告欄, 包括兩個選項 (是否顯示公告欄和公告欄內容). 如果要添加更多選項, 也只需要代碼中 3 個 TODO 的位置上追加一些代碼而已. 當然, 你還需要改一下選項名稱, 將 Classic 和 classic 全部之換掉.

<?php/** * 選項群組類型 */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();?>  <?php }} /** * 登記初始化方法 */add_action('admin_menu', array('ClassicOptions', 'init')); ?>

前台處理

要公告欄在首頁上顯示, 需要修改一下 index.php, 這個比較簡單, 只是通過一些判斷語句決定東西要不要顯示出來而已. 當然, 你可以進行其他動作, 關鍵是擷取到選項的值, 並對它們進行處理.
其實可以分為兩步:

擷取選項 (對每個 PHP 檔案, 擷取一次就行了, 可以在檔案頂部執行)
對選項進行處理 (這裡判斷成立的話就將公告內容顯示出來)

<?php $options = get_option('classic_options'); ?> <?php if($options['notice'] && $options['notice_content']) : ?>  <?php echo($options['notice_content']); ?> <?php endif; ?>

可以使用管理項來控制側邊欄的數量, 在主題檔案中擷取側邊欄的數量, 對不同的數量作出不同的處理, 以達到在不同數量側邊欄之間切換的目的.

// 側邊欄數量, 預設為單側邊欄$options['sidebar'] = 1;// 獲得最新提交的值$options['sidebar'] = $_POST['sidebar'];  ><?php _e('Single', 'classic'); ?>  ><?php _e('Double', 'classic'); ?> <?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' => '
', 'after_widget' => '
', 'before_title' => '
', 'after_title' => '
' )); // 雙側邊欄} else if(function_exists('register_sidebar') && $options['sidebar'] == 2) { register_sidebar(array(  'name' => 'Sidebar_bottom',  'before_widget' => '
',  'after_widget' => '
',  'before_title' => '
',  'after_title' => '
' )); register_sidebar(array(  'name' => 'Sidebar_top',  'before_widget' => '
',  'after_widget' => '
',  'before_title' => '
',  'after_title' => '
' ));}

修改側邊欄結構

首先要明確, 我們現在需要雙側邊欄結構. 怎樣將雙側邊欄變為單側邊欄呢? 只要將前一個側邊欄的結束標籤和後一個側邊欄的開始標籤刪除, 兩個側邊欄就合并為一個側邊欄了. 單純的文字很難將我的想法和實現表達出來, 你可以接著看下面的代碼和樣本圖片.

 

   <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar_single') ) : // single ?>  <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar_top') ) : // top ?> <?php endif; // top ?>  <?php if ($options['sidebar'] >= 2) : ?>
 
 

   <?php endif; ?>  <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar_bottom') ) : // bottom ?> <?php endif; // bottom ?>  <?php endif; // single ?>
 

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

