WordPress同时插入多张图片

对于WordPress的惯用者来说，有一项非常难以适应的就是WP的图片插入方式。WP图片插入不仅存在打开界面慢，插入选项不符合习惯等，最令人头疼的就是WP不能一次插入多张图片。本文介绍两个插件，并且在此基础上将插件引申开来，让WP惯用者们摆脱WP图片插入烦恼。

插件Faster Image Insert
插件multiple-image-inserter-master

这两个插件都能实现在WP后台上传图片或在相册、媒体中，选择多张图片，同时将这些选中的图片进行插入。其中，第一个插件还会在撰写文章页面增加一个挂件，让撰写者可以轻松的实现上传和插入。而从源代码来看，第二个插件则更好理解，也更符合代码框架的思路。不过这两个插件都有一个缺憾，就是只能一次性插入多张上传的图片，而不能一次插入多张外链图片，对于那些使用网盘进行图片管理的博客主又有遗憾。为此，否子戈在此基础上对插件进行了改进，融合了两个插件的优缺点，同时增加可以一次性加入多张外链图片的功能。插件版权所有，有需要该插件的朋友请通过QQ和否子戈进行联系。

上述两个插件的思路

我们以第二个插件的思路来进行解说。

实现该功能的第一步是进行分析：

1、为上传好的图片列表添加选择按钮；添加一些设置和提交按钮；添加配置表格。这一切都通过jQuery添加DOM来实现，因此需要很大的一部分javascript代码，这个插件的方法是将这些JS代码全部放在一个脚本文件中。
2、当提交表单，插入选中的图片时，需要通过对这些选中的元素进行判断，然后通过和WP系统本身的一些运作进行结合，最终实现插入这些被选中的图片。

接下来我们看看这个插件的PHP源代码：

/**
 * @package Multiple Image Inserter
 * @version 1.0
 */
/*
Plugin Name: Multiple Image Inserter
Description: Makes it possible to insert multiple images at the same time from the Media Library
Version: 1.0
Author: Christian Wannerstedt @ Kloon Production AB
License: GPL2

Inspired by the Faster Image Insert plugin:
http://wordpress.org/extend/plugins/faster-image-insert/
*/

class MultipleImageInserter {
    public function __construct(){
		add_action('admin_head', array($this, 'mii_admin_head'));
		add_filter('media_upload_gallery', array($this, 'mii_media_upload'));
		add_filter('media_upload_library', array($this, 'mii_media_upload'));
		add_filter('media_upload_image', array($this, 'mii_media_upload'));
    }

	function mii_admin_head(){
		// Add js
		wp_enqueue_script('multiple-image-inserter', plugins_url('multiple-image-inserter.js', __FILE__));

		// Add css
		wp_enqueue_style('multiple-image-inserter', plugins_url('multiple-image-inserter.css', __FILE__));
	}

	// Filter for media upload popup.
	function mii_media_upload(){
		if (isset($_POST['insertall'])){
	    	$return = $this->mii_form_handler();
	    	if (is_string($return)) echo $return;
	  	}
	}

	// Catches the insert selected images post request.
	function mii_form_handler() {
		global $post_ID, $temp_ID;
	  	$post_id = (int) (0 == $post_ID ? $temp_ID : $post_ID);
	  	check_admin_referer('media-form');

	  	// Modify the insertion string
		if (!empty($_POST['attachments'])){
	    	$result = '';

			// Loop through attachments, and find selected ones
	    	foreach ($_POST['attachments'] as $attachment_id => $attachment){
	      		$attachment = stripslashes_deep($attachment);

	      		if (!empty($attachment['selected'])){
					$html = ' '. wp_get_attachment_image($attachment_id, 'main-image-size');
					$result .= $html .'n';
				}
	    	}

			// Wrap result in a div
			$result = '

n’; // Pass content to editor $result = ‘‘; return $result; } return “”; } } $multiple_image_inserter = new MultipleImageInserter();

这个插件使用了PHP类来写，这并不影响我们对插件思路的观察。

第一步：向后台页面中增加脚本文件和css文件，即wp_enqueue_script('multiple-image-inserter', plugins_url('multiple-image-inserter.js', __FILE__));和wp_enqueue_style('multiple-image-inserter', plugins_url('multiple-image-inserter.css', __FILE__));。将它们放在一个函数中，通过add_action('admin_head', array($this, 'mii_admin_head'));即可完成挂载。

上文说到，在JS中通过增加DOM节点，实现了增加选择框、按钮、配置表格等页面元素，这些你可以通过下载插件本身进行观察。

第二步：通过一个挂载，实现在提交插入按钮之后，进行一些额外的程序处理，这个处理函数即下面这个函数

// Filter for media upload popup.
function mii_media_upload(){
	if (isset($_POST['insertall'])){
	    $return = $this->mii_form_handler();
	    if (is_string($return)) echo $return;
	}
}

其中mii_form_handler()处理是一个比较复杂的过程，因此另外启用一个函数，即使将这个函数的内容全部拿过来填写在这里也是可以的。由于这个插件使用的是PHP类的形式，所以$this->mii_form_handler();。

也就是说，这个函数最终实现了向编辑器中插入选中的图片。但是要让这个动作起作用，还必须通过插件中的add_filter帮忙：

add_filter('media_upload_gallery', array($this, 'mii_media_upload'));
add_filter('media_upload_library', array($this, 'mii_media_upload'));
add_filter('media_upload_image', array($this, 'mii_media_upload'));

这样，在提交时，上面的那个函数就可以同时运作。整个插件的思路其实非常清晰，只不过mii_form_handler()这个函数你还需要稍加研究，读懂其中的意思。

增加外链图片的多张同时插入

这一功能我不会给出源码，但会将思路列出。其实和插件的思想一样。

第一步：通过JS增加DOM节点，实现可以填写多个外链图片及其描述、链接。

第二步：通过函数和add_filter挂载php处理程序，最终实现猝然多张外链图片。

由于插件功能本身已经很强大，且进行较多的简化和深入过程，因此保持插件的版权，望朋友们见谅。预览如下，有需要者请QQ联系否子戈。