WordPress Cpt + Tax + Cf Plugin
Creare un plugin WordPress per gestire i Metabox con Custom Fields
By Andrea Marchetti
@marchetti_design
Questo articolo è l’ultimo della serie Custom Post Type + Taxonomy + Custom Field nella quale abbiamo visto come creare un plugin WordPress per gestire i Custom Post Type e come gestire le Tassonomie.
Oggi proseguiamo il discorso vedendo come aggiungere al nostro plugin un Metabox per creare Custom Fields.
Sito Portfolio
Continuiamo l’esempio di un sito portfolio. Immaginiamo di voler aggiungere al Custom Post Type Portfolio, un Sottotitolo, un Occhiello, la possibilità di mettere In Evidenza il progetto e un Immagine Secondaria.
Tipologie di Custom Fields
Per realizzare i campi che abbiamo detto ci servono più tipologie di Custom Fields:
- Campo Testo (per il Sottotitolo)
- Campo Textarea (per l’Occhiello)
- Campo Checkbox (per contrassegnare il contenuto In Evidenza)
- Campo Immagine (per l’Immagine Secondaria)
Con questi campi possiamo aggiungere al nostro contenuto una vasta tipologia di dati. Il codice è racchiuso in un plugin esterno queste operazioni quindi saranno indipendenti dal tema wordpress, separando la Presentazione dal Contenuto.
1) Definizione del Metabox
Come prima cosa definiamo il metabox che conterrà i nostri campi personalizzati. Apriamo il file portfolio-plugin.php del precedente articolo e alla fine del codice aggiungiamo
/* ————————————————————————- *
* Adds a box to the main column on the Content edit screens.
/* ————————————————————————- */function portfolio_add_custom_box() {
$screens = array(
‘portfolio’, // The post type you want this to show up on, can be post, page, or custom post type
‘normal’, // The placement of your meta box, can be normal or side
‘high’ ); // The priority in which this will be displayedforeach ( $screens as $screen ) {
add_meta_box(
‘meta-box-cpt-porfolio’,
__(‘Portfolio Options’, ‘portfolio-plugin’),
‘portfolio_inner_custom_box’,
$screen
);
}
}
add_action( ‘add_meta_boxes’, ‘portfolio_add_custom_box’ );/**
* Prints the box content.
*
* @param WP_Post $post The object for the current post/page.
*/
function portfolio_inner_custom_box( $post ) {// Add an nonce field so we can check for it later.
wp_nonce_field( ‘portfolio_inner_custom_box’, ‘portfolio_inner_custom_box_nonce’ );/*
* Use get_post_meta() to retrieve an existing value
* from the database and use the value for the form.
*/$meta_portfolio = get_post_meta($post->ID);
?><!– add content here –>
<?php
}
/**
* When the post is saved, saves our custom data.
*
* @param int $post_id The ID of the post being saved.
*/
function portfolio_save_postdata( $post_id ) {/*
* We need to verify this came from the our screen and with proper authorization,
* because save_post can be triggered at other times.
*/// Check if our nonce is set.
if ( ! isset( $_POST[‘portfolio_inner_custom_box_nonce’] ) )
return $post_id;$nonce = $_POST[‘portfolio_inner_custom_box_nonce’];
// Verify that the nonce is valid.
if ( ! wp_verify_nonce( $nonce, ‘portfolio_inner_custom_box’ ) )
return $post_id;// If this is an autosave, our form has not been submitted, so we don’t want to do anything.
if ( defined( ‘DOING_AUTOSAVE’ ) && DOING_AUTOSAVE )
return $post_id;// Check the user’s permissions.
if ( ‘portfolio’ == $_POST[‘post_type’] ) {if ( ! current_user_can( ‘edit_page’, $post_id ) )
return $post_id;} else {
if ( ! current_user_can( ‘edit_post’, $post_id ) )
return $post_id;
}/* OK, its safe for us to save the data now. */
}
add_action( ‘save_post’, ‘portfolio_save_postdata’ );
Con questo codice abbiamo creato il metabox Portfolio Options e lo abbiamo legato al Custom Post Type Portfolio.
Ora il metabox risulterà vuoto.
2) Aggiungere i Custom Fileds
Per aggiungere i Custom Fields andiamo a inserire il codice necessario dopo $meta_portfolio = get_post_meta($post->ID);
2.1) Custom Filed Input
<div class="el-metabox">
<label><strong><?php _e( ‘Text’, ‘fullbase-plugin’ ); ?></strong> – <?php _e( ‘Insert text.’, ‘fullbase-plugin’ ); ?></label>
<input type="text" style="width:50%" name="meta-text" id="meta-text" value="<?php if ( isset ( $meta_portfolio[‘meta-text’] ) ) echo $meta_portfolio[‘meta-text’][0]; ?>" /> <br/>
» <small> <strong> echo get_post_meta( get_the_ID(), ‘meta-text’, true ); </strong> </small>
</div>
Successivamente inseriamo il codice per salvare il campo, inseriamo il codice dopo /* OK, its safe for us to save the data now. */
// Checks for input and sanitizes/saves if needed
if( isset( $_POST[ ‘meta-text’ ] ) ) {
update_post_meta( $post_id, ‘meta-text’, sanitize_text_field( $_POST[ ‘meta-text’ ] ) );
}
2.2) Custom Filed Textarea
<div class="el-metabox">
<label><strong><?php _e( ‘Textarea’, ‘fullbase-plugin’ ); ?></strong> – <?php _e(‘Free Text.’, ‘fullbase-plugin’);?> </label>
<textarea name="meta-textarea" id="meta-textarea"><?php if ( isset ( $meta_portfolio[‘meta-textarea’] ) ) echo $meta_portfolio[‘meta-textarea’][0]; ?></textarea>
» <small> <strong> echo get_post_meta( get_the_ID(), ‘meta-textarea’, true ); </strong> </small>
</div>
Codice per salvare il campo
// Checks for input and saves if needed
if( isset( $_POST[ ‘meta-textarea’ ] ) ) {
update_post_meta( $post_id, ‘meta-textarea’, $_POST[ ‘meta-textarea’ ] );
}
2.3) Custom Filed Checkbox
<div class="el-metabox">
<label><strong><?php _e( ‘Checkbox’, ‘fullbase-plugin’ ); ?></strong> – <?php _e( ‘Check the box.’, ‘fullbase-plugin’ )?></label>
<input type="checkbox" name="meta-checkbox" id="meta-checkbox" value="yes" <?php if ( isset ( $meta_portfolio[‘meta-checkbox’] ) ) checked( $meta_portfolio[‘meta-checkbox’][0], ‘yes’ ); ?> /> <?php _e( ‘Lorem Ipsum’, ‘fullbase-plugin’ ); ?><br/>
» <small> <strong> echo get_post_meta( get_the_ID(), ‘meta-checkbox’, true ); </strong> </small>
</div>
Codice per salvare il campo
// Checks for input and saves
if( isset( $_POST[ ‘meta-checkbox’ ] ) ) {
update_post_meta( $post_id, ‘meta-checkbox’, ‘yes’ );
} else {
update_post_meta( $post_id, ‘meta-checkbox’, ” );
}
2.4) Custom Filed Immagine
Per il Custom Field immagine il codice è più complesso abbiamo bisogno di un file javascript che richiamiamo all’inizio del plugin con:
/* Enqueue admin image script
/* ———————————— */
if ( ! function_exists( ‘fb_admin_scripts’ ) ) {function fb_admin_scripts() {
wp_register_script(‘upload-image’, plugin_dir_url(__FILE__) .’/js/upload-image.js’, array(‘jquery’,’media-upload’,’thickbox’));
wp_enqueue_script(‘upload-image’);
}}
add_action( ‘admin_enqueue_scripts’, ‘fb_admin_scripts’ );
Il file upload-image.js deve essere inserito nella cartella js all’interno della root del plugin.
Sempre all’inizio inseriamo anche lo stile del nostro metabox.
/* Enqueue admin css
/* ———————————— */
if ( ! function_exists( ‘fb_admin_styles’ ) ) {function fb_admin_styles(){
/* global $typenow;
if( $typenow == ‘post’ ) { */
wp_enqueue_style( ‘admincss’, plugins_url( ‘/css/admin.css’ , __FILE__ ));
/* } */
}}
add_action( ‘admin_print_styles’, ‘fb_admin_styles’ );
Anche questo file avrà la sua cartella di riferimento css nella root del plugin.
Inseriti questi file possiamo impostare il custom field. Il field salva l’id dell’immagine (richiamato grazie al file javascript), avendo l’id possiamo richiamare la nostra immagine in qualsiasi dimensione, vedremo poi come.
<div class="el-metabox">
<label><strong><?php _e( ‘Image ID’, ‘fullbase-plugin’ ); ?></strong></label>
<?php $id = get_post_meta($post->ID, ‘meta-image-id-1’, true );$image_url = wp_get_attachment_image_src( $id , ‘thumbnail’ );
?>
<img height="120" width="120" id="meta-image-prev-1" style="float:right" src="<?php if($image_url != ”){ echo $image_url[0]; } else { echo plugins_url( ‘/default-image-field.jpg’ , __FILE__ ); } ?>" />
<input name="meta-image-id-1" id="meta-image-id-1" value="<?php if ( isset ( $meta_portfolio[‘meta-image-id-1’] ) ) echo $meta_portfolio[‘meta-image-id-1’][0]; ?>" style="border: 1px solid #ccc; margin: 10px 10px 20px 0"/> <?php _e( ‘Image ID’, ‘fullbase-plugin’ ); ?>
<a href="#" class="button fb_upload_image_button" id="button-1">Upload</a>
» <small> <strong> echo get_post_meta( get_the_ID(), ‘meta-image-id-1’, true ); </strong> </small>
</div>
Codice per salvare il campo
// Checks for input and sanitizes/saves if needed
if( isset( $_POST[ ‘meta-image-id-1’ ] ) ) {
update_post_meta( $post_id, ‘meta-image-id-1’, sanitize_text_field( $_POST[ ‘meta-image-id-1’ ] ) );
}
Una volta inseriti i file e definito il codice dei fields avremo il nostro metabox pronto per ricevere dati.
3) Visualizzare i Campi nel tema
Ora che abbiamo il backend pronto dobbiamo visualizzare i dati nel tema. Per visualizzare il portfolio utilizziamo il loop personalizzato creato nel primo articolo aggiungiamo però i nostri campi.
Nel backend sotto ogni custom fields ho strategicamente inserito il codice da utilizzare nell’loop per visualizzare il campo. Per esempio il campo input
echo get_post_meta( get_the_ID(), ‘meta-text’, true );
Copiamo il codice e lo inseriamo nel template sotto il titolo del lavoro
il procedimento è lo stesso anche per gli altri campi ad eccezione del campo immagine.
Con questo campo una volta richiamato l’id dobbiamo utilizzarlo per ottenere l’immagine
<?php //campo immagine
$image_id = get_post_meta( get_the_ID(), ‘meta-image-id-1’, true );
echo wp_get_attachment_image( $image_id , ‘thumbnail’ );
?>
Così richiamiamo l’immagine nella grandezza predefinita thumbnail
Così abbiamo creato un plugin completo per la gestione di Custom Post Type, Tassonomie e Custom Fields, separando contenuto dalla presentazione.
Volendo si potrebbe rendere il processo ancora più automatizzato creando una classe php che eviti di copiare e modificare il codice per creare nuovi custom field. Se trovate questa soluzione interessante lasciatemi un feedback nei commenti e porterò avanti il discorso.
Il codice del plugin funzionante lo potete trovare qui di seguito.
Stay Tuned!
Potrebbero interessarti:
