第九课WordPress主题制作自定义顶部图像

1、在functions.php中加入以下代码

/**
 * 支持自定义顶部图像
 */
$args=array(
    'width'     =>2680,//自定义宽度
    'flex-width'=>true,//自适应宽度
    'height'    =>500,//自定义高度
    'flex-heigt'=>true,//自适应高度
    'default-image'    =>get_template_directory_uri().'/images/33.jpg',//默认顶部图像
    'uploads'   =>true,//允许上传
    );
add_theme_support('custom-header',$args);

主题进度预览

511遇见

2、前台header.php加入以下代码

<!--header_image -->
<?php if ( get_header_image() ) : ?>
 <div class="container-filut" >
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
    <img src="<?php header_image(); ?>" class="header-image img-responsive center-block" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" />
</a>
 </div>
<?php endif; ?>

通过给Img加入img-responsive实现响应式图片,center-block图片居中