文章
当前位置：首页>WordPress建站>WordPress开发>WordPress 多媒体上传组件入门

WordPress 多媒体上传组件入门

WordPress 3.5 正式版发布时，最显著的一个变化就是 WordPress 媒体上传功能。对这个变化的更切确地说应该是引入了一个新的多媒体上传组件。

毕竟，旧版本的多媒体上传组件仍然存在并且可以和当前的多媒体库一起运行，但是，它必须通过添加合适的脚本、样式以及其他依赖的功能。

软件的特性和功能总是存在被废弃的时候。在我们的案例中，WordPress的多媒体库也不例外。尽管它不再被WordPress核心使用了，但还是有很多插件和其他第三方工具仍然使用旧版本的多媒体库。

在使用多媒体库时出现了很多份旧版本的功能性代码，这个挑战使得我们很可能不再查找旧的功能例子。

因为新的多媒体库作为 WordPress 新的标准，而且没有很多关于如何使用它的可用的文档，我们将会在接下来的几篇文章中浏览这些功能并且了解新版本的多媒体库是如何架构的，我们如何在自己的工作中实现，我们如何利用已经在WordPress核心中包含的功能。

WordPress多媒体上传组件

新的WordPress多媒体上传组件比旧版本的交互界面有很多优势：

  • 支持拖拽
  • 更简洁的界面
  • 更容易管理的画廊
  • 还有更多…

有一点很重要的必须注意，虽然最新的上传组件是采用一套和之前完全不同的技术，这意味着你之前写过的实现多媒体管理的代码仍然是可运行的（直到 Thickbox 被废弃），但是它过时的外观设计将会与当前使用 WordPress 来管理多媒体的用户体验有所不同。

简单介绍Underscore和Backbone

在我们开始把这些加入到我们的代码来创建我们自己的实例前，先来理解下一个新的多媒体库的基础是很重要的。

一如之前提到的，旧版本的多媒体上传组件使用了一个叫做 Thickbox 的库来渲染我们看到的元素，但在最新的实现中，WordPress使用 Underscores（不要和 Underscore 主题混淆了），和 Backbone——这两个 JavaScript 技术一起来驱动用户界面和管理多媒体上传组件的事件。

尽管我们不准备深入了解这些库，但还是有必要去了解它们在多媒体上传组件中的作用。

首先介绍 Backbone：

Backbone.js 给 web 应用持续提供了用于绑定健值对和自定义事件的模型，丰富的集合处理函数，可申明事件处理的视图，还可以使用 RESTfull 风格的 JSON 接口连接到现有的 API 中。

还有 Underscore：

Underscore是一个JavaScript库，提供了一整函数时编程的实用功能，但是没有扩展任何内置对象。如果我面对一个空白的HTML页面，并且想要立即就变成可用的，我需要什么？你可以使用jQuery和Underscore。

很明显，你可以花更多的时间来了解上面的两个内容，但我想要提醒的是现在应该开始我们了解如何管理UI和自定义多媒体库的事件上，我们已经可以做到对下面将要介绍的代码是如何运行的有所认识了。

最后，要记住上面介绍的不是 jQuery。如果你已经使用过这些库——我们现在就是——这两个库是完全分离的。你可以——我们也打算——使用jQuery函数来添加Backbone和Underscore。

整合媒体上传组件

现在，让我们开始真正地写一些代码。

这里给出的例子可以让我们一起看一下如何把一个基本版本的多媒体库加入到一个已经存在的WordPress主题中。我们的这个例子的目的是建立一个插件；然而，我们要使用的环境包含如下：

  • WordPress 3.9.2 安装版本
  • Twentytwelve 主题

就是这么多了。剩下的代码会包含在我们的插件中。当然，这就提出了一个问题，我们的插件究竟是什么样的

简单来说，我们准备模仿WordPress的“特色图片”功能，我们打算介绍添加在文章的底部的“底部特色图片”，而不是（或者在文章的顶部附近）。

