Как добавить настройки в WordPress? Theme Customizer — Встроенные настройки

Из этой статьи вы узнаете, как добавить свои настройки для темы, используя встроенные возможности 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 — тип настройки

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.

Тэги:настройки темы руководства

25 комментариев

Kundius Ruslan / 29.05.2014, 03:30 Ответить
Очепятка, в add_setting стоит id ‘example_textbox’, а в add_control ‘copyright_textbox’
- WP-Book / 29.05.2014, 09:43 Ответить / http://www.wp-book.ru/
  Вы совершенно правы. Спасибо, что поправили))
Julia / 27.08.2014, 17:54 Ответить
Добавляем настройку в секцию
на этом этапе белый экран
- WP-Book / 27.08.2014, 18:19 Ответить / http://www.wp-book.ru/
  Белый экран скорее всего означает, что вы допустили ошибку в php. Ищите ошибку в коде или проверьте не допустили ли вы ошибку на предыдущих шагах.
Дмитрий / 25.11.2014, 18:49 Ответить
А можно как-то из сделанного здесь меню, например где ‘Человеки’ => ‘Человеки’.. выдрать ссылку чтоб повесить на страницу сайта?
Андрей / 17.06.2015, 23:40 Ответить / http://wasun.ru
Сделал все по вашему примеру, но почему-то в кастомазере сама настройка появляется в display: none, при этом если снять параметр там нет поля для редактирования настройки. В чем может быть проблема?
- WP-Book / 17.06.2015, 23:49 Ответить / http://www.wp-book.ru/
  Причин может быть несколько:
  1) Вы где-то допустили ошибку
  2) Статья была написана год назад, за это время кастомайзер сильно вырос и изменилась логика работы.
  В любом случае кастомайзер не советую использовать. Лучше посмотреть в сторону готовых решений. Например, http://www.wp-book.ru/stoit-li-pokupat-platnye-dopolneniya-dlya-advanced-custom-fields-chast-2#op , а именно обратите внимание на Options Page. Вы прямо в админке сможете настроить нужные Вам поля и без лишнего геммороя с кодом. Добра Вам :)
Андрей / 18.06.2015, 00:08 Ответить / http://wasun.ru
Возможно и так, однако клиент очень просит визуальное редактирование. Поэтому кастомайзер приоритетный вариант. Самое странное то что в теме уже существуют добавленные секции и они не закрываются. И к удивлению своему их я найти в папке тоже не могу…
Посмотрите пример пожалуйста может я что не так сделал:
функцию инициализирую из класса в __construct вот так
add_action(‘customize_register’, array($this, ‘add_customize’));
function add_customize($wp_customize){
$wp_customize->add_section(‘slogan_theme’, array(‘title’ => ‘Лозунг блога’, ‘description’ => ‘Лозунг блога в шапке сайта’, ‘priority’ => 1));
$wp_customize->add_setting(‘slogan_text’, array(‘default’ => ‘Лозунг сайта’));
$wp_customize->add_control(‘slogan_text’, array(‘label’ => ‘Лозунг сайта’, ‘section’ => ‘slogan_theme’, ‘type’ => ‘text’, ‘settings’ => ‘slogan_text’));
}
WP-Book / 18.06.2015, 00:19 Ответить / http://www.wp-book.ru/
Вы в одну функцию запихнули создание секции, контрола и самой настройки. Попробуйте так:
add_action(‘customize_register’, array($this, ‘add_customize’));
function add_customize($wp_customize){
$wp_customize->add_section(‘slogan_theme’, array(‘title’ => ‘Лозунг блога’, ‘description’ => ‘Лозунг блога в шапке сайта’, ‘priority’ => 1));
}
$wp_customize->add_setting(‘slogan_text’, array(‘default’ => ‘Лозунг сайта’));
$wp_customize->add_control(‘slogan_text’, array(‘label’ => ‘Лозунг сайта’, ‘section’ => ‘slogan_theme’, ‘type’ => ‘text’, ‘settings’ => ‘slogan_text’));
Андрей / 18.06.2015, 12:21 Ответить / http://wasun.ru
Проблему решил. Инициализирующий класс вызывал из под проверки if(is_admin()), странно что добавлялось именно display:none в созданному html тегу!..
Алексей / 26.06.2015, 14:02 Ответить
«Важно! Весь код должен находится между . Этим мы покажем браузеру, что работаем с PHP.» т.е. по вашему браузер исполняет PHP код?
- WP-Book / 29.06.2015, 15:44 Ответить / http://www.wp-book.ru/
  Нет конечно. PHP на сервере работает. Исправил.
