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

03.03.2020 16:31
0
569

Итак, Вы создали собственную тему для сайта. Теперь пришло время запускать на ней новые проекты. Одинаковый дизайн – не хорошо. А переделывать тему под каждый новый проект долго.
Наверняка многие видели похожую панель в админке 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 минут. В масштабах нескольких сайтов, это – колоссальная экономия времени и денег.