Как вывести контактные данные в шапке сайта?

Приветствую вас, дорогой читатель!

По многочисленным просьбам трудящихся сегодня покажу как вывести блок с контактной информацией в шапке сайта WordPress.
Такой блок пригодится практически на каждом сайте, в него можно вывести телефон, адрес, время работы, e-mail, кнопки соцсетей или какой-то произвольный текст.

Для вывода контактной информации в шапке сайта в WordPress есть несколько способов.
Рассмотрим 2 наиболее простых и гибких.

Добавление области виджетов для вывода контактных данных в шапке сайта

Способ заключается в том, что вы объявляете свою собственную область виджетов, в которую можно будет добавлять любые виджеты, в том числе и виджет «Текст» и «HTML-код», в которых вы и будете писать данные для вывода в шапке сайта.

Далее вам нужно будет при помощи специального кода вывести эту область виджетов в файлах соответствующего шаблона темы WordPress. Обычно это шаблон header.php, masthead.php или что-то аналогичное, в зависимости от темы.

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

Наверняка вы видели, что в админке WordPress есть такой раздел: «Внешний вид» — «Настроить»

В нем можно задать настройки темы, свойства сайта и некоторые другие параметры, которые зависят от установленной темы и плагинов. Так вот мы тоже можем привязаться к этому разделу и вывести в нём дополнительный пункт для задания контактной информации.
Для этого нам нужно проделать несколько шагов:

