在正确的工具区域内显示你创建的WordPress小工具（5）

文本是《一步步创建你的第一个 WordPress 小工具（共5篇）》专题的第 5 篇。阅读本文前，建议先阅读前面的文章：

创建一个WordPress小工具（1）

编写和注册你的 WordPress 小工具（2）

构建你的 WordPress 小工具（3）

为你的 WordPress 小工具创建表单（4）

创建你的WordPress小工具的最后一步是在网站上显示其输出结果。要做到这一点，你需要进一步编写WP_Widget 类。

你需要做的是

跟随本教程，你需要

• 安装一个WordPress开发环境
• 一个代码编辑器
• 来自前期教程“为你的 WordPress 小工具创建表单”中的相关代码
• 来自我之前的教程“在WordPress中创建上下文相关的侧栏导航”中的相关代码

编辑小工具的输出结果

这个过程分两步：一，在WordPress小工具之外添加一个函数，确认初始页面有效；二，在 WP_Widget 类中编辑 widget 函数。

添加“初始函数”

这个函数是从我之前创建一个“上下文相关的侧栏导航”插件的课程中直接引入的。

在你的 WP_Widget 类上，将以下函数添加到你的插件文件中。

1. <?<span%20class=”pln”>php
2. function<span%20class=”pln”> tutsplus_check_for_page_tree<span%20class=”pun”>() {
4. //首先检测当前访问的是否是一个页面
5. if<span%20class=”pun”>(<span%20class=”pln”> is_page<span%20class=”pun”>() ) {
7. global<span%20class=”pln”> $post<span%20class=”pun”>;
9. // 接着检测该页面是否有父级页面
10. if (<span%20class=”pln”> $post<span%20class=”pun”>-><span%20class=”pln”>post_parent <span%20class=”pun”>){
12. // 获取父级页面名单
13. $parents <span%20class=”pun”>=<span%20class=”pln”> array_reverse<span%20class=”pun”>(<span%20class=”pln”> get_post_ancestors<span%20class=”pun”>(<span%20class=”pln”> $post<span%20class=”pun”>-><span%20class=”pln”>ID <span%20class=”pun”>) );
15. // 获取最顶级页面
16. return<span%20class=”pln”> $parents<span%20class=”pun”>[<span%20class=”lit”>0<span%20class=”pun”>];
18. }
20. // 返回ID – 如果存在父级页面，就返回最顶级的页面ID，否则返回当前页面ID, or the current page if not
21. return<span%20class=”pln”> $post<span%20class=”pun”>-><span%20class=”pln”>ID<span%20class=”pun”>;
23. }
25. }
26. ?>

稍后当定义在小工具上运行的查询功能时，这个函数也会用到。

编辑widget函数

下一步你需要做的便是在你的插件文件中编辑你之前就建立的但还未填充的widget 函数。从定义基于表单输入的变量开始：

1. function<span%20class=”pln”> widget<span%20class=”pun”>(<span%20class=”pln”> $args<span%20class=”pun”>,<span%20class=”pln”> $instance <span%20class=”pun”>) {
3. extract<span%20class=”pun”>(<span%20class=”pln”> $args <span%20class=”pun”>);
4. echo $before_widget<span%20class=”pun”>;
5. echo $before_title <span%20class=”pun”>. ‘In this section:’ .<span%20class=”pln”> $after_title<span%20class=”pun”>;
7. }

下一步，添加查询和输出，函数编辑如下：

