致力于打造一个优秀的建站资源共享学习平台!

爱站窝四川

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

爱站窝查看全部>>

人气473

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

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

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

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

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

下面做一个示例:

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

首先在后台新建一个设置页面,用来上传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.     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>';
  5.     echo '<p><input type="hidden" value="1" name="save_ashuwp_options"/>';
  6.     echo '<input type="submit" name="Submit" class="button-primary autowidth" value="保存设置" /></p>';
  7.     echo '</form>';
  8. }

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

有了显示,还得能保存,所以将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.         if ( $old_option != $new_option ) { //如果新老数据不一样,就说明更改了
  7.             update_option( 'ashu_upload', $new_option ); //更新上数据
  8.         }
  9.     }
  10.     /******处理数据*****/
  11.     echo '<h1>Logo设置</h1>';
  12.     echo '<form method="post">';
  13.     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>';
  14.     echo '<p><input type="hidden" value="1" name="save_ashuwp_options"/>';
  15.     echo '<input type="submit" name="Submit" class="button-primary autowidth" value="保存设置" /></p>';
  16.     echo '</form>';
  17. }

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

第三步:添加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.         if ( $old_option != $new_option ) { //如果新老数据不一样,就说明更改了
  7.             update_option( 'ashu_upload', $new_option ); //更新上数据
  8.         }
  9.     }
  10.     /******处理数据*****/
  11.     echo '<h1>Logo设置</h1>';
  12.     echo '<form method="post">';
  13.     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>';
  14.     echo '<p><input type="hidden" value="1" name="save_ashuwp_options"/>';
  15.     echo '<input type="submit" name="Submit" class="button-primary autowidth" value="保存设置" /></p>';
  16.     echo '</form>';
  17.     /******以下是添加的js****/
  18.     wp_enqueue_media(); //在设置页面需要加载媒体中心
  19.     ?>
  20.     <script>
  21.     jQuery(document).ready(function(){
  22.     var ashu_upload_frame;
  23.     var value_id;
  24.     jQuery('.ashu_upload_button').live('click',function(event){
  25.         value_id =jQuery( this ).attr('id');
  26.         event.preventDefault();
  27.         if( ashu_upload_frame ){
  28.             ashu_upload_frame.open();
  29.             return;
  30.         }
  31.         ashu_upload_frame = wp.media({
  32.             title: 'Insert image',
  33.             button: {
  34.                 text: 'Insert',
  35.             },
  36.             multiple: false
  37.         });
  38.         ashu_upload_frame.on('select',function(){
  39.             attachment = ashu_upload_frame.state().get('selection').first().toJSON();
  40.             jQuery('input[name='+value_id+']').val(attachment.url);
  41.         });
  42.         ashu_upload_frame.open();
  43.     });
  44.     });
  45.     </script>
  46.     <?php
  47.     /*****js******/
  48. }

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

以下是本次的完整代码,懒人专用,你只需要复制下面的代码放到主题的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. function ashuwp_display_function(){
  6.     /****处理数据********/
  7.     if ( isset( $_POST['save_ashuwp_options'] ) ) { //save_ashuwp_options是先前输出的隐藏域
  8.         $new_option = $old_option = get_option('ashu_upload'); //获取老数据,新数据的值暂时和老数据一样
  9.         $new_option = $_POST['ashu_upload']; //获取提交的数据,新数据重新赋值
  10.         if ( $old_option != $new_option ) { //如果新老数据不一样,就说明更改了
  11.             update_option( 'ashu_upload', $new_option ); //更新上数据
  12.         }
  13.     }
  14.     /******处理数据*****/
  15.     echo '<h1>Logo设置</h1>';
  16.     echo '<form method="post">';
  17.     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>';
  18.     echo '<p><input type="hidden" value="1" name="save_ashuwp_options"/>';
  19.     echo '<input type="submit" name="Submit" class="button-primary autowidth" value="保存设置" /></p>';
  20.     echo '</form>';
  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('#'+value_id+'_input').val(attachment.url).trigger('change');
  45.             jQuery('input[name='+value_id+']').val(attachment.url).trigger('change');
  46.         });
  47.         ashu_upload_frame.open();
  48.     });
  49.     });
  50.     </script>
  51.     <?php
  52.     /*****js******/
  53. }
TA的作品
  • Mohtml 作品/设计展示自适应wordpress主题 模板兔出品
  • QYKCMS后台软件v4.1.3部分操作界面截图
  • 轻松制作一款与众不同的QYKCMS网站主题
  • 怎样设置可以让QYKCMS系统运行得更快?
  • 使用 Apache .htaccess 文件设置QYKCMS伪静态规则的方法
  • QYKCMS后台管理软件入门级操作视频教程
  • IIS下使用 web.config 文件设置QYKCMS伪静态规则的方法
  • 同一个网站空间使用QYKCMS建立多个独立站点
  • QYKCMS后台管理员密码忘记了怎么办
  • QYKCMS 网站系统4.0 标签大全
查看全部

全部评论: 0

在线咨询
有什么可以帮到你
点击咨询

账号登录

忘记密码

第三方账号快速登录

Q Q 登 录 微 博 登 录

账号注册 已经有账号? 立即登录

发送验证码

第三方账号快速注册

Q Q 登 录 微 博 登 录