Memastikan kotak meta WordPress yang boleh diselenggara: melengkapkan bahagian hadapan

Dalam siri artikel ini, kami akan menyemak beberapa petua dan strategi yang boleh anda gunakan untuk membina pemalam WordPress yang lebih boleh diselenggara, dan kami akan melakukan semuanya dalam konteks pemalam yang memanfaatkan kotak meta bertab #🎜 🎜 #

Dalam artikel sebelumnya, kami melaksanakan fungsi khusus untuk tab kami dan juga melaksanakan textarea pertama yang akan digunakan untuk menangkap beberapa pengguna masuk. Bagi anda yang telah mengikuti, anda tahu kami baru sahaja melakukan ini:

• Menjadikan tab berfungsi
• Perkenalkan satu elemen UI yang boleh berinteraksi dengan pengguna

textarea ，它将用于捕获一些用户输入。对于那些一直关注的人来说，您知道我们只做到了：

• 使选项卡发挥作用
• 引入用户可以与之交互的单个 UI 元素

我们尚未完成清理、验证和保存数据的实际过程，也没有费心介绍其余选项卡的内容。在接下来的两篇文章中，我们将正是这样做的。

具体来说，在本文中，我们将继续介绍用户界面的其余部分，然后我们将继续实际编写负责验证用户输入并将其与给定帖子关联的代码。

这些都摆在我们面前，让我们开始吧。

重新审视选项卡模板

如前所述，在上一篇文章中，我们在草稿选项卡中引入了 textarea。如果您一直在遵循教程和/或使用可用存储库中的代码，那么您应该会看到如下内容：

草稿标签背后的想法很简单：用户可以在此处记下笔记、收集想法，并且基本上有一个记事本可以帮助他们收集想法在写帖子之前。

资源

资源s标签怎么样？此选项卡背后的想法是，用户将能够收集与他们想要编写的内容相关的页面、推文、图像和其他信息的各种 URL，以便他们可以在帖子中嵌入、链接和/或引用它们.

其工作原理如下：

• 将有一个按钮允许用户添加其他字段

• 单击按钮后，按钮上方将添加一个输入字段以捕获用户的输入。
• 如果用户提供信息，则在保存帖子时也会保存该信息。
• 如果用户未提供任何信息，则不会保存该信息。

就最后两项而言，我们将在下一篇文章中解决。现在，让我们来动态添加输入字段。

找到 admin/views/partials/resources.php 并将代码更新为如下所示：

<?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>

接下来，我们在 admin/assets/js 中创建一个文件，并将其命名为 resources.js。删除该文件，使其如下所示：

(function( $ ) {
    'use strict';

	$(function() {
	
	});

})( jQuery );

接下来，我们需要设置一个事件处理程序，以便当用户点击添加资源按钮时，它会执行以下操作：

1. 创建一个新的输入元素。
2. 提供正确的 ID 和名称属性，以便可以序列化信息。
3. 将其附加到现有的输入元素列表。

以下是完整注释的代码，说明如何实现此目的，并提供以下更多信息：

