wordpress hestia 主题首页 banner 改成 slider 轮播图

更新日期: 2018-06-22 阅读次数: 7932 分类: wordpress

默认的静态 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

爱评论不评论

近期节日

2020年06月05日 世界环境日
2020年06月05日 芒种
2020年06月06日 全国爱眼日
2020年06月11日 中国人口日
2020年06月20日 世界难民日
2020年06月21日 父亲节
2020年06月21日 夏至
2020年06月22日 中国儿童慈善活动日
2020年06月23日 国际奥林匹克日
2020年06月25日 全国土地日
2020年06月25日 端午节
2020年06月26日 国际禁毒日
查看更多节日