Hack方法实现WordPress批量插入媒体图片

WordPress的多媒体管理功能一直是令人诟病的缺点之一,一是缺乏对国内本地媒体网站的支持,其二就是对媒体文件的批量插入以及管理功能。这不就遇到了麻烦:想在文章里插入十几张图片,一张张插入会死人的。参考了国外程序猿的代码,Hack了WordPress原程序,一下就好用多了。不过此方法只适用于WP3.5以下的旧版本,因为新版本已经对多媒体功能完全翻修了一遍,不存在上述问题。

下面以WordPress 3.1为例,讲解具体的实现方法。首先是找到WP安装目录下的“wp-admin\includes\media.php”文件,编辑之前注意要备份一份,然后下载到本地或在线编辑,找到如下代码:

<table class="widefat" cellspacing="0">
<thead><tr>
<th><?php _e('Media'); ?></th>
<th class="order-head"><?php _e('Order'); ?></th>
<th class="actions-head"><?php _e('Actions'); ?></th>
</tr></thead>
</table>

这个是上传完图片并保存后相册列表的表头,将其改为如下代码:

<table class="widefat" cellspacing="0">
<thead><tr>
<th><?php _e('Media'); ?></th>
<th class="order-head"><?php _e('Order'); ?></th>
<th class="actions-head"><?php _e('Actions'); ?>
&nbsp;&nbsp;&nbsp;<input type="checkbox" name="check_all_pix" id="check_all_pix" style="padding-right:4px;" checked onClick="run_check_all_pix();" /></th>
</tr></thead>
</table>

多出的代码是为了添加一个选择所有图片的复选框。然后找到如下代码:

	foreach ( $form_fields as $key => $val ) {
		if ( 'menu_order' == $key ) {
			if ( $gallery )
				$order = "<div class='menu_order'> <input class='menu_order_input' type='text' id='attachments[$attachment_id][menu_order]' name='attachments[$attachment_id][menu_order]' value='" . esc_attr( $val['value'] ). "' /></div>";
			else
				$order = "<input type='hidden' name='attachments[$attachment_id][menu_order]' value='" . esc_attr( $val['value'] ) . "' />";

			unset( $form_fields['menu_order'] );
			break;
		}
	}

将其改为:

	foreach ( $form_fields as $key => $val ) {
		if ( 'menu_order' == $key ) {
			if ( $gallery ) {
				$order = "<div class='menu_order'> <input class='menu_order_input' type='text' id='attachments[$attachment_id][menu_order]' name='attachments[$attachment_id][menu_order]' value='" . esc_attr( $val['value'] ). "' />";
				$order .= '<input type="checkbox" name="check_pix_'.$attachment_id.'" id="check_pix_'.$attachment_id.'" value="'.$attachment_id.'" checked onClick="run_check_pix();" style="margin: auto 10px;" />';
				$order .= '<input type="hidden" name="pix_filename_'.$attachment_id.'" id="pix-filename-'.$attachment_id.'" value="'.$filename.'" />';
				$order .= '<input type="hidden" name="pix_guid_'.$attachment_id.'" id="pix-guid-'.$attachment_id.'" value="'.$post->guid.'" />';
				$order .= '</div>';
			}
			else
				$order = "<input type='hidden' name='attachments[$attachment_id][menu_order]' value='" . esc_attr( $val['value'] ) . "' />";

			unset( $form_fields['menu_order'] );
			break;
		}
	}

多出的这段代码是为了在上传后相册内的每个图片后添加一个复选框,以勾选你要插入的图片。最后找到一下这段代码:

<form enctype="multipart/form-data" method="post" action="<?php echo esc_attr($form_action_url); ?>" class="media-upload-form validate" id="gallery-form">

在其后插入如下代码:

<script type="text/javascript">

function getThumbImg(ID, classStr) { //获取缩略图的地址,classStr是缩略图img的ClassName
    var nodes = document.getElementById(ID).getElementsByTagName('img'),ret = [];
    if (nodes) {
        for (var i = 0; i < nodes.length; i++) {
            if (hasClass(nodes[i], classStr)) {
                ret.push(nodes[i].src);
            }
        }
        return ret[0];
    } else {
        return null;
    }
}

function hasClass(tagStr, classStr) {
    var arr = tagStr.className.split(/\s+/); //className可以有多个,因此需要分别判断
    for (var i = 0; i < arr.length; i++) {
        if (arr[i] == classStr) {
            return true;
        }
    }
    return false;
}
function dump(arr,level) {
	var dumped_text = "";
	if(!level) level = 0;
	
	//The padding given at the beginning of the line.
	var level_padding = "";
	for(var j=0;j<level+1;j++) level_padding += "    ";
	
	if(typeof(arr) == 'object') { //Array/Hashes/Objects 
		for(var item in arr) {
			var value = arr[item];
			
			if(typeof(value) == 'object') { //If it is an array,
				dumped_text += level_padding + "'" + item + "' ...\n";
				dumped_text += dump(value,level+1);
			} else {
				dumped_text += level_padding + "'" + item + "' => \"" + value + "\"\n";
			}
		}
	} else { //Stings/Chars/Numbers etc.
		dumped_text = "===>"+arr+"<===("+typeof(arr)+")";
	}
	return dumped_text;
}

