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