CUSTOMIZABLEOPTIONS

РЕДАКТИРОВАНИЕ ОПЦИЙ ВКАСТОМАЙЗЕРЕ С ФРОНТЕНДА.

Докладчик: / Viktor Kuliebiakin victor@pingbull.no

СТАТИЧЕСКИЕ НАСТРОЙКИБыло бы неплохо сделать, к примеру, на главнойстранице название блока с последними новостями

редактрируемым.

ЕСТЬ ЖЕ КАСТОМАЙЗЕР!Давай быстро добавим.

ДЛЯ НАЧАЛА СОЗДАДИМ НАСТРОЙКУХотя подожди...

ДОБАВИМ ХУКadd_action( 'customize_register', function ( $wp_customize ) { // Code } );

ТЕПЕРЬ МОЖНО И НАСТРОЙКУ$wp_customize->add_setting( 'front_recent_news_block_title', [ 'type' => 'option', ... ] );

CONTROLКуда добавлять будем?

СОЗДАДИМ СЕКЦИЮ$wp_customize->add_section( 'custom_text', [ 'title' => __( 'Custom Text' ), ... ] );

И СНОВА CONTROL!$wp_customize->add_control( 'front_recent_news_block_title', [ 'type' => 'text', 'section' => 'custom_text', // required 'label' => __( 'Recent News Block Title' ), 'active_callback' => 'is_home' ... ] );

add_action( 'customize_register', function ( $wp_customize ) { $wp_customize->add_section( 'custom_text', [ 'title' => __( 'Custom Text' ) ] ); $wp_customize->add_setting( 'front_recent_news_block_title', [ 'type' => 'option' ] ); $wp_customize->add_control( 'front_recent_news_block_title', [ 'type' => 'text', 'section' => 'custom_text', // required 'label' => __( 'Recent News Block Title' ), 'active_callback' => 'is_home' ] );} );

ТУТ ЕЩЕ ПАРУ СТРОК МОЖНОСДЕЛАТЬ РЕДАКТИРУЕМЫМИ

add_action( 'customize_register', function ( $wp_customize ) { $wp_customize->add_section( 'custom_text', [ 'title' => __( 'Custom Text' ) ] ); $wp_customize->add_setting( 'front_recent_news_block_title', [ 'type' => 'option' ] ); $wp_customize->add_control( 'front_recent_news_block_title', [ 'type' => 'text', 'section' => 'custom_text', // required 'label' => __( 'Recent News Block Title' ), 'active_callback' => 'is_home' ] ); $wp_customize->add_setting( 'front_newsletter_block_title', [ 'type' => 'option' ] ); $wp_customize->add_control( 'front_newsletter_block_title', [ 'type' => 'text',

УЛУЧШИМ НЕМНОГО. POSTMESSAGE$wp_customize->add_setting( 'front_recent_news_block_title', [ 'type' => 'option', 'transport' => 'postMessage'] );

КУДА Ж БЕЗ JAVASCRIPT?wp.customize('front_recent_news_block_title', function (value) { value.bind(function (to) { $('.front_recent_news_block_title').html(to); }); });

"ТА МОЖЕ, НУ ЕГО? ДАВАЙХУ*К, Х*ЯК И В ПРОДАКШЕН

ХАРДКОД СДЕЛАЕМ ИЗАБУДЕМ..."

<h3><?php _e( 'Recent News' ) ?></h3> ... <h4><?php _e( 'Newsletter' ) ?></h4> ...

WORDPRESSCUSTOMIZABLE OPTIONSБиблиотека, которая позволяет редактировать

простые текстовые настройки в окнепредварительного просмотра кастомайзера, с

фронтенда.

УСТАНОВКА$ composer require viktor777/wp-customizable-options

ИНИЦИАЛИЗАЦИЯregister_customizable_options();

ДОБАВЛЕНИЕ ОПЦИИ НА ФРОНТЕНДthe_customizable_text( $option, $default = false );

Редактирование с фронтендаПо умолчанию создается секция "CustomizableOptions", куда добавляются все настройки, если ониеще не были доавблены в существующие секцииПо умолчанию текст оборачивается в тэг "span" идобавляется аттрибут contenteditable

ХУКИ/** * Change default wrapper */ add_filter( 'the_customizable_text_wrapper_tag', function () { return 'div'; } );

/** * Change default filter */

/** * Remove default filter */ remove_filter( 'the_customizable_text_value', '_the_customizable_text_value'/** * Lets use e.g. 'esc_url' as filter */ add_filter( 'the_customizable_text_value', function () { return is_bool( $value ) ? $value : esc_url( $value ); } );

ДЕМО

1:02

https://youtu.be/pCT5_stDPYM

GITHUBhttps://github.com/Viktor777/wp-customizable-options

СПАСИБО ЗА ВНИМАНИЕ!E-mail:

GitHub:victor@pingbull.no

https://github.com/Viktor777