WordPress Backstage Upload Custom website logo

Requirements: Well knownGeneral website logo are fixed so I do the site is also used static logo file, but recently used WP to a customer to do the site, because the site now logo may need to redesign, socustomer put forward the need in the background can modify the website logo, receive the demand on the network to find how to solve, but found a lap did not find the desired effect (are how to modify the login logo wp), fortunately found two articles related to the article, Finally, according to the two articles themselves codeing finally realized the function code:1. Add the following code in the function

  
 

   
  

  
<?php
   
  

  
/**在function中添加以下代码
   
  

  
* WordPress 添加额外选项字段到常规设置页面
   
  

  
* http://www.wpdaxue.com/add-field-to-general-settings-page.html
   
  

  
*/
   
  

  
$new_general_setting = new new_general_setting();
   
  

  
class new_general_setting {
   
  

  
 function new_general_setting( ) {
   
  

  
 add_filter( ‘admin_init‘ , array( &$this , ‘register_logo‘ ) );
   
  

  
 }
   
  

  
 function register_logo(){
   
  

  
 
   
  

  
 //需要‘js/uploader.js组件
   
  

  
 wp _enqueue_script   (    ' FLI-UPLOAD-JS '    $this  ->  url      ' js/uploader.js '    Array   (    ' jquery '      ' media-upload '      ' Thickbox '    )    );   
   
  

  
 
   
  

  
 wp_enqueue_style( ‘thickbox‘ );
   
  

  
 wp_enqueue_style( ‘fli-upload-css‘, $this->url . ‘css/uploader.css‘ );
   
  

  
 Regi ster_setting   (    ' General '      ' logo '      ' esc_attr '      
   
  

  
 add _settings_field   (  ' logo '      <label for= "logo" > "  __    ' website logo '      ' </label> '      array   (&   $this      Logo_fields_html '  )        ' General '      
   
  

  
 }
   
  

  
 function logo_fields_html() {
   
  

  
 
   
  

  
 $value = get_option( ‘logo‘, ‘‘ );
   
  

  
 echo ‘<input type="text" class="regular-text ltr" id="logo" name="logo" maxlength="200" value="‘. $value .‘" readonly/> <input type="button" id="general_logo" class="button insert-media add_media" value="上传">‘;
   
  

  
 }
   
  

  
}
   
  

  
// 自定义后台Css和Js
   
  

  
add_action( ‘admin_enqueue_scripts‘, ‘myAdminScripts‘ );
   
  

  
function myAdminScripts() { 
   
  

  
  Span class= "pun" >//topic load admin   js   
   
  

  
 wp _register_script   (    ' default '  Span class= "pun",  Get_template_directory_uri   ()        '/admin.js '    array   (),     " ,     ' all '        
   
  

  
 wp_enqueue_script( ‘default‘ ); 
   
  

  

   
  

  
 wp _register_style   (    ' default '  Span class= "pun",  Get_template_directory_uri   ()        '/admin.css '    Array   (),     "     ' all '    );     
   
  

  
 wp_enqueue_style( ‘default‘ ); 
   
  

  

   
  

  
} 
   
  

  
?>
  
 

2. Add code to the theme Admin.js

  
 

   
  

  
options_general();
   
  

  
//在常规选项页面添加自定义信息
   
  

  
function options_general () {
   
  

  
 if(!Islocatl_pathname(‘options-general.php‘))return;
   
  

  
 Open the Upload window when you click the upload button or INPUT element

   
  

  
 jQuery(‘#general_logo,#logo‘).click(function() { 
   
  

  
 //打开上传窗口需要js/uploader.js组件
   
  

  
 tb_show(‘‘, ‘media-upload.php?type=image&TB_iframe=true‘); 
   
  

  
 return false; 
   
  

  
 }); 
   
  

  
 //图片上传页面回传
   
  

  
 //html:为选择的图片元素
   
  

  
 window.send_to_editor = function(html) { 
   
  

  
 imgurl = jQuery(html).attr(‘src‘); 
   
  

  
 // 保存值并写入optuions表
   
  

  
 jQuery(‘#logo‘).val(imgurl); 
   
  

  
 //删除图片上传窗口
   
  

  
 tb_remove(); 
   
  

  
 return false;
   
  

  
 } //end send_to_editor
   
  

  
}
   
  

  

   
  

  
//当前页面是否是指定的页面
   
  

  
function Islocatl_pathname (pathname) {
   
  

  
 return location.pathname.indexOf(pathname)>=0;
   
  

  
}//end 当前页面是否是指定的页面
  
 

：

Reference:Advanced Tutorials (34): Call the new Media Center to upload images
Customize and use WordPress image upload function
WordPress add extra option field to General Settings page


From for notes (Wiz)

WordPress Backstage Upload Custom website logo