§ WordPress — создание кастомной страницы с контактами компании в админке

Кастомизация админки вордпресса, при разработке сайта под клиента, играет огромную роль. Довольно часто контактную информацию компании клиент может менять на лету, и чтобы не править каждый раз footer и header, нужно дать возможность клиенту менять эту информацию самому. На помощь нам приходит замечательный плагин CMB2. Кстати, в предыдущих статьях, мы научились создавать различные поля, типа: текст, переключатели, файл и чекбокс.

Скачать плагин CMB2

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

  • Создание страницы с контактными данными.
  • Функция получения данных со страницы с контактами.
  • Показ контактных данных.

Создание страницы с контактными данными.

Следующий код создаст в админке страницу «Контакты компании» с двумя контактными телефонами, email и скриптом Яндекс карт. Используем всего два типа полей: text_medium и textarea_code. Код нужно поместить в файл function.php активной темы.

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
//Страница контактов компании
function company_page_options() {
    $company_options = new_cmb2_box( array(
        'id'           => 'company-options',
        'title'        => esc_html__( 'Контакты компании' ),
        'object_types' => array( 'options-page' ),
        'option_key'      => 'company-options', // Ключ опций и слаг.
        'icon_url'        => 'dashicons-image-filter', //Иконка в меню
    ) );
    $company_options->add_field( array(
        'name' => esc_html__( 'Контактный телефон 1:' ), 
        'desc' => esc_html__( 'Например: +79998885522' ), 
        'id'   => 'tell1', 
        'type' => 'text_medium', 
    ) );
    $company_options->add_field( array(
        'name' => esc_html__( 'Контактный телефон 2:' ), 
        'desc' => esc_html__( 'Например: +79998885522' ), 
        'id'   => 'tell2', 
        'type' => 'text_medium', 
    ) );
    $company_options->add_field( array(
        'name' => esc_html__( 'Email:' ), 
        'desc' => esc_html__( 'Например: email@email.ru' ), 
        'id'   => 'email', 
        'type' => 'text_medium', 
    ) );
    $company_options->add_field( array(
        'name' => esc_html__( 'Скрипт Яндекс карты:' ), 
        'desc' => esc_html__( 'Генерируется по ссылке: https://yandex.ru/map-constructor/' ), 
        'id'   => 'ymap', 
        'type' => 'textarea_code', 
    ) );
}
add_action( 'cmb2_admin_init', 'company_page_options' );

Результат:

CMB2 - страницы с контактами компании в админке

Функция получения данных со страницы с контактами.

Следующая функция позволит нам получать сохраненные данные со страницы.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
add_action( 'cmb2_admin_init', 'company_page_options' );
function cp_get_option( $key = '', $default = false ) {
    if ( function_exists( 'cmb2_get_option' ) ) {
        return cmb2_get_option( 'company-options', $key, $default );
    }
    $opts = get_option( 'company-options', $default );
    $val = $default;
    if ( 'all' == $key ) {
        $val = $opts;
    } elseif ( is_array( $opts ) && array_key_exists( $key, $opts ) && false !== $opts[ $key ] ) {
        $val = $opts[ $key ];
    }
    return $val;
}

Показ контактных данных.

Теперь нам осталось получить и вывести данные в нужном месте сайта, например в header.php.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="contacts">
    <?php 
        $tell = cp_get_option( 'tell1' );
        $tell2 = cp_get_option( 'tell2' );
        $email = cp_get_option( 'email' );
        $ymap = cp_get_option( 'ymap' );
    ?>
    <div>
        <b>Телефон 1:</b><br>
        <?php echo $tell; ?>
    </div>
    <div>
        <b>Телефон 2:</b><br>
        <?php echo $tell2; ?>
    </div>
    <div>
        <b>Email:</b><br>
        <?php echo $email; ?>
    </div>
    <div>
        <b>Яндекс карта:</b><br>
        <?php echo $ymap; ?>
    </div>
</div>

Результат:

CMB2 - страницы с контактами компании в админке

Итоги

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

05 апреля
Теги: , ,