通过 WordPress 多媒体上传组件添加和移除图片

在该系列的上一篇文章，我们开始认识新版的 WordPress 多媒体上传组件，以便我们了解如何更清晰地将其集成到我们新的项目中。

这个集成工作的最艰难的部分就是新版 WordPress 多媒体上传组件 功能没有和其他功能一样详细的文档说明。这很明显让一些开发者，尤其是新手开发者苦恼不已。要是让他们从系统底层开始了解的话，就会有很多工作需要做。

根据第一篇文章的反馈，我们将会对该系列的内容进行扩展。在这篇文章中，我们将会针对上一篇文章中介绍的功能进行练习。然后，在接下来的文章（也许不只一篇）中学习如何让多媒体上传组件运行的更好的主意。

紧接着上一次的内容

在上一篇博客中，我们介绍到通过一个插件实现了如果选择了一张图片后将会在每一篇博客的底部显示“特色底部图片”。这个小组件在文章（post）和页面（page）中都是可用的。

基于这个观点，我们成功地添加了 Meta Box，调用了 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. 显示所选的图片

为了能够显示所选的图片，我们需要确保在MetaBox中有一个图片元素，以便在选择了图片后可以通过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样式来隐藏这个容器。利用JavaScript把这个css样式移除就可以让图片显示出来了（做相反的操作就可以让图片再次显示出来）。

现在，我们可以再次访问JavaScript并且不管什么时候有图片选择了的话就会进行渲染。我们还需要做下面两件事情：

1. 隐藏锚让用户可以选择图片
2. 在容器中显示特色图片

让我们再次看一下之前文章中的 JavaScript 代码。在收到 JSON 数据后，要确保其中有图片地址属性，这个后续我们会用到。

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 字符串长度要大于0。我喜欢使用 $.trim 方法来确保字符串的合法。如果长度为 0 的话，就直接返回，因为没有任何图片可以显示。

之后，我们要利用之前创建的 div 元素。我们通过 children() 函数获取图片然后根据 json 对象的可访问的属性设置 src，alt 和 title。

我们选者图片的父容器然后移除隐藏样式类（class）。

之后，我们使用 featured-footer-image-container 元素来作为出发点，访问锚点——这是前面的元素，然后隐藏它。

到这里，这个图片应该会出现在文章的MetaBox中。

但是，还有一个明显的问题：对这个容器来说图片太大。这意味着还需要加入一些CSS样式。

3. 给特色图片添加样式

要做到这一点，我们需要添加一个 CSS 文件，然后更新插件文件把它引入。

首先，在你的插件文件夹中创建一个 css 目录，然后添加 admin.css 到这个目录中。把下面的代码添加到这个文件中：

#featured-footer-image-container img {
 
    width:  100%;
    height: auto;
 
}

然后把下面的钩子函数添加到你的插件的启动函数中：

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

刚刚添加的是一个初始化的锚点，我们还需要设定一个事件处理器以便在“移除”锚点被点击时可以将图片移除并恢复“设置特色图片”的锚点。

为了实现这样的效果，再在函数中添加如下代码，确保会在 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 数据保存到数据库中，并进行过滤，再取出来，然后在前端页面显示。

在这个系列的下一篇文章中，我们将会现实上面的逻辑。同时，方便的话把您的问题留下了。

原文出自：http://code.tutsplus.com/articles/adding-and-removing-images-with-the-wordpress-media-uploader–cms-22087

由 surenpi.com@wordpress大学 原创翻译，未经允许，禁止转载和采用本译文。