Изучение отзывчивости в настройщике тем WordPress

У нас здесь проблема: кнопка, которую мы создали, почти невидима. Вы можете найти его, если знаете, где искать, но это не совсем то, что мы хотим. Нам нужно добавить немного CSS, чтобы отобразить его правильно (т.е. как отображаются другие кнопки). Мы будем использовать файл CSS, который мы создали в предыдущей части, чтобы сделать это.

Значок, отображаемый на кнопке, находится в псевдоэлементе :before Ваша кнопка может быть найдена благодаря названию, которое вы указали. В приведенном выше примере CSS, который используется для получения значка нашей кнопки, — это .wp-full-overlay-footer .devices .preview-tablet-landscape:before Затем все, что вам нужно сделать, это указать содержимое, значок для отображения. Кнопки WordPress используют шрифт Dashicons. Вы можете получить полный список доступных значков на веб-сайте WordPress Developer Resources .

В нашем примере у нас есть планшет, поэтому мы выбираем значок f471 CSS тогда как ниже.

 .wp-full-overlay-footer .devices .preview-tablet-landscape:before {
    content: '\f471';
}

Тем не менее, наш планшет находится в ландшафтном режиме, а планшет, показанный на значке, находится в портретном режиме. Здесь мы будем использовать возможности CSS для преобразования иконки: с помощью CSS ниже планшет теперь отображается в ландшафтном режиме.

 .wp-full-overlay-footer .devices .preview-tablet-landscape:before {
    transform: scaleX(-1) rotate(0.25turn);
    content: '\f471';
}

Вам все еще нужно сделать одну вещь: определить размер, соответствующий вашему новому виду. Это может быть достигнуто так же, как мы изменили представление выше, благодаря тому же файлу CSS. Ниже приведены правила CSS, соответствующие нашему планшету в ландшафтном режиме.

 .preview-tablet-landscape .wp-full-overlay-main {
    margin: auto 0 auto -4.5in;
    width: 9in;
    height: 6in;
    max-height: 100%;
    max-width: 100%;
    left: 50%;
}

Установка триггера JavaScript

Можно определить функцию JavaScript, которая будет вызываться при каждом изменении адаптивного представления. Это полезно, если, например, ваша тема реагирует на событие resize В настройщике тем размер окна не изменяется сам по себе, поэтому это событие не будет инициировано.

Затем вы можете использовать функцию wp.customize.previewedDevice.bind() Этот обратный вызов может использовать аргумент: строку, представляющую новое представление. Например, если представление меняется на мобильное, эта строка будет mobile В случае вида, который мы создали выше, это будет tablet-landscape

Ниже приведен пример, который отображает новый вид в консоли.

 wp.customize.previewedDevice.bind(function(new_device) {
    console.log('Reponsive view has been changed to: ' + new_device);
});

Этот код можно поместить в файл JavaScript и поставить в очередь благодаря функции wp_enqueue_script() Действие admin_enqueue_scripts

 <?php
add_action('admin_enqueue_scripts', function() {
    wp_enqueue_style('custom-responsive-views', get_template_directory_uri() . '/custom-responsive-views.css');
    wp_enqueue_script('responsive-views-callback', get_template_directory_uri() . '/responsive-views-callback.js', array(), false, true);
});
?>

Посмотрите нашу статью о правильном включении файлов JavaScript в WordPress, если вам нужна дополнительная помощь в понимании аргументов, которые мы использовали.

Заключительные слова

Адаптивное представление Theme Customizer полезно для конечного пользователя, который хочет легко увидеть свои изменения на всех доступных устройствах. Отключение некоторых представлений и добавление ваших собственных представлений может быть достигнуто довольно легко. Это только первая версия этой функции. Может быть, мы увидим некоторые новые вещи в будущих версиях, например, изменение размера представления.

Если вы хотите получить примеры, которые мы создали в этой статье, я создал плагин для примеров, который вы можете скачать прямо здесь . Обратите внимание, что этот плагин существует только по одной причине: проще (и понятнее) предоставить пример плагина, чем пример темы. Тем не менее, игра с Theme Customizer, как мы делаем в этом плагине, является функциональностью, связанной с темой, поэтому ее всегда следует делать в теме.