自定义主题定制器选项似乎没有显示在主页上

Question

我对 php 很陌生，我正在主题定制器中（在自定义 WP 主题中）创建一个部分来更改顶部横幅图像。一切似乎都运行良好 - 选项显示在定制器中，我可以选择和上传图像，并保存更改。所有更改都显示在主题定制器窗口中。但是当刷新主页时，我看到的只是 index.php 中应该检索图像/文本等的 php 标签之外的内容。下面是 theme-customizer.php 文件中的代码（我已经排除显示添加文本的代码的部分，就好像我可以让图像显示其余部分一样）：

    add_action('customize_register', 'k1_customize_register');
function k1_customize_register($wp_customize) {

    // Top Banner Image
    $wp_customize->add_section('k1_banner', array(
        'title' => __('K1 Top Banner', 'k1-framework'),
        'description' => __('Allows you to upload a banner image to display underneath the main navigation.', 'k1-framework'),
        'priority' => 36
    ));

 // Add setting for checkbox for banner image display
    $wp_customize->add_setting('k1_custom_settings[display_k1_banner]', array(
        'default' => 0,
        'type' => 'option'
    ));

    // Add control for checkbox for banner image display
    $wp_customize->add_control('k1_custom_settings[display_k1_banner]', array(
        'label' => __('Display the Top Banner Image?', 'k1-framework'),
        'section' => 'k1_banner',
        'settings' => 'k1_custom_settings[display_k1_banner]',
        'type' => 'checkbox'
    ));


    // Add setting for top banner image
    $wp_customize->add_setting('k1_banner', array(
        'default' => 'http://lorempixel.com/1200/300',
        'type' => 'theme_mod',
        'active_callback' => 'is_front_page',
        'sanitize_callback' => 'esc_url_raw'
    ));

    // Add control for top banner image
    $wp_customize->add_control('k1_banner', array(
        'label' => __('Upload the Top Banner Image', 'k1-framework'),
        'section' => 'k1_banner'


    ));

    // Add setting for banner heading
    $wp_customize->add_setting('k1_banner_heading', array(
        'default' => 'What can K1 do for you?',
        'type' => 'theme_mod',
        'sanitize_callback' => 'sanitize_text_field'
    ));

    // Add control for banner heading
    $wp_customize->add_control('k1_banner_heading', array(
        'label' => __('Banner heading text', 'k1-framework'),
        'section' => 'k1_banner',
        'type' => 'text'
    ));

    // Add setting for banner description
    $wp_customize->add_setting('k1_banner_desc', array(
        'default' => 'Lorem ipsum dolor sit amet',
        'type' => 'theme_mod',
        'sanitize_callback' => 'sanitize_text_field'
    ));

    // Add control for banner description
    $wp_customize->add_control('k1_banner_desc', array(
        'label' => __('Banner description text', 'k1-framework'),
        'section' => 'k1_banner',
        'type' => 'text'
    ));

    // Add setting for banner link
    $wp_customize->add_setting('k1_banner_link', array(
        'default' => '#',
        'type' => 'theme_mod',
        'sanitize_callback' => 'esc_url_raw'
    ));

    // Add control for banner link
    $wp_customize->add_control('k1_banner_link', array(
        'label' => __('Banner read more link', 'k1-framework'),
        'section' => 'k1_banner',
        'type' => 'text'
    ));

    //adding setting for banner link text area
    $wp_customize->add_setting('k1_banner_link_text', array(
        'default'  => 'More',
        'sanitize_callback' => 'sanitize_text_field'
     ));
    $wp_customize->add_control('k1_banner_link_text', array(
        'label'   => 'Read more link text here',
        'section' => 'k1_banner',
        'type'    => 'text',
    ));

}

这里是 index.php 中的代码：

并且在调用 php 代码的 index.php 中：

    <div class="row">

        <div class="col-lg-12 top-banner">


<?php if($options['display_k1_banner'] != '') : ?>  

            <div class="top-banner-inner">


            <img src="<?php echo get_theme_mod( 'k1_banner' ); ?>" alt="Banner image" />


                <h1><?php echo get_theme_mod( 'k1_banner_heading' ); ?></h1>
                    <p><?php echo get_theme_mod( 'k1_banner_desc' ); ?></p>
                    <a class="button" href="<?php echo get_theme_mod( 'k1_banner_link' ); ?>"><em><?php echo get_theme_mod( 'k1_banner_link_text' ); ?></em></a>


            </div> <!-- end top-banner-inner -->
             <?php endif; ?> 




        </div> <!-- end top-banner -->

    </div> <!-- end row -->

横幅所在的原始 html 是：

<!-- TOP BANNER -->

<div class="container">

        <div class="row">

            <div class="col-lg-12 top-banner">

                <div class="top-banner-inner">

                <img src="http://lorempixel.com/1200/300" alt="Banner image" />
                    <h1>Heading text</h1>
                        <p>Lorem ipsum dolor sit amet</p>
                        <a class="button" href=""><em>More</em></a>



                </div> <!-- end top-banner-inner -->


            </div> <!-- end top-banner -->

        </div> <!-- end row -->

    </div> <!-- end container -->

如果有人对如何让它发挥作用有任何想法，我将不胜感激。

Answer 1

在更改初始代码后（主要使用 theme_mod 而不是选项 - 请参阅上面编辑的 q），我找到了解决该问题的解决方案。发生的事情是没有保存或注册默认值。通过直接在 index.php 中设置默认值，所有主题定制器选项现在都显示在主页上。

下面是 index.php 的新代码：

<div class="col-lg-12 top-banner">


<?php if($options['display_k1_banner'] != '') : ?>  

            <div class="top-banner-inner">


            <img src="<?php echo get_theme_mod( 'k1_banner', 'http://lorempixel.com/1200/300' ); ?>" alt="Banner image" />


                <h1><?php echo get_theme_mod( 'k1_banner_heading', 'What can K1 do for you?' ); ?></h1>
                    <p><?php echo get_theme_mod( 'k1_banner_desc', 'Lorem ipsum dolor sit amet' ); ?></p>
                    <a class="button" href="<?php echo get_theme_mod( 'k1_banner_link', '#' ); ?>"><em><?php echo get_theme_mod( 'k1_banner_link_text', 'More' ); ?></em></a>


            </div> <!-- end top-banner-inner -->
             <?php endif; ?> 




        </div> <!-- end top-banner -->

Answer 2

我在我的环境中测试了您的代码，并且自定义程序代码本身（第一个块）似乎工作正常。问题仅在于第二块的放置。你可能只是把它放在一个不可见的地方（就像我一开始做的那样）。

为了帮助您进行展示，我们需要更多关于横幅应该/不应该显示的确切位置的信息。

编辑：

最自然的入手就是将内容添加到主题header.php的底部。然后，横幅将始终显示在页面顶部。