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

文本是《一步步创建你的第一个 WordPress 小工具(共5篇)》专题的第 5 篇。阅读本文前,建议先阅读前面的文章:

创建一个WordPress小工具(1)

编写和注册你的 WordPress 小工具(2)

构建你的 WordPress 小工具(3)

为你的 WordPress 小工具创建表单(4)

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

你需要做的是

跟随本教程,你需要

编辑小工具的输出结果

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

添加“初始函数”

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

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

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

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

编辑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”>) {
  2. extract<span%20class=”pun”>(<span%20class=”pln”> $args <span%20class=”pun”>);
  3. echo $before_widget<span%20class=”pun”>;
  4. echo $before_title <span%20class=”pun”>. ‘In this section:’ .<span%20class=”pln”> $after_title<span%20class=”pun”>;
  5. }

下一步,添加查询和输出,函数编辑如下:

  1. function<span%20class=”pln”> widget<span%20class=”pun”>(<span%20class=”pln”> $args<span%20class=”pun”>,<span%20class=”pln”> $instance <span%20class=”pun”>) {
  2. // kick things off
  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”>;
  6. // run a query if on a page
  7. if (<span%20class=”pln”> is_page<span%20class=”pun”>() ) {
  8. // run the tutsplus_check_for_page_tree function to fetch top level page
  9. $ancestor <span%20class=”pun”>=<span%20class=”pln”> tutsplus_check_for_page_tree<span%20class=”pun”>();
  10. // set the arguments for children of the ancestor page
  11. $args <span%20class=”pun”>=<span%20class=”pln”> array<span%20class=”pun”>(
  12. ‘child_of’ =><span%20class=”pln”> $ancestor<span%20class=”pun”>,
  13. ‘depth’ =><span%20class=”pln”> $instance<span%20class=”pun”>[ ‘depth’ ],
  14. ‘title_li’ => <span%20class=”pun”>,
  15. );
  16. // set a value for get_pages to check if it’s empty
  17. $list_pages <span%20class=”pun”>=<span%20class=”pln”> get_pages<span%20class=”pun”>(<span%20class=”pln”> $args <span%20class=”pun”>);
  18. // check if $list_pages has values
  19. if<span%20class=”pun”>(<span%20class=”pln”> $list_pages <span%20class=”pun”>) {
  20. // open a list with the ancestor page at the top
  21. ?>
  22. <<span%20class=”pln”>ul <span%20class=”kwd”>class<span%20class=”pun”>=<span%20class=”str”>”page-tree”<span%20class=”pun”>>
  23. <?<span%20class=”pln”>php <span%20class=”com”>// list ancestor page ?>
  24. <<span%20class=”pln”>li <span%20class=”kwd”>class<span%20class=”pun”>=<span%20class=”str”>”ancestor”<span%20class=”pun”>>
  25. <<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”>>
  26. </<span%20class=”pln”>li<span%20class=”pun”>>
  27. <?<span%20class=”pln”>php
  28. // use wp_list_pages to list subpages of ancestor or current page
  29. wp_list_pages<span%20class=”pun”>(<span%20class=”pln”> $args <span%20class=”pun”>);;
  30. // close the page-tree list
  31. ?>
  32. </<span%20class=”pln”>ul<span%20class=”pun”>>
  33. <?<span%20class=”pln”>php
  34. }
  35. }
  36. }

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

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

 creating-a-WordPress-widget-final

最终的插件

