WordPress и своя верстка

#wordpress

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



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

Ответы

Ответ 1

То, что вы показали на картинке, называется 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/