Как добавить кастомные настройки в тему WordPress

  • 03.03.2020 16:31
  • 0
  • 174

Итак, Вы создали собственную тему для сайта. Теперь пришло время запускать на ней новые проекты. Одинаковый дизайн – не хорошо. А переделывать тему под каждый новый проект долго.
Наверняка многие видели похожую панель в админке WordPress:

кастомизация wordpress

Это и есть кастомные настройки темы Вордпресс. И в сегодняшней статье я научу Вас добавлять их.

Настройки позволят менять такие параметры внешнего вида сайта:

  • Изображение логотипа
  • Высоту шапки
  • Размер шрифтов названия и описания сайта
  • Фоновое изображение шапки
  • Цвет заголовков
  • Размер шрифта заголовков
  • Шрифты названий виджетов в сайдбаре
  • Высота и цвет фона подвала
  • Основной шрифт (которым написаны статьи)
  • Фоновое изображение сайта

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

Перечисленные мной параметры позволят в будущем разворачивать и уникализировать тему в течении 10 минут. Итак, погнали.

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

Первым делом нам понадобится файл functions.php. Открываем его и в самом конце начинаем писать код.

Для того, чтобы включить настройки темы, пишем следующий код:

wordpress страница настроек темы

Первая строка регистрирует блок настроек с помощью WP Customizer Theme. Название функции может быть любым, но советую делать его понятным. Внутри функции мы и будем добавлять сами настройки.


add_action('customize_register','mytheme_customize_register');

Выводит блок параметров темы в админке.

Следующий код


function mytheme_head(){
?>

Инициирует перегрузку стилей, которые будут написаны тут же.

Настройка логотипа

Первым делом мы добавим возможность менять из админки логотип. Код выглядит вот так:

полностью настраиваемая тема wordpress


$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, вставленной в селектор, отвечающий за стили логотипа, будем выводить его картинку. Вот так это выглядит у меня:

custom logo wordpress

Внутри функции 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, как делали ранее:

custom logo wordpress

На примере названия сайта и его описания. Остальное попробуйте сделать сами.

Дам краткие пояснения по новым элементам кода:

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 (размер и цвет). По аналогии делаются и остальные заголовки.

Не забываем о стилях:

custom logo wordpress

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

Высота и цвет фона подвала

Работаем по аналогии с шапкой. Подробно рассказывать не буду, учитесь работать сами. Здесь нет ничего сложного.

Точно так же поступаем с остальными настройками, которые могут понадобится в Вашей теме.

Помните, что Вас ограничивает только фантазия. И не забывайте проверять работу кода.

Результатом моих трудов стало вот такое чудо:

полностью настраиваемая тема wordpress

Эти вкладки содержат множество настроек, которые делают мою тему универсальной. Разворачивание и настройка уникального внешнего вида занимает 10 минут. В масштабах нескольких сайтов, это – колоссальная экономия времени и денег.

Комментарии (0)
Чтобы оставить комментарий, необходимо войти на сайт
Войти
Последние комментарии
Big Affiliate
Привет. Шаблон довольно старый, возможно он уже не совместим с текущими версиями вордпресса.
Выбрал для себя на Mostbet Partners гибридную схему. Мало кто сегодня предлагает такое преимущество. Считаю, что CPA+RS дает максимальный выхлоп. Выгода очевидна, если действовать с умом. ПП предлагает хорошее гео и минималку на вывод от 50 баксов.
Привет. Установила шаблон BCL но он не заработал, на сайте ни чего не отображается. Я в этом деле новичок, вы могли бы помочь разобраться
Пользователи