Сергей / 15.10.2015, 00:45 Ответить / http://поколение-гениев.рф/
У меня большая проблема с кнопками соц сетей. Как добавить или изменить существующие на Вконтакте и Одноклассники?
- WP-Book / 15.10.2015, 12:17 Ответить / http://www.wp-book.ru/
  Только через код. Явно пропишите эти кнопки в коде. Если Вам нужны настройки, то придется это отдельно прописывать.
Александр / 20.11.2015, 19:59 Ответить
Как мне найти файл customize.php,
который лежит по ссылке mysite.com/wp-admin/customize.php,
чтобы изменить его код?
Егор / 11.12.2015, 17:19 Ответить / http://filwebs.ru
Здравствуйте. Я слышал, что сейчас в WP репозиторий не принимают шаблонв с theme options. Только с Customizer. Но в Redux Fr уже интегрируют настройки. Получается тупо фильтром закрывают вкладку Theme Орtions и дублируют настройки в кастомайзер.
Егор / 11.12.2015, 17:20 Ответить / http://filwebs.ru
Так-то премиум шаблон сейчас невозможно представить без Theme Options
Denis / 09.03.2016, 21:29 Ответить
Здравствуйте, подскажите пожалуйста как именно реализовать вывод картинки которую уже задали в админ панели. Имеется что то такое
$wp_customize->add_setting( ‘logo_setting’ );
$wp_customize->add_control(new WP_Customize_Image_Control($wp_customize,’logo’,array(
‘label’ => ‘Изображение Логотипа’,
‘section’ => ‘Header Settings’,
‘settings’ => ‘logo_setting’,
)));
а надо извлечь из всего этого url что бы можно было поместить в атрибут src тега img.. Нормального примера не нашел( разбор существующих тем не принес успеха. Ну или подскажите как подключают картинку нормальные люди)
- WP-Book / 17.03.2016, 11:23 Ответить / http://www.wp-book.ru/
  Попробуйте так < ?php echo get_theme_mod('logo_setting'); ?>
Ксения / 01.07.2016, 00:40 Ответить / http://onege.ru
Здравствуйте. Вы не подскажите, где редактировать код в теме customizer, чтобы тайтл главной страницы не подставлялся автоматически всем остальным страницам сайта в тайтл?
Alek / 01.02.2017, 12:58 Ответить
Спасибо! Всё просто и доступно. Очень полезная инфа.
Артем / 07.06.2017, 22:31 Ответить / http://itilin.by
ой ой ой ой ой ой как вовремя!!! Спасибо, мил человек! Ты теперь мой друг! В океане воды нашлось все-таки что-то нормальное!
pammFep / 13.11.2017, 09:16 Ответить
Здравствуйте Уважаемый администратор сайта wp-book.ru
Сообщаем Вам, что кто — то из Ваших конкурентов, заказал и оплатил
на нашем сайте услугу «Понизь конкурента»
В качестве одной из мишеней указан адрес сайта wp-book.ru
Заказаз поставлен в очередь и будет выполнен 19 ноября
Подробнее об услуге «Понизь конкурента» читайте здесь:
red222.ru/14800.htm
Pavel / 23.06.2018, 23:01 Ответить
Сенк бро очень полезно
Max / 28.06.2019, 01:52 Ответить
Огромное спасибо! Самая понятная статья по этой теме, из всего что я находил в течении пары дней!! Именно тут я понял наконец-то как работать с этим Кастомайзером!

Как добавить настройки в WordPress? Theme Customizer — Встроенные настройки

Предисловие

Экшн!

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

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

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

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

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

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

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

Палитра

Это еще не все

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

Плюсы:

Минусы:

Заключение

Похожие записи

25 комментариев

Добавить комментарий Отменить ответ