HamSter007
@HamSter007
HTML/CSS верстальщик

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

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

79cbd63602b84aa58f9af1def23fa45a.png

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

297fb129465f4bbab661e19f21c189af.png

код в 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; ?>


Возможно есть статьи\уроки по этой теме, как реализовать данное редактирование?
  • Вопрос задан
  • 385 просмотров
Решения вопроса 1
deniscopro
@deniscopro Куратор тега WordPress
WordPress-разработчик, denisco.pro
<?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.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы