WordPress 多媒体上传组件入门

=== Acme Footer Image ===
Contributors: tommcfarlin
Donate link: http://tommcfarlin.com/
Tags: featured images
Requires at least: 3.9.2
Tested up to: 3.9.2
Stable tag: 0.1.0
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

Append a featured image at the bottom of the content of a post or page.

== Description ==

Append a featured image at the bottom of the content of a post or page. Used as a demo
for a Tuts+ Code tutorial.

== Installation ==

This section describes how to install the plugin and get it working.

e.g.

1. Upload `plugin-name.php` to the `/wp-content/plugins/` directory
1. Activate the plugin through the 'Plugins' menu in WordPress
1. Place `<?php do_action('plugin_name_hook'); ?>` in your templates

== Changelog ==

= 0.1.0 =
* Initial release

<?php

/**
 * The dashboard-specific functionality of the plugin.
 *
 * @link       http://tommcfarlin.com
 * @since      0.1.0
 *
 * @package    Acme_Footer_Image
 * @subpackage Acme_Footer_Image/admin
 */

/**
 * The dashboard-specific functionality of the plugin.
 *
 * Defines the plugin name, version, the meta box functionality
 * and the JavaScript for loading the Media Uploader.
 *
 * @package    Acme_Footer_Image
 * @subpackage Acme_Footer_Image/admin
 * @author     Tom McFarlin <tom@tommcfarlin.com>
 */
class Acme_Footer_Image {

    /**
     * The ID of this plugin.
     *
     * @since    0.1.0
     * @access   private
     * @var      string    $name    The ID of this plugin.
     */
    private $name;

    /**
     * The current version of the plugin.
     *
     * @since    0.1.0
     * @access   private
     * @var      string    $version    The version of the plugin
     */
    private $version;

    /**
     * Initializes the plugin by defining the properties.
     *
     * @since 0.1.0
     */
    public function __construct() {

        $this->name = 'acme-footer-image';
        $this->version = '0.1.0';

    }

    /**
     * Defines the hooks that will register and enqueue the JavaScriot
     * and the meta box that will render the option.
     *
     * @since 0.1.0
     */
    public function run() {

        add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_scripts' ) );
        add_action( 'add_meta_boxes', array( $this, 'add_meta_box' ) );

    }

    /**
     * Renders the meta box on the post and pages.
     *
     * @since 0.1.0
     */
    public function add_meta_box() {

        $screens = array( 'post', 'page' );

        foreach ( $screens as $screen ) {

            add_meta_box(
                $this->name,
                'Footer Featured Image',
                array( $this, 'display_featured_footer_image' ),
                $screen,
                'side'
            );

        }

    }

    /**
     * Registers the JavaScript for handling the media uploader.
     *
     * @since 0.1.0
     */
    public function enqueue_scripts() {

        wp_enqueue_media();

        wp_enqueue_script(
            $this->name,
            plugin_dir_url( __FILE__ ) . 'js/admin.js',
            array( 'jquery' ),
            $this->version,
            'all'
        );

    }

    /**
     * Renders the view that displays the contents for the meta box that for triggering
     * the meta box.
     *
     * @param    WP_Post    $post    The post object
     * @since    0.1.0
     */
    public function display_featured_footer_image( $post ) {
        include_once( dirname( __FILE__ ) . '/views/admin.php' );
    }

}

<?php
public function add_meta_box() {

    $screens = array( 'post', 'page' );

    foreach ( $screens as $screen ) {

        add_meta_box(
            $this->name,
            'Footer Featured Image',
            array( $this, 'display_featured_footer_image' ),
            $screen,
            'side'
        );

    }

}

public function display_featured_footer_image( $post ) {
    include_once( dirname( __FILE__ ) . '/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>

public function enqueue_scripts() {

    wp_enqueue_media();

    wp_enqueue_script(
        $this->name,
        plugin_dir_url( __FILE__ ) . 'js/admin.js',
        array( 'jquery' ),
        $this->version,
        'all'
    );

}

/**
 * Callback function for the 'click' event of the 'Set Footer Image'
 * anchor in its meta box.
 *
 * Displays the media uploader for selecting an image.
 *
 * @since 0.1.0
 */
function renderMediaUploader() {
    'use strict';

    var file_frame, image_data;

    /**
     * If an instance of file_frame already exists, then we can open it
     * rather than creating a new instance.
     */
    if ( undefined !== file_frame ) {

        file_frame.open();
        return;

    }

    /**
     * If we're this far, then an instance does not exist, so we need to
     * create our own.
     *
     * Here, use the wp.media library to define the settings of the Media
     * Uploader. We're opting to use the 'post' frame which is a template
     * defined in WordPress core and are initializing the file frame
     * with the 'insert' state.
     *
     * We're also not allowing the user to select more than one image.
     */
    file_frame = wp.media.frames.file_frame = wp.media({
        frame:    'post',
        state:    'insert',
        multiple: false
    });

    /**
     * Setup an event handler for what to do when an image has been
     * selected.
     *
     * Since we're using the 'view' state when initializing
     * the file_frame, we need to make sure that the handler is attached
     * to the insert event.
     */
    file_frame.on( 'insert', function() {

        /**
         * We'll cover this in the next version.
         */

    });

    // Now display the actual file_frame
    file_frame.open();

}

(function( $ ) {
    'use strict';

    $(function() {
        $( '#set-footer-thumbnail' ).on( 'click', function( evt ) {

            // Stop the anchor's default behavior
            evt.preventDefault();

            // Display the media uploader
            renderMediaUploader();

        });

    });

})( jQuery );

<?php
/**
 * Acme Footer Image
 *
 * Append a featured image at the bottom of the content of a post or page. Used as a demo
 * for a Tuts+ Code tutorial.
 *
 * @package   Acme_Footer_Image
 * @author    Tom McFarlin <tom@tommcfarlin.com>
 * @license   GPL-2.0+
 * @link      http://tommcfarlin.com
 * @copyright 2014 Tom McFarlin
 *
 * @wordpress-plugin
 * Plugin Name: Acme Footer Image
 * Plugin URI:  TODO
 * Description: Appends a featured image at the bottom of the content of a post or page.
 * Version:     0.1.0
 * Author:      Tom McFarlin
 * Author URI:  http://tommcfarlin.com
 * License:     GPL-2.0+
 * License URI: http://www.gnu.org/licenses/gpl-2.0.txt
 */

// If this file is called directly, abort.
if ( ! defined( 'WPINC' ) ) {
    die;
}

/**
 * Includes the core plugin class for executing the plugin.
 */
require_once( plugin_dir_path( __FILE__ ) . 'admin/class-acme-footer-image.php' );

/**
 * Begins execution of the plugin.
 *
 * Since everything within the plugin is registered via hooks,
 * then kicking off the plugin from this point in the file does
 * not affect the page life cycle.
 *
 * @since    0.1.0
 */
function run_acme_footer_image() {

    $plugin = new Acme_Footer_Image();
    $plugin->run();

}
run_acme_footer_image();