wordpress主题后台制作(八):图片上传

您现在的位置:阿树工作室->wordpress主题教程->后台制作教程  2012.8.15标签: ,   浏览数:27,493

前面我们通过几篇文章讲述了怎样添加一个简单的表单，虽然只演示了简单的文本输入框，但是像文本域、单选框之类的跟文本输入框基本一样，今天这篇教程讲述怎样给wordpress后台设置页面添加一个图片上传功能，对于自定义背景、自定义头部我们可以使用wp提供的函数，请参考本站wordpress主题功能集成之教程十五，但是对于自定义logo、自定义ico图片、以及其它的一些关于图片的设置选项就得自己配置了。

以前苦太狼在博客中通过两篇文章的篇幅用自己配置的代码实现了图片上传功能：参考http://www.kutailang.com/wordpress/admin-panel/261.html

那样是在是太繁琐了，其实我们只需要调用wordpress的那个默认的图片上传页面即可。

今天的实例为了简单起见，只添加一个图片上传按钮，并且使用我们上一篇教程中介绍的类。

文件准备：我用默认主题Twenty Ten来测试，首先在这个主题的文件夹下新建一个文件-myfunctions.php   然后打开functions.php文件在最底部添加下面的代码载入我们新建的这个文件：

  1. include_once('myfunctions.php');    

添加设置页面：然后用编辑器打开我们的myfunctions.php，添加创建后台设置页面的代码，下面的代码中，我将注释全部去掉了，查看注释请参考上一篇文章。

  1. <?php         
  2. class ClassicOptions {            
  3.     function getOptions() {         
  4.         $options = get_option('classic_options');            
  5.         if (!is_array($options)) {          
  6.             $options['ashu_logo'] = '';      
  7.             update_option('classic_options', $options);         
  8.         }   
  9.         return $options;      
  10.     }   
  11.     function init() {   
  12.         if(isset($_POST['classic_save'])) {   
  13.             $options = ClassicOptions::getOptions();   
  14.             $options['ashu_logo'] = stripslashes($_POST['ashu_logo']);      
  15.             update_option('classic_options', $options);   
  16.         } else {   
  17.             ClassicOptions::getOptions();         
  18.         }   
  19.         add_theme_page("阿树工作室主题设置", "阿树工作室主题设置", 'edit_themes', basename(__FILE__), array('ClassicOptions', 'display'));         
  20.     }   
  21.     function display() {        
  22.         $options = ClassicOptions::getOptions(); ?>         
  23.         <form method="post" enctype="multipart/form-data" name="classic_form" id="classic_form">         
  24.         <div class="wrap">         
  25.         <h2><?php _e('阿树工作室主题设置'); ?></h2>   
  26.         <p>   
  27.         <label>   
  28.             <input type="text" size="80"  name="ashu_logo" id="ashu_logo" value="<?php echo($options['ashu_logo']); ?>"/>   
  29.             <input type="button" name="upload_button" value="上传" id="upbottom"/>   
  30.         </label>   
  31.         </p>                           
  32.         <p class="submit">    
  33.             <input type="submit" name="classic_save" value="<?php _e('保存设置'); ?>" />         
  34.         </p>         
  35.     </div>         
  36. </form>         
  37. <?php         
  38.     }       
  39. }         
  40. add_action('admin_menu', array('ClassicOptions', 'init'));          
  41. ?>   

之后查看我们的后台设置页面，看一下我添加之后的效果图：

后台设置页面上传图片

此时文本域和上传按钮已经有了，但是点击还是没有任何效果。为了点击后弹出那个上传框架，我们还需要添加js代码。

为了便于管理，我们新建一个js文件，在twentyten主题文件夹下新建一个文件夹js然后，在这个文件加下新建一个upload.js文件。添加js代码：

  1. jQuery(document).ready(function() {   
  2.     //upbottom为上传按钮的id   
  3.     jQuery('#upbottom').click(function() {   
  4.         //ashu_logo为文本域   
  5.          targetfield = jQuery(this).prev('#ashu_logo');   
  6.          tb_show('', 'media-upload.php?type=image&amp;TB_iframe=true');   
  7.          return false;   
  8.     });   
  9.     
  10.     window.send_to_editor = function(html) {   
  11.          imgurl = jQuery('img',html).attr('src');   
  12.          jQuery(targetfield).val(imgurl);   
  13.          tb_remove();   
  14.     }   
  15.     
  16. });   

下面就是加载js和css了。
在上面的类中display()函数中添加以下代码：

  1. //加载upload.js文件   
  2.         wp_enqueue_script('my-upload', get_bloginfo( 'stylesheet_directory' ) . '/js/upload.js');   
  3.         //加载上传图片的js(wp自带)   
  4.         wp_enqueue_script('thickbox');   
  5.         //加载css(wp自带)   
  6.         wp_enqueue_style('thickbox');  

之后如果你查看后台设置页面的源码，在源码的大概最后面位置能看到你加载的这个js文件。

好了，可以去试用了：

后台上传图片

好了，一个简单的后台上传图片页面已经添加完成，再接下来的教程中，我们将学习如何添加多个上传表单，以及预览图片。

！转载请注明来自：阿树工作室-wordpress主题定制,制作教程（wordpress主题定制-阿树工作室）

本篇教程之前的几篇教程是

本篇教程之后的几篇教程是

没有找到你要找的内容？你可以通过搜索你要找的内容，或者给我们留言。

