wordpress进阶教程(三十四):调用新版的媒体中心上传图片

在wordpress 3.5以前,wordpress上传图片弹出框如图所示,而本工作室发布的设置选项类文件、添加自定义面板类文件中的图片上传也是使用的老版本的图片上传工能。

olduploader

到了wordpress 3.5以上版本,出现了新的媒体中心,新的媒体库界面还支持图片多选,界面如图:

newuploader

那么怎样调用新的媒体中心呢?

下面做一个示例:

第一步:在后台新建一个设置页面

首先在后台新建一个设置页面,用来上传Logo,在functions.php文件中添加以下代码,其中add_theme_page函数将会在后台的“外观”菜单项里面再增加一个子菜单项,新添加的设置页面将会调用ashuwp_display_function这个函数来输出内容。

  1. function ashuwp_function(){   
  2.     add_theme_page( '主题设置', '主题设置', 'edit_themes', 'ashu_slug','ashuwp_display_function');   
  3. }   
  4. add_action('admin_menu', 'ashuwp_function');  

 

第二部,在页面输出内容

上面添加设置页面的函数中,要调用ashuwp_display_function这个函数来显示内容,那么接下来就添加ashuwp_display_function函数,来输出上传logo的输入框和按钮。

  1. function ashuwp_display_function(){   
  2.     echo '<h1>Logo设置</h1>';   
  3.     echo '<form method="post">';   
  4.        
  5.     echo '<input type="text" size="60" value="'.get_option('ashu_upload').'" name="ashu_upload" class="ashuwp_url_input" id="ashu_upload_input"/><a id="ashu_upload" class="ashu_upload_button button" href="#">上传</a>';   
  6.        
  7.     echo '<p><input type="hidden" value="1" name="save_ashuwp_options"/>';   
  8.     echo '<input type="submit" name="Submit" class="button-primary autowidth" value="保存设置" /></p>';   
  9.     echo '</form>';   
  10. }  

上面的代码输出了一个标题,一个简单的表单,表单中包含:一个文本输入框,一个上传按钮,一个隐藏的验证域,一个提交按钮,其中input文本输入框的value为get_option('ashu_upload'),请注意input的id、name,以及按钮的id,要说明的是,虽然上面的按钮只是输出了一个<a>标签,但是其中的类名为button,在wp的后台就会显示为按钮样式。此时添加的主题设置页面应该如图:up1

有了显示,还得能保存,所以将ashuwp_display_function函数中添加处理数据并保存的代码,更改后的函数如下:

  1. function ashuwp_display_function(){   
  2.     /****处理数据********/  
  3.     if ( isset( $_POST['save_ashuwp_options'] ) ) { //save_ashuwp_options是先前输出的隐藏域   
  4.         $new_option = $old_option = get_option('ashu_upload'); //获取老数据,新数据的值暂时和老数据一样   
  5.         $new_option = $_POST['ashu_upload']; //获取提交的数据,新数据重新赋值   
  6.            
  7.         if ( $old_option != $new_option ) { //如果新老数据不一样,就说明更改了   
  8.             update_option( 'ashu_upload', $new_option ); //更新上数据   
  9.         }   
  10.     }   
  11.     /******处理数据*****/  
  12.     echo '<h1>Logo设置</h1>';   
  13.     echo '<form method="post">';   
  14.        
  15.     echo '<input type="text" size="60" value="'.get_option('ashu_upload').'" name="ashu_upload" class="ashuwp_url_input" id="ashu_upload_input"/><a id="ashu_upload" class="ashu_upload_button button" href="#">上传</a>';   
  16.        
  17.     echo '<p><input type="hidden" value="1" name="save_ashuwp_options"/>';   
  18.     echo '<input type="submit" name="Submit" class="button-primary autowidth" value="保存设置" /></p>';   
  19.     echo '</form>';   
  20. }  

此时,如果再后台手动输入数据,是已经可以保存、更改设置数据的。

第三步:添加js

首先需要调用wp_enqueue_media()加载媒体库的代码,不过如果你是在文章页面,默认已经加载了这些代码,可以不用再调用。
其次,为了代码的完整性,本次的js代码也不单独放一个js文件了。以下是添加了js代码之后的ashuwp_display_function函数,,由于这是php代码,所以请注意php的<?php 和?>标签。
  1. function ashuwp_display_function(){   
  2.     /****处理数据********/  
  3.     if ( isset( $_POST['save_ashuwp_options'] ) ) { //save_ashuwp_options是先前输出的隐藏域   
  4.         $new_option = $old_option = get_option('ashu_upload'); //获取老数据,新数据的值暂时和老数据一样   
  5.         $new_option = $_POST['ashu_upload']; //获取提交的数据,新数据重新赋值   
  6.            
  7.         if ( $old_option != $new_option ) { //如果新老数据不一样,就说明更改了   
  8.             update_option( 'ashu_upload', $new_option ); //更新上数据   
  9.         }   
  10.     }   
  11.     /******处理数据*****/  
  12.     echo '<h1>Logo设置</h1>';   
  13.     echo '<form method="post">';   
  14.        
  15.     echo '<input type="text" size="60" value="'.get_option('ashu_upload').'" name="ashu_upload" class="ashuwp_url_input" id="ashu_upload_input"/><a id="ashu_upload" class="ashu_upload_button button" href="#">上传</a>';   
  16.        
  17.     echo '<p><input type="hidden" value="1" name="save_ashuwp_options"/>';   
  18.     echo '<input type="submit" name="Submit" class="button-primary autowidth" value="保存设置" /></p>';   
  19.     echo '</form>';   
  20.        
  21.     /******以下是添加的js****/  
  22.     wp_enqueue_media(); //在设置页面需要加载媒体中心   
  23.     ?>   
  24.     <script>   
  25.     jQuery(document).ready(function(){   
  26.     var ashu_upload_frame;   
  27.     var value_id;   
  28.     jQuery('.ashu_upload_button').live('click',function(event){   
  29.         value_id =jQuery( this ).attr('id');       
  30.         event.preventDefault();   
  31.         if( ashu_upload_frame ){   
  32.             ashu_upload_frame.open();   
  33.             return;   
  34.         }   
  35.         ashu_upload_frame = wp.media({   
  36.             title: 'Insert image',   
  37.             button: {   
  38.                 text: 'Insert',   
  39.             },   
  40.             multiple: false   
  41.         });   
  42.         ashu_upload_frame.on('select',function(){   
  43.             attachment = ashu_upload_frame.state().get('selection').first().toJSON();   
  44.             jQuery('input[name='+value_id+']').val(attachment.url);   
  45.         });   
  46.            
  47.         ashu_upload_frame.open();   
  48.     });   
  49.     });   
  50.     </script>   
  51.     <?php   
  52.     /*****js******/  
  53. }  

