相思资源网 Design By www.200059.com

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

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

添加管理选项
后台处理
首先, 我们要修改 function.php, 主要的处理工作都在这个文件里面, 如果主题没有这个文件, 就创建一个吧. (没有 function.php 说明主题不支持 Widget, 可不是一个好习惯哦, 还是赶紧新建一个吧)
我的处理包括 3 大块: 获取选项, 初始化, 标签页操作界面. 这里只创建一个公告栏, 包括两个选项 (是否显示公告栏和公告栏内容). 如果要添加更多选项, 也只需要代码中 3 个 TODO 的位置上追加一些代码而已. 当然, 你还需要改一下选项名称, 将 Classic 和 classic 全部之换掉.

<"Current Theme Options", "Current Theme Options", 'edit_themes', basename(__FILE__), array('ClassicOptions', 'display'));
 }
 
 /* -- 标签页 -- */
 function display() {
 $options = ClassicOptions::getOptions();
"#" method="post" enctype="multipart/form-data" name="classic_form" id="classic_form">
 <div class="wrap">
 <h2><"form-table">
  <tbody>
  <tr valign="top">
   <th scope="row">
   <"font-weight:normal;"><"notice" type="checkbox" value="checkbox" <"checked='checked'"; "notice_content" cols="50" rows="10" id="notice_content" style="width:98%;font-size:12px;" class="code"><"submit">
  <input type="submit" name="classic_save" value="<" />
 </p>
 </div>
 
</form>
 
<"htmlcode">
<!-- 获取选项 -->
<"notice">
 <div class="content"><"htmlcode">
// 侧边栏数量, 默认为单侧边栏
$options['sidebar'] = 1;
// 获得最新提交的值
$options['sidebar'] = $_POST['sidebar'];
<select name="sidebar" size="1">
 <!-- 单侧边栏 -->
 <option value="1" <"2" <"htmlcode">
// 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>'
 ));
}

修改侧边栏结构

首先要明确, 我们现在需要双侧边栏结构. 怎样将双侧边栏变为单侧边栏呢"htmlcode">

<ul class="sidebar_1">
 <"sidebar_2">
 <"20151214162043469.png (600×223)" src="/UploadFiles/2021-04-02/20151214162043469.png">

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

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

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

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

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

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

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

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

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

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

标签:
WordPress,主题,侧边栏,PHP

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

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

暂无实现WordPress主题侧边栏切换功能的PHP脚本详解的评论...