1. function<span%20class=”pln”> widget<span%20class=”pun”>(<span%20class=”pln”> $args<span%20class=”pun”>,<span%20class=”pln”> $instance <span%20class=”pun”>) {
3. // kick things off
4. extract<span%20class=”pun”>(<span%20class=”pln”> $args <span%20class=”pun”>);
5. echo $before_widget<span%20class=”pun”>;
6. echo $before_title <span%20class=”pun”>. ‘In this section:’ .<span%20class=”pln”> $after_title<span%20class=”pun”>;
8. // run a query if on a page
9. if (<span%20class=”pln”> is_page<span%20class=”pun”>() ) {
11. // run the tutsplus_check_for_page_tree function to fetch top level page
12. $ancestor <span%20class=”pun”>=<span%20class=”pln”> tutsplus_check_for_page_tree<span%20class=”pun”>();
14. // set the arguments for children of the ancestor page
15. $args <span%20class=”pun”>=<span%20class=”pln”> array<span%20class=”pun”>(
16. ‘child_of’ =><span%20class=”pln”> $ancestor<span%20class=”pun”>,
17. ‘depth’ =><span%20class=”pln”> $instance<span%20class=”pun”>[ ‘depth’ ],
18. ‘title_li’ => ”<span%20class=”pun”>,
19. );
21. // set a value for get_pages to check if it’s empty
22. $list_pages <span%20class=”pun”>=<span%20class=”pln”> get_pages<span%20class=”pun”>(<span%20class=”pln”> $args <span%20class=”pun”>);
24. // check if $list_pages has values
25. if<span%20class=”pun”>(<span%20class=”pln”> $list_pages <span%20class=”pun”>) {
27. // open a list with the ancestor page at the top
28. ?>
29. <<span%20class=”pln”>ul <span%20class=”kwd”>class<span%20class=”pun”>=<span%20class=”str”>”page-tree”<span%20class=”pun”>>
30. <?<span%20class=”pln”>php <span%20class=”com”>// list ancestor page ?>
31. <<span%20class=”pln”>li <span%20class=”kwd”>class<span%20class=”pun”>=<span%20class=”str”>”ancestor”<span%20class=”pun”>>
32. <<span%20class=”pln”>a href<span%20class=”pun”>=<span%20class=”str”>”<?php echo get_permalink( $ancestor ); ?>”<span%20class=”pun”>><?<span%20class=”pln”>php echo get_the_title<span%20class=”pun”>(<span%20class=”pln”> $ancestor <span%20class=”pun”>); ?></<span%20class=”pln”>a<span%20class=”pun”>>
33. </<span%20class=”pln”>li<span%20class=”pun”>>
35. <?<span%20class=”pln”>php
36. // use wp_list_pages to list subpages of ancestor or current page
37. wp_list_pages<span%20class=”pun”>(<span%20class=”pln”> $args <span%20class=”pun”>);;
40. // close the page-tree list
41. ?>
42. </<span%20class=”pln”>ul<span%20class=”pun”>>
44. <?<span%20class=”pln”>php
45. }
46. }
49. }

首先这会检查我们是否在当前页面上，然后根据之前相关函数的输出和 $depth变量的值（在WordPress小工具表单中已设置好），定义list_pages()函数的参数。

现在保存你的小工具并检查你的网址。无论是否添加小工具，你的目录应该会在网页上显示出来。

最终的插件

现在你终于拥有一个完整的WordPress小工具插件了！

回顾你在5个教程中所涉及到的内容，插件代码全文应如下所示：