已有25条评论

  1. 清歌
    清歌 : 回复 2021-01-10 22:52

    博主你好，请问默认特色图像怎么再给他加一个输入图片地址功能呢，这样的话，特色图像就可以上传图片或者输入图片地址了

  2. vyouke
    vyouke : 回复 2017-10-16 09:21

    上传图片这一块弹出框上传成功了但是保存不了，是什么情况啊

    • 阿树工作室
      阿树工作室 回复vyouke: 回复 2017-10-18 15:44

      文章发布于5年前，建议你看一下我们工作室的框架 ashuwp_framework，，里面有上传图片的。

  3. hoythan
    hoythan : 回复 2016-08-15 11:25

    //加载上传图片的js(wp自带)
    wp_enqueue_script(‘thickbox’);
    //加载css(wp自带)
    wp_enqueue_style(‘thickbox’);

    可以改为 WordPress 自带的函数 add_thickbox();

  4. 小驹
    小驹 : 回复 2015-07-03 21:09

    你好啊啊  我按照的代码操作了一下 确实出来上传的  页面 我在前台写了一个js  图片展示的效果 怎么让它上传之后可以直接在首页显示啊 

  5. 小林
    小林 : 回复 2014-10-29 10:59

    你好，为什么文本框中无法显示上传之后的图片连接？

    • 小林
      小林 回复小林: 回复 2014-10-29 15:28

      被自己坑了一天了。原来弹出的那个窗口，选择图片之后 ，是按“插入到文章”  不是点保存并更改。唉。。。。

  6. 马冰健
    马冰健 : 回复 2014-08-19 19:20

    你好博主，这个跟编辑器一块使用会有一些冲突。。请问怎么改改就不冲突了呢？？

    • 阿树工作室
      阿树工作室 回复马冰健: 回复 2014-08-20 11:02

      在本教程中最后一步，往display()中加了三行代码，其中下面两句删掉：

       //加载上传图片的js(wp自带)   
        wp_enqueue_script('thickbox');   
        //加载css(wp自带)   
        wp_enqueue_style('thickbox');

      换成：

      if(did_action( 'wp_enqueue_media' )){
	  wp_enqueue_media();
	}

      你也可以使用本工作室提供的成品框架阿树工作室—主题后台框架1.2

      • 小马
        小马 回复阿树工作室: 回复 2014-08-21 15:30

        我按你说的修改了。不行。。。我感觉是这块的问题。。send_to_editor把所有存储的图片都存到targetfield这个上面了

        
    jQuery(document).ready(function() {   
        //upbottom为上传按钮的id   
        jQuery('#upbottom').click(function() {   
            //ashu_logo为文本域   
             targetfield = jQuery(this).prev('#ashu_logo');   
             tb_show('', 'media-upload.php?type=image&amp;TB_iframe=true');   
             return false;   
        });   
        
        window.send_to_editor = function(html) {   
             imgurl = jQuery('img',html).attr('src');   
             jQuery(targetfield).val(imgurl);   
             tb_remove();   
        }   
        
    });
  7. park
    park : 回复 2014-04-06 14:15

    你好博主，看了一系列你的教程，学会很多东西，在这一篇里，你介绍了如何自定义上传图片，JS部分是固定格式吗？是WP所提供的吗？还有就是我最近想在post里增加一个添加图片的功能，这样应该如何实现？

  8. 唐放金
    唐放金 : 回复 2013-12-17 21:44

    调用代码 <?php echo($options[‘ashu_logo’]); ?> 是这个吗？

    • 阿树工作室
      阿树工作室 回复唐放金: 回复 2013-12-17 22:20

      去掉那个括号吧。。

  9. 李凯成博客
    李凯成博客 : 回复 2013-05-03 12:12

    这个教程还是很实用的哈，回去测试下

  10. nodefx
    nodefx : 回复 2013-02-25 19:32

    这个找好久了 啊，不是盖的啊，如冬天里的一团火啊，楼主，真实爱死你啦！急切需要，真实难以表达我的激动啊！

  11. that
    that : 回复 2012-11-13 17:20

    你好 我用这篇教程做了logo上传

    在header里调用不到上传的logo 能帮忙看下原因吗？

    • 阿树工作室
      阿树工作室 回复that: 回复 2012-11-13 19:29

      如果你后台能上传图片，能保存数据，保存后刷新还能看到数据的话。。。。那你就成功了。。
      调用数据的方法请参考第22、28行的代码。。。
      还可以参考接下来的教程。。。

  12. Magic
    Magic : 回复 2012-10-16 17:55

    我按照你的方法 可以上传成功，但是上传前面的文本框内 一直都没有图片的url地址。很郁闷。  感觉 JS 的 send_to_editor 好像也没执行。

    • 阿树工作室
      阿树工作室 回复Magic: 回复 2012-10-16 20:08

      先检查js文件加载是否成功，注意js的路径。
      如果你是学习用，建议仔细检查，因为这些代码我都测试过才写上来的，不过也不保证在别的环境下都能正常运行，所以自己对照注释检查一下。
      如果你是要使用，建议直接使用后面教程提供的类文件。

  13. kutailang
    kutailang : 回复 2012-09-22 13:49

    评论测试

    • 阿树工作室
      阿树工作室 回复kutailang: 回复 2012-09-22 13:49

      回复测试。。

  14. 侯永禄
    侯永禄 : 回复 2012-09-17 17:51

    很，找很久了。

    • 阿树工作室
      阿树工作室 回复侯永禄: 回复 2012-09-17 21:27

      如果你觉得有用，可以帮宣传一下。。。

      • 侯永禄
        侯永禄 回复阿树工作室: 回复 2012-09-22 12:30

        会的。顺便提醒一下，你的邮件回复中的链接有问题，会跳到404的。

        • 阿树工作室
          阿树工作室 回复侯永禄: 回复 2012-09-22 13:32

          啊。。噢噢噢。。我去测试测试。。谢谢。。

向kutailang进行回复 取消回复