http://www.511yj.com/wordpress-header-image.html banner参考是这篇文章

https://www.91wordpress.com/766.html logo参考这篇文章

这里做一下代码备份以便日后查找

1、添加主题支持

从 3.4 版本开始, 主题必须在 functions.php 文件里使用 add_theme_support() 函数来添加自定义顶部的支持, 像这样:

add_theme_support( 'custom-header' );

添加的默认参数列表:

$defaults = array(

	'default-image'          => '',     //默认图像

	'random-default'         => false,  //是否默认随机

	'width'                  => 0,      //宽度

	'height'                 => 0,      //高度

	'flex-height'            => false,

	'flex-width'             => false,

	'default-text-color'     => '',     //默认文本颜色

	'header-text'            => true,   //顶部文本开关

	'uploads'                => true,   //是否允许上传

	'wp-head-callback'       => '',

	'admin-head-callback'    => '',

	'admin-preview-callback' => '',

);

add_theme_support( 'custom-header', $defaults );

2、范例

设置自定义顶部图像
设置一个默认顶部图像(宽980px和高60px)：

$args = array(

	'width'         => 980,

	'height'        => 60,

	'default-image' => get_template_directory_uri() . '/images/header.jpg',

);

add_theme_support( 'custom-header', $args );

上传其他自定义顶部图像
设置一个默认顶部图像，并允许网站所有者上传其他图片:

$args = array(

	'width'         => 980,

	'height'        => 60,

	'default-image' => get_template_directory_uri() . '/images/header.jpg',

	'uploads'       => true,

);

add_theme_support( 'custom-header', $args );

灵活定义你的主题头部

$args = array(

	'flex-width'    => true,

	'width'         => 980,

	'flex-width'    => true,

	'height'        => 200,

	'default-image' => get_template_directory_uri() . '/images/header.jpg',

);

add_theme_support( 'custom-header', $args );

3、前台调用

<img src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt="" />

PS:主题可以在模板中通过get_header_image判断是否有顶部图像，通过header_image获得图像地址：

<?php if ( get_header_image() ) : ?>

<a href="<?php echo esc_url( home_url( '/' ) ); ?>">

    <img src="<?php header_image(); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" />

</a>

<?php endif; ?>

logo 的方法

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

发布时间：2015年12月12日

我们在使用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(); ?>

<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&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，在需要显示的地方，添加如下代码：

header.php

PHP

<?php

$logo=get_option('classic_options');

$logo_url=$logo['ashu_logo'];

3 背景图像

//背景图
add_theme_support('custom-background');

wordpress 主题开发 logo banner background

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

猜你喜欢