Главная › Новости

Как добавить настройки в Wordpress? Theme Customizer

Опубликовано: 24.08.2018

Из этой статьи вы узнаете, как добавить свои настройки для темы, используя встроенные возможности WordPress, а именно Theme Customizer. Мощный инструмент, встроенный в ядро WP, для настройки тем.

Предисловие

Недавно закончил делать верстку для заказчика и появилась необходимость установить ее на WP. Провел предварительные работы, сделал базовый скелет для темы и решил протестить на локальном сервере. И тут я заметил интересный пункт в меню админки «Настроить». да, я замечал этот пункт и раньше и даже видел как в других темах он применяется, но сам относился к нему скептически. Но тут закралась мысль, что сделать настройки нативными, т.е. встроенными в ядро WordPress не такая плохая идея. И тут я начал разбираться в вопросе.

Собственно все, что я узнал по теме я описал в статье. Кому интересно сразу почитать о плюсах/минусах и моем мнении прошу в конец статьи или тыкнуть сюда .

Экшн!

Итак, если у вас нет пункта меню «Внешний вид — Настроить» при активации вашей темы, то нужно его добавить. Делается это так:

Для этого создадим и откроем в корне темы файл functions.php и добавим туда такой код:

add_action('admin_menu', function(){ add_theme_page('Настроить', 'Настроить', 'edit_theme_options', 'customize.php'); });

Важно! Весь код должен находится между <?php ваш код ?>. Этим мы покажем серверу, что работаем с PHP.

Теперь все должно появиться. Если хотите можете подробнее почитать об add_theme_page в кодексе или переведенный вариант .

Создаем секцию

Теперь нам нужно добавить свои настройки. Делается это в 2 захода. Напрягли мозги. Напряжемся раз: добавляем секцию настроек.

В созданный нами ранее файл functions.php добавим такой код:

add_action('customize_register', function($customizer){ $customizer->add_section( 'example_section_one', array( 'title' => 'Мои настройки', 'description' => 'Пример секции', 'priority' => 11, ) ); });

Вуаля! Мы добавили секцию, но ее пока не видно. Как сделать, чтобы было видно расскажу дальше по тексту, а пока разберемся, что за безобразие тут происходит.

Мы создали хук и привязали к нему функцию. Метод add_section() как раз и добавляет секцию настроек. Он принимает 2 параметра:

$id — уникальный идентификатор

$args — массив аргументов

В массиве $args может быть несколько позиций, а именно:

title — как секция будет называться

description — описание секции (необязательно)

priority — какой по счету будет располагаться секция или ее приоритет (по-умолчанию 10)

capability — права пользователя, необходимые для изменения данного параметра. Т.е. разные параметры могут видеть разные группы пользователей. Круто! (необязательно)

theme_supports — указывает на то, что текущая тема должна поддерживать описанную в параметре функцию (необязательно)

Добавляем настройку в секцию

Ранее мы добавили секцию настроек или, проще говоря, добавили пункт в настройки, но в нем пока нет ничего, нет нужных настроек. давайте из создадим. Напряжемся два: Добавим настройки в секцию.

Добавление происходит в 2 этапа. Сначала создаем сами настройки, а затем контрол для нее, чтобы отобразить в секции.

Для добавления настроек напишем такой код в functions.php прямо после метода add_section(), но в внутри хука customize_register:

$customizer->add_setting( 'example_textbox', array('default' => 'Сайт Wp-book.ru') );

Метод add_setting() принимает два параметра:

$id — уникальный идентификатор

$args — массив аргументов

В массиве $args может быть несколько позиций, а именно:

default — значение настройки по-умолчанию

type — тип настройки

capability — права пользователя, необходимые для изменения данного параметра. Т.е. разные параметры могут видеть разные группы пользователей. Круто! (необязательно)

theme_supports — указывает на то, что текущая тема должна поддерживать описанную в параметре функцию (необязательно)

transport — как изменение настройки будет отображаться в окне предпросмотра. Обновление страницы или AJAX. По умолчанию страница обновляется при каждом обновлении настройки, но если вам интересно могу рассказать, как реализовать это на AJAX, без перезагрузки страницы. Пишите в комментах свои пожелания.

sanitize_callback — имя функции для фильтрации входных данных, в БД

sanitize_js_callback — имя функции для фильтрации выходных данных, из БД

Теперь добавим контрол к настройкам . Ниже добавим такой код:

$customizer->add_control( 'example_textbox', array( 'label' => 'Настройка текста', 'section' => 'example_section_one', 'type' => 'text', ) );

Вот теперь мы можем увидеть нашу настройку.

// картинку

Метод add_control() принимает два параметра:

$id — уникальный идентификатор

$args — массив аргументов

В массиве $args может быть несколько позиций, а именно:

label — название настройки

description — описание

section — секцию, в которую будет помещен контрол и настройка

type — тип контрола (по-умолчанию: text)

choices — для типа с переключателями флажками, определяет список значений на выбор

priority — какой по счету будет располагаться секция или ее приоритет (по-умолчанию 10)

Но мы не вывели настройку в теме. Давайте займемся этим.

Выводим настройки в теме

Для того, чтобы отобразить настройки в теме надо добавить его идентификатор в нужном месте. Сделать это легко, достаточно добавить конструкцию:

<?php echo get_theme_mod('example_textbox', 'Текст еще не придумали'); ?>

Функция get_theme_mod() принимает два аргумента^

$name — имя настройки, которую нужно получить

$default — значение по-умолчанию. Выведется, если настройки не существует

Вот и все! Мы добавили настройки в тему, но в WordPress есть не только текстовые типы настроек. о других мы поговорим дальше.

