浅草经年 發表於 2023-6-25 00:00:00

给WordPress的编辑后台添加提示框的代码实例分享

<p>
WordPress 3.5 新添加了一个提示框功能，可以创建一个提示框，然后指向任何元素，比如下边的例子：</p>
<p>
 </p>
<p>
本文就来教你怎么创建一个这样的提示框。</p>
<p>
首先需要添加提示框<img style="max-width:100%!important;height:auto!important;"title="给WordPress的编辑后台添加提示框的代码实例分享" alt="给WordPress的编辑后台添加提示框的代码实例分享" src="https://zhuji.jb51.net/uploads/img/202305/c508f079d7045b783e5512ac62e7a901.jpg">的脚本，这样才能使用提示框的 JS 方法。</p>
<div>
<div>
<div id="highlighter_323359">
<div>
 </div>
<div>
<span>?</span>
</div>
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td>
<div>
1</div>
</td>
</tr></tbody></table>
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td>
<div>
 </div>
<div>
2</div>
<div>
3</div>
<div>
4</div>
<div>
5</div>
<div>
6</div>
</td>
<td>
<div>
<div>
<code>//挂载提示框脚本</code>
</div>
<div>
<code>function</code> <code>Bing_admin_pointer_enqueue_scripts(){</code>
</div>
<div>
<code>  </code><code>wp_enqueue_style( </code><code>'wp-pointer'</code> <code>);</code>
</div>
<div>
<code>  </code><code>wp_enqueue_script( </code><code>'wp-pointer'</code> <code>);</code>
</div>
<div>
<code>}</code>
</div>
<div>
<code>add_action( </code><code>'admin_enqueue_scripts'</code><code>, </code><code>'Bing_admin_pointer_enqueue_scripts'</code> <code>);</code>
</div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<div id="codetool">
<div>
<textarea></textarea>
</div>
</div>
</div>
<p>
然后使用 pointer() 方法创建一个简单的提示框：</p>
<div>
<div>
<div id="highlighter_208231">
<div>
 </div>
<div>
<span>?</span>
</div>
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td>
<div>
1</div>
</td>
</tr></tbody></table>
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td>
<div>
 </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>
</td>
<td>
<div>
<div>
<code>/**</code>
</div>
<div>
<code>  </code><code>*WordPress 后台添加提示框</code>
</div>
<div>
<code>  </code><code>*</code><code>http://www.endskin.com/admin-help-box/</code>
</div>
<div>
<code>*/</code>
</div>
<div>
<code>function</code> <code>Bing_add_pointer_scripts(){</code>
</div>
<div>
<code>  </code><code>$content</code> <code>= </code><code>'&lt;h3&gt;请设置主题&lt;/h3&gt;'</code><code>;</code>
</div>
<div>
<code>  </code><code>$content</code> <code>.= </code><code>'&lt;p&gt;请为新主题进行简单的配置！'</code><code>;</code>
</div>
<div>
<code>?&gt;  </code>
</div>
<div>
<code>  </code><code>&lt;script type=</code><code>"text/javascript"</code><code>&gt;</code>
</div>
<div>
<code>  </code><code>//&lt;![CDATA[</code>
</div>
<div>
<code>  </code><code>jQuery(document).ready(</code><code>function</code><code>($){</code>
</div>
<div>
<code>    </code><code>$(</code><code>'#menu-appearance'</code><code>).pointer({</code><code>//可以指向任何元素</code>
</div>
<div>
<code>      </code><code>content: </code><code>'&lt;?php echo $content; ?&gt;'</code><code>,</code>
</div>
<div>
<code>      </code><code>position: {</code>
</div>
<div>
<code>        </code><code>edge: </code><code>'left'</code><code>,</code>
</div>
<div>
<code>        </code><code>align: </code><code>'center'</code>
</div>
<div>
<code>      </code><code>},</code>
</div>
<div>
<code>      </code><code>close: </code><code>function</code><code>(){</code>
</div>
<div>
<code>        </code><code>//提示框打开之后做的事情</code>
</div>
<div>
<code>      </code><code>}</code>
</div>
<div>
<code>    </code><code>}).pointer(</code><code>'open'</code><code>);</code>
</div>
<div>
<code>  </code><code>});</code>
</div>
<div>
<code>  </code><code>//]]&gt;</code>
</div>
<div>
<code>  </code><code>&lt;/script&gt;</code>
</div>
<div>
<code>&lt;?php</code>
</div>
<div>
<code>}</code>
</div>
<div>
<code>add_action( </code><code>'admin_print_footer_scripts'</code><code>, </code><code>'Bing_add_pointer_scripts'</code> <code>);&lt;br&gt;</code>
</div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<div id="codetool">
<div>
<textarea></textarea>
</div>
</div>
</div>
<p>
综合代码：</p>
<div>
<div>
<div id="highlighter_162281">
<div>
 </div>
