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

起个名字吧 發表於 2023-7-9 00:00:00

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

<p>
作为主题的制作者, 除了实现功能, 展示界面, 还有责任使主题灵活多变, 以满足更多人不同的需求.<br>
可能一些朋友曾为选用双栏主题 (单侧边栏) 还是三栏主题 (双侧边栏) 而烦恼过. 下面我们以 classic 主题为例, 谈谈如何在主题中方便地切换单侧边栏和双侧边栏. 最后我会提供修改后的主题.</p>
<p>
<img style="max-width:100%!important;height:auto!important;"title="实现WordPress主题侧边栏切换功能的PHP脚本详解" alt="实现WordPress主题侧边栏切换功能的PHP脚本详解" src="https://zhuji.jb51.net/uploads/img/202305/d99fbd83aeb3bfbbaa654d99fd9d1d5a.jpg"></p>
<p>
<strong>添加管理选项</strong><br>
后台处理<br>
首先, 我们要修改 function.php, 主要的处理工作都在这个文件里面, 如果主题没有这个文件, 就创建一个吧. (没有 function.php 说明主题不支持 widget, 可不是一个好习惯哦, 还是赶紧新建一个吧）<br>
我的处理包括 3 大块: 获取选项, 初始化, 标签页操作界面. 这里只创建一个公告栏, 包括两个选项 (是否显示公告栏和公告栏内容). 如果要添加更多选项, 也只需要代码中 3 个 todo 的位置上追加一些代码而已. 当然, 你还需要改一下选项名称, 将 classic 和 classic 全部之换掉.</p>
<div>
<div>
<div id="highlighter_464784">
<div>
<span>?</span>
</div>
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td>
<div>
1</div>
<div>
2</div>
<div>
3</div>
<div>
4</div>
<div>
5</div>
<div>
6</div>
<div>
7</div>
<div>
8</div>
<div>
9</div>
<div>
10</div>
<div>
11</div>
<div>
12</div>
<div>
13</div>
<div>
14</div>
<div>
15</div>
<div>
16</div>
<div>
17</div>
<div>
18</div>
<div>
19</div>
<div>
20</div>
<div>
21</div>
<div>
22</div>
<div>
23</div>
<div>
24</div>
<div>
25</div>
<div>
26</div>
<div>
27</div>
<div>
28</div>
<div>
29</div>
<div>
30</div>
<div>
31</div>
<div>
32</div>
<div>
33</div>
<div>
34</div>
<div>
35</div>
<div>
36</div>
<div>
37</div>
<div>
38</div>
<div>
39</div>
<div>
40</div>
<div>
41</div>
<div>
42</div>
<div>
43</div>
<div>
44</div>
<div>
45</div>
<div>
46</div>
<div>
47</div>
<div>
48</div>
<div>
49</div>
<div>
50</div>
<div>
51</div>
<div>
52</div>
<div>
53</div>
<div>
54</div>
<div>
55</div>
<div>
56</div>
<div>
57</div>
<div>
58</div>
<div>
59</div>
<div>
60</div>
<div>
61</div>
<div>
62</div>
<div>
63</div>
<div>
64</div>
<div>
65</div>
<div>
66</div>
<div>
67</div>
<div>
68</div>
<div>
69</div>
<div>
70</div>
<div>
71</div>
<div>
72</div>
<div>
73</div>
<div>
74</div>
<div>
75</div>
<div>
76</div>
<div>
77</div>
<div>
78</div>
<div>
79</div>
<div>
80</div>
<div>
81</div>
<div>
82</div>
<div>
83</div>
<div>
84</div>
<div>
85</div>
<div>
86</div>
<div>
87</div>
<div>
88</div>
<div>
89</div>
<div>
90</div>
<div>
91</div>
<div>
92</div>
<div>
93</div>
<div>
94</div>
<div>
95</div>
<div>
96</div>
<div>
97</div>
<div>
98</div>
<div>
99</div>
<div>
100</div>
<div>
101</div>
<div>
102</div>
<div>
103</div>
<div>
104</div>
</td>
<td>
<div>
<div>
<code><?php</code>
</div>
<div>
<code>/**</code>
</div>
<div>
<code> </code><code>* 选项组类型</code>
</div>
<div>
<code> </code><code>*/</code>
</div>
<div>
<code>class</code> <code>classicoptions {</code>
</div>
<div>
<code> </code>
</div>
<div>
<code> </code><code>/* -- 获取选项组 -- */</code>
</div>
<div>
<code> </code><code>function</code> <code>getoptions() {</code>
</div>
<div>
<code> </code><code>// 在数据库中获取选项组</code>
</div>
<div>
<code> </code><code>$options</code> <code>= get_option(</code><code>'classic_options'</code><code>);</code>
</div>
<div>
<code> </code><code>// 如果数据库中不存在该选项组, 设定这些选项的默认值, 并将它们插入数据库</code>
</div>
<div>
<code> </code><code>if</code> <code>(!</code><code>is_array</code><code>(</code><code>$options</code><code>)) {</code>
</div>
<div>
<code>  </code><code>$options</code><code>[</code><code>'notice'</code><code>] = false;</code>
</div>
<div>
<code>  </code><code>$options</code><code>[</code><code>'notice_content'</code><code>] = </code><code>''</code><code>;</code>
</div>
<div>
<code>  </code><code>// todo: 在这里追加其他选项</code>
</div>
<div>
<code>  </code><code>update_option(</code><code>'classic_options'</code><code>, </code><code>$options</code><code>);</code>
</div>
<div>
<code> </code><code>}</code>
</div>
<div>
<code> </code><code>// 返回选项组</code>
</div>
<div>
<code> </code><code>return</code> <code>$options</code><code>;</code>
</div>
<div>
<code> </code><code>}</code>
</div>
<div>
<code> </code>
</div>
<div>
<code> </code><code>/* -- 初始化 -- */</code>
</div>
<div>
<code> </code><code>function</code> <code>init() {</code>
</div>
<div>
<code> </code><code>// 如果是 post 提交数据, 对数据进行限制, 并更新到数据库</code>
</div>
<div>
<code> </code><code>if</code><code>(isset(</code><code>$_post</code><code>[</code><code>'classic_save'</code><code>])) {</code>
</div>
<div>
<code>  </code><code>// 获取选项组, 因为有可能只修改部分选项, 所以先整个拿下来再进行更改</code>
</div>
<div>
<code>  </code><code>$options</code> <code>= classicoptions::getoptions();</code>
</div>
<div>
<code> </code>
</div>
<div>
<code>  </code><code>// 数据限制</code>
</div>
<div>
<code>  </code><code>if</code> <code>(</code><code>$_post</code><code>[</code><code>'notice'</code><code>]) {</code>
</div>
<div>
<code>  </code><code>$options</code><code>[</code><code>'notice'</code><code>] = (bool)true;</code>
</div>
<div>
<code>  </code><code>} </code><code>else</code> <code>{</code>
</div>
<div>
<code>  </code><code>$options</code><code>[</code><code>'notice'</code><code>] = (bool)false;</code>
</div>
<div>
<code>  </code><code>}</code>
</div>
<div>
<code>  </code><code>$options</code><code>[</code><code>'notice_content'</code><code>] = </code><code>stripslashes</code><code>(</code><code>$_post</code><code>[</code><code>'notice_content'</code><code>]);</code>
</div>
<div>
<code> </code>
</div>
<div>
<code>  </code><code>// todo: 在这追加其他选项的限制处理</code>
</div>
<div>
<code> </code>
</div>
<div>
<code>  </code><code>// 更新数据</code>
</div>
<div>
<code>  </code><code>update_option(</code><code>'classic_options'</code><code>, </code><code>$options</code><code>);</code>
</div>
<div>
<code> </code>
</div>
<div>
<code> </code><code>// 否则, 重新获取选项组, 也就是对数据进行初始化</code>
</div>
<div>
<code> </code><code>} </code><code>else</code> <code>{</code>
</div>
<div>
<code>  </code><code>classicoptions::getoptions();</code>
</div>
<div>
<code> </code><code>}</code>
</div>
<div>
<code> </code>
</div>
<div>
<code> </code><code>// 在后台 design 页面追加一个标签页, 叫 current theme options</code>
</div>
<div>
<code> </code><code>add_theme_page(</code><code>"current theme options"</code><code>, </code><code>"current theme options"</code><code>, </code><code>'edit_themes'</code><code>, </code><code>basename</code><code>(</code><code>__file__</code><code>), </code><code>array</code><code>(</code><code>'classicoptions'</code><code>, </code><code>'display'</code><code>));</code>
</div>
<div>
<code> </code><code>}</code>
</div>
<div>
<code> </code>
</div>
<div>
<code> </code><code>/* -- 标签页 -- */</code>
</div>
<div>
<code> </code><code>function</code> <code>display() {</code>
</div>
<div>
<code> </code><code>$options</code> <code>= classicoptions::getoptions();</code>
</div>
<div>
<code>?></code>
</div>
<div>
<code> </code>
</div>
<div>
<code><form action=</code><code>"#"</code> <code>method=</code><code>"post"</code> <code>enctype=</code><code>"multipart/form-data"</code> <code>name=</code><code>"classic_form"</code> <code>id=</code><code>"classic_form"</code><code>></code>
</div>
<div>
<code> </code><code><div </code><code>class</code><code>=</code><code>"wrap"</code><code>></code>
</div>
<div>
<code> </code><code><h2><?php _e(</code><code>'current theme options'</code><code>, </code><code>'classic'</code><code>); ?></h2></code>
</div>
<div>
<code> </code>
</div>
<div>
<code> </code><code></code>
</div>
<div>
<code> </code><code><table </code><code>class</code><code>=</code><code>"form-table"</code><code>></code>
</div>
<div>
<code>  </code><code><tbody></code>
</div>
<div>
<code>  </code><code><tr valign=</code><code>"top"</code><code>></code>
</div>
<div>
<code>   </code><code><th scope=</code><code>"row"</code><code>></code>
</div>
<div>
<code>   </code><code><?php _e(</code><code>'notice'</code><code>, </code><code>'classic'</code><code>); ?></code>
</div>
<div>
<code>   </code><code><br/></code>
</div>
<div>
<code>   </code><code><small style=</code><code>"font-weight:normal;"</code><code>><?php _e(</code><code>'html enabled'</code><code>, </code><code>'classic'</code><code>) ?></small></code>
</div>
<div>
<code>   </code><code></th></code>
</div>
<div>
<code>   </code><code><td></code>
</div>
<div>
<code>   </code><code></code>
</div>
<div>
<code>   </code><code><label></code>
</div>
<div>
<code>    </code><code><input name=</code><code>"notice"</code> <code>type=</code><code>"checkbox"</code> <code>value=</code><code>"checkbox"</code> <code><?php </code><code>if</code><code>(</code><code>$options</code><code>[</code><code>'notice'</code><code>]) </code><code>echo</code> <code>"checked='checked'"</code><code>; ?> /></code>
</div>
<div>
<code>    </code><code><?php _e(</code><code>'show notice.'</code><code>, </code><code>'classic'</code><code>); ?></code>
</div>
<div>
<code>   </code><code></label></code>
</div>
<div>
<code>   </code><code><br/></code>
</div>
<div>
<code>   </code><code></code>
</div>
<div>
<code>   </code><code><label></code>
</div>
<div>
<code>    </code><code><textarea name=</code><code>"notice_content"</code> <code>cols=</code><code>"50"</code> <code>rows=</code><code>"10"</code> <code>id=</code><code>"notice_content"</code> <code>style=</code><code>"width:98%;font-size:12px;"</code> <code>class</code><code>=</code><code>"code"</code><code>><?php </code><code>echo</code><code>(</code><code>$options</code><code>[</code><code>'notice_content'</code><code>]); ?></textarea></code>
</div>
<div>
<code>   </code><code></label></code>
</div>
<div>
<code>   </code><code></td></code>
</div>
<div>
<code>  </code><code></tr></code>
</div>
<div>
<code>  </code><code></tbody></code>
</div>
<div>
<code> </code><code></table></code>
</div>
<div>
<code> </code>
</div>
<div>
<code> </code><code></code>
</div>
<div>
<code> </code>
</div>
<div>
<code> </code><code></code>
</div>
<div>
<code> </code><code><p </code><code>class</code><code>=</code><code>"submit"</code><code>></code>
</div>
<div>
<code>  </code><code><input type=</code><code>"submit"</code> <code>name=</code><code>"classic_save"</code> <code>value=</code><code>"<?php _e('update options »', 'classic'); ?>"</code> <code>/></code>
</div>
<div>
<code> </code><code></p></code>
</div>
<div>
<code> </code><code></div></code>
</div>
<div>
<code> </code>
</div>
<div>
<code></form></code>
</div>
<div>
<code> </code>
</div>
<div>
<code><?php</code>
</div>
<div>
<code> </code><code>}</code>
</div>
<div>
<code>}</code>
</div>
<div>
<code> </code>
</div>
<div>
<code>/**</code>
</div>
<div>
<code> </code><code>* 登记初始化方法</code>
</div>
<div>
<code> </code><code>*/</code>
</div>
<div>
<code>add_action(</code><code>'admin_menu'</code><code>, </code><code>array</code><code>(</code><code>'classicoptions'</code><code>, </code><code>'init'</code><code>));</code>
</div>
<div>
<code> </code>
</div>
<div>
<code>?></code>
</div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
</div>
<p>
前台处理</p>
<p>
要公告栏在首页上显示, 需要修改一下 index.php, 这个比较简单, 只是通过一些判断语句决定东西要不要显示出来而已. 当然, 你可以进行其他操作, 关键是获取到选项的值, 并对它们进行处理.<br>
其实可以分为两步:</p>
<p>
获取选项 (对每个 php 文件, 获取一次就行了, 可以在文件顶部执行)<br>
对选项进行处理 (这里判断成立的话就将公告内容显示出来)</p>
<div>
<div>
<div id="highlighter_848435">
<div>
<span>?</span>
</div>
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td>
<div>
1</div>
<div>
2</div>
<div>
3</div>
<div>
4</div>
<div>
5</div>
<div>
6</div>
<div>
7</div>
<div>
8</div>
<div>
9</div>
</td>
<td>
<div>
<div>
<code></code>
</div>
<div>
<code><?php </code><code>$options</code> <code>= get_option(</code><code>'classic_options'</code><code>); ?></code>
</div>
<div>
<code> </code>
</div>
<div>
<code></code>
</div>
<div>
<code><?php </code><code>if</code><code>(</code><code>$options</code><code>[</code><code>'notice'</code><code>] && </code><code>$options</code><code>[</code><code>'notice_content'</code><code>]) : ?></code>
</div>
<div>
<code> </code><code><div id=</code><code>"notice"</code><code>></code>
</div>
<div>
<code> </code><code><div </code><code>class</code><code>=</code><code>"content"</code><code>><?php </code><code>echo</code><code>(</code><code>$options</code><code>[</code><code>'notice_content'</code><code>]); ?></div></code>
</div>
<div>
<code> </code><code></div></code>
</div>
<div>
<code><?php </code><code>endif</code><code>; ?></code>
</div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
</div>
<p>
可以使用管理项来控制侧边栏的数量, 在主题文件中获取侧边栏的数量, 对不同的数量作出不同的处理, 以达到在不同数量侧边栏之间切换的目的.</p>
<div>
<div>
<div id="highlighter_186756">
<div>
<span>?</span>
</div>
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td>
<div>
1</div>
<div>
2</div>
<div>
3</div>
<div>
4</div>
<div>
5</div>
<div>
6</div>
<div>
7</div>
<div>
8</div>
<div>
9</div>
<div>
10</div>
<div>
11</div>
</td>
<td>
<div>
<div>
<code>// 侧边栏数量, 默认为单侧边栏</code>
</div>
<div>
<code>$options</code><code>[</code><code>'sidebar'</code><code>] = 1;</code>
</div>
<div>
<code>// 获得最新提交的值</code>
</div>
<div>
<code>$options</code><code>[</code><code>'sidebar'</code><code>] = </code><code>$_post</code><code>[</code><code>'sidebar'</code><code>];</code>
</div>
<div>
<code><select name=</code><code>"sidebar"</code> <code>size=</code><code>"1"</code><code>></code>
</div>
<div>
<code> </code><code></code>
</div>
<div>
<code> </code><code><option value=</code><code>"1"</code> <code><?php </code><code>if</code><code>(</code><code>$options</code><code>[</code><code>'sidebar'</code><code>] != 2) </code><code>echo</code> <code>' selected '</code><code>; ?>><?php _e(</code><code>'single'</code><code>, </code><code>'classic'</code><code>); ?></option></code>
</div>
<div>
<code> </code><code></code>
</div>
<div>
<code> </code><code><option value=</code><code>"2"</code> <code><?php </code><code>if</code><code>(</code><code>$options</code><code>[</code><code>'sidebar'</code><code>] == 2) </code><code>echo</code> <code>' selected '</code><code>; ?>><?php _e(</code><code>'double'</code><code>, </code><code>'classic'</code><code>); ?></option></code>
</div>
<div>
<code></select></code>
</div>
<div>
<code> </code><code><?php _e(</code><code>'sidebar(s)'</code><code>, </code><code>'classic'</code><code>); ?>.</code>
</div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
</div>
<p>
<strong>添加 widget 支持</strong></p>
<p>
因为要在单侧边栏和双侧边栏中切换, 所以我们需要对不同的两种模式定义两个 widget 初始化的分支.<br>
这里比较特殊, 为了在代码中正确获取 widget 信息, 就算是单侧边栏也需要起一个别名. 就像代码中的 sidebar_single. 当侧边栏个数为 1 时, 登记 sidebar_single. 当侧边栏个数为 2 时, 登记 sidebar_top 和 sidebar_bottom.</p>
<div>
<div>
<div id="highlighter_672885">
<div>
<span>?</span>
</div>
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td>
<div>
1</div>
<div>
2</div>
<div>
3</div>
<div>
4</div>
<div>
5</div>
<div>
6</div>
<div>
7</div>
<div>
8</div>
<div>
9</div>
<div>
10</div>
<div>
11</div>
<div>
12</div>
<div>
13</div>
<div>
14</div>
<div>
15</div>
<div>
16</div>
<div>
17</div>
<div>
18</div>
<div>
19</div>
<div>
20</div>
<div>
21</div>
<div>
22</div>
<div>
23</div>
<div>
24</div>
<div>
25</div>
<div>
26</div>
<div>
27</div>
<div>
28</div>
<div>
29</div>
<div>
30</div>
</td>
<td>
<div>
<div>
<code>// widgets</code>
</div>
<div>
<code>$options</code> <code>= get_option(</code><code>'classic_options'</code><code>);</code>
</div>
<div>
<code> </code>
</div>
<div>
<code>// 单侧边栏</code>
</div>
<div>
<code>if</code><code>(function_exists(</code><code>'register_sidebar'</code><code>) && </code><code>$options</code><code>[</code><code>'sidebar'</code><code>] == 1) {</code>
</div>
<div>
<code> </code><code>register_sidebar(</code><code>array</code><code>(</code>
</div>
<div>
<code> </code><code>'name'</code> <code>=> </code><code>'sidebar_single'</code><code>,</code>
</div>
<div>
<code> </code><code>'before_widget'</code> <code>=> </code><code>'<li id="%1$s">'</code><code>,</code>
</div>
<div>
<code> </code><code>'after_widget'</code> <code>=> </code><code>'</li>'</code><code>,</code>
</div>
<div>
<code> </code><code>'before_title'</code> <code>=> </code><code>'<h3>'</code><code>,</code>
</div>
<div>
<code> </code><code>'after_title'</code> <code>=> </code><code>'</h3>'</code>
</div>
<div>
<code> </code><code>));</code>
</div>
<div>
<code> </code>
</div>
<div>
<code>// 双侧边栏</code>
</div>
<div>
<code>} </code><code>else</code> <code>if</code><code>(function_exists(</code><code>'register_sidebar'</code><code>) && </code><code>$options</code><code>[</code><code>'sidebar'</code><code>] == 2) {</code>
</div>
<div>
<code> </code><code>register_sidebar(</code><code>array</code><code>(</code>
</div>
<div>
<code>  </code><code>'name'</code> <code>=> </code><code>'sidebar_bottom'</code><code>,</code>
</div>
<div>
<code>  </code><code>'before_widget'</code> <code>=> </code><code>'<li id="%1$s">'</code><code>,</code>
</div>
<div>
<code>  </code><code>'after_widget'</code> <code>=> </code><code>'</li>'</code><code>,</code>
</div>
<div>
<code>  </code><code>'before_title'</code> <code>=> </code><code>'<h3>'</code><code>,</code>
</div>
<div>
<code>  </code><code>'after_title'</code> <code>=> </code><code>'</h3>'</code>
</div>
<div>
<code> </code><code>));</code>
</div>
<div>
<code> </code><code>register_sidebar(</code><code>array</code><code>(</code>
</div>
<div>
<code>  </code><code>'name'</code> <code>=> </code><code>'sidebar_top'</code><code>,</code>
</div>
<div>
<code>  </code><code>'before_widget'</code> <code>=> </code><code>'<li id="%1$s">'</code><code>,</code>
</div>
<div>
<code>  </code><code>'after_widget'</code> <code>=> </code><code>'</li>'</code><code>,</code>
</div>
<div>
<code>  </code><code>'before_title'</code> <code>=> </code><code>'<h3>'</code><code>,</code>
</div>
<div>
<code>  </code><code>'after_title'</code> <code>=> </code><code>'</h3>'</code>
</div>
<div>
<code> </code><code>));</code>
</div>
<div>
<code>}</code>
</div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
</div>
<p>
<strong>修改侧边栏结构</strong></p>
<p>
首先要明确, 我们现在需要双侧边栏结构. 怎样将双侧边栏变为单侧边栏呢? 只要将前一个侧边栏的结束标签和后一个侧边栏的开始标签删除, 两个侧边栏就合并为一个侧边栏了. 单纯的文字很难将我的想法和实现表达出来, 你可以接着看下面的代码和示例图片.</p>
<div>
<div>
<div id="highlighter_576316">
<div>
<span>?</span>
</div>
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td>
<div>
1</div>
<div>
2</div>
<div>
3</div>
<div>
4</div>
<div>
5</div>
<div>
6</div>
<div>
7</div>
<div>
8</div>
<div>
9</div>
<div>
10</div>
<div>
11</div>
<div>
12</div>
<div>
13</div>
<div>
14</div>
<div>
15</div>
<div>
16</div>
<div>
17</div>
<div>
18</div>
</td>
<td>
<div>
<div>
<code><ul </code><code>class</code><code>=</code><code>"sidebar_1"</code><code>></code>
</div>
<div>
<code> </code><code><?php </code><code>if</code> <code>( !function_exists(</code><code>'dynamic_sidebar'</code><code>) || !dynamic_sidebar(</code><code>'sidebar_single'</code><code>) ) : </code><code>// single ?></code>
</div>
<div>
<code> </code>
</div>
<div>
<code> </code><code><?php </code><code>if</code> <code>( !function_exists(</code><code>'dynamic_sidebar'</code><code>) || !dynamic_sidebar(</code><code>'sidebar_top'</code><code>) ) : </code><code>// top ?></code>
</div>
<div>
<code></code>
</div>
<div>
<code> </code><code><?php </code><code>endif</code><code>; </code><code>// top ?></code>
</div>
<div>
<code> </code>
</div>
<div>
<code> </code><code><?php </code><code>if</code> <code>(</code><code>$options</code><code>[</code><code>'sidebar'</code><code>] >= 2) : ?></code>
</div>
<div>
<code></ul></code>
</div>
<div>
<code><ul </code><code>class</code><code>=</code><code>"sidebar_2"</code><code>></code>
</div>
<div>
<code> </code><code><?php </code><code>endif</code><code>; ?></code>
</div>
<div>
<code> </code>
</div>
<div>
<code> </code><code><?php </code><code>if</code> <code>( !function_exists(</code><code>'dynamic_sidebar'</code><code>) || !dynamic_sidebar(</code><code>'sidebar_bottom'</code><code>) ) : </code><code>// bottom ?></code>
</div>
<div>
<code></code>
</div>
<div>
<code> </code><code><?php </code><code>endif</code><code>; </code><code>// bottom ?></code>
</div>
<div>
<code> </code>
</div>
<div>
<code> </code><code><?php </code><code>endif</code><code>; </code><code>// single ?></code>
</div>
<div>
<code></ul></code>
</div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
</div>
<p>
ok, 这就是侧边栏代码结构了. 它可以完美得实现单双侧边栏间的切换. 但它是怎么工作的呢? 我将在后面用图片列出它的 6 种可能出现的状态.<br>
因为主题已经支持 widget 了, 所以代码中 function_exists('dynamic_sidebar') === true, 则 !function_exists('dynamic_sidebar') === false.<br>
记得添加 widget 支持时写的代码吗? 侧边栏为 1 时 sidebar_single 有效, 侧边栏为 2 时, sidebar_top 和 sidebar_bottom 有效. 这是贯穿整个思路的关键.</p>
<p>
备注:</p>
<ul>
<li>
红色: 表示选中代码的值是 false, 不通过</li>
<li>
绿色: 表示选中代码的值是 true, 通过</li>
<li>
蓝色: 表示选中部分将被选用的 widgets 所取代</li>
<li>
灰色: 表示选中部分代码将会失效</li>
</ul>
<p>
状态一: 单侧边栏, 没使用 widget</p>
<p>
<img style="max-width:100%!important;height:auto!important;"title="实现WordPress主题侧边栏切换功能的PHP脚本详解" alt="实现WordPress主题侧边栏切换功能的PHP脚本详解" src="https://zhuji.jb51.net/uploads/img/202305/e334de81f93ac8755e1c3386ea8451d5.jpg"></p>
<p>
状态二:双侧边栏, 没使用 widget</p>
<p>
<img style="max-width:100%!important;height:auto!important;"title="实现WordPress主题侧边栏切换功能的PHP脚本详解" alt="实现WordPress主题侧边栏切换功能的PHP脚本详解" src="https://zhuji.jb51.net/uploads/img/202305/46a86d0c0dcae2aab18ff3b8f9ef866f.jpg"></p>
<p>
状态三: 单侧边栏, 使用 widget</p>
<p>
<img style="max-width:100%!important;height:auto!important;"title="实现WordPress主题侧边栏切换功能的PHP脚本详解" alt="实现WordPress主题侧边栏切换功能的PHP脚本详解" src="https://zhuji.jb51.net/uploads/img/202305/360c1863f5f2d8cd8bc260b0c111f027.jpg"></p>
<p>
状态四: 双侧边栏, 顶部侧边栏使用 widget</p>
<p>
<img style="max-width:100%!important;height:auto!important;"title="实现WordPress主题侧边栏切换功能的PHP脚本详解" alt="实现WordPress主题侧边栏切换功能的PHP脚本详解" src="https://zhuji.jb51.net/uploads/img/202305/973a6291fda8f2614a62a967dab9fff7.jpg"></p>
<p>
状态五: 双侧边栏, 底部侧边栏使用 widget</p>
<p>
<img style="max-width:100%!important;height:auto!important;"title="实现WordPress主题侧边栏切换功能的PHP脚本详解" alt="实现WordPress主题侧边栏切换功能的PHP脚本详解" src="https://zhuji.jb51.net/uploads/img/202305/745f5b91cff27a1d7ec056f033d1dcf0.jpg"></p>
<p>
状态六: 双侧边栏, 顶部和底部侧边栏都使用 widget</p>
<p>
<img style="max-width:100%!important;height:auto!important;"title="实现WordPress主题侧边栏切换功能的PHP脚本详解" alt="实现WordPress主题侧边栏切换功能的PHP脚本详解" src="https://zhuji.jb51.net/uploads/img/202305/3b8d5a7edc09512f01d1d35e05e2d8c4.jpg"></p>

頁: [1]

琼殿技术论坛's Archiver

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