利用WordPress媒体上传工具添加和删除图片

在本系列的上一篇文章中，我们开始使用 WordPress 媒体上传器的最新版本，以便更清楚地了解如何开始将其合并到我们的项目中。

使用这个新功能（嗯，是 3.5 以后的新功能）的困难之处在于它没有像其他功能那样有详细的文档记录。这显然让很多开发人员——尤其是初学者——对如何开始使用它感到摸不着头脑。再加上对底层系统的全面检修，您将有很多事情要做。

根据第一篇文章的反馈，我们将考虑进一步扩展本系列的范围。在本文中，我们将实际应用上一篇文章中介绍的功能。然后，在后续文章（或者可能不止一篇后续文章）中，我们将详细介绍媒体上传器的工作原理。

从上次停下的地方继续

在上一篇文章中，我们开始开发一个插件，如果选择了图像，该插件会在每篇文章的底部引入“特色页脚图像”。此元框适用于帖子和页面帖子类型。

到目前为止，我们已经成功添加了元框，启动了 WordPress 媒体上传器并选择了一个图像用作我们的特色图像，但我们实际上还没有对从返回给我们的信息执行任何操作媒体上传器。

在这篇文章中，我们将继续实现该功能，以便我们在帖子底部显示图像。之后，我们将把注意力转向我们可用的 API 的更多技术细节。

为了从我们上次停下的地方继续，我们需要能够复制标准“特色图像”元框提供的功能。为了做到这一点：

1. 我们需要从媒体上传器捕获信息
2. 显示所选的图像
3. 正确调整所选图片的大小
4. 设置删除图像的选项

显然，我们已经完成了我们的工作。

在我们执行任何操作之前，请确保更新 renderMediaUploader 函数以接受 $ 作为参数，以便我们可以在整个示例中使用 jQuery。

函数声明应如下所示：

function renderMediaUploader( $ ) { ... }

对函数的调用现在应该如下所示：

renderMediaUploader( $ );

现在，让我们开始吧。

1。捕获图像

从媒体上传器中选择图像后，数据将以 JavaScript 形式返回给您。具体来说，数据将以 JSON 的形式返回给我们。这将使我们能够解析图像的各种属性，以便我们可以渲染并将其与我们的帖子一起保存。

但首先，让我们更新我们的代码。在 admin.js 中找到如下代码行：

file_frame.on( 'insert', function() {
 
    /**
     * We'll cover this in the next version.
     */
 
});

并将其替换为：

file_frame.on( 'insert', function() {

    // Read the JSON data returned from the Media Uploader
    json = file_frame.state().get( 'selection' ).first().toJSON();

});

显然，这并不是什么非常复杂的事情；但是，请记住将 json 添加为在文件顶部定义的变量，以及 file_frame 和 image_data。

如果您对返回的内容感到好奇，请随时将 json 的内容转储到您最喜欢的控制台调试器中。我们不会在这篇特定的文章中这样做，但我们可能会在未来的深入文章中做更多的事情。

2。显示选定的图像

为了让我们显示所选的图像，我们需要确保我们的元框中有一个可通过 JavaScript 访问的图像元素，以便我们可以在选择图像时更新其属性。

在 views/admin.php 中，我们将以下代码添加到我们的模板中。它包含我们将用来渲染图像的空图像元素。

<p class="hide-if-no-js">
    <a title="Set Footer Image" href="javascript:;" id="set-footer-thumbnail">Set featured image</a>
</p>

<div id="featured-footer-image-container" class="hidden">
    <img src="" alt="" title="" />
</div><!-- #featured-footer-image-container -->

请注意，我们利用 WordPress CSS 类 hidden 来隐藏容器。使用 JavaScript，我们将删除此类以显示图像（并且基本上会执行相反的操作以隐藏图像并显示锚点以再次选择图像）。

现在，我们可以重新访问 JavaScript 并在选择图像时渲染图像。我们需要做两件事：

1. 隐藏锚点以允许用户选择图像
2. 在容器中显示特色图像

为此，让我们回顾一下本文前面介绍的 JavaScript 代码。检索 JSON 数据后，确保我们有图像的 URL，然后继续。

file_frame.on( 'insert', function() {

    // Read the JSON data returned from the Media Uploader
    json = file_frame.state().get( 'selection' ).first().toJSON();

	// First, make sure that we have the URL of an image to display
	if ( 0 > $.trim( json.url.length ) ) {
		return;
	}

	// After that, set the properties of the image and display it
	$( '#featured-footer-image-container' )
		.children( 'img' )
			.attr( 'src', json.url )
			.attr( 'alt', json.caption )
			.attr( 'title', json.title )
                        .show()
		.parent()
		.removeClass( 'hidden' );

	// Next, hide the anchor responsible for allowing the user to select an image
	$( '#featured-footer-image-container' )
		.prev()
		.hide();

});

