在木材中添加WP Custom Logo作为Webp图像

Question

我正在使用Timber starter theme，我正忙着在WP仪表板上添加徽标。我做的第一件事是在functions.php中为Custom Logo添加“支持”：

--functions.php--

 add_theme_support( 'custom-logo' );

---

然后我在index.php文件中添加了这些变量，以便twig模板能够使用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

回答我的问题......

添加'custom-logo'的主题支持。此代码段位于最后一行“add_theme_support”行下：

--functions.php--

add_theme_support( 'custom-logo' );

---

在functions.php中，你需要为twig添加更多'$ context'。参考。

例如 - $ context ['foo'] = bar将在twig模板中用作{{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>