Question

我正在使用Timber starter theme，但是我很想从WP仪表板添加徽标。我要做的第一件事是在functions.php中为“自定义徽标”“添加支持”：

-functions.php-

 add_theme_support( 'custom-logo' );

然后我将这些变量添加到 index.php 文件中，以便树枝模板可以使用url：

-index.php-

$custom_logo_id = get_theme_mod( 'custom_logo' );
$custom_logo_url = wp_get_attachment_image_url( $custom_logo_id , 'full' );
$custom_logo_url_esc_url = 

$context['custom_logo_id'] = $custom_logo_id;
$context['custom_logo_url'] = $custom_logo_url;

在 base.twig 文件中，我包括一个 menu.twig 文件，如下所示：

-base.twig-

 {% include "menu.twig" with {'menu': menu.get_items} %}

在 menu.twig 中，我有这个（尺寸仅供测试）：

-menu.twig-

        <a href="{{ site.url|e('esc_url') }}">
        <picture>
            <source srcset="{{ custom_logo_url|towebp }}" type="image/webp">
            <source srcset="{{ custom_logo_url|tojpg }}" type="image/jpeg">                 

            <img src="{{ custom_logo_url|resize(400, 300) }}" srcset="{{ custom_logo_url|resize(200, 150)|retina(1) }} 1x,
                {{ custom_logo_url|resize(800, 600)|retina(2) }}  2x,
                {{ custom_logo_url|resize(1600, 1200)|retina(3) }}  3x,
                {{ custom_logo_url|resize(2400, 2400)|retina(4) }}  4x">
        </picture>                                  
        </a>

徽标在主页上输出为“确定”，但其他任何地方都没有。知道如何调整它还是有更好的解决方案？

Answer 1

要回答我的问题...

添加对“自定义徽标”的主题支持。该代码段位于最后一个“ add_theme_support”行下：

-functions.php-

add_theme_support( 'custom-logo' );

在functions.php中，您需要为树枝添加更多的'$ context'。供参考。

例如-$ context ['foo'] = bar将在树枝模板中用作{{foo}}，并在由php渲染时将'bar'输出到html。

要添加徽标$ context，functions.php文件的内容如下：从：

-functions.php（之前）-

 public function add_to_context( $context ) {
    $context['foo'] = 'bar';
    $context['stuff'] = 'I am a value set in your functions.php file';
    $context['notes'] = 'These values are available everytime you call Timber::get_context();';
    $context['menu'] = new Timber\Menu();
    $context['site'] = $this;
    return $context;
}

要（需要两行缩进）：

-functions.php（之后）-

 public function add_to_context( $context ) {
    $context['foo'] = 'bar';
    $context['stuff'] = 'I am a value set in your functions.php file';
    $context['notes'] = 'These values are available everytime you call Timber::get_context();';
    $context['menu'] = new Timber\Menu();
    $context['site'] = $this;
     $custom_logo_url = wp_get_attachment_image_url( get_theme_mod( 'custom_logo' ), 'full' );
     $context['custom_logo_url'] = $custom_logo_url;    
    return $context;
}

Base.twig 仍包含 menu.twig

-base.twig-

 {% include "menu.twig" with {'menu': menu.get_items} %}

和 menu.twig 标记再次出现。根据需要调整“调整大小”范围。

-menu.twig-

        <a class="logo-link-to-home" href="{{ site.url|e('esc_url') }}">
        <picture>
            <source srcset="{{ custom_logo_url|towebp }}" type="image/webp">
            <source srcset="{{ custom_logo_url|tojpg }}" type="image/jpeg">                 
            {# <img src="{{custom_logo_url|tojpg}}" alt=""> #}
            <img alt="sioux city electric logo" src="{{ custom_logo_url|resize(400, 300) }}" srcset="{{ custom_logo_url|resize(200, 150)|retina(1) }} 1x,
                {{ custom_logo_url|resize(800, 600)|retina(2) }}  2x,
                {{ custom_logo_url|resize(1600, 1200)|retina(3) }}  3x,
                {{ custom_logo_url|resize(2400, 2400)|retina(4) }}  4x">
        </picture>                                  
        </a>

在Timber中将WP自定义徽标添加为Webp图像

1 个答案: