伊江南 發表於 2023-6-6 00:00:00

在WordPress的后台中添加顶级菜单和子菜单的函数详解

<p>
<strong>添加设置页面-add_menu_page函数</strong><br>
add_menu_page(),这个函数是往后台添加顶级菜单先,也就是和“外观”、“插件”等一样的顶级菜单。</p>
<p>
函数介绍如下:</p>
<div>
<div>
<div id="highlighter_456126">
<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>
</td>
<td>
<div>
<div>
<code>&lt;?php  </code>
</div>
<div>
<code>add_menu_page( </code><code>$page_title</code><code>, </code><code>$menu_title</code><code>, </code><code>$capability</code><code>, </code><code>$menu_slug</code><code>, </code><code>$function</code><code>, </code><code>$icon_url</code><code>, </code><code>$position</code> <code>);  </code>
</div>
<div>
<code>//page_title页面title标签信息  </code>
</div>
<div>
<code>//$menu_title 菜单标题  </code>
</div>
<div>
<code>//capability 权限  </code>
</div>
<div>
<code>//menu_slug 别名  </code>
</div>
<div>
<code>//function 执行函数  </code>
</div>
<div>
<code>//icon_url 菜单图标url地址  </code>
</div>
<div>
<code>//position 此菜单项在菜单中的位置,警告:如果两个菜单项的位置属性相同,其中一个可能要被覆盖  </code>
</div>
<div>
<code>?&gt; </code>
</div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<div id="codetool">
<div>
<textarea></textarea>
</div>
</div>
</div>
<p>
对于function参数,这个参数一般是函数名,如果在类中,要调用类的方法,使用array(类名,函数名)这样的形式调用。如果这个参数为空的话,menu_slug参数可以是一个文件路径。</p>
<p>
上面函数的position参数,默认的菜单项位置属性如下:</p>
<div>
<div>
<div id="highlighter_128960">
<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>
</td>
<td>
<div>
<div>
<code>2 Dashboard</code>
</div>
<div>
<code> </code><code>4 Separator</code>
</div>
<div>
<code> </code><code>5 Posts</code>
</div>
<div>
<code> </code><code>10 Media</code>
</div>
<div>
<code> </code><code>15 Links</code>
</div>
<div>
<code> </code><code>20 Pages</code>
</div>
<div>
<code> </code><code>25 Comments</code>
</div>
<div>
<code> </code><code>59 Separator</code>
</div>
<div>
<code> </code><code>60 Appearance</code>
</div>
<div>
<code> </code><code>65 Plugins</code>
</div>
<div>
<code> </code><code>70 Users</code>
</div>
<div>
<code> </code><code>75 Tools</code>
</div>
<div>
<code> </code><code>80 Settings</code>
</div>
<div>
<code> </code><code>99 Separator</code>
</div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<div id="codetool">
<div>
<textarea></textarea>
</div>
</div>
</div>
<p>
好了,还是以实例来讲解,这样才能李菊福嘛。在默认的Twenty Ten主题中新建一个myfuntions.php ,然后在functions.php文件中include用编辑器打开我们的myfunctions.php,<br>
添加新代码:</p>
<div>
<div>
<div id="highlighter_629886">
<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>
</td>
<td>
<div>
<div>
<code>&lt;?php  </code>
</div>
<div>
<code>function</code> <code>test_function(){  </code>
</div>
<div>
<code>  </code><code>add_menu_page( </code><code>'title标题'</code><code>, </code><code>'菜单标题'</code><code>, </code><code>'edit_themes'</code><code>, </code><code>'ashu_slug'</code><code>,</code><code>'display_function'</code><code>,</code><code>''</code><code>,6);  </code>
</div>
<div>
<code>}  </code>
</div>
<div>
<code> </code>
</div>
<div>
<code>function</code> <code>display_function(){  </code>
</div>
<div>
<code>  </code><code>echo</code> <code>'&lt;h1&gt;这是设置页面&lt;/h1&gt;'</code><code>;  </code>
</div>
<div>
<code>}  </code>
</div>
<div>
<code>add_action(</code><code>'admin_menu'</code><code>, </code><code>'test_function'</code><code>);  </code>
</div>
<div>
<code>?&gt; </code>
</div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<div id="codetool">
<div>
<textarea></textarea>
</div>
</div>
</div>
<p>
可以看到,菜单位置是6,比较一下可发现,它将会在“文章”的后面,看:</p>
<p>
<img style="max-width:100%!important;height:auto!important;"title="在WordPress的后台中添加顶级菜单和子菜单的函数详解" alt="在WordPress的后台中添加顶级菜单和子菜单的函数详解" src="https://zhuji.jb51.net/uploads/img/202305/e005ec059bba36f28383e48f5c50b812.jpg"></p>
<p>
已经出现了一个顶级菜单页面了。。。</p>
<p>
<strong>添加子菜单项-add_submenu_page</strong><br>
添加子菜单项的函数如下:</p>
<div>
<div>
<div id="highlighter_665501">
<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>&lt;?php  </code>
</div>
<div>
<code>add_submenu_page( </code><code>$parent_slug</code><code>, </code><code>$page_title</code><code>, </code><code>$menu_title</code><code>, </code><code>$capability</code><code>, </code><code>$menu_slug</code><code>, </code><code>$function</code> <code>);  </code>
</div>
<div>
<code>//parent_slug-父级菜单项的别名  </code>
</div>
<div>
<code>//page_title--页面的title信息  </code>
</div>
<div>
<code>//menu_title-菜单标题  </code>
</div>
<div>
<code>//capability-权限  </code>
</div>
<div>
<code>//menu_slug-别名  </code>
</div>
<div>
<code>//function-执行的函数  </code>
</div>
<div>
<code>?&gt; </code>
</div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<div id="codetool">
<div>
<textarea></textarea>
</div>
</div>
</div>
<p>
其实有了前两篇教程,这个函数的用法无需多言了。</p>
<p>
实例,还是用上两篇教程中的文件(在默认的Twenty Ten主题中新建一个myfuntions.php ,然后在functions.php文件中include新文件)用编辑器打开我们的myfunctions.php,上一篇教程中我们已经添加了一个顶级菜单项,今天我们就在这个顶级菜单项的基础上添加一个子菜单项,保留昨天的代码,补充新的代码,之后myfunctions.php中的代码是这样:</p>
<div>
<div>
<div id="highlighter_169582">
<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>
</td>
<td>
<div>
<div>
<code>&lt;?php   </code>
</div>
<div>
<code>function</code> <code>test_function(){   </code>
</div>
<div>
<code>  </code><code>add_menu_page( </code><code>'title标题'</code><code>, </code><code>'菜单标题'</code><code>, </code><code>'edit_themes'</code><code>, </code><code>'ashu_slug'</code><code>,</code><code>'display_function'</code><code>,</code><code>''</code><code>,6);   </code>
</div>
<div>
<code>}   </code>
</div>
<div>
<code>   </code>
</div>
<div>
<code>function</code> <code>display_function(){   </code>
</div>
<div>
<code>  </code><code>echo</code> <code>'&lt;h1&gt;这是设置页面&lt;/h1&gt;'</code><code>;   </code>
</div>
<div>
<code>}   </code>
</div>
<div>
<code>add_action(</code><code>'admin_menu'</code><code>, </code><code>'test_function'</code><code>);  </code>
</div>
<div>
<code> </code>
</div>
<div>
<code>//以下是添加子菜单项代码  </code>
</div>
<div>
<code>add_action(</code><code>'admin_menu'</code><code>, </code><code>'add_my_custom_submenu_page'</code><code>);  </code>
</div>
<div>
<code> </code>
</div>
<div>
<code>function</code> <code>add_my_custom_submenu_page() {  </code>
</div>
<div>
<code>  </code><code>//顶级菜单的slug是ashu_slug  </code>
</div>
<div>
<code>  </code><code>add_submenu_page( </code><code>'ashu_slug'</code><code>, </code><code>'子菜单'</code><code>, </code><code>'子菜单'</code><code>, </code><code>'edit_themes'</code><code>, </code><code>'ashu-submenu-page'</code><code>, </code><code>'my_submenu_page_display'</code> <code>);  </code>
</div>
<div>
<code>}  </code>
</div>
<div>
<code> </code>
</div>
<div>
<code>function</code> <code>my_submenu_page_display() {  </code>
</div>
<div>
<code>  </code><code>echo</code> <code>'&lt;h3&gt;子菜单项的输出代码&lt;/h3&gt;'</code><code>;  </code>
</div>
<div>
<code> </code>
</div>
<div>
<code>}  </code>
</div>
<div>
<code> </code>
</div>
<div>
<code>?&gt; </code>
</div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<div id="codetool">
<div>
<textarea></textarea>
</div>
</div>
</div>
<p>
效果图是这样:</p>
<p>
<img style="max-width:100%!important;height:auto!important;"title="在WordPress的后台中添加顶级菜单和子菜单的函数详解" alt="在WordPress的后台中添加顶级菜单和子菜单的函数详解" src="https://zhuji.jb51.net/uploads/img/202305/aafde37a018be5121d8ab9473c662ced.jpg"></p>
<p>
OK,添加子菜单项完成。。</p>
頁: [1]
查看完整版本: 在WordPress的后台中添加顶级菜单和子菜单的函数详解