默认的静态 banner 对应的代码在 ./inc/sections/hestia-big-title-section.php
Big Title section for the homepage.
而付费的 PRO 版的多图轮播代码在 ./inc/sections/hestia-slider-section.php 中。
粗暴的修改方法：
hestia_slider() 替换掉 hestia_big_title ()
if ( ! empty( $hestia_big_title_background ) || ! empty( $hestia_big_title_title ) || ! empty( $hestia_big_title_text ) || ! empty( $hestia_big_title_button_text ) || ! empty( $hestia_ big_title_button_link ) ) {
hestia_big_title();
} else {
if ( ! empty( $hestia_slider_content ) ) {
hestia_slider();
} else {
hestia_big_title();
}
}
}
endif;
add_action( 'hestia_header', 'hestia_slider_compatibility' );
看看其他的配置是如何导入的
将原组件修改，变成两个背景图录入。json encode
参考实现
‘features/feature-big-title-section’,
big title section 的存储
$hestia_big_title_background = get_theme_mod( ‘hestia_big_title_background’
slider section 的存储
$hestia_slider_content = get_theme_mod( 'hestia_slider_content', json_encode( $slider_default ) );
$hestia_slider_content = json_decode( $hestia_slider_content );
39 if ( ! empty( $hestia_slider_content ) ) {
40 foreach ( $hestia_slider_content as $slider_item ) :
41 $title = ! empty( $slider_item->title ) ? apply_filters( 'hestia_translate_single_string', $slider_item->title, 'Slider section' ) : '';
42 $subtitle = ! empty( $slider_item->subtitle ) ? apply_filters( 'hestia_translate_single_string', $slider_item->subtitle, 'Slider section' ) : '' ;
43 $button = ! empty( $slider_item->text ) ? apply_filters( 'hestia_translate_single_string', $slider_item->text, 'Slider section' ) : '';
44 $link = ! empty( $slider_item->link ) ? apply_filters( 'hestia_translate_single_string', $slider_item->link, 'Slider section' ) : '';
45 $button2 = ! empty( $slider_item->text2 ) ? apply_filters( 'hestia_translate_single_string', $slider_item->text2, 'Slider section' ) : '';
46 $link2 = ! empty( $slider_item->link2 ) ? apply_filters( 'hestia_translate_single_string', $slider_item->link2, 'Slider section' ) : '';
47 $image = ! empty( $slider_item->image_url ) && ! has_header_video() ? apply_filters( 'hestia_translate_single_string', $slider_item->image_ur l, 'Slider section' ) : '';
48 $color = ! empty( $slider_item->color ) ? apply_filters( 'hestia_translate_single_string', $slider_item->color, 'Slider section' ) : '';
49 $color2 = ! empty( $slider_item->color2 ) ? apply_filters( 'hestia_translate_single_string', $slider_item->color2, 'Slider section' ) : '';
50
function hestia_get_slider_default() {
$default = array(
array(
'image_url' => get_template_directory_uri() . '/assets/img/slider1.jpg',
'title' => esc_html__( 'Lorem Ipsum', 'hestia' ),
'subtitle' => esc_html__( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', 'hestia' ),
'text' => esc_html__( 'Button', 'hestia' ),
'link' => '#',
'id' => 'customizer_repeater_56d7ea7f40a56',
'color' => '#e91e63',
),
array(
'image_url' => get_template_directory_uri() . '/assets/img/slider2.jpg',
'title' => esc_html__( 'Lorem Ipsum', 'hestia' ),
'subtitle' => esc_html__( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', 'hestia' ),
'text' => esc_html__( 'Button', 'hestia' ),
'link' => '#',
'id' => 'customizer_repeater_56d7ea7f40a57',
'color' => '#e91e63',
),
array(
'image_url' => get_template_directory_uri() . '/assets/img/slider3.jpg',
'title' => esc_html__( 'Lorem Ipsum', 'hestia' ),
'subtitle' => esc_html__( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', 'hestia' ),
'text' => esc_html__( 'Button', 'hestia' ),
'link' => '#',
'id' => 'customizer_repeater_56d7ea7f40a58',
'color' => '#e91e63',
),
);
查看数据库中的存储内容
$ wp theme mod get hestia_big_title_background --format=json; echo '';
[{"key":0,"value":false},{"key":"hestia_big_title_background","value":"http:\/\/en.xxx.com\/wp-content\/uploads\/2018\/06\/866294069.jpg"}]
$ wp theme mod get hestia_slider_content --format=json; echo '';
[{"key":0,"value":false},{"key":"hestia_slider_content","value":""}]
接下来，将 admin 的管理页面，加上几个 banner 图片选择控件即可，存储至数据库。
slider 读取时，替换掉 default 演示数据，从数据库中用 get_theme_mod 读取配置。
get_theme_mod
Retrieves a modification setting for the current theme. Along with set_theme_mod() this function can sometimes offer theme developers a simpler alternative to the Settings API when there is a need to handle basic theme-specific settings.
参考
- 一个类似实现 https://docs.themeisle.com/article/13-replacing-big-title-section-with-an-image-slider
关于作者 🌱
我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊，或者关注我的个人公众号“大象工具”， 查看更多联系方式