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

   2015-12-19 0
核心提示:这篇文章主要介绍了实现WordPress主题侧边栏切换功能的PHP脚本详解,包括为WordPress主题添加管理选项的方法,需要的朋友可以参考下

作为主题的制作者, 除了实现功能, 展示界面, 还有责任使主题灵活多变, 以满足更多人不同的需求.
可能一些朋友曾为选用双栏主题 (单侧边栏) 还是三栏主题 (双侧边栏) 而烦恼过. 下面我们以 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脚本详解

 
反对 0举报 0 评论 0
 

免责声明:本文仅代表作者个人观点,与乐学笔记(本网)无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
    本网站有部分内容均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责,若因作品内容、知识产权、版权和其他问题,请及时提供相关证明等材料并与我们留言联系,本网站将在规定时间内给予删除等相关处理.

  • 一个可以放wordpress博客的PHP国外免费空间速度
    www.000webhost.com/www.000webhost.com/ 提供了250M的免费空间 每月100G的流量,并且MYsql数据库支持5用户。虽然不不能让你永久免费使用下去,但至少到2012年都是免费的。详情网站上有说明。我的测试博客地址:http://codyan.000webhost.com
    02-09
  • 定制WooCommerce的账户详情(用户资料)页,增加自定义字段,修改默认字段
    定制WooCommerce的账户详情(用户资料)页,增加
    WooCommerce是一款非常流行的WordPress电商插件。然而也听到很多人反映,它并太符合中国用户的使用习惯。国内用户的电商网站使用习惯大多是被淘宝培养出来的,因此如果要基于WordPress + WooCommerce搭建一个面向国人的小型电商网站,为提高用户体验,还是要
    01-06 PHPWordPress
  • WordPress.com 已切换到 PHP7,性能显著提升
    WordPress.com 已切换到 PHP7,性能显著提升
    据了解,目前 WordPress.com 已经全部切换到 PHP 7,性能显著提升。 如下所示,CPU、latency(延迟)有了大幅度的提升与改进。WordPress是一种使用 PHP 语言开发的博客平台,用户可以在支持PHP和MySQL 数据库的服务器上架设自己的网志。也可以把 WordPress 当
  • 负载均衡一个PHP应用
    负载均衡一个PHP应用
    1、mariadb、nfs服务器的设置 (centos 7)[root@localhost ~]# rpm -q rpcbindrpcbind-0.2.0-32.el7.x86_64[root@localhost ~]# rpm -q nfs-utils (默认nfs已经安装的)nfs-utils-1.3.0-0.21.el7.x86_64[root@localhost ~]# yum -y install mariadb-server [r
    10-31 PHPWordPress
  • 增加文章列表缩略图
    增加文章列表缩略图
    前几天脑抽又折腾了一阵子博客的样式,本来想着简简单单修改下就算完事,没成想这一折腾就刹不住车了,改了文章列表改边栏,改了边栏改 head 和 footer,折腾的一六八开,等我陆陆续续都改完后再整体一看…彻底傻眼,这是什么鬼,果真没那金刚钻就别揽这瓷器
    10-01 WordPressCSS
  • WordPress升级PHP7后白屏
    把bmclapi安顿到其他服务器上后,这台服务器终于有内存跑第二个fpm了,所以决定安装一下php7,让dz跑在5.5的fpm上,单独给wp上7安装完成后发现首页白屏,但是error_log里没有输出,即使打开WP_DEBUG,也只有几个Notice和Deprecated,按理来说不应该会导致白屏
  • WordPress分页伪静态加html后缀
    本文给大家分享的是在使用WordPress的过程中,发现其内容页分页的形式非常的不友好,于是就动手进行修改的过程以及详细代码,非常的实用,推荐给大家。
  • CentOS下搭建PHP环境与WordPress博客程序的全流
    这篇文章主要介绍了CentOS下搭建PHP环境与WordPress博客程序的全流程总结,这里我们以Apache服务器程序和MySQL数据库程序为例进行讲解,需要的朋友可以参考下
  • 是 WordPress 让 PHP 更流行了 而不是框架
    最流行的是 WordPress,比其他应用都流行很多,垫底的是 Zend Framework
  • WordPress主题制作中自定义头部的相关PHP函数解
    这篇文章主要介绍了WordPress主题制作中自定义头部的相关PHP函数解析,包括header_image()函数和get_custom_header()函数的用法讲解,需要的朋友可以参考下
点击排行