很显然，这个功能并不重要——重点在于实现新的多媒体库。

所有的代码都能在文章关联的GitHub库中找到，你可以像关注文章一样关注这些代码并且把代码下载下来查看。

1. 设置项目目录

在wp-content/plugins目录中，添加一个名为acme-footer-image的目录。我们会把项目的文件放到这里。到此，可以按照下面的介绍添加空文件：

  • README.txt
  • LICENSE
  • acme-footer-image.php

这三个文件从名字上就能理解其作用。acme-footer-image.php是我们准备定义插件头部和开始执行插件的文件。class-acme-footer-image.php这里定义了初始化我们的插件功能的类。

下一步，在插件目录中添加一个名为admin的目录，保存所有管理功能，这个目录应该包含如下内容：

  • admin/class-admin-footer-image.php
  • admin/js/admin.js

最后，在admin子目录中添加一个views目录，用来放我们的元素数据框。我们将会在文章的后面学习更多的内容。

为了确保我们能够创建组织良好的文件从而保持职责明确，我们会通过我们的教程来看每个文件。到此，已经有了所有我们可以开始工作需要的东西了。

2. 设置 README

在开始写真正的代码之前，先根据默认的信息来填写README。

  1. === Acme Footer Image ===
  2. Contributors: tommcfarlin
  3. Donate link: http://tommcfarlin.com/
  4. Tags: featured images
  5. Requires at least: 3.9.2
  6. Tested up to: 3.9.2
  7. Stable tag: 0.1.0
  8. License: GPLv2 or later
  9. License URI: http://www.gnu.org/licenses/gpl-2.0.html
  10.  
  11. Append a featured image at the bottom of the content of a post or page.
  12.  
  13. == Description ==
  14.  
  15. Append a featured image at the bottom of the content of a post or page. Used as a demo
  16. for a Tuts+ Code tutorial.
  17.  
  18. == Installation ==
  19.  
  20. This section describes how to install the plugin and get it working.
  21.  
  22. e.g.
  23.  
  24. 1. Upload `plugin-name.php` to the `/wp-content/plugins/` directory
  25. 1. Activate the plugin through the 'Plugins' menu in WordPress
  26. 1. Place `<?php do_action('plugin_name_hook'); ?>` in your templates
  27.  
  28. == Changelog ==
  29.  
  30. = 0.1.0 =
  31. * Initial release

请注意，这里也包含更新日志。

3. 设置插件类

下一步，我们需要定义核心的插件类。该类将会包含如下内容：

  • 定义版本号 
  • 定义类中使用的别名（slug）
  • 注册并引入必要的 JavaScript
  • 渲染 Meta box

一般来说，我找不到使用面向对象的方式来开发插件的最好方法，因为就像你看到的，这个类里已经包含了不止一个功能。这是缺乏练习；然后，因为这里的代码很短，而且大部分代码都是在通过 JavaScript 来驱动多媒体库，这也是为不得不做的。