/**
 * 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 );

在上面的代码中，有一个函数专门用于创建输入元素并使用预先存在的元素的数量来帮助为其提供唯一的名称和 ID。

还有一个 DOM 就绪处理程序，它设置一个函数，以便在用户点击添加资源按钮时触发。单击按钮时，将调用上述函数，然后将输入元素附加到父容器。

为了确保它看起来最好，我们需要编写一些样式。就像我们对 JavaScript 源代码所做的那样，找到 admin/assets/css/admin.css ，然后将以下代码添加到文件底部：

#authors-commentary-resources input[type="text"] {
    width:         100%;
    margin-bottom: 10px;
}

这将确保每个输入元素的宽度为 100%，以便它们各自位于自己的行上。

最后，我们需要将用 WordPress 编写的 JavaScript 排入队列，以便它正确响应我们在部分中显示的元素。为此，请在 admin/class-authors-commentary.php 中找到 enqueue_admin_scripts Kami tidak melalui proses sebenar untuk membersihkan, mengesahkan dan menyimpan data, dan kami juga tidak bersusah payah untuk menutup kandungan tab yang tinggal. Dalam dua artikel seterusnya, kami akan melakukan perkara itu.

Secara khusus, dalam artikel ini, kami akan beralih ke antara muka pengguna yang lain, dan kemudian kami akan meneruskan untuk menulis kod yang bertanggungjawab untuk mengesahkan input pengguna dan mengaitkannya dengan siaran yang diberikan. Ini semua sebelum kita, mari mulakan.

Melawat semula templat tab

Seperti yang dinyatakan sebelum ini, dalam artikel sebelum ini, kami memperkenalkan textarea dalam tab Draf

. Jika anda telah mengikuti tutorial dan/atau menggunakan kod daripada repositori yang tersedia, anda sepatutnya melihat sesuatu seperti ini: #🎜🎜# #🎜🎜# #🎜🎜##🎜🎜##🎜🎜# Idea di sebalik teg #🎜🎜##🎜🎜#draft#🎜🎜# adalah mudah: ia ialah tempat di mana pengguna boleh mencatat nota, mengumpul idea dan pada asasnya mempunyai pad nota untuk membantu mereka mengumpul fikiran mereka sebelum menulis siaran. #🎜🎜#

Sumber

#🎜🎜##🎜🎜#RESOURCE#🎜🎜#sBagaimana dengan tanda nama? Idea di sebalik tab ini ialah pengguna akan dapat mengumpul pelbagai URL halaman, tweet, imej dan maklumat lain yang berkaitan dengan kandungan yang ingin mereka tulis supaya mereka boleh membenamkan, memaut dan/atau merujuknya dalam siaran. #🎜🎜# #🎜🎜# Prinsip kerjanya adalah seperti berikut: #🎜🎜#

• Akan ada butang yang membolehkan pengguna menambah medan tambahan #🎜🎜##🎜🎜#
• Apabila butang diklik, medan input ditambah di atas butang untuk menangkap input pengguna.
• Jika pengguna memberikan maklumat, maklumat itu juga disimpan apabila siaran disimpan.
• Jika pengguna tidak memberikan sebarang maklumat, maklumat tersebut tidak akan disimpan.

#🎜🎜#Setakat dua perkara terakhir, kami akan menanganinya dalam artikel seterusnya. Sekarang, mari tambah medan input secara dinamik. #🎜🎜# #🎜🎜#Cari admin/views/partials/resources.php dan kemas kini kod supaya kelihatan seperti ini: #🎜🎜#

<?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
		);

	}

}

#🎜🎜#Seterusnya, kami mencipta fail dalam admin/assets/js dan namakannya resources.js. Padamkan fail supaya kelihatan seperti ini: #🎜🎜#

<?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>

#🎜🎜#Seterusnya, kita perlu menyediakan pengendali acara supaya apabila pengguna mengklik butang #🎜🎜#Tambah Sumber#🎜🎜#, ia melakukan perkara berikut: #🎜🎜#

1. Buat elemen input baharu.
2. Sediakan atribut ID dan nama yang betul supaya maklumat boleh disirikan.
3. Tambahkannya pada senarai elemen input yang sedia ada.

#🎜🎜# Berikut ialah kod yang diulas sepenuhnya yang menerangkan cara untuk mencapainya, dengan maklumat lanjut di bawah: #🎜🎜#

<?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;

}

#🎜🎜#Dalam kod di atas, terdapat fungsi yang digunakan khusus untuk mencipta elemen input dan menggunakan bilangan elemen sedia ada untuk membantu memberikannya nama dan ID yang unik. #🎜🎜# #🎜🎜# Terdapat juga pengendali kesediaan DOM yang menyediakan fungsi untuk menyala apabila pengguna mengklik butang #🎜🎜#Tambah Sumber #🎜🎜#. Apabila butang diklik, fungsi di atas dipanggil dan kemudian elemen input dilampirkan pada bekas induk. #🎜🎜# #🎜🎜#Untuk memastikan ia kelihatan terbaik, kita perlu menulis beberapa gaya. Sama seperti yang kami lakukan dengan kod sumber JavaScript, cari admin/assets/css/admin.css dan tambahkan kod berikut pada bahagian bawah fail: #🎜🎜#

#author-commentary-comments label {
    font-weight: bold;
}

#🎜🎜#Ini akan memastikan setiap elemen input adalah 100% lebar supaya setiap elemen berada pada baris mereka sendiri. #🎜🎜# #🎜🎜#Akhir sekali, kami perlu memasukkan JavaScript yang ditulis dalam WordPress supaya ia bertindak balas dengan betul kepada elemen yang kami paparkan dalam bahagian tersebut. Untuk melakukan ini, cari fungsi enqueue_admin_scripts dalam admin/class-authors-commentary.php dan kemas kininya supaya Seperti yang ditunjukkan di bawah : #🎜🎜# rrreee #🎜🎜#Pada ketika ini, anda sepatutnya boleh memuatkan editor siaran dalam penyemak imbas anda, klik pada teg #🎜🎜# sumber #🎜🎜#, dan mula menambahkan berbilang medan input ke halaman secara dinamik. #🎜🎜# #🎜🎜##🎜🎜##🎜🎜#

请记住，我们实际上还没有在服务器端执行任何操作，因此我们还没有进行清理、验证，或保存此信息。我们将在下一篇文章中执行此操作。

已发布

现在我们已经可以收集要在整个帖子中使用的各种注释和资源，那么已发布标签将包含哪些元素？

• 它是否包含一个类似于草稿标签的区域，我们可以在其中留下自己的评论和注释？也许吧。
• 是否包含一个位置来保存评论链接和其他有助于后续跟进的资源？
• 也许它只包含帖子中所有评论的列表，以及指向所述评论的链接以及用于指示该评论是否已收到回复的复选框。

这三个内容都是完全可以接受的，可以引入到已发布标签中；但是，为了不重新发明轮子并继续引入新功能以及使用 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 上的代码（可在本文右侧找到），并随时在下面的提要中留下任何及所有问题和评论。

Atas ialah kandungan terperinci Memastikan kotak meta WordPress yang boleh diselenggara: melengkapkan bahagian hadapan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!