实现WordPress主题侧边栏切换功能的PHP脚本详解


Posted in PHP onDecember 14, 2015

作为主题的制作者, 除了实现功能, 展示界面, 还有责任使主题灵活多变, 以满足更多人不同的需求.
可能一些朋友曾为选用双栏主题 (单侧边栏) 还是三栏主题 (双侧边栏) 而烦恼过. 下面我们以 Classic 主题为例, 谈谈如何在主题中方便地切换单侧边栏和双侧边栏. 最后我会提供修改后的主题.

实现WordPress主题侧边栏切换功能的PHP脚本详解

添加管理选项
后台处理
首先, 我们要修改 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">
 <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/>
   <!-- 公告栏内容 -->
   <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>
 </div>
 
</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']) : ?>
 <div id="notice">
 <div class="content"><?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" 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 有效. 这是贯穿整个思路的关键.

备注:

  • 红色: 表示选中代码的值是 false, 不通过
  • 绿色: 表示选中代码的值是 true, 通过
  • 蓝色: 表示选中部分将被选用的 widgets 所取代
  • 灰色: 表示选中部分代码将会失效

状态一: 单侧边栏, 没使用 Widget

实现WordPress主题侧边栏切换功能的PHP脚本详解

状态二:双侧边栏, 没使用 Widget

实现WordPress主题侧边栏切换功能的PHP脚本详解

状态三: 单侧边栏, 使用 Widget

实现WordPress主题侧边栏切换功能的PHP脚本详解

状态四: 双侧边栏, 顶部侧边栏使用 Widget

实现WordPress主题侧边栏切换功能的PHP脚本详解

状态五: 双侧边栏, 底部侧边栏使用 Widget

实现WordPress主题侧边栏切换功能的PHP脚本详解

状态六: 双侧边栏, 顶部和底部侧边栏都使用 Widget

实现WordPress主题侧边栏切换功能的PHP脚本详解

PHP 相关文章推荐
基于mysql的bbs设计(四)
Oct 09 PHP
PHP Header用于页面跳转要注意的几个问题总结
Oct 03 PHP
ecshop 订单确认中显示省市地址信息的方法
Mar 15 PHP
php购物网站支付paypal使用方法
Nov 28 PHP
php数组合并array_merge()函数使用注意事项
Jun 19 PHP
PHP页面转UTF-8中文编码乱码的解决办法
Oct 20 PHP
两款万能的php分页类
Nov 12 PHP
PHP在线调试执行的实现方法(附demo源码)
Apr 28 PHP
PHP实现简易blog的制作
Oct 24 PHP
thinkphp中AJAX返回ajaxReturn()方法分析
Dec 06 PHP
yii框架无限极分类的实现方法
Apr 08 PHP
用php如何解决大文件分片上传问题
Jul 07 PHP
php生成curl命令行的方法
Dec 14 #PHP
编写PHP脚本使WordPress的主题支持Widget侧边栏
Dec 14 #PHP
给WordPress中的留言加上楼层号的PHP代码实例
Dec 14 #PHP
WordPress导航菜单的滚动和淡入淡出效果的实现要点
Dec 14 #PHP
php类中的$this,static,final,const,self这几个关键字使用方法
Dec 14 #PHP
Yii2隐藏frontend/web和backend/web的方法
Dec 12 #PHP
使用PHP+AJAX让WordPress动态加载文章的教程
Dec 11 #PHP
You might like
PHP版自动生成文章摘要
2008/07/23 PHP
特详细的PHPMYADMIN简明安装教程
2008/08/01 PHP
PHP中的Streams详细介绍
2014/11/12 PHP
JavaScript 版本自动生成文章摘要
2008/07/23 Javascript
javascript中length属性的探索
2011/07/31 Javascript
onclick与listeners的执行先后问题详细解剖
2013/01/07 Javascript
自动刷新网页,自动刷新当前页面,JS调用
2013/06/24 Javascript
浅析hasOwnProperty方法的应用
2013/11/20 Javascript
js父窗口关闭时子窗口随之关闭完美解决方案
2014/04/29 Javascript
javascript模拟php函数in_array
2015/04/27 Javascript
jquery实现最简单的滑动菜单效果代码
2015/09/12 Javascript
java中String类型变量的赋值问题介绍
2016/03/23 Javascript
jQuery图片渐变特效的简单实现
2016/06/25 Javascript
微信小程序(应用号)开发新闻客户端实例
2016/10/24 Javascript
AngularJS实现的简单拖拽功能示例
2018/01/02 Javascript
微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
2018/12/20 Javascript
基于layui内置模块(element常用元素的操作)
2019/09/20 Javascript
[01:59][TI9趣味视频] 全明星赛奖励
2019/08/23 DOTA
Redis使用watch完成秒杀抢购功能的代码
2018/05/07 Python
Sanic框架请求与响应实例分析
2018/07/16 Python
为什么str(float)在Python 3中比Python 2返回更多的数字
2018/10/16 Python
详解python Todo清单实战
2018/11/01 Python
Python 获取ftp服务器文件时间的方法
2019/07/02 Python
python过滤中英文标点符号的实例代码
2019/07/15 Python
Django配置MySQL数据库的完整步骤
2019/09/07 Python
python怎么删除缓存文件
2020/07/19 Python
Python使用pycharm导入pymysql教程
2020/09/16 Python
Python+logging输出到屏幕将log日志写入文件
2020/11/11 Python
德国50岁以上交友网站:Lebensfreunde
2020/03/18 全球购物
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的
2015/07/24 面试题
经典优秀个人求职信分享
2013/12/12 职场文书
商场开业庆典策划方案
2014/06/02 职场文书
慰问信范文
2015/02/14 职场文书
学校财务管理制度
2015/08/04 职场文书
2016年幼儿园庆六一开幕词
2016/03/04 职场文书
利用python做表格数据处理
2021/04/13 Python