如何使用php實現(xiàn)WordPress主題側(cè)邊欄切換功能

發(fā)布時間：2021-08-27 11:04:05 來源：億速云閱讀：149 作者：小新欄目：開發(fā)技術(shù)

這篇文章將為大家詳細(xì)講解有關(guān)如何使用php實現(xiàn)WordPress主題側(cè)邊欄切換功能，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

效果

添加管理選項
后臺處理
首先, 我們要修改 function.php, 主要的處理工作都在這個文件里面, 如果主題沒有這個文件, 就創(chuàng)建一個吧. (沒有 function.php 說明主題不支持 Widget, 可不是一個好習(xí)慣哦, 還是趕緊新建一個吧）
我的處理包括 3 大塊: 獲取選項, 初始化, 標(biāo)簽頁操作界面. 這里只創(chuàng)建一個公告欄, 包括兩個選項 (是否顯示公告欄和公告欄內(nèi)容). 如果要添加更多選項, 也只需要代碼中 3 個 TODO 的位置上追加一些代碼而已. 當(dāng)然, 你還需要改一下選項名稱, 將 Classic 和 classic 全部之換掉.

<?php
/**
 * 選項組類型
 */
class ClassicOptions {
 
 /* -- 獲取選項組 -- */
 function getOptions() {
 // 在數(shù)據(jù)庫中獲取選項組
 $options = get_option('classic_options');
 // 如果數(shù)據(jù)庫中不存在該選項組, 設(shè)定這些選項的默認(rèn)值, 并將它們插入數(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ù)進(jìn)行限制, 并更新到數(shù)據(jù)庫
 if(isset($_POST['classic_save'])) {
  // 獲取選項組, 因為有可能只修改部分選項, 所以先整個拿下來再進(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: 在這追加其他選項的限制處理
 
  // 更新數(shù)據(jù)
  update_option('classic_options', $options);
 
 // 否則, 重新獲取選項組, 也就是對數(shù)據(jù)進(jìn)行初始化
 } else {
  ClassicOptions::getOptions();
 }
 
 // 在后臺 Design 頁面追加一個標(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">
 <h3><?php _e('Current Theme Options', 'classic'); ?></h3>
 
 <!-- 公告欄 -->
 <table class="form-table">
  <tbody>
  <tr valign="top">
   <th scope="row">
   <?php _e('Notice', 'classic'); ?>
   <br/>
   <small ><?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"  class="code"><?php echo($options['notice_content']); ?></textarea>
   </label>
   </td>
  </tr>
  </tbody>
 </table>
 
 <!-- TODO: 在這里追加其他選項內(nèi)容 -->
 
 <!-- 提交按鈕 -->
 <p class="submit">
  <input type="submit" name="classic_save" value="<?php _e('Update Options &raquo;', 'classic'); ?>" />
 </p>
 </div>
 
</form>
 
<?php
 }
}
 
/**
 * 登記初始化方法
 */
add_action('admin_menu', array('ClassicOptions', 'init'));
 
?>

前臺處理

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

獲取選項 (對每個 PHP 文件, 獲取一次就行了, 可以在文件頂部執(zhí)行)
對選項進(jìn)行處理 (這里判斷成立的話就將公告內(nèi)容顯示出來)

<!-- 獲取選項 -->
<?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; ?>

可以使用管理項來控制側(cè)邊欄的數(shù)量, 在主題文件中獲取側(cè)邊欄的數(shù)量, 對不同的數(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 支持

因為要在單側(cè)邊欄和雙側(cè)邊欄中切換, 所以我們需要對不同的兩種模式定義兩個 Widget 初始化的分支.
這里比較特殊, 為了在代碼中正確獲取 Widget 信息, 就算是單側(cè)邊欄也需要起一個別名. 就像代碼中的 Sidebar_single. 當(dāng)側(cè)邊欄個數(shù)為 1 時, 登記 Sidebar_single. 當(dāng)側(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" class="widget %2$s">',
 'after_widget' => '</li>',
 'before_title' => '<h4>',
 'after_title' => '</h4>'
 ));
 
// 雙側(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' => '<h4>',
  'after_title' => '</h4>'
 ));
 register_sidebar(array(
  'name' => 'Sidebar_top',
  'before_widget' => '<li id="%1$s" class="widget %2$s">',
  'after_widget' => '</li>',
  'before_title' => '<h4>',
  'after_title' => '</h4>'
 ));
}

修改側(cè)邊欄結(jié)構(gòu)

首先要明確, 我們現(xiàn)在需要雙側(cè)邊欄結(jié)構(gòu). 怎樣將雙側(cè)邊欄變?yōu)閱蝹?cè)邊欄呢? 只要將前一個側(cè)邊欄的結(jié)束標(biāo)簽和后一個側(cè)邊欄的開始標(biāo)簽刪除, 兩個側(cè)邊欄就合并為一個側(cè)邊欄了. 單純的文字很難將我的想法和實現(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)了. 它可以完美得實現(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)鍵.

備注: