定制和使用WordPress图片上传功能

二月 10
磊子 2012年 10 条评论

使用过wordpress朋友们都知道,wordpress有自带的图片上传功能,特别是新版出来后,这个功能提高了用户体验,使用起来还是很方便的。当我们在给自己的主题进行更新和自己开发一些功能的时候,常常会用到使用图片的,而我们通常使用的方法就是直接将图片路径输入进行,比如Logo图片什么的,如果我们加上图片上传功能,这样我就可以很方便的进行选择添加了,那么磊子就说下这个使用方法。

现在一些主题都或多或少的添加了主题设置的功能,我们要做的就是在主题设置里面添加上传按钮。所以需要找到主题设置这个功能的代码所在的文件,找到它创建的菜单函数,比如:add_menu_page,add_submenu_page等等,然后再下面添加这些代码。

function my_admin_scripts() { //加载需要使用的js文件。
	wp_enqueue_script('media-upload');
	wp_enqueue_script('thickbox');
	wp_register_script('my-upload', get_bloginfo('template_directory').'/js/my-script.js', array('jquery','media-upload','thickbox'));
	wp_enqueue_script('my-upload');
}

function my_admin_styles() { //加载样式文件。
	wp_enqueue_style('thickbox');
}

if (isset($_GET['page']) && $_GET['page'] == 'themeoption') {
	add_action('admin_print_scripts', 'my_admin_scripts');
	add_action('admin_print_styles', 'my_admin_styles');
}
//themeoption是创建这个菜单的地址名称,比如当我点击自己主题后台的主题设置的时候
//地址栏中后面一段是admin.php?page=themeoption,这个themeoption就是我们要使用的

接着我们需要在你需要显示的地方添加html代码

<label for="left_box">图片上传测试</label>

<input name="left_box" type="text" id="left_box" value="<?php echo get_option('lei_left_box'); ?>" class="regular-text left_box" />

<input type="button" id="left_upload_button" name="left_upload_button" class="left_upload_button" value="Upload Image"  />

在上面代码中还提到一个my-script.js文件,这个需要我们自行创建,而且注意检查你引入的地址是不是正确,my-script.js文件里面需要添加的代码是。

jQuery(document).ready(function() {

    jQuery('.left_upload_button').click(function() {
         targetfield = jQuery(this).prev('#left_box');
         tb_show('', 'media-upload.php?type=image&TB_iframe=true');
         return false;
    });

	window.send_to_editor = function(html) {
			 imgurl = jQuery('img',html).attr('src');
			 jQuery("#left_box").val(imgurl);
			 tb_remove();
		}

});

都添加好,路径都检查好没有问题后刷新一下你主题设置的菜单。会出现按钮出来,如下图:


然后点击Upload Image的时候就会弹出和wordpress自带的图片上传一样的效果了,图片保存的地方同样是在uploads文件夹下,这样一个图片上传功能就做好了。

由于主题的不同它所写的代码结构也不大相同,所以需要根据大家主题的代码结构来对上面的方法做相应的修改和调整,这个就需要大家自己研究下自己的主题咯,或者也可以联系磊子和你一起来看看。

 

» 版权所有©转载必须以链接形式注明作者和原始出处:磊子的博客 » 定制和使用WordPress图片上传功能
» 地址:( Ctrl+C 复制 )
» 如果对本站感兴趣,请到网站右下方订阅本站,将为你带来更多精彩和实用的文章
» 如果您对这篇文章感兴趣,不妨小小的 捐助(Donate)一下博主吧,不管多少都是对博主最大的支持和鼓励哟,博主-磊子感谢大家的支持!!!

10 条留言 其中:访客:6 条, 博主:4 条

  1. 啊喵说:

    这个功能好棒!但是有一个致命的问题,就是当有2个或2以上的上传图片功能。那么上传图片后,图片的地址只会出现在最后一个上,前面2个就无效了。
    希望博主能解决下。。谢谢啦。

  2. beegao说:

    磊子你好,能不能给写个小插件或给个方法也行,我想在每个导航菜单的链接上面添加一个自定义图标,在后台设置菜单的时候为能够为每个菜单项上传自定义的图标,看了这篇文着有点启发,但还是自己弄不出来,帮帮忙啊

    • 磊子说:

      如果你想每个菜单的自定义图标都不一样。可以给每个菜单添加独立的class值,在菜单设置那边可以添加,然后添加css样式,如果你想做到后台去的话,可以做一个新的设置菜单出来,然后获取你目前的菜单内容。然后在分别给这些菜单添加图标。给你个细路。可以借鉴一下!

      • beegao说:

        多谢啊,第一种添加class的方法比较简单,直接搞定了,虽然麻烦一些,但是够用,第二种有点儿难,不会弄 :wink:

  3. 小谭说:

    我是想知道怎么禁止它自动生成好多张图片

    • 磊子说:

      你这么一说,还真提醒了我,有时间去研究下!不过生成的图片也不多哟,只有两张的,一大一小。而且有时候是非常有用滴!呵呵! :razz:

  4. 小谭说:

    这么做的目地是什么呢?

    • 磊子说:

      目的就是方便用户之间点击上传图片哦,不用直接贴地址那么麻烦了。 :razz:

  5. 商盟网说:

    很久没有来光顾,今天过来看看,文章写的很好,记得回访哦!

说点什么吧




wireless earbuds moscow mule mugs bluetooth speakers waterproof camera best wireless earbuds best vacuum cleaner best drugstore foundation best dishwasher best waist trainer wireless headphones best vacuum 0594918 best bluetooth earbuds waterproof bluetooth speaker tattoo cover up action camera
订阅本站