1. <?<span%20class=”pln”>php
2. /*Plugin Name: List Subpages Widget
3. Description: This widget checks if the current page has parent or child pages and if so, outputs a list of the highest ancestor page and its descendants. This file supports part 5 of the series to create the widget and doesn’t give you a functioning widget.
4. Version: 0.5
5. Author: Rachel McCollin
6. Author URI: http://rachelmccollin.com
7. License: GPLv2
8. */
9. ?>
10. <?<span%20class=”pln”>php
11. ?>
12. <?<span%20class=”pln”>php
13. /*******************************************************************************
14. function tutsplus_check_for_page_tree() – checks if the current page is in a page tree.
15. *******************************************************************************/
16. ?>
17. <?<span%20class=”pln”>php
18. function<span%20class=”pln”> tutsplus_check_for_page_tree<span%20class=”pun”>() {
20. //start by checking if we’re on a page
21. if<span%20class=”pun”>(<span%20class=”pln”> is_page<span%20class=”pun”>() ) {
23. global<span%20class=”pln”> $post<span%20class=”pun”>;
25. // next check if the page has parents
26. if (<span%20class=”pln”> $post<span%20class=”pun”>-><span%20class=”pln”>post_parent <span%20class=”pun”>){
28. // fetch the list of ancestors
29. $parents <span%20class=”pun”>=<span%20class=”pln”> array_reverse<span%20class=”pun”>(<span%20class=”pln”> get_post_ancestors<span%20class=”pun”>(<span%20class=”pln”> $post<span%20class=”pun”>-><span%20class=”pln”>ID <span%20class=”pun”>) );
31. // get the top level ancestor
32. return<span%20class=”pln”> $parents<span%20class=”pun”>[<span%20class=”lit”>0<span%20class=”pun”>];
34. }
36. // return the id – this will be the topmost ancestor if there is one, or the current page if not
37. return<span%20class=”pln”> $post<span%20class=”pun”>-><span%20class=”pln”>ID<span%20class=”pun”>;
39. }
41. }
42. ?>
43. <?<span%20class=”pln”>php
44. class Tutsplus_List_Pages_Widget extends<span%20class=”pln”> WP_Widget <span%20class=”pun”>{
46. function<span%20class=”pln”> __construct<span%20class=”pun”>() {
48. parent<span%20class=”pun”>::<span%20class=”pln”>__construct<span%20class=”pun”>(
50. // base ID of the widget
51. ‘tutsplus_list_pages_widget’<span%20class=”pun”>,
53. // name of the widget
54. __<span%20class=”pun”>(<span%20class=”str”>’List Related Pages'<span%20class=”pun”>, ‘tutsplus’ ),
56. // widget options
57. array <span%20class=”pun”>(
58. ‘description’ =><span%20class=”pln”> __<span%20class=”pun”>( ‘Identifies where the current page is in the site structure and displays a list of pages in the same section of the site. Only works on Pages.’<span%20class=”pun”>, ‘tutsplus’ )
59. )
61. );
63. }
65. function<span%20class=”pln”> form<span%20class=”pun”>(<span%20class=”pln”> $instance <span%20class=”pun”>) {
67. $defaults <span%20class=”pun”>=<span%20class=”pln”> array<span%20class=”pun”>(
68. ‘depth’ => ‘-1’
69. );
70. $depth <span%20class=”pun”>=<span%20class=”pln”> $instance<span%20class=”pun”>[ ‘depth’ ];
72. // markup for form <span%20class=”pun”>?>
73. <p>
74. <label for=”<span%20class=”pun”><?<span%20class=”pln”>php echo $this<span%20class=”pun”>-><span%20class=”pln”>get_field_id<span%20class=”pun”>( ‘depth’ ); ?><span%20class=”pln”>”>Depth of list:<span%20class=”tag”></label>
75. <input class=”widefat” type=”text” id=”<span%20class=”pun”><?<span%20class=”pln”>php echo $this<span%20class=”pun”>-><span%20class=”pln”>get_field_id<span%20class=”pun”>( ‘depth’ ); ?><span%20class=”pln”>” name=”<span%20class=”pun”><?<span%20class=”pln”>php echo $this<span%20class=”pun”>-><span%20class=”pln”>get_field_name<span%20class=”pun”>( ‘depth’ ); ?><span%20class=”pln”>” value=”<span%20class=”pun”><?<span%20class=”pln”>php echo esc_attr<span%20class=”pun”>(<span%20class=”pln”> $depth <span%20class=”pun”>); ?><span%20class=”pln”>”>
76. </p>
78. <?<span%20class=”pln”>php
79. }
81. function<span%20class=”pln”> update<span%20class=”pun”>(<span%20class=”pln”> $new_instance<span%20class=”pun”>,<span%20class=”pln”> $old_instance <span%20class=”pun”>) {
83. $instance <span%20class=”pun”>=<span%20class=”pln”> $old_instance<span%20class=”pun”>;
84. $instance<span%20class=”pun”>[ ‘depth’ ] =<span%20class=”pln”> strip_tags<span%20class=”pun”>(<span%20class=”pln”> $new_instance<span%20class=”pun”>[ ‘depth’ ] );
85. return<span%20class=”pln”> $instance<span%20class=”pun”>;
87. }
89. function<span%20class=”pln”> widget<span%20class=”pun”>(<span%20class=”pln”> $args<span%20class=”pun”>,<span%20class=”pln”> $instance <span%20class=”pun”>) {
91. // kick things off
92. extract<span%20class=”pun”>(<span%20class=”pln”> $args <span%20class=”pun”>);
93. echo $before_widget<span%20class=”pun”>;
94. echo $before_title <span%20class=”pun”>. ‘In this section:’ .<span%20class=”pln”> $after_title<span%20class=”pun”>;
96. // run a query if on a page
97. if (<span%20class=”pln”> is_page<span%20class=”pun”>() ) {
99. // run the tutsplus_check_for_page_tree function to fetch top level page
100. $ancestor <span%20class=”pun”>=<span%20class=”pln”> tutsplus_check_for_page_tree<span%20class=”pun”>();
102. // set the arguments for children of the ancestor page
103. $args <span%20class=”pun”>=<span%20class=”pln”> array<span%20class=”pun”>(
104. ‘child_of’ =><span%20class=”pln”> $ancestor<span%20class=”pun”>,
105. ‘depth’ =><span%20class=”pln”> $instance<span%20class=”pun”>[ ‘depth’ ],
106. ‘title_li’ => ”<span%20class=”pun”>,
107. );
109. // set a value for get_pages to check if it’s empty
110. $list_pages <span%20class=”pun”>=<span%20class=”pln”> get_pages<span%20class=”pun”>(<span%20class=”pln”> $args <span%20class=”pun”>);
112. // check if $list_pages has values
113. if<span%20class=”pun”>(<span%20class=”pln”> $list_pages <span%20class=”pun”>) {
115. // open a list with the ancestor page at the top
116. ?>
117. <ul class<span%20class=”pun”>=<span%20class=”atv”>”page-tree”<span%20class=”tag”>>
118. <?<span%20class=”pln”>php <span%20class=”com”>// list ancestor page <span%20class=”pun”>?>
119. <li class<span%20class=”pun”>=<span%20class=”atv”>”ancestor”<span%20class=”tag”>>
120. <a href=”<span%20class=”pun”><?<span%20class=”pln”>php echo get_permalink<span%20class=”pun”>(<span%20class=”pln”> $ancestor <span%20class=”pun”>); ?><span%20class=”pln”>”><span%20class=”pun”><?<span%20class=”pln”>php echo get_the_title<span%20class=”pun”>(<span%20class=”pln”> $ancestor <span%20class=”pun”>); ?><span%20class=”tag”></a>
121. </li>
123. <?<span%20class=”pln”>php
124. // use wp_list_pages to list subpages of ancestor or current page
125. wp_list_pages<span%20class=”pun”>(<span%20class=”pln”> $args <span%20class=”pun”>);;
128. // close the page-tree list
129. ?>
130. </ul>
132. <?<span%20class=”pln”>php
133. }
134. }
137. }
139. }
140. ?>
141. <?<span%20class=”pln”>php
142. /*******************************************************************************
143. function tutsplus_register_list_pages_widget() – registers the widget.
144. *******************************************************************************/
145. ?>
146. <?<span%20class=”pln”>php
147. function<span%20class=”pln”> tutsplus_register_list_pages_widget<span%20class=”pun”>() {
149. register_widget<span%20class=”pun”>( ‘Tutsplus_List_Pages_Widget’ );
151. }
152. add_action<span%20class=”pun”>( ‘widgets_init’<span%20class=”pun”>, ‘tutsplus_register_list_pages_widget’ );
153. ?>

小结

创建一个WordPress小工具应该包含以下几个步骤：

• 注册你的小工具
• 创建类来保存widget函数
• 编写一个construct函数来构建你的小工具
• 为小工具界面上的表单编写一个form函数
• 编写一个update函数以便小工具能够在表单中及时更新
• 编写一个定义输出的 widget函数

一旦你完成了以上步骤，你就创建了一个可以正常运行的WordPress小工具，并且你还可以根据自己的需要加以改编哦。