让我们从整体上来看一下这个类，并且我们将会仔细地看一些独立的组件：

  1. <?php
  2.  
  3. /**
  4.  * The dashboard-specific functionality of the plugin.
  5.  *
  6.  * @link       http://tommcfarlin.com
  7.  * @since      0.1.0
  8.  *
  9.  * @package    Acme_Footer_Image
  10.  * @subpackage Acme_Footer_Image/admin
  11.  */
  12.  
  13. /**
  14.  * The dashboard-specific functionality of the plugin.
  15.  *
  16.  * Defines the plugin name, version, the meta box functionality
  17.  * and the JavaScript for loading the Media Uploader.
  18.  *
  19.  * @package    Acme_Footer_Image
  20.  * @subpackage Acme_Footer_Image/admin
  21.  * @author     Tom McFarlin <tom@tommcfarlin.com>
  22.  */
  23. class Acme_Footer_Image {
  24.  
  25.     /**
  26.      * The ID of this plugin.
  27.      *
  28.      * @since    0.1.0
  29.      * @access   private
  30.      * @var      string    $name    The ID of this plugin.
  31.      */
  32.     private $name;
  33.  
  34.     /**
  35.      * The current version of the plugin.
  36.      *
  37.      * @since    0.1.0
  38.      * @access   private
  39.      * @var      string    $version    The version of the plugin
  40.      */
  41.     private $version;
  42.  
  43.     /**
  44.      * Initializes the plugin by defining the properties.
  45.      *
  46.      * @since 0.1.0
  47.      */
  48.     public function __construct() {
  49.  
  50.         $this->name = 'acme-footer-image';
  51.         $this->version = '0.1.0';
  52.  
  53.     }
  54.  
  55.     /**
  56.      * Defines the hooks that will register and enqueue the JavaScriot
  57.      * and the meta box that will render the option.
  58.      *
  59.      * @since 0.1.0
  60.      */
  61.     public function run() {
  62.  
  63.         add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_scripts' ) );
  64.         add_action( 'add_meta_boxes', array( $this, 'add_meta_box' ) );
  65.  
  66.     }
  67.  
  68.     /**
  69.      * Renders the meta box on the post and pages.
  70.      *
  71.      * @since 0.1.0
  72.      */
  73.     public function add_meta_box() {
  74.  
  75.         $screens = array( 'post', 'page' );
  76.  
  77.         foreach ( $screens as $screen ) {
  78.  
  79.             add_meta_box(
  80.                 $this->name,
  81.                 'Footer Featured Image',
  82.                 array( $this, 'display_featured_footer_image' ),
  83.                 $screen,
  84.                 'side'
  85.             );
  86.  
  87.         }
  88.  
  89.     }
  90.  
  91.     /**
  92.      * Registers the JavaScript for handling the media uploader.
  93.      *
  94.      * @since 0.1.0
  95.      */
  96.     public function enqueue_scripts() {
  97.  
  98.         wp_enqueue_media();
  99.  
  100.         wp_enqueue_script(
  101.             $this->name,
  102.             plugin_dir_url( __FILE__ ) . 'js/admin.js',
  103.             array( 'jquery' ),
  104.             $this->version,
  105.             'all'
  106.         );
  107.  
  108.     }
  109.  
  110.     /**
  111.      * Renders the view that displays the contents for the meta box that for triggering
  112.      * the meta box.
  113.      *
  114.      * @param    WP_Post    $post    The post object
  115.      * @since    0.1.0
  116.      */
  117.     public function display_featured_footer_image( $post ) {
  118.         include_once( dirname( __FILE__ ) . '/views/admin.php' );
  119.     }
  120.  
  121. }

大多数代码都可以根据注释看明白。如果看不懂的话，不要犹豫并且立马在下面留言。让我们一起看看下面的两段代码：

首先，是MetaBox的定义。

  1. <?php
  2. public function add_meta_box() {
  3.  
  4.     $screens = array( 'post', 'page' );
  5.  
  6.     foreach ( $screens as $screen ) {
  7.  
  8.         add_meta_box(
  9.             $this->name,
  10.             'Footer Featured Image',
  11.             array( $this, 'display_featured_footer_image' ),
  12.             $screen,
  13.             'side'
  14.         );
  15.  
  16.     }
  17.  
  18. }

请注意，我们在页面（Page)和文章（post）中都支持 MetaBox。在这个函数中通过引用  display_featured_footer_image 这个回调函数来渲染 MetaBox。

  1. public function display_featured_footer_image( $post ) {
  2.     include_once( dirname( __FILE__ ) . '/views/admin.php' );
  3. }

这个文件很简单。这是一个链接，通过JavaScript根据ID来访问。

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

并且，我们引入了加载多媒体库需要的JavaScript。

  1. public function enqueue_scripts() {
  2.  
  3.     wp_enqueue_media();
  4.  
  5.     wp_enqueue_script(
  6.         $this->name,
  7.         plugin_dir_url( __FILE__ ) . 'js/admin.js',
  8.         array( 'jquery' ),
  9.         $this->version,
  10.         'all'
  11.     );
  12.  
  13. }

