Как добавить кастомные настройки в тему WordPress
- 03.03.2020 16:31
- 0
- 286
Итак, Вы создали собственную тему для сайта. Теперь пришло время запускать на ней новые проекты. Одинаковый дизайн – не хорошо. А переделывать тему под каждый новый проект долго.
Наверняка многие видели похожую панель в админке WordPress:
Это и есть кастомные настройки темы Вордпресс. И в сегодняшней статье я научу Вас добавлять их.
Настройки позволят менять такие параметры внешнего вида сайта:
- Изображение логотипа
- Высоту шапки
- Размер шрифтов названия и описания сайта
- Фоновое изображение шапки
- Цвет заголовков
- Размер шрифта заголовков
- Шрифты названий виджетов в сайдбаре
- Высота и цвет фона подвала
- Основной шрифт (которым написаны статьи)
- Фоновое изображение сайта
В целом, настройки можно добавлять для любых элементов дизайна Вашего проекта.
Перечисленные мной параметры позволят в будущем разворачивать и уникализировать тему в течении 10 минут. Итак, погнали.
Добавляем блок с настройками в тему WordPress
Первым делом нам понадобится файл functions.php. Открываем его и в самом конце начинаем писать код.
Для того, чтобы включить настройки темы, пишем следующий код:
Первая строка регистрирует блок настроек с помощью WP Customizer Theme. Название функции может быть любым, но советую делать его понятным. Внутри функции мы и будем добавлять сами настройки.
add_action('customize_register','mytheme_customize_register');
Выводит блок параметров темы в админке.
Следующий код
function mytheme_head(){
?>
Инициирует перегрузку стилей, которые будут написаны тут же.
Настройка логотипа
Первым делом мы добавим возможность менять из админки логотип. Код выглядит вот так:
$wp_customize->add_section
Добавляет секцию настроек (вкладку). Такую вкладку можно делать для каждого элемента сайта, или для крупных структурных элементов (шапка, сайдбар, футер и т.д.)
"title"=>__('Логотип','calenda'),
"priority"=>100,
Первая строчка задает название вкладки и тему, которая будет настраиваться. Мой код значит, что секция настроек называется Логотип, а тема – Calenda.
Вторая строка указывает очередность, по которой будут выводится настройки. По умолчанию – 160. Чем меньше это значение, тем выше будет вкладка параметров. И наоборот.
$wp_customize->add_setting('logo-upload');
Добавляет саму настройку
$wp_customize->add_control(new WP_Customize_Image_Control($wp_customize,'logo-upload',array(
Этот код добавляет элемент управления во вкладку настроек. WP_Customize_Image_Control добавит форму загрузки изображения, что нам и нужно.
'label'=>__('Текущий логотип','calenda'),
Выводит надпись над формой загрузки картинки в теме с названием Calenda.
'section'=>'logo',
Назначает вкладку, в которой будет выводится настройка.
'settings'=>'logo-upload',
Назначает путь к обработчику формы, которая загрузит логотип.
Первая вкладка «Логотип» готова. Можно проверить, перейдя в админке WordPress во Внешний вид->Настроить.
Однако, это – только код, который добавил настройки. Результат этого кода нужно выводить на сайте. Для этого ниже строчки
function mytheme_head(){
?>
Вставляем тег style. Внутри него с помощью функции get_theme_mod, вставленной в селектор, отвечающий за стили логотипа, будем выводить его картинку. Вот так это выглядит у меня:
Внутри функции get_theme_method имеется 2 аргумента: название настройки, которую мы писали ранее, и значение по умолчанию, если в настройках ничего не указано.
Теперь можно добавить какую-то картинку и проверить, все ли работает правильно. Если на сайте выводится неправильно, изменяйте ccs-стили, которые писали выше.
Настройки шапки
Дабы не плодить кучу вкладок, которые потом никто кроме автора не разберет, я решил поместить настройки шапки в секцию «Шапка». Здесь будут высота хедера, управление шрифтами названия и описания сайта, фоновая картинка. Пишем код:
$wp_customize->add_section('header',array(
"title"=>__('Параметры шапки', 'calenda'),
"priority"=>99,
));
$wp_customize->add_setting('header-height',array(
"default"=>'124',
'transport'=>'postMessage',
));
$wp_customize->add_control(new WP_Customize_Control($wp_customize,'header-height',array(
'label'=>__('Высота шапки', 'calenda'),
'section'=>'header',
'settings'=>'header-height',
'type'=>'text',
)));
$wp_customize->add_setting('header-bg-color',array(
"default"=>'#ffffff',
'transport'=>'postMessage',
));
$wp_customize->add_control(new WP_Customize_Color_Control($wp_customize,'header-bg-color',array(
'label'=>__('Цвет фона шапки', 'calenda'),
'section'=>'header',
'settings'=>'header-bg-color',
)));
$wp_customize->add_setting('header-img-upload');
$wp_customize->add_control(new WP_Customize_Image_Control($wp_customize,'header-img-upload',array(
'label'=>__('Фоновое изображение шапки', 'calenda'),
'section'=>'header',
'settings'=>'header-img-upload',
)));
$wp_customize->add_setting('logo-upload');
$wp_customize->add_control(new WP_Customize_Image_Control($wp_customize,'logo-upload',array(
'label'=>__('Текущий логотип', 'calenda'),
'section'=>'header',
'settings'=>'logo-upload',
)));
$wp_customize->add_setting('site-title-size',array(
"default"=>'34px',
'transport'=>'postMessage',
));
$wp_customize->add_control(new WP_Customize_Control($wp_customize,'site-title-size',array(
'label'=>__('Размер названия сайта', 'calenda'),
'section'=>'header',
'settings'=>'site-title-size',
'type'=>'text',
)));
$wp_customize->add_setting('site-description-size',array(
"default"=>'16px',
'transport'=>'postMessage',
));
$wp_customize->add_control(new WP_Customize_Control($wp_customize,'site-description-size',array(
'label'=>__('Размер описания сайта', 'calenda'),
'section'=>'header',
'settings'=>'site-description-size',
'type'=>'text',
)));
$wp_customize->add_setting('site-title-color',array(
"default"=>'#fff',
'transport'=>'postMessage',
));
$wp_customize->add_control(new WP_Customize_Color_Control($wp_customize,'site-title-color',array(
'label'=>__('Цвет названия сайта', 'calenda'),
'section'=>'header',
'settings'=>'site-title-color',
)));
$wp_customize->add_setting('site-description-color',array(
"default"=>'#fff',
'transport'=>'postMessage',
));
$wp_customize->add_control(new WP_Customize_Color_Control($wp_customize,'site-description-color',array(
'label'=>__('Цвет описания сайта', 'calenda'),
'section'=>'header',
'settings'=>'site-description-color',
)));
Как видите, предыдущую вкладку со логотипом я убрал и поместил данную настройку внутрь секции «Параметры шапки».
Теперь осталось все это дело вывести в стилях и проверить работу кода.
Ищем стили, которые отвечают за отображение соответствующих элементов, и переносим их в тег style, как делали ранее:
На примере названия сайта и его описания. Остальное попробуйте сделать сами.
Дам краткие пояснения по новым элементам кода:
new WP_Customize_Control – выводит в настройках текстовое поле. Отлично подходит для задания размеров шрифтов, блоков и всех остальных параметров, где передаются числовые значения.
new WP_Customize_Color_Control – выводит форму выбора цвета (палитра и поле ручного ввода значения). Подходит для настроек цвета.
‘transport’=>’postMessage’ – метод передачи данных. Объяснять не буду, его можно использовать в большинстве случаев.
Наша шапка готова. Теперь можно менять параметры, как душе угодно. Переходим далее.
Пишем настройки заголовков
В эту секцию я поместил параметры цвета и размера шрифтов h1, h2, h3 и h4. Заголовки пятого и шестого уровня я не использую, настраивать их нет необходимости. Также в эту вкладку я включил и настройку заголовков виджетов сайдбара (хотя у меня они и оформлены тегами span).
$wp_customize->add_section('headings',array(
"title"=>__('Параметры заголовков','calenda'),
"priority"=>99,
));
$wp_customize->add_setting('h1-size',array(
"default"=>'18px',
'transport'=>'postMessage',
));
$wp_customize->add_control(new WP_Customize_Control($wp_customize,'h1-size',array(
'label'=>__('Размер заголовка h1','calenda'),
'section'=>'headings',
'settings'=>'h1-size',
'type'=>'text',
)));
$wp_customize->add_setting('h1-color',array(
"default"=>'#fff',
'transport'=>'postMessage',
));
$wp_customize->add_control(new WP_Customize_Color_Control($wp_customize,'h1-color',array(
'label'=>__('Цвет заголовка h1','calenda'),
'section'=>'headings',
'settings'=>'h1-color',
)));
Данный код описывает параметры заголовка h1 (размер и цвет). По аналогии делаются и остальные заголовки.
Не забываем о стилях:
Таким же образом делаем и настройки текстов и ссылок внутри них. Только делайте размер шрифтов для текстов и ссылок одинаковым, что не смотрелось вырвиглазно.
Высота и цвет фона подвала
Работаем по аналогии с шапкой. Подробно рассказывать не буду, учитесь работать сами. Здесь нет ничего сложного.
Точно так же поступаем с остальными настройками, которые могут понадобится в Вашей теме.
Помните, что Вас ограничивает только фантазия. И не забывайте проверять работу кода.
Результатом моих трудов стало вот такое чудо:
Эти вкладки содержат множество настроек, которые делают мою тему универсальной. Разворачивание и настройка уникального внешнего вида занимает 10 минут. В масштабах нескольких сайтов, это – колоссальная экономия времени и денег.
