填写您的邮件地址,订阅我们的精彩内容:

WordPress同时插入多张图片

653

对于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’. $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联系否子戈。

下面我简单说几句