完成WordPress主题侧边栏切换性能的PHP脚本详解

2022-04-04 收藏 0 点赞 0 图文教程

作为主题的制造者, 除了完成性能, 展现界面, 还有责任使主题灵敏多变, 以满足更多人不同的需要.
可能一些冤家曾为选用双栏主题 (单侧边栏) 还是三栏主题 (双侧边栏) 而懊恼过. 上面咱们以 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();
?>
 
<form action="#" method="post" enctype="multipart/form-data" name="classic_form" id="classic_form">
 <p 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/>
   <!-- 布告栏内容 -->
   <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: 在这里追加其余选项内容 -->
 
 <!-- 提交按钮 -->
 <p class="submit">
  <input type="submit" name="classic_save" value="<?php _e('Update Options »', 'classic'); ?>" />
 </p>
 </p>
 
</form>
 
<?php
 }
}
 
/**
 * 注销初始化办法
 */
add_action('admin_menu', array('ClassicOptions', 'init'));
 
?>

前台解决

要布告栏在首页上显示, 需求修正一下 index.php, 这个比拟简略, 只是经过一些判别语句决议货色要不要显示进去而已. 当然, 你能够进行其余操作, 要害是获取到选项的值, 并对它们进行解决.
其实能够分为两步:

获取选项 (对每个 PHP 文件, 获取一次就行了, 能够在文件顶部执行)
对选项进行解决 (这里判别成立的话就将布告内容显示进去)

<!-- 获取选项 -->
<?php $options = get_option('classic_options'); ?>
 
<!-- 假如用户抉择显示布告栏, 并且布告栏有内容, 则显示进去 -->
<?php if($options['notice'] && $options['notice_content']) : ?>
 <p id="notice">
 <p class="content"><?php echo($options['notice_content']); ?></p>
 </p>
<?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" class="widget %2$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" 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>'
 ));
}

修正侧边栏构造

首先要明白, 咱们如今需求双侧边栏构造. 怎么将双侧边栏变为单侧边栏呢? 只需将前一个侧边栏的完结标签和后一个侧边栏的开端标签删除, 两个侧边栏就兼并为一个侧边栏了. 单纯的文字很难将我的想法和完成表白进去, 你能够接着看上面的代码和示例图片.

<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: 顶部侧边栏内容 -->
 <?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: 底部侧边栏内容 -->
 <?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 无效. 这是贯通整个思绪的要害.

备注: