Hai bisogno di inserire in wordpress un editor html (wysiwyg) secondario per scrivere del testo aggiuntivo?
Hai bisogno di inserire una descrizione aggiuntiva per un prodotto, articolo o per un tuo post type personalizzato?
Ecco come fare.
Oggi scopriremo come inserire un editor secondario in un metabox personalizzato e come farlo in pochi semplici passaggi.
Innanzitutto a cosa può essere utile questo editor aggiuntivo? Potrebbe essere utile, ad esempio, per aggiungere una descrizione più dettagliata per un nostro prodotto o per un post type personalizzato e per mostrare questa descrizione solo in alcune sezioni del sito e non all’interno del contenuto di default di wordpress (the_content()).
Quindi quello che scopriremo e utilizzeremo, sarà la funzione add_meta_box.
In breve: la funzione add_meta_box di wordpress ci permette di creare un nuovo box in amministrazione e che deve essere richiamata dall’action add_meta_boxes.
Ecco quindi come procederemo:
- Creeremo la funzione da richiamare come callback dell’add_meta_box
- Creeremo la funzione per salvare i dati al salvataggio del post (action save_post)
Step 1 – aggiungiamo il metabox
function add_my_custom_editor() {
global $post;
// Nonce Field
wp_nonce_field( '_save_my_custom_editor', '_save_my_custom_editor' );
// Verifichiamo che il contenuto esiste già.
$content = get_post_meta($post->ID, '_my_custom_description', true);
//Settiamo alcuni parametri
$args = array(
'editor_css' => '<style>#_description{background-color:white;style="width:100%;}</style>',
'media_buttons' => true
);
wp_editor($content, '_description', $args );
}add_meta_box( 'my_custom_editor', 'Inserisci testo', 'add_my_custom_editor', 'post', 'normal', 'high');
Ed ecco che, con questo codice, avremo la possibilità di inserire nei nostri articoli, testo html con l’editor di default di worpdress.
Step 2 – Salviamo il contenuto
//save custom editor
function save_my_custom_editor($post_id, $post) {
//check validity
if ( empty( $post_id ) || empty( $post ) ) return;
if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;
if ( is_int( wp_is_post_revision( $post ) ) ) return;
if ( is_int( wp_is_post_autosave( $post ) ) ) return;
if ( empty( $_POST['_save_my_custom_editor'] ) || ! wp_verify_nonce( $_POST['_save_my_custom_editor'], '_save_my_custom_editor' ) ) return;
if ( ! current_user_can( 'edit_post', $post_id )) return;
if ( !in_array($post->post_type, array('course','lesson') )) return;
// OK, we're authenticated: we need to save data
$data = wp_kses_post($_POST['_description']);
update_post_meta($post->ID, '_description', $data);
if(empty($data)) delete_post_meta($post->ID, '_description'); // Delete if blank
}
add_action( 'save_post', array( 'save_my_custom_editor' ), 10, 2 );
Ed ecco che il contenuto inserito è stato salvato.
Dove inserire questa funzione?
Per i meno esperti, questa funzione va inserita nel functions.php del tema attivo.
OO – Class
Per gli appassionati della programmazione ad oggetti, ecco la stessa implementazione in OOP
/** * Add new editor to insert content
*
* @class myCustomEditor
* @author david.silvestri @dot4all.it
* #aWPaDay
*/
class myCustomEditor{
protected static $_instance = null;
public static function instance() {
if ( is_null( self::$_instance ) ) {
self::$_instance = new self();
}
return self::$_instance;
}
public function __construct() {
add_action( 'add_meta_boxes', array( $this, 'add_meta_box') );
add_action( 'save_post', array( $this, 'save' ), 10, 2 );
}
/**
* Add meta box
* @param
*/
function add_meta_box() {
add_meta_box('editor_meta_box', __('Course Description', 'academy'), array($this,'output'), 'course', 'normal', 'high');
add_meta_box('editor_meta_box', __('Lesson Description', 'academy'), array($this,'output'), 'lesson', 'normal', 'high');
}
/**
* Metabox Content
* @param
*/
function output() {
global $post;
// Nonce Field
wp_nonce_field( '_save_description', '_save_description' );
// Get the location data if its already been entered
$content = get_post_meta($post->ID, '_description', true);
$args = array(
'editor_css' => '<style>#_description{background-color:white;style="width:100%;}</style>',
'media_buttons' => true,
'teeny' => false
);
wp_editor($content, '_description', $args );
}
//save the data
function save($post_id, $post) {
//check validity
if ( empty( $post_id ) || empty( $post ) ) return;
if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;
if ( is_int( wp_is_post_revision( $post ) ) ) return;
if ( is_int( wp_is_post_autosave( $post ) ) ) return;
if ( empty( $_POST['_save_description'] ) || ! wp_verify_nonce( $_POST['_save_description'], '_save_description' ) ) return;
if ( ! current_user_can( 'edit_post', $post_id )) return;
if ( !in_array($post->post_type, array('course','lesson') )) return;
// OK, we're authenticated: we need to save data
$data = wp_kses_post($_POST['_description']);
update_post_meta($post->ID, '_description', $data);
if(empty($data)) delete_post_meta($post->ID, '_description'); // Delete if blank
}
}
function myCustomEditor() {
return myCustomEditor::instance();
}
add_action( 'admin_init', 'myCustomEditor' );
Dove inserire questa classe?
Potete incollare il codice in un file all’interno del tema attivo ed includerlo poi nel functions.php
Dettagli
Livello: medio
Compatibilità: testato su WP versione 3.9.1
