Как вывести контакты в хедере сайта WordPress?

Опубликовано: 30.01.2020 в категории: Вордпресс

В этой статье поговорим о том, как вывести контакты в хедере сайта (шапке) сайта WordPress.
Контактная информацию в хедере необходима практически на каждом сайте, обычно выводится телефон, адрес, время работы, e-mail, кнопки соц.сетей или какая-то важная информация.

Для вывода контактов в хедере сайта на WordPress есть несколько способов.
Вот два самых простых и проверенных.

Содержание статьи

1 Добавление области для виджетов с контактными данными в хедер
2 Выводим контакты в хедере через настойки темы
3 Как определить куда вставлять код для вывода контактов в хедере?

Добавление области для виджетов с контактными данными в хедер

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

добавление области виджитов для контактов в хедере

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

Для объявления свое области виджетов нам нужно:

1. Открываем файл functions.php вашей темы, в редакторе «Внешний вид» => «редактор тем»:
2. Далее, находим в этом файле фрагмент кода, в котором происходит объявления области с помощью функции register_sidebar.
3. Далее нам нужно скопировать такой фрагмент кода и вставить его ниже скопированного.
4. Изменяем несколько строк во вновь вставленном коде:
1. 1. В поле ‘name’ заменяем значение в скобочках ‘Masthead’ на наше, например ‘TopBar’. Здесь задается название области виджетов, которое будет отображаться в разделе «Внешний вид» → «Виджеты».
  1
  ‘name’ => __( ‘TopBar’, ‘vantage’ ),
2. 2. В поле ‘id’ задаем уникальный идентификатор нашей области. Например, с topbar:
  1
  ‘id’ => ‘topbar’,
3. 3. В поле ‘description’ задаем описание области.
  1
  ‘description’ => __( ‘Top bar content.’, ‘vantage’ ),

5. В результате получаем такой код:

register_sidebar( array(

‘name’ => __( ‘TopBar’, ‘vantage’ ),

‘id’ => ‘topbar’,

‘description’ => __( ‘Top bar content.’, ‘vantage’ ),

‘before_widget’ => ‘<aside id=»%1$s» class=»widget %2$s»>’,

‘after_widget’ => ‘</aside>’,

‘before_title’ => ‘<h3 class=»widget-title»>’,

‘after_title’ => ‘</h3>’,

) );

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

6. Далее сохраняем файл и в браузере переходим в раздел «Внешний вид» → «Виджеты». Здесь должна появиться новая область:

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

1. Так как мы делаем топбар, то он должен располагаться над шапкой сайта. Соответственно, нам нужно добавить вывод области в файле header.php, который, так же как и functions.php, находится в папке с активной темой.
2. Открываем файл header.php и вставляем следующий фрагмент кода сразу же после открытия тега <body>:
1
2
3
<div id=«topbar-inner»>
<?php dynamic_sidebar( ‘topbar’ ); ?>
</div>
Вот так:
В данном фрагменте мы добавляем блок с произвольным идентификатором topbar-inner, в котором находится функция dynamic_sidebar, предназначенная для вывода на страницы сайта новой области. Здесь нам нужно вставить название идентификатора, которое мы задавали при объявлении области.

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

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

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

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

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

При редактировании через админку не забудьте на всякий случай скопировать код этого файла и сохранить у себя на компьютере в качестве резервной копии!

Или вы можете открыть этот файл при помощи Notepad++ или другого редактора кода.
Данный файл будет находиться по адресу: /wp-content/themes/название_вашей_темы/functions.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' );

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

2 После добавления этого нехитрого кода у вас в админке сайта в разделе «Внешний вид» — «Настроить» появится отдельный блок с названием «Контактные данные в шапке сайта»
Кликнув по нему вы можете задать нужные данные и нажать на кнопку «Опубликовать»
3 После того как вы это сделаете… ничего не произойдёт! Введённая информация сохранится в базе данных сайта, но сами по себе контактные данные не выведутся там где вам нужно. Вот тут то и начинается самая интересная часть нашей доработки! Для вывода контактных данных нам нужно будет в нужном месте шаблона вывести специальных код:
```

<?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, иконкой телефонной трубки номером телефона:
```
<div class="phone-number">
<i class="fa fa-phone" aria-hidden="true"></i> <?php echo get_option('site_telephone'); ?></div>
```
А если поле пустое, то в коде не выведется ничего.
Если вам не нужны иконки в полях то код
```
<i class="fa fa-map-marker" aria-hidden="true"></i>
```
и
```
<i class="fa fa-phone" aria-hidden="true"></i>
```
можно удалить или заменить на другую иконку или картинку.
4 После вставки этого кода и сохранения изменений у вас контакты в хедере будут с данными, которые вы задали в админке. Для их оформления вам придётся прибегнуть к помощи CSS.

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

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

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

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