Home >Backend Development >PHP Tutorial >Ensuring a maintainable WordPress meta box: completing the front-end part
In this series of articles, we’ll review some tips and strategies you can use to build a more maintainable WordPress plugin, and we’ll do it all within the context of a plugin that leverages tabbed meta boxes.
In the previous article we implemented functionality specifically for our tabs and also implemented the first textarea
which will be used to capture some user input. For those of you who have been following, you know we just did:
We haven't gone through the actual process of cleaning, validating, and saving the data, nor have we bothered to cover the contents of the remaining tabs. In the next two articles, we will do exactly that.
Specifically, in this article we will move on to the rest of the user interface, and then we will move on to actually writing the code responsible for validating user input and associating it with a given post.
These are all before us, let’s get started.
As mentioned before, in the previous article we introduced textarea in the Draft
tab. If you've been following the tutorials and/or using the code from the available repositories, you should see something like this:
drafts tag is simple: This is where users can jot down notes, collect ideas, and basically have a notepad to help them gather their thoughts before writing a post.
RESOURCESsHow about tags? The idea behind this tab is that users will be able to collect various URLs of pages, tweets, images, and other information relevant to the content they want to write about so that they can embed, link, and/or reference them in posts.
Its working principle is as follows:
As far as the last two items are concerned, we will address them in the next article. Now, let's add input fields dynamically.
Find admin/views/partials/resources.php
and update the code to look like this:
<?php /** * Provides the 'Resources' view for the corresponding tab in the Post Meta Box. * * @link https://code.tutsplus.com/tutorials/creating-maintainable-wordpress-meta-boxes-the-front-end--cms-22383 * @since 0.3.0 * * @package Authors_Commentary * @subpackage Authors_Commentary/admin/partials */ ?> <div class="inside hidden"> <div id="authors-commentary-resources"></div><!-- #authors-commentary-resources --> <p><input type="submit" id="authors-commentary-add-resource" value="Add Resource" /> </div>
Next, we create a file in admin/assets/js
and name it resources.js
. Delete the file so that it looks like this:
(function( $ ) { 'use strict'; $(function() { }); })( jQuery );
Next, we need to set up an event handler so that when the user clicks the Add Resource button, it does the following:
Below is fully commented code explaining how to achieve this, with additional information below:
/** * Creates a new input element to be appended to the DOM that's used to represent a single * resource (be it an address, tweet, image URL, etc.) to be referenced in the post. * * @since 0.4.0 * @param object $ A reference to the jQuery object * @return object An input element to be appended to the DOM. */ function createInputElement( $ ) { var $inputElement, iInputCount; /* First, count the number of input fields that already exist. This is how we're going to * implement the name and ID attributes of the element. */ iInputCount = $( '#authors-commentary-resources' ).children().length; iInputCount++; // Next, create the actual input element and then return it to the caller $inputElement = $( '<input />' ) .attr( 'type', 'text' ) .attr( 'name', 'authors-commentary-resource-' + iInputCount ) .attr( 'id', 'authors-commentary-resource-' + iInputCount ) .attr( 'value', '' ); return $inputElement; } (function( $ ) { 'use strict'; $(function() { var $inputElement; $( '#authors-commentary-add-resource' ).on( 'click', function( evt ) { evt.preventDefault(); /* Create a new input element that will be used to capture the users input * and append it to the container just above this button. */ $( '#authors-commentary-resources' ).append ( createInputElement( $ ) ); }); }); })( jQuery );
In the code above, there is a function specifically used to create the input element and use the number of pre-existing elements to help give it a unique name and ID.
There is also a DOM readiness handler that sets up a function to fire when the user clicks the Add Resource button. When the button is clicked, the above function is called and then the input element is appended to the parent container.
To make sure it looks its best, we need to write some styles. Just like we did with the JavaScript source code, find admin/assets/css/admin.css
and add the following code to the bottom of the file:
#authors-commentary-resources input[type="text"] { width: 100%; margin-bottom: 10px; }
This will ensure that each input element is 100% wide so that they are each on their own line.
Finally, we need to enqueue the JavaScript written in WordPress so that it properly responds to the elements we display in the section. To do this, find the enqueue_admin_scripts
function in admin/class-authors-commentary.php
and update it so that it looks like this:
<?php /** * Includes the JavaScript necessary to control the toggling of the tabs in the * meta box that's represented by this class. * * @since 0.2.0 */ public function enqueue_admin_scripts() { if ( 'post' === get_current_screen()->id ) { wp_enqueue_script( $this->name . '-tabs', plugin_dir_url( __FILE__ ) . 'authors-commentary/admin/assets/js/tabs.js', array( 'jquery' ), $this->version ); wp_enqueue_script( $this->name . '-resources', plugin_dir_url( __FILE__ ) . 'authors-commentary/admin/assets/js/resources.js', array( 'jquery' ), $this->version ); } }
At this point, you should be able to load the post editor in your browser, click on the Resources tag, and start dynamically adding multiple input fields to the page.
请记住,我们实际上还没有在服务器端执行任何操作,因此我们还没有进行清理、验证,或保存此信息。我们将在下一篇文章中执行此操作。
现在我们已经可以收集要在整个帖子中使用的各种注释和资源,那么已发布标签将包含哪些元素?
这三个内容都是完全可以接受的,可以引入到已发布标签中;但是,为了不重新发明轮子并继续引入新功能以及使用 WordPress API 的其他方式,我们将采用最终选项。
具体来说,我们将加载帖子中存在的所有评论的列表。每条评论旁边都会有一个复选框。如果评论已收到回复,则会进行查看;否则,它将被取消选中。
我们不会为此添加 pingback,因为作者通常不会回复 pingback。
话虽如此,加载 admin/views/partials/published.php
并添加以下代码:
<?php /** * Provides the 'Published' view for the corresponding tab in the Post Meta Box. * * @link http://code.tutsplus.com/tutorials/creating-maintainable-wordpress-meta-boxes-the-front-end--cms-22383 * @since 0.3.0 * * @package Authors_Commentary * @subpackage Authors_Commentary/admin/partials */ ?> <div class="inside hidden"> <?php $comments = $this->load_post_comments(); ?> <ul id="author-commentary-comments"> <?php foreach ( $comments as $comment ) { ?> <li> <label for="authors-commentary-comment-<?php echo $comment->comment_ID ?>"> <input type="checkbox" id="authors-commentary-comment-<?php echo $comment->comment_ID ?>" name="authors-commentary-comment-<?php echo $comment->comment_ID ?>" /> This comment has received a reply. </label> <p> <em><?php echo $comment->comment_author; ?></em>: <?php echo $comment->comment_content; ?> </p> <hr /> </li> <?php } ?> </ul> </div>
请注意,我们正在调用一个名为 load_post_comments
的函数。由于我们还没有定义它,所以让我们跳到 admin/class-authors-commentary-meta-box.php
并添加以下代码:
<?php /** * Loads all of the comments for the given post along with checkboxes used to * indicate whether or not they've received a reply or not. * * @since 0.4.0 * @access private */ private function load_post_comments() { $args = array( 'post_id' => get_the_ID(), 'status' => 'approve' ); $comments = get_comments( $args ); return $comments; }
此函数将检索给定帖子的所有已批准评论的集合。上面列出的部分将遍历评论,然后创建一个标签和一个复选框,允许用户选择评论是否收到回复。
在标签下方,您会注意到评论作者和评论。这主要是为了轻松识别留下的评论。
最后,我们需要在样式表中添加一件事:
#author-commentary-comments label { font-weight: bold; }
我们就完成了。
最终,您应该看到一个与上面看到的非常相似的屏幕。
在下一篇文章中,我们将回到服务器端并开始编写代码,用于验证、清理、序列化和检索与我们刚刚创建的用户界面相关的所有代码。
同时,请记得查看 GitHub 上的代码(可在本文右侧找到),并随时在下面的提要中留下任何及所有问题和评论。
The above is the detailed content of Ensuring a maintainable WordPress meta box: completing the front-end part. For more information, please follow other related articles on the PHP Chinese website!