1. 1 Открываем файл functions.php активной темы. Это можно сделать через админку WordPress: «Внешний вид» — «Редактор» — «Функции темы»
   
   При редактировании через админку не забудьте на всякий случай скопировать код этого файла и сохранить у себя на компьютере в качестве резервной копии!

   Или вы можете открыть этот файл при помощи Notepad++ или другого редактора кода.
   Данный файл будет находиться по адресу:

   /wp-content/themes/название_вашей_темы/functions.php
   О том как работать с Notepad++ рассказывала в отдельной статье:
   «Редактирование файлов сайта в Notepad++»

   В самом конце этого файла нам нужно вставить следующий код:

   PHP

   /** * Добавляет блок для ввода контактных данных */ function mytheme_customize_register( $wp_customize ) { /* Добавляем секцию в настройки темы */ $wp_customize->add_section( // ID 'data_site_section', // Массив аргументов array( 'title' => 'Контактные данные в шапке сайта', 'capability' => 'edit_theme_options', 'description' => "Тут можно указать контактные данные" ) ); /* Добавляем поле контактных данных */ $wp_customize->add_setting( // ID 'theme_contacttext', // Массив аргументов array( 'default' => '', 'type' => 'option' ) ); $wp_customize->add_control( // ID 'theme_contacttext_control', // Массив аргументов array( 'type' => 'text', 'label' => "Текст с контактной информацией", 'section' => 'data_site_section', 'settings' => 'theme_contacttext' ) ); /* Добавляем поле телефона site_telephone */ $wp_customize->add_setting( // ID 'site_telephone', // Массив аргументов array( 'default' => '', 'type' => 'option' ) ); $wp_customize->add_control( // ID 'site_telephone_control', // Массив аргументов array( 'type' => 'text', 'label' => "Текст с телефоном", 'section' => 'data_site_section', 'settings' => 'site_telephone' ) ); } add_action( 'customize_register', 'mytheme_customize_register' );

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64

   /** * Добавляет блок для ввода контактных данных */ function mytheme_customize_register( $wp_customize ) { /* Добавляем секцию в настройки темы */ $wp_customize->add_section(     // ID     'data_site_section',     // Массив аргументов     array( 'title' => 'Контактные данные в шапке сайта',         'capability' => 'edit_theme_options',         'description' => "Тут можно указать контактные данные"    ) ); /* Добавляем поле контактных данных */ $wp_customize->add_setting(     // ID     'theme_contacttext',     // Массив аргументов     array(         'default' => '',         'type' => 'option'     ) ); $wp_customize->add_control(     // ID     'theme_contacttext_control',     // Массив аргументов     array(         'type' => 'text',         'label' => "Текст с контактной информацией",         'section' => 'data_site_section',         'settings' => 'theme_contacttext'     ) ); /* Добавляем поле телефона site_telephone */ $wp_customize->add_setting(     // ID     'site_telephone',     // Массив аргументов     array(         'default' => '',         'type' => 'option'     ) ); $wp_customize->add_control(     // ID     'site_telephone_control',     // Массив аргументов     array(         'type' => 'text',         'label' => "Текст с телефоном",         'section' => 'data_site_section',         'settings' => 'site_telephone'     ) ); } add_action( 'customize_register', 'mytheme_customize_register' );

   Если в двух словах, то в этом фрагменте кода мы регистрируем новую секцию в настройках темы, а потом добавляем в неё 2 поля и задаём для них метки с подписями. Текст самих подписей вы можете менять на своё усмотрение. Они задаются в аргументах label, title и description и написаны на русском языке, так что я думаю вы разберётесь.

2. 2 После добавления этого нехитрого кода у вас в админке сайта в разделе «Внешний вид» — «Настроить» появится отдельный блок с названием «Контактные данные в шапке сайта»
   

   Кликнув по нему вы можете задать нужные данные и нажать на кнопку «Опубликовать»

   
3. 3 После того как вы это сделаете… ничего не произойдёт! Введённая информация сохранится в базе данных сайта, но сами по себе контактные данные не выведутся там где вам нужно. Вот тут то и начинается самая интересная часть нашей доработки!

   Для вывода контактных данных нам нужно будет в нужном месте шаблона вывести специальных код:

   PHP

   <!--Вывод адреса---> <?php $contact_inf = get_option('theme_contacttext'); if($contact_inf != null){ ?> <div class="contact_inf"><i class="fa fa-map-marker" aria-hidden="true"></i> <?php echo $contact_inf; ?></div> <?php } ?> <!--Вывод номера телефона---> <?php $tel = get_option('site_telephone'); if($tel != null){ ?> <div class="phone-number"><i class="fa fa-phone" aria-hidden="true"></i> <?php echo get_option('site_telephone'); ?></div> <?php } ?>

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

   <!--Вывод адреса---> <?php $contact_inf = get_option('theme_contacttext'); if($contact_inf != null){ ?> <div class="contact_inf"><i class="fa fa-map-marker" aria-hidden="true"></i> <?php echo $contact_inf; ?></div>   <?php } ?>   <!--Вывод номера телефона---> <?php $tel = get_option('site_telephone'); if($tel != null){ ?> <div class="phone-number"><i class="fa fa-phone" aria-hidden="true"></i> <?php echo get_option('site_telephone'); ?></div>   <?php } ?>

   Так как у нас два поля, то выводятся они по очереди, причём с проверкой на заполненность. То есть если значение поля «Телефон» заполнено, то в коде выведется блок с классом phone-number, иконкой телефонной трубки номером телефона:

   PHP

   <div class="phone-number"> <i class="fa fa-phone" aria-hidden="true"></i> <?php echo get_option('site_telephone'); ?></div>

   1 2	<div class="phone-number"> <i class="fa fa-phone" aria-hidden="true"></i> <?php echo get_option('site_telephone'); ?></div>

   А если поле пустое, то в коде не выведется ничего.
   Если вам не нужны иконки в полях то код

   XHTML

   <i class="fa fa-map-marker" aria-hidden="true"></i>

   1	<i class="fa fa-map-marker" aria-hidden="true"></i>

   и

   XHTML

   <i class="fa fa-phone" aria-hidden="true"></i>

   1	<i class="fa fa-phone" aria-hidden="true"></i>

   можно удалить или заменить на другую иконку или картинку.

   Про вставку картинки я писала в этой статье:
   «Особенности вставки картинки в HTML»
4. 4 После вставки этого кода и сохранения изменений у вас на сайте выведутся те данные, которые вы задали в админке. Для их оформления вам придётся прибегнуть к помощи CSS.
   Вот статья о наиболее полезных CSS свойствах и их особенностях:
   «Основы CSS. Базовые свойства»

Как определить куда вставлять код для вывода контактных данных?

Для того чтобы вставить второй фрагмент кода в нужном месте шаблона вам придётся немного поэкспериментировать. Обычно за вывод шапки сайта отвечает файл header.php, который находится в папке с активной темой, однако в более сложных темах нужный фрагмент кода может находиться и в других файлах шаблона.

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

Если вы знаете ещё какие-то более простые или гибкие способы добавления контактных данных в шапку сайта WordPress – делитесь ими в комментариях! Так же не забывайте подписаться на мою рассылку чтобы получать новые статьи себе на почту.

Успехов вам и вашим проектам!

С уважением Юлия Гусарь