Другие типы контролов

CheackBox (Флажок) <input type=»checkbox»>

Позволяет включить или отключить, что либо.

$customizer->add_control( 'hide_text', array( 'type' => 'checkbox', 'label' => 'Скрыть текст', 'section' => 'example_section_one', ) );

В теме выводится так:

<?php if(get_theme_mod('hide_text') == '') echo get_theme_mod('example_textbox', 'Текст еще не придумали'); ?>

Теперь, если вы не выбрали флажок, то этот текст не выведется. Полезно, если нужно скрыть. что нибудь.

Radio (Группа переключателей) <input type=»radio»>

Позволяет выбрать, какой либо 1 параметр из списка.

$customizer->add_setting( ' radio ', array('default' => 'item_1') ); $customizer->add_control( ' radio ', array( 'type' => 'radio', 'label' => 'Пример переключателей', 'section' => 'example_section_one', 'choices' => array( 'item_1' => 'item_1', 'item_2' => 'item_2', 'item_3' => 'item_3', ), ) );

Select (Список) <select>

Выпадающий список.

$customizer->add_setting( 'select', array('default' => 'Вордпресса') ); $customizer->add_control( 'select', array( 'type' => 'select', 'label' => 'Кто мы?', 'section' => 'example_section_one', 'choices' => array( 'Человеки' => 'Человеки', 'Стахановцы' => 'Стахановцы', 'Крутые ребята' => 'Крутые ребята', 'НЛО' => 'НЛО', ), ) );

Выпадающий список страниц

Создает выпадающий список всех страниц сайта. Страницы генерируются самим WordPress.

$customizer->add_setting( 'page-setting', array('sanitize_callback' => 'example_sanitize_integer') ); $customizer->add_control( 'page-setting', array( 'type' => 'dropdown-pages', 'label' => 'Выберите страницу:', 'section' => 'example_section_one', ) );

Палитра

Позволяет добавить палитру выбора цветов. К примеру, для заднего фона.

$customizer->add_setting( 'color-setting', array( 'default' => '#000000', 'sanitize_callback' => 'sanitize_hex_color', ) ); $customizer->add_control( new WP_Customize_Color_Control( $customizer, 'color-setting', array( 'label' => 'Настройка цвета', 'section' => 'example_section_one', 'settings' => 'color-setting', ) ) );

Загрузка файлов

Позволяет загружать файлы через стандартный загрузчик WP. Работает через класс WP_Customize_Upload_Control. Будьте внимательны.

$customizer->add_setting('file-upload'); $customizer->add_control( new WP_Customize_Upload_Control( $customizer, 'file-upload', array( 'label' => 'Загрузка файла', 'section' => 'example_section_one', 'settings' => 'file-upload' ) ) );

Загрузка изображений

Тоже самое, что загрузка файлов, только ставятся ограничения на разрешения файлов. Принмаются только картинки. Удобно. если надо грузить только изображения. К примеру, для заднего фона. Работает по той же схеме, что пример выше, только используется класс WP_Customize_Image_Control.

$wp_customize->add_setting('img-upload'); $wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'img-upload', array( 'label' => 'Загрузка изображения', 'section' => 'example_section_one', 'settings' => 'img-upload' ) ) );

Это еще не все

Если вы думаете, что на этом возможности встроенных настроек ограничиваются, то вы ошибаетесь. В них много чего интересного: добавление собственных настроек, обновление страницы через AJAX. Можете покопаться сами или пишите в комментариях, если хотите продолжения.

Плюсы и минусы

А теперь подведем итоги и рассмотрим подводные камни и преимущества данного метода.

Плюсы:

Настройки встроены в ядро WordPress. Это значит, что при переносе сайта или его обновлении на новую версию у нас сразу будут настройки без скачки обновлений фрейморков и несовместимости Очень легко добавить. Достаточно базовых знаний по WP и PHP, чтобы добавить настройки в тему. Гораздо проще, чем подключать сторонние решения Добавление своих типов настроек. Можно расширить функционал. Есть такая возможность, что очень радует. Изменения появляются сразу в окне предпросмотра.

Минусы:

Нет поддержки визуального редактора для текста. Это серьезный минус для сложных проектов. Недостаточно типов настроек. Очень много чего нет, а хотелось бы. К примеру, тот же слайдер с неограниченным количеством слайдов. Отчасти решается возможностью добавить свой контрол. Но это лишние телодвижения. Нет импорта/экспорта. Если вы захотите переустановить тему. то все настройки придется заново вбивать вручную! Что крайне неудобно. Вы ограничены в свободе размещения блоков. За простоту надо платить. Вы не можете разместить блок с предупреждением или информацией где вздумается, все в рамках заданного формата. Для кого-то неважно, для других критично. Каждый реашет сам.

Заключение

Что касается моего мнения, то я считаю, что Theme Customizer пока сыроват. Да. у него большой потенциал и я уверен в будущем мы увидим много расширений и улучшений для него. Но сейчас разрабатывать сложные проекты на нем не получится.

Если вы делаете простенькую тему или тренируетесь, то обратите внимание на эту «фишку» WP. Если же вы уже серьезно работаете с каким либо фрейморком настроек и думаете, стоит, переходит или нет, то лучше не стоит. Пока, не стоит. Но определенно стоит посмотреть, что это за «зверь». Ведь потенциал у него большой.

Но, как говорится, каждый решает сам по своему опыту и сложности проектов. На этом я с вами прощаюсь до следующей статьи. Всего вам доброго. И да прибудет с вами терпение в нелегком изучении WordPress.