Добавление WP Custom Logo в качестве изображения Webp в Timber

Question

Я использую тему 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>

Логотип выводит ОК на главной странице, но больше нигде.Любая идея, как это настроить или есть лучшее решение?

Answer 1

Чтобы ответить на мой вопрос ...

Добавлена ​​поддержка тем для 'custom-logo'. Этот фрагмент находится под последней строкой add_theme_support:

- functions.php -

add_theme_support( 'custom-logo' );

---

В functions.php вам нужно добавить больше $ context для ветки. для справки.

Например - $ context ['foo'] = bar будет использоваться как {{foo}} в шаблоне ветки, и выводить 'bar' в html при визуализации php.

Чтобы добавить логотип $ context, файл functions.php отправляется ИЗ this:

- 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;
}

---

TO this (необходимы две строки с отступами):

- 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>