注意这里，我们在引入 JavaScript 之前先调用 wp_enqueue_media。根据官方文档，这个函数：

引入了所有的脚本，样式，设置和使用多媒体 JavaScript APIs 的模板。

为了确保能够正确地加载多媒体上传组件而引入所需要的依赖是必须的。

4. JavaScript

下一步，让我们一起看一下为了确保用户在点击适当的链接后能看到多媒体库而需要写的 JavaScript。

这段代码中的注释有很多，所以应该很容易理解。如果有不理解的地方，请在文章的下面留言反馈。

  1. /**
  2.  * Callback function for the 'click' event of the 'Set Footer Image'
  3.  * anchor in its meta box.
  4.  *
  5.  * Displays the media uploader for selecting an image.
  6.  *
  7.  * @since 0.1.0
  8.  */
  9. function renderMediaUploader() {
  10.     'use strict';
  11.  
  12.     var file_frame, image_data;
  13.  
  14.     /**
  15.      * If an instance of file_frame already exists, then we can open it
  16.      * rather than creating a new instance.
  17.      */
  18.     if ( undefined !== file_frame ) {
  19.  
  20.         file_frame.open();
  21.         return;
  22.  
  23.     }
  24.  
  25.     /**
  26.      * If we're this far, then an instance does not exist, so we need to
  27.      * create our own.
  28.      *
  29.      * Here, use the wp.media library to define the settings of the Media
  30.      * Uploader. We're opting to use the 'post' frame which is a template
  31.      * defined in WordPress core and are initializing the file frame
  32.      * with the 'insert' state.
  33.      *
  34.      * We're also not allowing the user to select more than one image.
  35.      */
  36.     file_frame = wp.media.frames.file_frame = wp.media({
  37.         frame:    'post',
  38.         state:    'insert',
  39.         multiple: false
  40.     });
  41.  
  42.     /**
  43.      * Setup an event handler for what to do when an image has been
  44.      * selected.
  45.      *
  46.      * Since we're using the 'view' state when initializing
  47.      * the file_frame, we need to make sure that the handler is attached
  48.      * to the insert event.
  49.      */
  50.     file_frame.on( 'insert', function() {
  51.  
  52.         /**
  53.          * We'll cover this in the next version.
  54.          */
  55.  
  56.     });
  57.  
  58.     // Now display the actual file_frame
  59.     file_frame.open();
  60.  
  61. }
  62.  
  63. (function( $ ) {
  64.     'use strict';
  65.  
  66.     $(function() {
  67.         $( '#set-footer-thumbnail' ).on( 'click', function( evt ) {
  68.  
  69.             // Stop the anchor's default behavior
  70.             evt.preventDefault();
  71.  
  72.             // Display the media uploader
  73.             renderMediaUploader();
  74.  
  75.         });
  76.  
  77.     });
  78.  
  79. })( jQuery );

这里仅仅是显示多媒体库。在上传或者选者图片之后并没有真正地做任何事情。

5. 设置插件核心文件

