Как добавить иконку редактирования к элементу в WP?

Question

[HamSter]

В стандартных темах WP при настройке темы появляются иконки, кликая по которым переходишь к редактированию элемента:



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



код в inc\customizer.php:

function testtheme_customize_register( $wp_customize ) {
      ...
      // Logo upload
        $wp_customize->add_section( 'testtheme_logo_section' , array(
            'title'       => esc_html__( 'Logo', 'testtheme' ),
            'priority'    => 21, 
            'description' => esc_html__( 'Upload a logo to replace the default site name and description in the header. Also, upload your site favicon and Apple Icons.', 'testtheme'),
        ));

        $wp_customize->add_setting( 'testtheme_logo', array(
            'sanitize_callback' => 'esc_url_raw',
        ));

        $wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'testtheme_logo', array( 
            'label'    => esc_html__( 'Logo', 'testtheme' ),
            'type'     => 'image',
            'section'  => 'testtheme_logo_section',  
            'settings' => 'testtheme_logo',
            'priority' => 10,
        ))); 
...

}
add_action( 'customize_register', 'testtheme_customize_register' );

В header.php:

<?php if ( get_theme_mod( 'testtheme_logo' ) ) : ?>
			    <div class='site-logo'>
			        <a href='<?php echo esc_url( home_url( '/' ) ); ?>' title='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>' rel='home' class="navbar-brand">
			        	<img src='<?php echo esc_url( get_theme_mod( 'testtheme_logo' ) ); ?>' alt='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>'>
			        </a>
			    </div>
			<?php else : ?>
			    <hgroup>
			        <a class="navbar-brand" href="#"><span>Test</span>Theme</a>
			    </hgroup>
			<?php endif; ?>

Возможно есть статьи\уроки по этой теме, как реализовать данное редактирование?

Answer 1

[Денис Янчевский]

<?php echo get_theme_mod('testtheme_logo'); ?>
Вставили уже в какой-то шаблон?

В документации есть работы описание с Customizer.

Попробуйте добавить

$wp_customize->selective_refresh->add_partial('testtheme_logo', array(
        'selector' => '.navbar-brand',
        'render_callback' => function() {
            $img = get_theme_mod('testtheme_logo');
            if (is_numeric($img)):
                ?>
                <img src="<?php echo wp_get_attachment_url($img); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
            <?php
            endif;
        },
    ));

Насколько я помню, тип image возвращает ID вложения, поэтому нужно 'sanitize_callback' => 'absint', ну и в шаблоне, соответственно, выводить с помощью функции wp_get_attachment_url.

Comments

[HamSter]

Подправила вопрос, в header.php есть get_theme_mod( 'testtheme_logo' )

[HamSter]

В документации, кстати, не вижу про иконки ... это совсем недавно появилось, у меня версия версии 4.7.2. Из новшеств "Ярлыки редактирования

Видимые значки появились на тех местах сайта, которые могут быть настроены в режиме живого предпросмотра. Нажмите на ярлык и прямо перейдете к редактированию. Вместе с начальным содержимым начать с настройкой вашего сайта теперь еще быстрее чем когда-либо."

[Денис Янчевский]

HamSter: обновил ответ, попробуйте с selective_refresh.

[Денис Янчевский]

HamSter: раздел документации по поводу карандашиков https://developer.wordpress.org/themes/customize-a... и пост в блоге https://make.wordpress.org/core/2016/11/10/visible... .

[HamSter]

Денис Янчевский: Супер, работает! Огромное спасибо!!!