Как добавить номер телефона и email в WordPress с помощью Customize API

27.03.2022

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

Рассмотрим, как быстро создать панель для таких контактов и создать поля для ввода номера телефона и адреса почты.
Здесь приведена информация только по созданию конкретных полей, без подробностей их настроек, эту информацию вы можете узнать из других материалов.
Сначала мы создаем необходимый файл в Customize API, затем пишем код в файлах шаблона.

Как создать панель для контактов на сайте в WordPress

Первым делом создаем отдельную панель, внутри которой будут находится все настройки для контактов на сайте.

php


$wp_customize->add_panel( 'hr_contact_panel', array( 
  'title'       =>  'Контакты',
  'description' =>  __( 'С помощью этой панели вы сможете указать номера телефонов и адрес электронной почты', 'hrcode' ),
));

Как создать секцию для контактов на сайте в WordPress

Далее создаем отдельные секции для контактов на сайте, в данном случае секцию контактов в шапке сайта.

php


$section = 'hr_contact_panel_header';
$wp_customize->add_section( $section, array(
  'title' =>  __( 'Контакты в шапке', 'hrcode' ),
  'panel' =>  'hr_contact_panel',
));

Как создать чекбокс активации настройки на сайте в WordPress

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

php


$setting = 'hr_customize_activate_contact_header';
$wp_customize->add_setting( $setting, array(
  'default'           => '',	
  'sanitize_callback' => 'hrcode_sanitize_checkbox',	
  'type'              => 'theme_mod',
  'capability'        => 'edit_theme_options',
  'transport'         => 'refresh',
));

$wp_customize->add_control( $setting, array(
  'label'             => __( 'Активировать контакты в шапке', 'hrcode' ),
  'description'       => '',
  'type'              => 'checkbox',
  'section'           => $section,  
  'settings'          => $setting,
));

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

Следующим этапом создаем поле для ввода номера телефона.

php



$setting = 'hr_customize_phone_header';
$wp_customize->add_setting( $setting, array(
  'default'           => '',
  'sanitize_callback' => 'sanitize_text_field',
  'type'              => 'theme_mod',
  'capability'        => 'edit_theme_options',
  'transport'         => 'refresh',
));

$wp_customize->add_control( $setting, array(
  'label'             =>  __( 'Номер телефона', 'hrcode' ),
  'description'       =>  __( 'Введите номер телефона: ( +7(095) 196-81-23 )', 'hrcode' ),
  'type'              =>  'text',
  'section'           =>  $section,
  'settings'          =>  $setting,
));

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

php


$phone_header = get_theme_mod( 'hr_customize_phone_header' );

Далее делаем вызов этой переменной в том месте, где должен отображаться номер:

php


 
  
<?php echo '<a class="hr-site-header__phone" href="'. esc_url( 'tel:'. preg_replace('/[^\d+]/', '', $phone_header ) ) .'">'. esc_html( $phone_header ) .'</a>';?>

Как добавить адрес электронной почты на сайт в WordPress

Так же, как и в первом случае, создаем настройки для ввода адреса электронной почты. Сначала создаем поле для ее ввода.

php



$setting = 'hr_customize_header_email';
$wp_customize->add_setting( $setting, array(
  'default'    	    =>  '',
  'sanitize_callback' =>  'sanitize_email',	
  'type'              =>  'theme_mod',
  'capability'        =>  'edit_theme_options',
  'transport'         =>  'refresh',
));

$wp_customize->add_control( $setting, array(
  'label'             =>  __( 'URL Email', 'hrcode' ),
  'description'       =>  __( 'Адрес по умолчанию: my@gmail.com', 'hrcode' ),
  'section'           =>  $section,
  'settings'          =>  $setting,
));

Затем нужно создать переменную в файле темы, где вы хотите разместить email.

php


$email_header = get_theme_mod( 'hr_customize_email_header' );

И в нужном месте этого файла сделать вызов этой переменной:

php


 
  
<?php echo '<a class="hr-site-header__email" href="'. esc_url( 'mailto:'. $header_email ) .'">' . esc_html( $header_email ) .'</a>'; ?>

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

Метки: Customize API, wordpress