Посещая наш сайт, вы соглашаетесь с нашей политикой конфиденциальности в отношении файлов cookie, статистики отслеживания и т. д.

Главная » Вопросы и ответы » Wordpress

Разрешить HTML в области пользовательского метабокса

На чтение 10 мин Опубликовано

Вопрос или проблема

Я знаю, что существует много вопросов, связанных с моим вопросом, но, честно говоря, я не смог найти решение.
Мой вопрос прост: как я могу разрешить HTML в текстовом поле в настраиваемом метабоксе на посте.
Пока что я создал этот код для добавления метабоксов.

add_action( 'add_meta_boxes_post', function ( $post ) {
    if ( $post->_wp_page_template === 'page-templates/skyscraper-post.php' ) {
        add_meta_box( 'sky_post_excerpt', 'SkyScraper Post Excerpt and Links', 'sky_post_excerpts', 'post', 'advanced', 'high' );
    }
});
add_action( 'save_post', 'post_meta_box_save' );
function sky_post_excerpts() {
    global $post;
    $values = get_post_custom( $post->ID );

    $strong_title = isset( $values['skyscraper_strong'] ) ? esc_attr( $values['skyscraper_strong'][0] ) : "";
    $title = isset( $values['skyscraper_post_title'] ) ? esc_attr( $values['skyscraper_post_title'][0] ) : "";
    $text = isset( $values['skyscraper_post'] ) ? esc_attr( $values['skyscraper_post'][0] ) : "";
    $image = isset( $values['skyscraper_post_image'] ) ? esc_attr( $values['skyscraper_post_image'][0] ) : "";

// Мы будем использовать это поле nonce позже при сохранении.
    wp_nonce_field( 'my_post_meta_box_nonce', 'post_meta_box_nonce' );
    ?>

    <table class="form-table">
    <tbody>
        <tr valign="top">
        <th scope="row">
            <label><strong>Skyscraper Title</strong></label>
        </th>
        <td>
            <p><input class="widefat" rows="4" name="skyscraper_strong" id="skyscraper_strong" value="<?php echo $strong_title; ?>"/>
            </p>
            <p><input class="widefat" rows="4" name="skyscraper_post_title" id="skyscraper_post_title" value="<?php echo $title; ?>"/>
            </p>
        </td>
    </tr>

    <tr valign="top">
        <th scope="row">
            <label for="skyscraper_post"><strong>Skyscraper Page Excerpt</strong></label>
        </th>
        <td>
            <p><textarea class="widefat" rows="4" name="skyscraper_post" id="skyscraper_post"> <?php echo $text; ?></textarea>
            </p>
        </td>
    </tr>
    <tr valign="top">
        <th scope="row">
            <label for="skyscraper_image"><strong>SVG Image Link</strong></label>
        </th>
        <td>
            <p><input class="widefat" rows="4" name="skyscraper_post_image" id="skyscraper_post_image" value="<?php echo $image; ?>"/>
            </p>
        </td>
    </tr>

    </tbody>
</table>
    <?php
}


