wordpress主题自定义顶部图像功能

顶部图像包括顶部大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%2522171853162716800180690707%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=171853162716800180690707&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

© 版权声明
THE END
喜欢就支持一下吧
点赞12 分享