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

  • 03.03.2020 16:31
  • 0
  • 286

Итак, Вы создали собственную тему для сайта. Теперь пришло время запускать на ней новые проекты. Одинаковый дизайн – не хорошо. А переделывать тему под каждый новый проект долго.
Наверняка многие видели похожую панель в админке 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)
Чтобы оставить комментарий, необходимо войти на сайт
Войти
Последние комментарии
Мостебт Партнерс предлагают очень хорошие ставки, так что даже небольшое количество трафика дает возможность зарабатывать. Я не гонюсь за огромными выплатами, 400 долларов в месяц вполне достаточно. Этого в первый месяц удалось достичь практически без усилий. Может буду чуть-чуть наращивать обороты, но пока и так все хорошо. Это как небольшой дополнительный заработок для меня. ДУмаю, что можно сделать и основным, если захотеть, так что советую всем.
Уже работал с разными партнерками, но считаю, что mostbet partners одна из самых адекватных в плане технической поддержки. она работает круглосуточно, и всегда готова помочь, Если какие-то проблемы, то сразу решаются все проблемы. Я обращался несколько раз, первый, когда настраивал все, а потом уже при первой выплате. Возникли вопросы по статистике, но все объяснили, показали, так что вопросов вообще не осталось.
На данный момент. среди множества ПП, не нашел для себя ни одной лучше, чем mostbet partners. Не знаю, с чем это связано, но условия здесь наиболее выгодные. Шейва не заметил, что очень радует. Холда даже на первых порах не было, деньги сразу выплачивали. Трафик в сфере гемблинга мне приносит довольно большой доход, который я теперь не хочу терять.
Пользователи