WordPress建站教程：给主题添加后台上传网站LOGO的功能

我们在使用WordPress建设网站的时候，当网站需要频繁更换LOGO的时候，每次都登录FTP进行更换就有些太麻烦了，今天91wordpress特地为大家准备了一篇WordPress教程，教给大家如何让给主题添加后台上传网站LOGO的功能。

1. 切换到主题所在目录，打开functions.php文件，添加如下代码：

class ClassicOptions {            
    function getOptions() {         
        $options = get_option('classic_options');            
        if (!is_array($options)) {          
            $options['ashu_logo'] = '';      
            update_option('classic_options', $options);         
        }   
        return $options;      
    }   
    function init() {   
        if(isset($_POST['classic_save'])) {   
            $options = ClassicOptions::getOptions();   
            $options['ashu_logo'] = stripslashes($_POST['ashu_logo']);      
            update_option('classic_options', $options);   
        } else {   
            ClassicOptions::getOptions();         
        }   
        add_theme_page("主题设置", "主题设置", 'edit_themes', basename(__FILE__), array('ClassicOptions', 'display'));         
    }   
    function display() {        
        $options = ClassicOptions::getOptions(); ?>         
        <form method="post" enctype="multipart/form-data" name="classic_form" id="classic_form">         
        <div class="wrap">         
        <h2><?php _e('主题设置'); ?></h2>   
        <p>   
        <label>   
            <input type="text" size="80"  name="ashu_logo" id="ashu_logo" value="<?php echo($options['ashu_logo']); ?>"/>   
            <input type="button" name="upload_button" value="上传" id="upbottom"/>   
        </label>   
        </p>                           
        <p class="submit">    
            <input type="submit" name="classic_save" value="<?php _e('保存设置'); ?>" />         
        </p>         
    </div>         
</form>         
<?php         
    }       
}         
add_action('admin_menu', array('ClassicOptions', 'init')); 
wp_enqueue_script('my-upload', get_bloginfo( 'stylesheet_directory' ) . '/js/upload.js');   
//加载上传图片的js(wp自带)   
wp_enqueue_script('thickbox');   
//加载css(wp自带)   
wp_enqueue_style('thickbox');

class ClassicOptions {

function getOptions() {

$options = get_option('classic_options');

if (!is_array($options)) {

$options['ashu_logo'] = '';

update_option('classic_options', $options);

}

return $options;

}

function init() {

if(isset($_POST['classic_save'])) {

$options = ClassicOptions::getOptions();

$options['ashu_logo'] = stripslashes($_POST['ashu_logo']);

update_option('classic_options', $options);

} else {

ClassicOptions::getOptions();

}

add_theme_page("主题设置", "主题设置", 'edit_themes', basename(__FILE__), array('ClassicOptions', 'display'));

}

function display() {

$options = ClassicOptions::getOptions(); ?>

<p>

<label>

</label>

</p>

</p>

</div>

</form>

<?php

}

add_action('admin_menu', array('ClassicOptions', 'init'));

wp_enqueue_script('my-upload', get_bloginfo( 'stylesheet_directory' ) . '/js/upload.js');

//加载上传图片的js(wp自带)

wp_enqueue_script('thickbox');

//加载css(wp自带)

wp_enqueue_style('thickbox');

2. 新建upload.js，放入主题的js文件夹中，主题中没有js文件夹请新建，添加如下代码：

jQuery(document).ready(function() {   
    //upbottom为上传按钮的id   
    jQuery('#upbottom').click(function() {   
        //ashu_logo为文本域   
         targetfield = jQuery(this).prev('#ashu_logo');   
         tb_show('', 'media-upload.php?type=image&amp;TB_iframe=true');   
         return false;   
    });   
    
    window.send_to_editor = function(html) {   
         imgurl = jQuery('img',html).attr('src');   
         jQuery(targetfield).val(imgurl);   
         tb_remove();   
    }   
    
});

jQuery(document).ready(function() {

//upbottom为上传按钮的id

jQuery('#upbottom').click(function() {

//ashu_logo为文本域

targetfield = jQuery(this).prev('#ashu_logo');

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

return false;

});

window.send_to_editor = function(html) {

imgurl = jQuery('img',html).attr('src');

jQuery(targetfield).val(imgurl);

tb_remove();

}

});

3. 在后台上传网站logo，效果如下图：

4. 在前台显示此LOGO，打开header.php，在需要显示的地方，添加如下代码：

<?php 
	$logo=get_option('classic_options');
	$logo_url=$logo['ashu_logo']; 
?>
<img src="<?php echo $logo_url;?>" alt="" />

<?php

$logo=get_option('classic_options');

$logo_url=$logo['ashu_logo'];