WordPress : Utilisation de wp_editor() dans la méta-boîte personnalisée
Je construis une méta-boîte personnalisée avec une entrée d’éditeur classique plutôt qu’une simple entrée. La raison de l’utilisation de wp_editor est que je voulais ajouter des paragraphes de texte à l’intérieur de div mais la simple entrée échappait au html. Maintenant, j’utilise cette fonction. Maintenant, le problème est que lorsque je produis les données de cette entrée d’éditeur, cela échappe au html. Voici le code que j’utilise pour la sortie.
echo get_post_meta($post_id, ‘skyscraper_post’, true );
J’utilise ce code pour ajouter des méta-boîtes.
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' );
}
});
function sky_post_excerpts() {
global $post;
$values = get_post_custom( $post->ID );
$data = get_post_meta($post->ID, 'skyscraper_post', true);
$strong_title = isset( $values['skyscraper_strong'] ) ? esc_html( $values['skyscraper_strong'][0] ) : "";
$title = isset( $values['skyscraper_post_title'] ) ? esc_attr( $values['skyscraper_post_title'][0] ) : "";
$text = isset( $values['skyscraper_post'] ) ? $values['skyscraper_post'][0] : "";
$image = isset( $values['skyscraper_post_image'] ) ? esc_attr( $values['skyscraper_post_image'][0] ) : "";
// We'll use this nonce field later on when saving.
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" name="skyscraper_strong" id="skyscraper_strong" ><?php echo $strong_title; ?></input>
</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>
<?php wp_editor( $data, 'post_meta_box', $settings = array('textarea_name'=>'skyscraper_post')); ?>
</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
}
Pour enregistrer les données, j’utilise ce code.
add_action( 'save_post', 'post_meta_box_save' );
function post_meta_box_save( $post_id ) {
// Bail if we're doing an auto save
if( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;
// if our nonce isn't there, or we can't verify it, bail
if( !isset( $_POST['post_meta_box_nonce'] ) || !wp_verify_nonce( $_POST['post_meta_box_nonce'], 'my_post_meta_box_nonce' ) ) return;
// if our current user can't edit this post, bail
if( !current_user_can( 'edit_post' ) ) return;
//$allowed = wp_kses_allowed_html();
$allowed= array(
'p' => array(
'class' => array(),
'id' => array(),
),
'strong' => array(),
);
// Make sure your data is set before trying to save it
if( isset( $_POST['skyscraper_post'] ) )
update_post_meta( $post_id, 'skyscraper_post', wp_kses( $_POST['skyscraper_post'], $allowed ) );
// Make sure your data is set before trying to save it
if( isset( $_POST['skyscraper_post_image'] ) )
update_post_meta( $post_id, 'skyscraper_post_image', wp_kses( $_POST['skyscraper_post_image'], $allowed ) );
// Make sure your data is set before trying to save it
if( isset( $_POST['skyscraper_strong'] ) )
update_post_meta( $post_id, 'skyscraper_strong', wp_kses( $_POST['skyscraper_strong'], $allowed ) );
// Make sure your data is set before trying to save it
if( isset( $_POST['skyscraper_post_title'] ) )
update_post_meta( $post_id, 'skyscraper_post_title', wp_kses(
$_POST['skyscraper_post_title'], $allowed ) );
}
Je ne sais pas pourquoi le html est échappé. Toute aide sera appréciée, merci.
voici la sortie échappée.
Solution n°1 trouvée
Cela ne résoudra peut-être pas le problème, mais j’espère que cela vous aidera.
-
Dans la
sky_post_excerpts()
fonction, j’ai utilisé ceci pour afficher l’éditeur TinyMCE/classic : (the$data
isget_post_meta($post->ID, 'skyscraper_post', true)
)<?php wp_editor( $data, 'post_meta_box', array('textarea_name'=>'skyscraper_post')); ?>
-
Dans la
post_meta_box_save()
fonction, j’ai enregistré la méta comme ceci, où$allowed
estwp_kses_allowed_html()
:update_post_meta( $post_id, 'skyscraper_post', wp_kses( $_POST['skyscraper_post'], $allowed ) );
-
Sur le front-end, j’affiche les métadonnées comme suit :
// This is really just an example. And I was on a single post. echo get_post_meta( get_the_ID(), 'skyscraper_post', true );
Et tout a bien fonctionné pour moi – tout le HTML est resté tel que généré par l’éditeur TinyMCE.
METTRE À JOUR
si j’utilise du visuel et non du texte dans TinyMCE, les balises p ne s’affichent pas
wp_kses_allowed_html()
lorsqu’il est appelé sans spécifier le $context
paramètre, utilisera la variable globale $allowedtags
qui est un tableau d’éléments HTML autorisés par KSES, qui (par défaut) n’incluent pas de balisesp
/éléments.
Si vous souhaitez autoriser p
des éléments, vous pouvez :
-
Utilisez
wp_kses_allowed_html( 'post' )
qui utilisera la variable globale$allowedposttags
qui contient également un tableau similaire à la$allowedtags
variable, mais$allowedposttags
qui a de nombreux éléments autorisés, y compristable
etvideo
. -
Ou activez manuellement les
p
éléments :$allowed = wp_kses_allowed_html(); $allowed['p'] = array(); // allows all attributes!
-
Comme ci-dessus, mais créez vos propres balises autorisées :
$allowed = array(); $allowed['p'] = array(); // allows all attributes!
Mais, vous ne devriez pas autoriser tous les attributs.. donc :
$allowed['p'] = array(
'class' => true,
'id' => true,
...other attributes...
);
0 commentaire