现在你终于拥有一个完整的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”>() {
  19. //start by checking if we’re on a page
  20. if<span%20class=”pun”>(<span%20class=”pln”> is_page<span%20class=”pun”>() ) {
  21. global<span%20class=”pln”> $post<span%20class=”pun”>;
  22. // next check if the page has parents
  23. if (<span%20class=”pln”> $post<span%20class=”pun”>-><span%20class=”pln”>post_parent <span%20class=”pun”>){
  24. // fetch the list of ancestors
  25. $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”>) );
  26. // get the top level ancestor
  27. return<span%20class=”pln”> $parents<span%20class=”pun”>[<span%20class=”lit”>0<span%20class=”pun”>];
  28. }
  29. // return the id – this will be the topmost ancestor if there is one, or the current page if not
  30. return<span%20class=”pln”> $post<span%20class=”pun”>-><span%20class=”pln”>ID<span%20class=”pun”>;
  31. }
  32. }
  33. ?>
  34. <?<span%20class=”pln”>php
  35. class Tutsplus_List_Pages_Widget extends<span%20class=”pln”> WP_Widget <span%20class=”pun”>{
  36. function<span%20class=”pln”> __construct<span%20class=”pun”>() {
  37. parent<span%20class=”pun”>::<span%20class=”pln”>__construct<span%20class=”pun”>(
  38. // base ID of the widget
  39. ‘tutsplus_list_pages_widget’<span%20class=”pun”>,
  40. // name of the widget
  41. __<span%20class=”pun”>(<span%20class=”str”>’List Related Pages'<span%20class=”pun”>, ‘tutsplus’ ),
  42. // widget options
  43. array <span%20class=”pun”>(
  44. ‘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’ )
  45. )
  46. );
  47. }
  48. function<span%20class=”pln”> form<span%20class=”pun”>(<span%20class=”pln”> $instance <span%20class=”pun”>) {
  49. $defaults <span%20class=”pun”>=<span%20class=”pln”> array<span%20class=”pun”>(
  50. ‘depth’ => ‘-1’
  51. );
  52. $depth <span%20class=”pun”>=<span%20class=”pln”> $instance<span%20class=”pun”>[ ‘depth’ ];
  53. // markup for form <span%20class=”pun”>?>
  54. <p>
  55. <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>
  56. <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”>”>
  57. </p>
  58. <?<span%20class=”pln”>php
  59. }
  60. function<span%20class=”pln”> update<span%20class=”pun”>(<span%20class=”pln”> $new_instance<span%20class=”pun”>,<span%20class=”pln”> $old_instance <span%20class=”pun”>) {
  61. $instance <span%20class=”pun”>=<span%20class=”pln”> $old_instance<span%20class=”pun”>;
  62. $instance<span%20class=”pun”>[ ‘depth’ ] =<span%20class=”pln”> strip_tags<span%20class=”pun”>(<span%20class=”pln”> $new_instance<span%20class=”pun”>[ ‘depth’ ] );
  63. return<span%20class=”pln”> $instance<span%20class=”pun”>;
  64. }
  65. function<span%20class=”pln”> widget<span%20class=”pun”>(<span%20class=”pln”> $args<span%20class=”pun”>,<span%20class=”pln”> $instance <span%20class=”pun”>) {
  66. // kick things off
  67. extract<span%20class=”pun”>(<span%20class=”pln”> $args <span%20class=”pun”>);
  68. echo $before_widget<span%20class=”pun”>;
  69. echo $before_title <span%20class=”pun”>. ‘In this section:’ .<span%20class=”pln”> $after_title<span%20class=”pun”>;
  70. // run a query if on a page
  71. if (<span%20class=”pln”> is_page<span%20class=”pun”>() ) {
  72. // run the tutsplus_check_for_page_tree function to fetch top level page
  73. $ancestor <span%20class=”pun”>=<span%20class=”pln”> tutsplus_check_for_page_tree<span%20class=”pun”>();
  74. // set the arguments for children of the ancestor page
  75. $args <span%20class=”pun”>=<span%20class=”pln”> array<span%20class=”pun”>(
  76. ‘child_of’ =><span%20class=”pln”> $ancestor<span%20class=”pun”>,
  77. ‘depth’ =><span%20class=”pln”> $instance<span%20class=”pun”>[ ‘depth’ ],
  78. ‘title_li’ => <span%20class=”pun”>,
  79. );
  80. // set a value for get_pages to check if it’s empty
  81. $list_pages <span%20class=”pun”>=<span%20class=”pln”> get_pages<span%20class=”pun”>(<span%20class=”pln”> $args <span%20class=”pun”>);
  82. // check if $list_pages has values
  83. if<span%20class=”pun”>(<span%20class=”pln”> $list_pages <span%20class=”pun”>) {
  84. // open a list with the ancestor page at the top
  85. ?>
  86. <ul class<span%20class=”pun”>=<span%20class=”atv”>”page-tree”<span%20class=”tag”>>
  87. <?<span%20class=”pln”>php <span%20class=”com”>// list ancestor page <span%20class=”pun”>?>
  88. <li class<span%20class=”pun”>=<span%20class=”atv”>”ancestor”<span%20class=”tag”>>
  89. <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>
  90. </li>
  91. <?<span%20class=”pln”>php
  92. // use wp_list_pages to list subpages of ancestor or current page
  93. wp_list_pages<span%20class=”pun”>(<span%20class=”pln”> $args <span%20class=”pun”>);;
  94. // close the page-tree list
  95. ?>
  96. </ul>
  97. <?<span%20class=”pln”>php
  98. }
  99. }
  100. }
  101. }
  102. ?>
  103. <?<span%20class=”pln”>php
  104. /*******************************************************************************
  105. function tutsplus_register_list_pages_widget() – registers the widget.
  106. *******************************************************************************/
  107. ?>
  108. <?<span%20class=”pln”>php
  109. function<span%20class=”pln”> tutsplus_register_list_pages_widget<span%20class=”pun”>() {
  110. register_widget<span%20class=”pun”>( ‘Tutsplus_List_Pages_Widget’ );
  111. }
  112. add_action<span%20class=”pun”>( ‘widgets_init’<span%20class=”pun”>, ‘tutsplus_register_list_pages_widget’ );
  113. ?>

