首页 > 代码库 > WordPress 后台上传自定义网站Logo

WordPress 后台上传自定义网站Logo

2024-11-25 02:10:02   203人阅读

需求：
众所周知一般网站的logo都是固定的所以我在做网站时也是使用的静态logo文件，但最近用wp给一个客户做的网站时，因为网站现在的logo可能会需要重新设计,所以客户提出了需要在后台可以自己修改网站logo,接收需求后就在网络上找如何解决,但找了一圈都没有找到想要的效果(都是如何修改wp的登录logo),还好找到两篇相关的文章，最后根据这两篇文章自己Codeing最终实现了功能代码：
1.在function中添加以下代码
  1. <?php
  2. /**在function中添加以下代码
  3. * WordPress 添加额外选项字段到常规设置页面
  4. * http://www.wpdaxue.com/add-field-to-general-settings-page.html
  5. */
  6. $new_general_setting = new new_general_setting();
  7. class new_general_setting {
  8.   function new_general_setting( ) {
  9.         add_filter( ‘admin_init‘ , array( &$this , ‘register_logo‘ ) );
  10.   }
  11.   function register_logo(){
  12.    
  13.         //需要‘js/uploader.js组件
  14.         wp_enqueue_script( ‘fli-upload-js‘, $this->url . ‘js/uploader.js‘, array( ‘jquery‘, ‘media-upload‘, ‘thickbox‘ ) );
  15.   
  16.         wp_enqueue_style( ‘thickbox‘ );
  17.         wp_enqueue_style( ‘fli-upload-css‘, $this->url . ‘css/uploader.css‘ );
  18.         register_setting( ‘general‘, ‘logo‘, ‘esc_attr‘ );
  19.         add_settings_field(‘logo‘, ‘<label for="logo">‘.__(‘网站Logo‘ ).‘</label>‘ , array(&$this, ‘logo_fields_html‘) , ‘general‘ );
  20.   }
  21.   function logo_fields_html() {
  22.     
  23.         $value = get_option( ‘logo‘, ‘‘ );
  24.         echo ‘<input type="text" class="regular-text ltr" id="logo" name="logo" maxlength="200" value="http://www.mamicode.com/‘. $value .‘"  readonly/> <input type="button" id="general_logo" class="button insert-media add_media" value="http://www.mamicode.com/上传">‘;
  25.   }
  26. }
  27. // 自定义后台Css和Js
  28. add_action( ‘admin_enqueue_scripts‘, ‘myAdminScripts‘ );
  29. function myAdminScripts() {  
  30.     //主题下加载admin.js
  31.     wp_register_script( ‘default‘, get_template_directory_uri() . ‘/admin.js‘,  array(), ‘‘, ‘all‘ );  
  32.     wp_enqueue_script( ‘default‘ );  
  34.     wp_register_style( ‘default‘, get_template_directory_uri() . ‘/admin.css‘,  array(), ‘‘, ‘all‘ );  
  35.     wp_enqueue_style( ‘default‘ );  
  37. }  
  38. ?>
2.在主题admin.js中添加代码
  1. options_general();
  2. //在常规选项页面添加自定义信息
  3. function options_general () {
  4.   if(!Islocatl_pathname(‘options-general.php‘))return;
  5.   //点击上传按钮或input元素时打开上传窗口
  6.   jQuery(‘#general_logo,#logo‘).click(function() {   
  7.          //打开上传窗口需要js/uploader.js组件
  8.          tb_show(‘‘, ‘media-upload.php?type=image&TB_iframe=true‘);   
  9.          return false;   
  10.     });   
  11.     //图片上传页面回传
  12.     //html:为选择的图片元素
  13.     window.send_to_editor = function(html) {   
  14.          imgurl = jQuery(html).attr(‘src‘);   
  15.          // 保存值并写入optuions表
  16.          jQuery(‘#logo‘).val(imgurl);   
  17.          //删除图片上传窗口
  18.          tb_remove();   
  19.          return false;
  20.     } //end   send_to_editor
  21. }
  23. //当前页面是否是指定的页面
  24. function Islocatl_pathname (pathname) {
  25.   return location.pathname.indexOf(pathname)>=0;
  26. }//end 当前页面是否是指定的页面
效果图：
技术分享
技术分享
参考：
进阶教程(三十四)：调用新版的媒体中心上传图片
定制和使用WordPress图片上传功能
WordPress 添加额外选项字段到常规设置页面


来自为知笔记(Wiz)


WordPress 后台上传自定义网站Logo


联系
我们