// 侧边栏数量, 默认为单侧边栏 $options['sidebar'] = 1; // 获得最新提交的值 $options['sidebar'] = $_POST['sidebar']; <select 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>', '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>', 'after_widget' => '</li>', 'before_title' => '<h3>', 'after_title' => '</h3>' )); register_sidebar(array( 'name' => 'Sidebar_top', 'before_widget' => '<li>', 'after_widget' => '</li>', 'before_title' => '<h3>', 'after_title' => '</h3>' )); }
修改侧边栏结构
首先要明确, 我们现在需要双侧边栏结构. 怎样将双侧边栏变为单侧边栏呢? 只要将前一个侧边栏的结束标签和后一个侧边栏的开始标签删除, 两个侧边栏就合并为一个侧边栏了. 单纯的文字很难将我的想法和实现表达出来, 你可以接着看下面的代码和示例图片.
<ul> <?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> <?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
状态二:双侧边栏, 没使用 Widget
状态三: 单侧边栏, 使用 Widget
状态四: 双侧边栏, 顶部侧边栏使用 Widget
状态五: 双侧边栏, 底部侧边栏使用 Widget
状态六: 双侧边栏, 顶部和底部侧边栏都使用 Widget
您可能感兴趣的文章: