Пт. Сен 30th, 2022

Всем привет, друзья! Сегодня Мы с Вами будем разбираться, как прописать в шапке сайта word press контактную информацию.

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

Итак, для начала поблагодарю сайт https://impuls-web.ru/kak-vyvesti-kontaktnye-dannye-v-shapke-sajta/, где я и нашла эту полезную информацию

Рассмотрим самый «гибкий» способ:

Все просто, даже если «боитесь» кода. Переходим в админку — Внешний вид — Редактор Тем

Переходим в редактор тем

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

Находим раздел «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' );

Определяем место, где контакты будут выводится и вставляем код для вывода

Затем находим файл «header.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 } ?>

В моем случае, когда нужно было под логотипом, я добавила в секцию после него, перед закрывающим <section> и поставила <br> для перехода на другую строку:

Копируем код в header.php для вывода контактных данных

Переходим на сам сайт и нажимаем «Настроить»

Настройка

Слева в списке настроек у Вас появится строчка «Контактные данные в шапке сайта», заходим в него и добавляем телефон.

Контактные данные

Итак, если все сделали правильно, у Вас должен появится телефон в нужном месте.

контакты под логотипом

Как сделать телефон кликабельным?

И не забудьте сделать телефон в шапке кликабельным, чтобы с него моглу сразу позвонить при заходе с мобильного

Для этого нужно прописать в форме не просто телефон, а ссылку на него, в такой форме

<a href="tel:ваштелефон"><b>ваш телефон</b></a>

А на сегодня все! Читайте и подписывайтесь на мой блог, а так же дзен канал https://zen.yandex.ru/id/5d57092e46f4ff00ad002524

от admin

Добавить комментарий

Ваш адрес email не будет опубликован.