顶部图像包括顶部大banner图片和小的logo图,自定义顶部是个 2.1 版本中新引入的主题特性. 自定义顶部是在主题的顶部标题部分显示一个被选择的图像.
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; ?>
您可能感兴趣的文章:
原文链接:https://blog.csdn.net/zcp528/article/details/108513908?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522171852351316800188561452%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=171852351316800188561452&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-11-108513908-null-null.nonecase&utm_term=wordpress%E4%B8%BB%E9%A2%98