�ݺ�ߣ

CUSTOMIZABLE
OPTIONS
РЕДАКТИРОВАНИЕ ОПЦИЙ В
КАСТОМАЙЗЕРЕ С ФРОНТЕНДА.
Докладчик: /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
Куда добавлять будем?

Customizable Options: Редактирование опций в кастомайзере с фронтенда by Viktor Kuliebiakin

СОЗДАДИМ СЕКЦИЮ
$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'
...
] );

'title' => __( 'Custom Text' )
] );
'type' => 'option'
] );
'type' => 'text',
] );
} );

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

'title' => __( 'Custom Text' )
] );
'type' => 'option'
] );
'type' => 'text',
] );
$wp_customize->add_setting( 'front_newsletter_block_title', [
'type' => 'option'
] );
$wp_customize->add_control( 'front_newsletter_block_title', [
'type' => 'text',

УЛУЧШИМ НЕМНОГО. POSTMESSAGE
'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>
...

WORDPRESS
CUSTOMIZABLE OPTIONS
Библиотека, которая позволяет редактировать
простые текстовые настройки в окне
предварительного просмотра кастомайзера, с
фронтенда.

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

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

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

Редактирование с фронтенда
По умолчанию создается секция "Customizable
Options", куда добавляются все настройки, если они
еще не были доавблены в существующие секции
По умолчанию текст оборачивается в тэг "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

GITHUB
https://github.com/Viktor777/wp-customizable-options

СПАСИБО ЗА ВНИМАНИЕ!
E-mail:
GitHub:
victor@pingbull.no
https://github.com/Viktor777

�ݺ�ߣ

Customizable Options: Редактирование опций в кастомайзере с фронтенда by Viktor Kuliebiakin

More Related Content

Customizable Options: Редактирование опций в кастомайзере с фронтенда by Viktor Kuliebiakin