在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文件, 如下所示：
【在Timber中将WP自定义logo添加为Webp图像】– base.twig–

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

在menu.twig中, 我有这个(尺寸仅供测试)：
– menu.twig–

< a href="/uploads/allimg/220526/02350433I-0.jpg 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="http://img.readke.com/220526/02350433I-0.jpg 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="/uploads/allimg/220526/02350433I-0.jpg 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="http://img.readke.com/220526/02350433I-0.jpgcustom_logo_url|tojpg}}" > #} < img alt="sioux city electric logo" src="http://img.readke.com/220526/02350433I-0.jpg 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>