4

Вот не могу понять, как найти информацию по тому, как правильно натягивать свою верстку, чтобы можно было менять все в админке/настройка темы. Вот так:

введите сюда описание изображения

Если несложно, дайте ссылки на информацию, как это реализовать без плагинов.

2

1 ответ 1

9

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

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

add_action( 'customize_register', function ( $customizer ) {
    global $global_email;

    $customizer->add_section(
        'section_contacts',
        array(
            'title'       => 'Контакты для всего сайта',
            'description' => 'Контактная информация для страниц сайта',
            'priority'    => 20,
        )
    );
    $customizer->add_setting(
        'section_contacts_moscow_phone',
        array(
            'default' => '+7 (499) 322-33-22',
        )
    );
    $customizer->add_control(
        'section_contacts_moscow_phone',
        array(
            'label'   => 'Московский телефон',
            'section' => 'section_contacts',
            'type'    => 'text',
        )
    );
    $customizer->add_setting(
        'section_contacts_federal_phone',
        array(
            'default' => '8 (800) 322-33-22',
        )
    );
    $customizer->add_control(
        'section_contacts_federal_phone',
        array(
            'label'   => 'Федеральный телефон',
            'section' => 'section_contacts',
            'type'    => 'text',
        )
    );
    $customizer->add_setting(
        'section_contacts_email',
        array(
            'default' => 'info@mysite.ru',
        )
    );
    $customizer->add_control(
        'section_contacts_email',
        array(
            'label'   => 'Email',
            'section' => 'section_contacts',
            'type'    => 'text',
        )
    );
} );

Использование:

$current_phone = get_theme_mod( 'section_contacts_moscow_phone', '' );

Результат:

введите сюда описание изображения

введите сюда описание изображения

Полезные ссылки на документацию по теме (из комментариев @HamSter и @SeVlad)

https://developer.wordpress.org/themes/customize-api/ https://developer.wordpress.org/themes/customize-api/tools-for-improved-user-experience/#selective-refresh-fast-accurate-updates https://make.wordpress.org/core/2016/11/10/visible-edit-shortcuts-in-the-customizer-preview/

7
  • ок спасибо за ответ очень благодарен за информацию! можно еще уточнить как в саму верстку вставлять? 26 сен 2017 в 9:56
  • 1
    Я добавлю ссылку на ман: developer.wordpress.org/themes/customize-api
    – SeVlad
    26 сен 2017 в 9:57
  • О, не увидел ;) она и др полезная ссылка в комменте к вопросу есть.
    – SeVlad
    26 сен 2017 в 10:03
  • да, совершенно правильный вопрос, забыл. Добавил в ответ. 26 сен 2017 в 10:03
  • @HamSter да этим тоже можно. Я смотрю в код twentyseventeen, они там в файле /inc/customizer.php задают карандашики с помощью selector и render_callback 26 сен 2017 в 17:32

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.