时间戳

首页 > 解决方案 > WordPress - 向定制器添加第二个徽标

php - WordPress - 向定制器添加第二个徽标

问题描述

我想在我的主题中添加不同的徽标，当用户滚动页面时，这些徽标将用于粘性标题。

我试着这样做：https ://wordpress.stackexchange.com/a/256985/185092

我编辑了 Underscores 主题，所以我将代码添加到 customizer.php 中，整个函数如下所示：

function mytheme_customize_register( $wp_customize ) {
    $wp_customize->get_setting( 'blogname' )->transport         = 'postMessage';
    $wp_customize->get_setting( 'blogdescription' )->transport  = 'postMessage';
    $wp_customize->get_setting( 'header_textcolor' )->transport = 'postMessage';

    if ( isset( $wp_customize->selective_refresh ) ) {
        $wp_customize->selective_refresh->add_partial(
            'blogname',
            array(
                'selector'        => '.site-title a',
                'render_callback' => 'mytheme_customize_partial_blogname',
            )
        );
        $wp_customize->selective_refresh->add_partial(
            'blogdescription',
            array(
                'selector'        => '.site-description',
                'render_callback' => 'mytheme_customize_partial_blogdescription',
            )
        );
    }

    $wp_customize->add_setting('sticky_header_logo');
    $wp_customize->add_control(new WP_Customize_Image_Control($wp_customize, 'sticky_header_logo', array(
        'label' => 'Sticky Header Logo',
        'section' => 'title_tagline', 
        'settings' => 'sticky_header_logo',
        'priority' => 8 
    )));
}
add_action( 'customize_register', 'mytheme_customize_register' );

在 header.php 我有：

            <div class="site-branding">
                <?php the_custom_logo(); ?>
            </div>
            <div class="site-branding-alternative">
                <?php get_theme_mod( 'sticky_header_logo' ) ?>
            </div>

我将使用 display none 和 block 来显示一个或另一个徽标，但现在 css 尚未完成，因此两个徽标都应该出现。问题是，我有可能在外观 - 自定义 - 站点标识中添加第二个徽标，但它没有显示在页面上。

我做错什么了？

编辑：

<?php var_dump(get_theme_mods()); ?>

给了我这样的代码：

array(7) {
  [0]=>bool(false) 
  ["nav_menu_locations"]=>array(1) {
    ["menu-1"]=>int(2)
  }
  ["custom_css_post_id"]=>int(-1) 
  ["header_image"]=>string(75) "http://localhost/whites/wp-content/uploads/2020/07/cropped-header-image.png" 
  ["header_image_data"]=>object(stdClass)#1138 (5) {
    ["attachment_id"]=>int(15) ["url"]=>string(75) "http://localhost/whites/wp-content/uploads/2020/07/cropped-header-image.png" ["thumbnail_url"]=>string(75) "http://localhost/whites/wp-content/uploads/2020/07/cropped-header-image.png" ["height"]=>int(473) ["width"]=>int(1000)
  }
  ["custom_logo"]=>int(18) 
  ["sticky_header_logo"]=>string(63) "http://localhost/whites/wp-content/uploads/2020/07/logo-3-1.png"
}

标签： phpwordpressunderscores-wp

解决方案

现在我们已经一步一步地解决了这个问题，我们知道里面的代码customizer.php是有效的，因为：

  • get_theme_mods返回您的徽标文件，因此问题不在于数据库或主题模块。
  • var_dump显示徽标文件sticky_header_logo按预期保存在数组键中。

问题：

这意味着问题必须在，header.php所以我们缩小了从哪里开始寻找编码问题。调试的奇迹 :) 如果我们查看您用于显示第二个徽标的代码：

<div class="site-branding-alternative">
    <?php get_theme_mod( 'sticky_header_logo' ) ?>
</div>

您正在使用get_theme_mod来获取正确的值sticky_header_logo......但您没有显示结果。此函数不会以相同的方式输出徽标the_custom_logo，它只是返回 url。

要解决问题：

您需要<img>使用从返回的 url 创建标签并将其get_theme_mod回显到屏幕上，例如：

<div class="site-branding-alternative">
    <?php 
    $sticky_logo_url = get_theme_mod( 'sticky_header_logo' );
    if ($sticky_logo_url )
       echo '<img src="'.$sticky_logo_url.'" alt = "logo alt test" class="sticky_logo_class">';
    ?>
</div>

参考：

推荐阅读