WordPress 後台上傳自訂網站Logo

標籤：

需求：眾所周知一般網站的logo都是固定的所以我在做網站時也是使用的靜態logo檔案，但最近用wp給一個客戶做的網站時，因為網站現在的logo可能會需要重新設計,所以客戶提出了需要在後台可以自己修改網站logo,接收需求後就在網路上找如何解決,但找了一圈都沒有找到想要的效果(都是如何修改wp的登入logo),還好找到兩篇相關的文章，最後根據這兩篇文章自己Codeing最終實現了功能代碼：1.在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‘ );
  
 register_setting( ‘general‘, ‘logo‘, ‘esc_attr‘ );
  
 add_settings_field(‘logo‘, ‘<label for="logo">‘.__(‘網站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() { 
  
 //主題下載入admin.js
  
 wp_register_script( ‘default‘, get_template_directory_uri() . ‘/admin.js‘, array(), ‘‘, ‘all‘ ); 
  
 wp_enqueue_script( ‘default‘ ); 
  

  
 wp_register_style( ‘default‘, get_template_directory_uri() . ‘/admin.css‘, array(), ‘‘, ‘all‘ ); 
  
 wp_enqueue_style( ‘default‘ ); 
  

  
} 
  
?>
 

2.在主題admin.js中添加代碼

 

  
options_general();
  
//在常規選項頁面添加自訂資訊
  
function options_general () {
  
 if(!Islocatl_pathname(‘options-general.php‘))return;
  
 //點擊上傳按鈕或input元素時開啟上傳視窗

  
 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 當前頁面是否是指定的頁面
 

：

參考：進階教程(三十四)：調用新版的媒體中心上傳圖片
定製和使用WordPress圖片上傳功能
WordPress 添加額外選項欄位到常規設定頁面


來自為知筆記(Wiz)

WordPress 後台上傳自訂網站Logo