wordpress自定义头部banner


打开主题页面functions.php添加以下代码。


/********************Custom Header***************************************************/

//Check see if the customisetheme_setup exists
if ( !function_exists('customisetheme_setup') ):
    //Any theme customisations contained in this function
    function customisetheme_setup() {
        //Define default header image
        define( 'HEADER_IMAGE', '%s/images/banner.jpg' );
        //Define the width and height of our header image
        define( 'HEADER_IMAGE_WIDTH', apply_filters( 'customisetheme_header_image_width', 980 ) );
        define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'customisetheme_header_image_height', 122 ) );

        //Turn off text inside the header image
        define( 'NO_HEADER_TEXT', true );

        //Don't forget this, it adds the functionality to the admin menu
        add_custom_image_header( 'customisetheme_header_style', 'customisetheme_admin_header_style' );

        //Set some custom header images, add as many as you like
        //%s is a placeholder for your theme directory
        $customHeaders = array (
                //Image 1
                'perfectbeach' => array (
                'url' => '%s/images/banner.jpg',
                'thumbnail_url' => '%s/images/banner-small.jpg',
                'description' => __( 'Perfect Beach', 'customisetheme' )
            ),
                //Image 2
                'tiger' => array (
                'url' => '%s/images/banner5.jpg',
                'thumbnail_url' => '%s/images/banner5-small.jpg',
                'description' => __( 'Tiger', 'customisetheme' )
            )
        );
        //Register the images with WordPress
        register_default_headers($customHeaders);
    }
endif;

if ( ! function_exists( 'customisetheme_header_style' ) ) :
    //Function fired and inline styles added to the admin panel
    //Customise as required
    function customisetheme_header_style() {
    ?>
        <style type="text/css">
        #header {
            background: url(<?php header_image(); ?>);
        }
    </style>
    <?php
    }
endif;

if ( ! function_exists( 'customisetheme_admin_header_style' ) ) :
    //Function fired and inline styles added to the admin panel
    //Customise as required
    function customisetheme_admin_header_style() {
    ?>
        <style type="text/css">
            #wpbody-content #headimg {
                height: <?php echo HEADER_IMAGE_HEIGHT; ?>px;
                width: <?php echo HEADER_IMAGE_WIDTH; ?>px;
                border: 1px solid #333;
            }
        </style>
    <?php
    }
endif;

//Execute our custom theme functionality
add_action( 'after_setup_theme', 'customisetheme_setup' );

另外将banner.jpg和banner5.jpg及其缩略图banner-small.jpg和banner5-small.jpg放在主题images目录下。
在模板的header.php页面中,有以下代码:
 
 
 <div id="header">
    
这里是你的页面头部的文字和图片
</div>


然后,就可以在后台管理--【外观】--【顶部】--选择banner图片。

参考资料:
http://wplift.com/add-a-customisable-header-image-to-your-wordpress-theme http://codex.wordpress.org/Custom_Headers

转载于:https://www.cnblogs.com/phpcode/archive/2012/03/08/2522718.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值