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

我使用的是Timber starter主题, 并且想从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>

徽标在主页上输出为OK, 但在其他任何地方都没有。知道如何进行调整, 还是有更好的解决方案？

#1

为了回答我的问题…

添加对” custom-logo”的主题支持。此代码段位于最后一个” 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>