function getInnerHTMLOfMediaItems(){   //获取BOM和HTML
	divMediaItems = document.getElementById("media-items");
	textAreaMediaItems = document.getElementById("textarea-media-items");
	textAreaMediaItems.value = divMediaItems.innerHTML;
}
function insert_checked_pix_to_editor(){   //插入到编辑器内
	galleryForm = document.getElementById("gallery-form");
	alert(galleryForm.length);	
	noneAreChecked = true;
	htmlStr = "";
	pixArray = new Array();
	thumbArray = new Array();
	p=0;
	for(var i=0 ; i<galleryForm.length ; i++){
		c = galleryForm.elements[i];

		if(c.type=="checkbox" && c.name.indexOf('check_pix_')===0){
			if(c.checked){
				noneAreChecked = false;
				pixGuid = document.getElementById("pix-guid-"+c.value).value;
				// pixMenuOrder = document.getElementById("attachments["+c.value+"][menu_order]").value;
				var thumbImg = getThumbImg('thumbnail-head-'+c.value,'thumbnail');
				if (thumbImg) {thumbArray[p] = thumbImg} else {thumbArray[p] = pixGuid}  //thumbArray[p]为缩略图地址数组
				pixArray[p] = pixGuid;   //pixArray[p]为原始图片地址数组
				p++;				
			}

		}
	}
	
	if(noneAreChecked){
		// opt to add an error message here asking the user to click on a checkbox if you wish
		return false;
	}
	
	for(p=0 ; p<pixArray.length ; p++){
		htmlStr += '<p><a href="'+pixArray[p]+'" target="_blank">';
		htmlStr += '<img src="'+thumbArray[p]+'" border="0" />';
		htmlStr += '</a></p>';
	}
	
	wpgallery.getWin().send_to_editor(htmlStr); return;
}
function toggle_insert_all_pix_button(){ //按钮文字切换
	insertAllPixButton = document.getElementById("insert-all-pix-button");
	checkAllPix = document.getElementById("check_all_pix");	
	
	if(checkAllPix.checked){
		insertAllPixButton.value = "插入所有图片";
	}
	else{
		insertAllPixButton.value = "插入所选的图片";
	}
}
function run_check_all_pix(){   //全选或全不选动作
	checkAllPix = document.getElementById("check_all_pix");
	galleryForm = document.getElementById("gallery-form");
	
	for(i=0 ; i<galleryForm.length ; i++){
		c = galleryForm.elements[i];
		if(c.type=="checkbox" && c.name.indexOf('check_pix_')===0){
			// check all or un-check all checkboxes
			c.checked = checkAllPix.checked;
		}
	}
	toggle_insert_all_pix_button();
}
function run_check_pix(){   //判断是否是全选
	checkAllPix = document.getElementById("check_all_pix");
	galleryForm = document.getElementById("gallery-form");
		
	allAreChecked = true;
	for(i=0 ; i<galleryForm.length ; i++){
		c = galleryForm.elements[i];
		if(c.type=="checkbox" && c.name.indexOf('check_pix_')===0){
			if(!c.checked){
				allAreChecked = false;
				break;
			}
		}
	}
	checkAllPix.checked = allAreChecked;
	toggle_insert_all_pix_button();
}

</script>

这个才是关键性的代码,它可以获取媒体相册内的图片和缩略图并将其插入到我们的文章编辑器内。当然这段代码的位置是可以变动的,不一定要紧接其后,而且大家还可以做一些改进,譬如增加反选动作,将会更加的方便。完成该Hack后就是下面这么一个效果:

Hack方法实现WordPress批量插入媒体图片

本文采用CC BY-NC-ND协议进行许可,传播时请保留链接:http://huangzhiqun.com/skill/wordpress-batch-insert-image.html

3,743 次阅读
  1. #1 龙行天下童鞋

    :razz: 文章写的很棒哦,给你点个赞!

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)

发表评论

× 二 = 十

注意: 评论者允许使用'@user空格'的方式将自己的评论通知另外评论者。例如, ABC是本文的评论者之一,则使用'@ABC '(不包括单引号)将会自动将您的评论发送给ABC。使用'@all ',将会将评论发送给之前所有其它评论者。请务必注意user必须和评论者名相匹配(大小写一致)。

疑惑 调皮 伤心 抠鼻 惊讶 微笑 脸红 坏笑 惊讶 发呆 撇嘴 酷 阴险 咒骂 愤怒 白眼 鼓掌 得意 汗 打呵欠 大哭 憨笑

评论