最后，定义启动插件的文件：

  1. <?php
  2. /**
  3.  * Acme Footer Image
  4.  *
  5.  * Append a featured image at the bottom of the content of a post or page. Used as a demo
  6.  * for a Tuts+ Code tutorial.
  7.  *
  8.  * @package   Acme_Footer_Image
  9.  * @author    Tom McFarlin <tom@tommcfarlin.com>
  10.  * @license   GPL-2.0+
  11.  * @link      http://tommcfarlin.com
  12.  * @copyright 2014 Tom McFarlin
  13.  *
  14.  * @wordpress-plugin
  15.  * Plugin Name: Acme Footer Image
  16.  * Plugin URI:  TODO
  17.  * Description: Appends a featured image at the bottom of the content of a post or page.
  18.  * Version:     0.1.0
  19.  * Author:      Tom McFarlin
  20.  * Author URI:  http://tommcfarlin.com
  21.  * License:     GPL-2.0+
  22.  * License URI: http://www.gnu.org/licenses/gpl-2.0.txt
  23.  */
  24.  
  25. // If this file is called directly, abort.
  26. if ( ! defined( 'WPINC' ) ) {
  27.     die;
  28. }
  29.  
  30. /**
  31.  * Includes the core plugin class for executing the plugin.
  32.  */
  33. require_once( plugin_dir_path( __FILE__ ) . 'admin/class-acme-footer-image.php' );
  34.  
  35. /**
  36.  * Begins execution of the plugin.
  37.  *
  38.  * Since everything within the plugin is registered via hooks,
  39.  * then kicking off the plugin from this point in the file does
  40.  * not affect the page life cycle.
  41.  *
  42.  * @since    0.1.0
  43.  */
  44. function run_acme_footer_image() {
  45.  
  46.     $plugin = new Acme_Footer_Image();
  47.     $plugin->run();
  48.  
  49. }
  50. run_acme_footer_image();

到此，所有的内容都已经是比较熟悉的了：我们需要确保有权限加载该插件，我们包含了仪表盘的依赖、创建了小工具实例。

6. 运行它

这时候，我们在看如何激活插件。在WordPress安装插件的界面上安装后，打开页面（Page）或者文章（Post）。你应该能注意到“底部的特色图片”。然后，当我们点击链接的时候，多媒体库就会出现。

如果没有出现的话，再次检查你的 JavaScript 文件是否已经被正确地加载。

这时候，你可以自由地选择并且上传图片了，尽管什么事情也没发生。在下一篇文章中，我们将会学习如何利用多媒体上传组件获取数据。

总结

在下一篇文章中，我们将会学习如何利用 JavaScript 获取数据并添加到多媒体库中。

另外，我们将会学习如何在多媒体上传组件中使用已有的模板添加扩展属性到WordPress核心中。稍后我们将会学习如何添加更多的信息。

现在，仔细研究一下本文给出的代码，试一试能不能让这些代码在你自己的项目中运行，然后把你的反馈信息留下。

最后，不要忘记你可以从文章 GitHub 库查看代码：https://github.com/tutsplus/acme-footer-image

原文出自：http://code.tutsplus.com/tutorials/getting-started-with-the-wordpress-media-uploader–cms-22011

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

您已阅读完《WordPress 媒体文件上传开发入门（共3篇）》专题的第 1 篇。请继续阅读该专题下面的文章：

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
媒体上传媒体库
欢迎关注WordPress大学公众号 WPDAXUE
WordPress开发

掌握 WP_Query：WP_Query类的属性和方法

2016-2-28 8:56:12

WordPress开发

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

2016-2-29 10:36:53

猜你喜欢
0 条回复 A文章作者 M管理员
欢迎您，新朋友，感谢参与互动！
    暂无讨论，说说你的看法吧

请输入验证码

请输入图片中的验证码
点击发送按钮获取验证码

取消
×
×
￥undefined
请打开手机使用微信扫码支付
「」
×

....支付确认中....

「」
×
支付金额

￥

undefined
×
积分支付
您当前的积分为0

检测到您未绑定微信账户，请先绑定微信

立刻绑定
确定
×

举报

请选择举报类型*

政治有害
不友善
垃圾广告
违法违规
色情低俗
涉嫌侵权
网络暴力
涉未成年
自杀自残
不实信息
引人不适
抄袭
扰乱社区秩序
请输入举报内容 *

举报提交后，我们会以邮件的形式向您反馈处理结果。

×

打开微信扫一扫

扫码并「关注我们的公众号」安全快捷登录

×

下载海报：

个人中心
购物车
优惠劵
今日签到
私信列表
搜索

  • 扫码打开当前页

  • 微信扫一扫，联系我们

  • 关注微信公众号 WPDAXUE

返回顶部