至此,调用新版媒体库代码已经完成。

以下是本次的完整代码,懒人专用,你只需要复制下面的代码放到主题的functions.php文件的最后一个?>之前即可。本次代码在wp 3.8.1版本的Twenty Fourteen主题下测试。

  1. function ashuwp_function(){   
  2.     add_theme_page( '主题设置', '主题设置', 'administrator', 'ashu_slug','ashuwp_display_function');   
  3. }   
  4. add_action('admin_menu', 'ashuwp_function');   
  5.   
  6.   
  7. function ashuwp_display_function(){   
  8.     /****处理数据********/  
  9.     if ( isset( $_POST['save_ashuwp_options'] ) ) { //save_ashuwp_options是先前输出的隐藏域   
  10.         $new_option = $old_option = get_option('ashu_upload'); //获取老数据,新数据的值暂时和老数据一样   
  11.         $new_option = $_POST['ashu_upload']; //获取提交的数据,新数据重新赋值   
  12.            
  13.         if ( $old_option != $new_option ) { //如果新老数据不一样,就说明更改了   
  14.             update_option( 'ashu_upload', $new_option ); //更新上数据   
  15.         }   
  16.     }   
  17.     /******处理数据*****/  
  18.     echo '<h1>Logo设置</h1>';   
  19.     echo '<form method="post">';   
  20.        
  21.     echo '<input type="text" size="60" value="'.get_option('ashu_upload').'" name="ashu_upload" class="ashuwp_url_input" id="ashu_upload_input"/><a id="ashu_upload" class="ashu_upload_button button" href="#">上传</a>';   
  22.        
  23.     echo '<p><input type="hidden" value="1" name="save_ashuwp_options"/>';   
  24.     echo '<input type="submit" name="Submit" class="button-primary autowidth" value="保存设置" /></p>';   
  25.     echo '</form>';   
  26.        
  27.     /******以下是添加的js****/  
  28.     wp_enqueue_media(); //在设置页面需要加载媒体中心   
  29.     ?>   
  30.     <script>   
  31.     jQuery(document).ready(function(){   
  32.     var ashu_upload_frame;   
  33.     var value_id;   
  34.     jQuery('.ashu_upload_button').live('click',function(event){   
  35.         value_id =jQuery( this ).attr('id');       
  36.         event.preventDefault();   
  37.         if( ashu_upload_frame ){   
  38.             ashu_upload_frame.open();   
  39.             return;   
  40.         }   
  41.         ashu_upload_frame = wp.media({   
  42.             title: 'Insert image',   
  43.             button: {   
  44.                 text: 'Insert',   
  45.             },   
  46.             multiple: false   
  47.         });   
  48.         ashu_upload_frame.on('select',function(){   
  49.             attachment = ashu_upload_frame.state().get('selection').first().toJSON();   
  50.             //jQuery('#'+value_id+'_input').val(attachment.url).trigger('change');   
  51.             jQuery('input[name='+value_id+']').val(attachment.url).trigger('change');   
  52.         });   
  53.            
  54.         ashu_upload_frame.open();   
  55.     });   
  56.     });   
  57.     </script>   
  58.     <?php   
  59.     /*****js******/  
  60. }  

已有7条评论

  1. Panda
    Panda : 回复

    如果是加在“写文章”的页面,做成自定义字段的上传按钮的话。这个script脚本会导致“媒体库”不能正常显示。
    删除后,又不能上传了。

    • Panda
      Panda 回复Panda: 回复

      找到原因了……是我自己弄错了。在文章编辑页面也是可以调用新版媒体库的。

  2. vkge
    vkge : 回复

    十分感谢你这篇文章

    谢谢了

  3. nujoaix
    nujoaix : 回复

    博主,我想问下,如何在自定义字段当中调用新版的媒体中心上传图片!

    • 小姚
      小姚 回复nujoaix: 回复

      请问你现在的问题解决了吗 我也想知道

  4. 李惟
    李惟 : 回复

    我可以通过钩子实现全站的文件上传类型限制

    add_filter('plupload_default_settings', array(&$this, 'plupload_default_settings'));

    但是,我希望的是,有的地方我只希望能上传图片,有的地方我只希望上传压缩包,请问能否将钩子结合wp.media来使用呢?

  5. 李惟
    李惟 : 回复

    博主你好,有个问题想请教你
    wp.media有个参数library,可以用来限制媒体展示的范围,但是却不能限制媒体上传的范围,比如下面代码能限制插入媒体展示的范围为图片

    wp.media({
        'library': {
            'type': 'image'
        }
    });

    请问如何限制插入媒体,上传文件的范围呢?

发表评论