显然，对代码进行了注释以解释发生了什么，但我们在很大程度上依赖 jQuery 来确保正确显示和隐藏元素。

首先，我们检查 json 的 URL 属性，以确保其长度大于零。我喜欢使用 $.trim 的 URL 属性，以确保其长度大于零。我喜欢使用 $.trim 来将其作为防御性编码实践。如果它等于零，那么我们将返回，因为我们没有要显示的图像。

之后，我们利用我们在上一步中创建的新 div 元素。我们通过 children() 函数获取图像元素，然后设置其 src、alt 和 title 属性全部基于可通过 div 元素。我们通过 children() 函数获取图像元素，然后设置其 src、alt 和 title 属性全部基于可通过 json 对象访问的属性。

从那里，我们选择图像的父容器，然后删除隐藏类。

毕竟，我们使用 featured-footer-image-container 元素作为访问锚点的点 - 在本例中，它是前一个元素 - 然后我们将其隐藏。

此时，图像应该出现在帖子元框中。

但是我们有一个明显的问题：图像对于容器来说太大了。这意味着我们需要引入一些 CSS。

3。设计我们的特色图片

为此，我们需要添加一个 CSS 文件并更新核心插件文件，以便它将样式表排入队列。

首先，在插件文件夹中创建一个 css 目录，然后将 admin.css 添加到该目录中。在该文件中，添加以下代码：

#featured-footer-image-container img {

    width:  100%;
    height: auto;

}

然后在插件的 run() 函数中添加以下钩子：

add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_styles' ) );

最后添加以下函数：

/**
 * Registers the stylesheets for handling the meta box
 *
 * @since 0.2.0
 */
public function enqueue_styles() {

    wp_enqueue_style(
        $this->name,
        plugin_dir_url( __FILE__ ) . 'css/admin.css',
        array()
    );

}

如果您已正确设置选择器并且已正确注册样式表并将其排入队列，您应该会看到如下内容：

好多了，不是吗？

4。我们如何删除图像？

正如我们添加一个元素来显示图像一样，我们也需要添加一个允许我们删除图像的元素。

为此，请重新访问 views/admin.php 并添加以下代码：

<p class="hide-if-no-js hidden">
    <a title="Remove Footer Image" href="javascript:;" id="remove-footer-thumbnail">Remove featured image</a>
</p><!-- .hide-if-no-js -->

接下来，我们需要编写一些额外的 JavaScript，以便在显示图像时显示上面的锚点。为此，请重新访问 admin.js 并将其添加到本文前面添加的代码下方：

// Display the anchor for the removing the featured image
$( '#featured-footer-image-container' )
    .next()
    .show();

就像我们对初始锚点所做的那样，我们需要设置一个事件处理程序，以便当单击“删除”锚点时，图像将被删除并恢复“设置特色图像”锚点。 p>

为此，首先重新访问 DOM 加载后立即触发的函数并添加以下代码：

$( '#remove-footer-thumbnail' ).on( 'click', function( evt ) {
    
	// Stop the anchor's default behavior
	evt.preventDefault();

	// Remove the image, toggle the anchors
	resetUploadForm( $ );
    
});

现在我们需要定义 resetUploadForm 函数，所以现在就开始吧。请记住，这需要删除图像，隐藏“删除链接”容器，并恢复“设置图像”链接锚点。

/**
 * Callback function for the 'click' event of the 'Remove Footer Image'
 * anchor in its meta box.
 *
 * Resets the meta box by hiding the image and by hiding the 'Remove
 * Footer Image' container.
 *
 * @param    object    $    A reference to the jQuery object
 * @since    0.2.0
 */
function resetUploadForm( $ ) {
    'use strict';

	// First, we'll hide the image
	$( '#featured-footer-image-container' )
		.children( 'img' )
		.hide();

	// Then display the previous container
	$( '#featured-footer-image-container' )
		.prev()
		.show();

	// Finally, we add the 'hidden' class back to this anchor's parent
	$( '#featured-footer-image-container' )
		.next()
		.hide()
		.addClass( 'hidden' );

}

此时，我们已获得选择图像、删除图像以及继续执行此操作所需的一切。

仍有工作要做，但我们将在下一篇文章中介绍这一点。同时，不要忘记在 GitHub 上查看相关存储库以获取该项目源代码的当前版本。

接下来...

显然，我们已经处理了很多后端工作，因为它涉及选择图像、显示图像和删除图像，但我们仍然缺少一个关键的功能：保存图像，以便它与帖子相关联。

为了将网站访问者看到的内容与我们在后端指定的内容联系起来，我们需要做一些工作，将 JSON 数据保存到数据库，对其进行清理、检索，然后显示它在前面。

在本系列的下一篇文章中，我们将看看如何做到这一点。同时，请随时在下面的提要中留下任何评论或问题。

以上是利用WordPress媒体上传工具添加和删除图片的详细内容。更多信息请关注PHP中文网其他相关文章！