function post_meta_box_save( $post_id ) {
    // Прекратить выполнение, если мы делаем автосохранение
    if( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;

    // если нашего nonce нет, или мы не можем его проверить, прекратить выполнение
    if( !isset( $_POST['post_meta_box_nonce'] ) || !wp_verify_nonce( $_POST['post_meta_box_nonce'], 'my_post_meta_box_nonce' ) ) return;

    // если текущий пользователь не может редактировать этот пост, прекратить выполнение
    if( !current_user_can( 'edit_post' ) ) return;

    // Убедитесь, что ваши данные установлены, прежде чем пытаться их сохранить
    if( isset( $_POST['skyscraper_post'] ) )
        update_post_meta( $post_id, 'skyscraper_post', wp_kses( $_POST['skyscraper_post'], $allowed ) );

    // Убедитесь, что ваши данные установлены, прежде чем пытаться их сохранить
    if( isset( $_POST['skyscraper_post_image'] ) )
        update_post_meta( $post_id, 'skyscraper_post_image', wp_kses( $_POST['skyscraper_post_image'], $allowed ) );

    // Убедитесь, что ваши данные установлены, прежде чем пытаться их сохранить
    if( isset( $_POST['skyscraper_strong'] ) )
        update_post_meta( $post_id, 'skyscraper_strong', wp_kses( $_POST['skyscraper_strong'], $allowed ) );

    // Убедитесь, что ваши данные установлены, прежде чем пытаться их сохранить
    if( isset( $_POST['skyscraper_post_title'] ) )
        update_post_meta( $post_id, 'skyscraper_post_title', wp_kses( $_POST['skyscraper_post_title'], $allowed ) );
}

Как я могу сделать это возможным для вывода HTML, потому что я не вижу никакого решения в Google.
Заранее спасибо

Я исправил ваши проблемы с типом ввода/санитизацией и экранированием. Думаю, все еще можно провести небольшую чистку этого кода. Я вижу элементы ввода без меток, недопустимые атрибуты и т.д.

add_action( 'add_meta_boxes_post', function ( $post ) {
    if ( $post->_wp_page_template === 'page-templates/skyscraper-post.php' ) {
        add_meta_box( 'sky_post_excerpt', 'SkyScraper Post Excerpt and Links', 'sky_post_excerpts', 'post', 'advanced', 'high' );
    }
});
add_action( 'save_post', 'post_meta_box_save' );
function sky_post_excerpts() {
    global $post;
    $values = get_post_custom( $post->ID );

    $strong_title = isset( $values['skyscraper_strong'] ) ? stripslashes(wp_filter_post_kses(addslashes( $values['skyscraper_strong'][0] ) ) ) : "";
    $title = isset( $values['skyscraper_post_title'] ) ? esc_attr( $values['skyscraper_post_title'][0] ) : "";
    $text = isset( $values['skyscraper_post'] ) ? esc_attr( $values['skyscraper_post'][0] ) : "";
    $image = isset( $values['skyscraper_post_image'] ) ? esc_attr( $values['skyscraper_post_image'][0] ) : "";

    // Мы будем использовать это поле nonce позже при сохранении.
    wp_nonce_field( 'my_post_meta_box_nonce', 'post_meta_box_nonce' );
    ?>

    <table class="form-table">
        <tbody>
        <tr valign="top">
            <th scope="row">
                <label><strong>Skyscraper Title</strong></label>
            </th>
            <td>
                <p><textarea class="widefat" rows="4" name="skyscraper_strong" id="skyscraper_strong" ><?php echo $strong_title; ?></textarea>
                </p>
                <p><input class="widefat" rows="4" name="skyscraper_post_title" id="skyscraper_post_title" value="<?php echo $title; ?>"/>
                </p>
            </td>
        </tr>

        <tr valign="top">
            <th scope="row">
                <label for="skyscraper_post"><strong>Skyscraper Page Excerpt</strong></label>
            </th>
            <td>
                <p><textarea class="widefat" rows="4" name="skyscraper_post" id="skyscraper_post"> <?php echo $text; ?></textarea>
                </p>
            </td>
        </tr>
        <tr valign="top">
            <th scope="row">
                <label for="skyscraper_image"><strong>SVG Image Link</strong></label>
            </th>
            <td>
                <p><input class="widefat" rows="4" name="skyscraper_post_image" id="skyscraper_post_image" value="<?php echo $image; ?>"/>
                </p>
            </td>
        </tr>

        </tbody>
    </table>
    <?php
}


function post_meta_box_save( $post_id ) {
    // Прекратить выполнение, если мы делаем автосохранение
    if( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;

    // если нашего nonce нет, или мы не можем его проверить, прекратить выполнение
    if( !isset( $_POST['post_meta_box_nonce'] ) || !wp_verify_nonce( $_POST['post_meta_box_nonce'], 'my_post_meta_box_nonce' ) ) return;

    // если текущий пользователь не может редактировать этот пост, прекратить выполнение
    if( !current_user_can( 'edit_post' ) ) return;
    $allowed = wp_kses_allowed_html();

    // Убедитесь, что ваши данные установлены, прежде чем пытаться их сохранить
    if( isset( $_POST['skyscraper_post'] ) )
        update_post_meta( $post_id, 'skyscraper_post', wp_kses( $_POST['skyscraper_post'], $allowed ) );

    // Убедитесь, что ваши данные установлены, прежде чем пытаться их сохранить
    if( isset( $_POST['skyscraper_post_image'] ) )
        update_post_meta( $post_id, 'skyscraper_post_image', wp_kses( $_POST['skyscraper_post_image'], $allowed ) );

    // Убедитесь, что ваши данные установлены, прежде чем пытаться их сохранить
    if( isset( $_POST['skyscraper_strong'] ) )
        update_post_meta( $post_id, 'skyscraper_strong', wp_kses( $_POST['skyscraper_strong'], $allowed ) );

    // Убедитесь, что ваши данные установлены, прежде чем пытаться их сохранить
    if( isset( $_POST['skyscraper_post_title'] ) )
        update_post_meta( $post_id, 'skyscraper_post_title', wp_kses( $_POST['skyscraper_post_title'], $allowed ) );
}

Ответ или решение

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

Анализ текущего кода и его доработка:

  1. Добавление метабоксов:
add_action('add_meta_boxes_post', function($post) {
    if ($post->_wp_page_template === 'page-templates/skyscraper-post.php') {
        add_meta_box('sky_post_excerpt', 'SkyScraper Post Excerpt and Links', 'sky_post_excerpts', 'post', 'advanced', 'high');
    }
});

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

  1. Отображение метабоксов с текстовой областью:
function sky_post_excerpts() {
    global $post;
    $values = get_post_custom($post->ID);

    $strong_title = isset($values['skyscraper_strong']) ? wp_kses_post($values['skyscraper_strong'][0]) : '';
    $title = isset($values['skyscraper_post_title']) ? esc_attr($values['skyscraper_post_title'][0]) : '';
    $text = isset($values['skyscraper_post']) ? wp_kses_post($values['skyscraper_post'][0]) : '';
    $image = isset($values['skyscraper_post_image']) ? esc_url($values['skyscraper_post_image'][0]) : '';

    wp_nonce_field('my_post_meta_box_nonce', 'post_meta_box_nonce');
    ?>
    <table class="form-table">
        <tbody>
            <tr valign="top">
                <th scope="row"><label><strong>Skyscraper Title</strong></label></th>
                <td><input class="widefat" name="skyscraper_strong" id="skyscraper_strong" value="<?php echo $strong_title; ?>" /></td>
            </tr>
            <tr valign="top">
                <th scope="row"><label for="skyscraper_post"><strong>Skyscraper Page Excerpt</strong></label></th>
                <td><textarea class="widefat" rows="4" name="skyscraper_post" id="skyscraper_post"><?php echo $text; ?></textarea></td>
            </tr>
            <tr valign="top">
                <th scope="row"><label for="skyscraper_image"><strong>SVG Image Link</strong></label></th>
                <td><input class="widefat" name="skyscraper_post_image" id="skyscraper_post_image" value="<?php echo $image; ?>" /></td>
            </tr>
        </tbody>
    </table>
    <?php
}

Здесь я использовал wp_kses_post() вместо esc_attr() для полей, в которых предполагается использование HTML, что позволяет безопасно обработать и отобразить HTML-контент.

  1. Сохранение данных при отправке поста:
function post_meta_box_save($post_id) {
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return;
    if (!isset($_POST['post_meta_box_nonce']) || !wp_verify_nonce($_POST['post_meta_box_nonce'], 'my_post_meta_box_nonce')) return;
    if (!current_user_can('edit_post', $post_id)) return;

    if (isset($_POST['skyscraper_post'])) {
        update_post_meta($post_id, 'skyscraper_post', wp_kses_post($_POST['skyscraper_post']));
    }
    if (isset($_POST['skyscraper_post_image'])) {
        update_post_meta($post_id, 'skyscraper_post_image', esc_url_raw($_POST['skyscraper_post_image']));
    }
    if (isset($_POST['skyscraper_strong'])) {
        update_post_meta($post_id, 'skyscraper_strong', sanitize_text_field($_POST['skyscraper_strong']));
    }
    if (isset($_POST['skyscraper_post_title'])) {
        update_post_meta($post_id, 'skyscraper_post_title', sanitize_text_field($_POST['skyscraper_post_title']));
    }
}

Обратите внимание, что для безопасного сохранения HTML используется wp_kses_post(), что защищает от XSS уязвимостей, позволяя при этом сохранить HTML-контент.

Заключение:

Этот подход обеспечивает безопасную работу с HTML-контентом в метабоксах WordPress, сохраняя его целостность и форматирование. Использование функционала WordPress для фильтрации и проверки данных гарантирует, что ваш сайт останется безопасным, а добавление HTML в текстовые области метабоксов будет корректно обрабатываться.

custom-field metabox post-meta
Оцените материал
Добавить комментарий

Капча загружается...

© 2025 IZ6.RU
*В материалах сайта упоминаются социальные сети Фейсбук / Инстаграм, принадлежащие Meta Platforms Inc., деятельность которой запрещена на территории РФ в части реализации данных социальных сетей на основании осуществления ею экстремистской деятельности