WordPress Theme Customizer – це дуже потужна річ, яка використовується для кастомізації (тобто прилаштування під потреби клієнта) тем на базі Вордпресу. Стандартні теми: такі як Twenty Fifteen та більшість преміум-тем містять великий вибір кастомних налаштувань, які клієнт може сам змінити в залежності від своїх потреб та уподобань.
Отож, чим же ж такий корисний WordPress Theme Customizer? Він дає можливість клієнту самому змінити зовнішній вигляд теми ( завантажити лого, фавікон, змінити колір хідера, шрифту, змінити картинку фону, яку він використовує) без допомоги програміста, не написавши жодного рядка коду і т.д. Усе це за вас зробить Customizer, вам потрібно лише вибрати відповідні налаштування в меню Вигляд –> Налаштувати ( Customize) .
До того ж завдяки використанню скриптів на JQUERY та технології AJAX (вбудовані в ядро Вордпресу) користувач може бачити зміни, які він робить, в режимі реального часу, проте на самому сайті вони вступлять в силу лише після збереження та оприлюднення. Багато розробників вважає, що оскільки WordPress Customizer — це backbone-додаток, який працює з WP REST API, то його можливості майже безмежні.
Ось як виглядає Theme Customizer у стандартній темі Twenty Fifteen.
Для налаштування тут доступні такі секції з вланими параметрами налаштувань ( Ідентичність сайту, Кольори, Зображення заголовку, Фонове зображення, Меню, Віджети).
Як знайти в адмінці Theme Customizer (Налаштування теми)
Для цього ми знаходимо в пункті адмін-меню Вигляд –> Налаштувати ( Customize).
Натиснувши, бачимо доступні для налаштування секції ( в нашій темі, на відміну від Twenty Fifteen їх лиш дві – це Ідентичність сайту та Меню).
Як додати можливість завантаження логотипу через адмін-меню у свою власну тему
Звісно, дізнавшись про усі переваги кастомайзера, у розробника може виникнути потреба у своїй власні темі додати елементи кастомізації (налаштування) для використання майбутніми користувачами.
Починаючи з версії Вордпресу 4.5 – з”явилась автоматична підтримка Theme Logo (завдяки надзвичайно корисному хукові add_theme_support ). Проте wordpress custom logo (логотип) має стандартну розмітку, тобто лінк – це custom-logo-link , а сама картинка – це custom-logo клас. Для можливості заміни логотипу через адмінку необхідно змінити ці класи. Для прикладу, у Бутстрапі http://getbootstrap.com/components/#navbar-brand-image, де ми очікуємо в місці логотипу .navbar-brand.
Custom logo у Вордпрес
- Щоб додати лого у панель налаштувань, помістіть цей код у ваш файл function.php
function theme_prefix_setup() {
add_theme_support( 'custom-logo', array(
'height' => 100, //
'width' => 248,
'flex-height' => true,
'flex-width' => true,
'header-text' => array( 'site-title', 'site-description' ),
) );
}
Зауважте, що ми створюємо функцію theme_prefix_setup(), яка за допомогою хука add_theme_support додає потрібне значення, у нас це ідентифікатор ‘custom-logo’. А параметри height та width задають вихідні розміри для обраного лого. Тобто, можна буде обітнути картинку до заданих розмірів.
- Для виведення лого використовуємо наступне:
function theme_prefix_the_custom_logo() {
if ( function_exists( 'the_custom_logo' ) ) {
the_custom_logo();
}
}
Тобто виклик функції theme_prefix_the_custom_logo() виводить значення лого.
- Також задаємо такий фільтр для зміни custom-logo-link та custom-logo, які є валідними для Вордпресу на наш клас логотипу та лінку для логотипу.
add_filter('get_custom_logo','change_logo_class');
function change_logo_class($html)
{
$html = str_replace('class="custom-logo"', 'your-custom-class', $html);
$html = str_replace('class="custom-logo-link"', 'your-custom-class', $html);
return $html;
}
- Насамкінець для виведення нашого логотипу у потрібному місці шаблону, зазвичай це header відображає, вставляємо у файл header.php в потрібному місці такий код.
<div id="image" class="custom-image"> <?php theme_prefix_the_custom_logo(); ?> <!--У мене це клас custom-image.--> </div>
Якщо все зробили правильно, то після обрання та збереження логотипу він з”явиться у відповідному місці, як на цьому фото.
І наостанок, якщо лого невелике – то все добое, але, якщо ви виберете для завантаження картинку великого розміру, до прикладу 500 на 500 пікселів, то може вийти ось такий небажаний результат, як на фото.
Щоб цього уникнути – у файлі style.css – прописуємо вихідні розміри для нашого лого. Для цього при інспектуванні шукаємо селектор, який відповідає за його вигляд. У мене це <div> img , тоді прописуємо там бажаний розмір за допомогою параметрів max-height i max-width. До прикладу:
img {
border:0;
-ms-interpolation-mode:bicubic;
vertical-align:middle;
max-height: 86px;
max-width: 100px;
display: inline-block;
}
Тепер картинка мило зменшується до потрібного розміру, зберігаючи відповідні пропорції.
П. С. Якщо бажаєте дізнатись детальніше про роботу з кастомайзером, то читайте: https://codex.wordpress.org/Theme_Customization_API
Якщо хочете прочитати про завантаження логотипу, ось джерело: https://codex.wordpress.org/Theme_Logo