<div>
<span>?</span>
</div>
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td>
<div>
1</div>
</td>
</tr></tbody></table>
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td>
<div>
 </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>
</td>
<td>
<div>
<div>
<code>/**</code>
</div>
<div>
<code>  </code><code>*WordPress 后台添加提示框</code>
</div>
<div>
<code>  </code><code>*</code><code>http://www.endskin.com/admin-help-box/</code>
</div>
<div>
<code>*/</code>
</div>
<div>
<code>function</code> <code>Bing_add_pointer_scripts(){</code>
</div>
<div>
<code>  </code><code>$content</code> <code>= </code><code>'&lt;h3&gt;请设置主题&lt;/h3&gt;'</code><code>;</code>
</div>
<div>
<code>  </code><code>$content</code> <code>.= </code><code>'&lt;p&gt;请为新主题进行简单的配置！'</code><code>;</code>
</div>
<div>
<code>?&gt;  </code>
</div>
<div>
<code>  </code><code>&lt;script type=</code><code>"text/javascript"</code><code>&gt;</code>
</div>
<div>
<code>  </code><code>//&lt;![CDATA[</code>
</div>
<div>
<code>  </code><code>jQuery(document).ready(</code><code>function</code><code>($){</code>
</div>
<div>
<code>    </code><code>$(</code><code>'#menu-appearance'</code><code>).pointer({</code><code>//可以指向任何元素</code>
</div>
<div>
<code>      </code><code>content: </code><code>'&lt;?php echo $content; ?&gt;'</code><code>,</code>
</div>
<div>
<code>      </code><code>position: {</code>
</div>
<div>
<code>        </code><code>edge: </code><code>'left'</code><code>,</code>
</div>
<div>
<code>        </code><code>align: </code><code>'center'</code>
</div>
<div>
<code>      </code><code>},</code>
</div>
<div>
<code>      </code><code>close: </code><code>function</code><code>(){</code>
</div>
<div>
<code>        </code><code>//提示框打开之后做的事情</code>
</div>
<div>
<code>      </code><code>}</code>
</div>
<div>
<code>    </code><code>}).pointer(</code><code>'open'</code><code>);</code>
</div>
<div>
<code>  </code><code>});</code>
</div>
<div>
<code>  </code><code>//]]&gt;</code>
</div>
<div>
<code>  </code><code>&lt;/script&gt;</code>
</div>
<div>
<code>&lt;?php</code>
</div>
<div>
<code>}</code>
</div>
<div>
<code>add_action( </code><code>'admin_print_footer_scripts'</code><code>, </code><code>'Bing_add_pointer_scripts'</code> <code>);</code>
</div>
<div>
<code> </code>
</div>
<div>
<code>//挂载提示框脚本</code>
</div>
<div>
<code>function</code> <code>Bing_admin_pointer_enqueue_scripts(){</code>
</div>
<div>
<code>  </code><code>wp_enqueue_style( </code><code>'wp-pointer'</code> <code>);</code>
</div>
<div>
<code>  </code><code>wp_enqueue_script( </code><code>'wp-pointer'</code> <code>);</code>
</div>
<div>
<code>}</code>
</div>
<div>
<code>add_action( </code><code>'admin_enqueue_scripts'</code><code>, </code><code>'Bing_admin_pointer_enqueue_scripts'</code> <code>);</code>
</div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<div id="codetool">
<div>
<textarea></textarea>
</div>
</div>
</div>
<p>
 </p>
頁: [1]
查看完整版本: 给WordPress的编辑后台添加提示框的代码实例分享