小结

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

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

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 lk2768783601@gmail.com 举报,一经查实,本站将立刻删除。

(0)
上一篇 2023年9月5日 下午3:35
下一篇 2023年9月6日 上午11:15

相关推荐

  • 为你的 WordPress 小工具创建表单(4)

    文本是《一步步创建你的第一个 WordPress 小工具(共5篇)》专题的第 4 篇。阅读本文前,建议先阅读前面的文章: 创建一个WordPress小工具(1) 编写和注册你的 WordPress 小工具(2) 构建你的 WordPress 小工具(3) 在本系列教程的前三部分,你已经开始创建你的WordPress小工具。在这一部分,我将向你展示如何为你的W…

    2023年9月5日
    1730
  • 编写和注册你的 WordPress 小工具(2)

    文本是《一步步创建你的第一个 WordPress 小工具(共5篇)》专题的第 2 篇。阅读本文前,建议先阅读前面的文章: 创建一个WordPress小工具(1) 本文是系列教程《创建你的第一个WordPress小工具》的第二部分,向你展示如何创建属于你的第一个WordPress小工具。在第一部分的教程中,你已经了解了WordPress小工具API(Appli…

    wordpress开发 2023年9月5日
    1330
  • 在 WordPress 中创建上下文相关的侧栏页面导航

    有时我得到一项业务,我的客户要求建立一个完全由众多网页构成的网站——没有花哨的数据库查询,也没有额外的模板文件,只有在分层结构中的一大堆网页。 对用户来讲,一个非常庞大且内嵌有众多网页的网站,如果导航没有做好的话,就会变得非常混乱而难以操作。因而,在每一个网页页面层次的当前分支中,提供一个包含所有页面的导航列表就显得很有帮助了。 例如,如果你为一个机构建立一…

    wordpress开发 2023年9月5日
    1280
  • 构建你的 WordPress 小工具(3)

    文本是《一步步创建你的第一个 WordPress 小工具(共5篇)》专题的第 3 篇。阅读本文前,建议先阅读前面的文章: 创建一个WordPress小工具(1) 编写和注册你的 WordPress 小工具(2) 如果你一直是跟随本系列教程来操作的话,那么你现在将会有你自己的WordPress小工具插件作为下一步的开始。你必须创建一个新类来编写你的小工具,并添…

    2023年9月5日
    1400
  • 创建一个WordPress小工具(1)

    对于非程序员要创建一个WordPress站点,小工具是很棒的。它们能够添加菜单、列表供稿、文本以及更多东西到小工具区,并且不限于侧边栏。现在许多主题都在页脚添加了小工具区,并且大主题框架通常在多个位置设有小工具区,如头部或内容的上下方。 在这个五部分的系列教程中,我将带你一起完成创建您的第一个小工具所需的步骤。 本系列包括: 介绍小工具和小工具API 编写和…

    wordpress开发 2023年9月5日
    1310
关注微信