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

站长资源 2024/11/27 佚名

2 0 1

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

添加管理选项
后台处理
首先, 我们要修改 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



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



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



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



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




                                
                                
                                    WordPress,主题,侧边栏,PHP