wordpress主题后台教程(九):多个图片上传表单
本节教程需要再上一篇教程的基础上完成,请先准备好上一篇教程中的代码和js文件。本教程要实现的目标是后台能有多个图片上传表单。
首先我们修改表单,添加多个上传按钮,还加上显示图片用的div容器。
上一篇教程中的js代码中是通过文本域的id值来获取元素的,如果有多个文件上传表单,但是在一个html文档中id不能相同,那样的话,就得针对每个表单都写一个js,这样很繁琐,所以今天我们修改一下表单,并且将js改成通过class获取对象。
将类中的display()函数修改为(我新加了一个ashu_ico项,并且将上传按钮的id属性去掉改成class="ashu_bottom"):
- function display() {
- //加载upload.js文件
- wp_enqueue_script('my-upload', get_bloginfo( 'stylesheet_directory' ) . '/js/upload.js');
- //加载上传图片的js(wp自带)
- wp_enqueue_script('thickbox');
- //加载css(wp自带)
- wp_enqueue_style('thickbox');
- $options = ClassicOptions::getOptions(); ?>
- <form method="post" enctype="multipart/form-data" name="classic_form" id="classic_form">
- <div class="wrap">
- <h2><?php _e('阿树工作室主题设置'); ?></h2>
- <p>
- <label>
- <input type="text" size="80" name="ashu_logo" id="ashu_logo" value="<?php echo($options['ashu_logo']); ?>"/>
- <input type="button" value="上传" class="ashu_bottom"/>
- </label>
- </p>
- <p>
- <label>
- <input type="text" size="80" name="ashu_ico" id="ashu_ico" value="<?php echo($options['ashu_ico']); ?>"/>
- <input type="button" value="上传" class="ashu_bottom"/>
- </label>
- </p>
- <p class="submit">
- <input type="submit" name="classic_save" value="<?php _e('保存设置'); ?>" />
- </p>
- </div>
- </form>
- <?php
- }
这里新加了一个设置项,前面默认数据设置、数据更新都需要相应的增加项目,很简单,这里不赘述。
且看新的js代码,用编辑器打开我们的upload.js,修改代码为:
- jQuery(document).ready(function() {
- //查找class为ashu_bottom的对象
- jQuery('input.ashu_bottom').click(function() {
- //获取它前面的一个兄弟元素
- targetfield = jQuery(this).prev('input');
- 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(targetfield).val(imgurl);
- tb_remove();
- }
- });
到此多个图片上传已经实现,其实也很简单。。
!转载请注明来自:阿树工作室-wordpress主题定制,制作教程(wordpress主题定制-阿树工作室)
上传图片的位置怎么改?
这边也是编辑器一块使用会有一些冲突。。不知道怎么解决。。。
树哥!你网站上面的下载 在最近确实出现了很多的问题!用chrome下载的压缩包 点无法打开!IE也无法下载正确的内容!请您调整下!对你站点的内容依赖是非常非常大的!如果您方便我很希望您能把这些文件传给我一份作!我感激不尽!
选择通过URL上传,为什么一定要填最后的那个选项“将图像链接到”才能成功?
通过URL上传,为什么一定要填最后的那个选项“将图像链接到”才能成功?
通过URL上传,为什么一定要填最后的那个选项“将图像链接到”才能成功?
求救!!我把2篇文章的代码整合到了一起,刷新后,出现了2个上传图片的按钮,好兴奋,可是点击保存后,只有第一个框有图片地址,第二个框的图片地址就消失了。。。
代码和js都是用博主的。。。求教是什么问题呢?能不能麻烦博主,把2篇文章的代码再整合到一起,让菜鸟们可以顺利简单的使用呢。谢谢了
如果要简单方便的使用。。请参考本站提供的类文件。。。wordpress后台制作教程-设置选项类文件
编辑器的添加请参考:http://www.ashuwp.com/courses/highgrade/277.html
其实不是简单的使用额,因为我把网上的幻灯片集成到自己的主题中,而幻灯片又需要上传好几张图片,结果弄出了5个上传图片的框,但结果就是点击保存后,只有第一个框有值,其他4个就变成空白了。。。
ps:找了一下后台添加菜单的教程,貌似没有后台插入tinymce编辑器的教程,老大可否考虑做一个呢?就是这个http://www.ashuwp.com/imguploads/2012/08/alloption.png
里面有了大多数的功能,但是缺少了一个tinymce编辑框。谢谢
亲。。使用本工作室提供的类文件。。。。你想怎么添加就怎么添加。。。
阿树大哥,我还想问问后台插入编辑器的代码是什么呢?如图http://ww1.sinaimg.cn/large/9ed5c127jw1e5msdy4tddj20la0c8jsm.jpg
这样你那个类文件就齐全啦。
可以实现上传预览了,请问一下如何调用,在前台显示不出来?
额。。你留言在这个多图上传文章里,你用的代码是上一篇的吗?
如果是的话,请使用: $options = ClassicOptions::getOptions(); echo $options[‘ashu_logo’]; 这样来调用数据。。