Dopo aver analizzato la struttura di un framework per i plugin di WordPress questo capitolo vedremo come estendere il nostro framework di base per operare su tali estensioni del CMS.
Custom fields
I custom fields in WordPress non sono altro che campi aggiunti ai post e alle pagine. Ciascun campo è in sostanza un elemento di un normale form HTML che viene visualizzato dall'applicazione all'interno di un box HTML detto metabox; il nome scelto deriva dal fatto che questi campi sono dei campi meta.
Quando si crea un nuovo campo bisogna associarlo ad un metabox con dei parametri:
- ID (stringa identificativa);
- Titolo;
- Funzione o metodo di una classe che genera l'HTML del campo;
- Screen, ossia se il campo va associato a un post, a una pagina o a un custom post type;
- Contesto, ossia la posizione nell'editor di WordPress;
- Priorità.
Fatto questo bisogna salvare il valore del campo aggiungendo la action save_post, infatti i custom field non vengono salvati in automatico. Definiamo quindi la seguente classe base:
class My_CF {
public $parameters;
public $fields;
public function __construct( $params = array(), $fiels = array() ) {
$this->parameters = $params; // parametri metabox
$this->fields = $fiels; // campi
add_action( 'add_meta_boxes', array( &$this, 'register' ) ); // crea la metabox
add_action( 'save_post', array( &$this, 'save' ) ); // salva i campi
// aggiungiamo uno script per i campi immagine
wp_register_script( 'cf', plugins_url() . '/my-plugin/framework/cf/cf.js', array( 'jquery' ), '1.0', true );
wp_enqueue_script( 'cf' );
}
// crea la metabox
public function register() {
$config = $this->parameters;
add_meta_box( $config['id'], $config['title'], array( &$this, 'output' ), $config['screen'], $config['context'], $config['priority'] );
}
// crea il codice HTML dei campi
public function output( $post ) {
$form_fields = $this->fields;
$post_id = $post->ID;
$html = '';
$output = array();
foreach( $form_fields as $form_field ) {
$output[] = $this->_display( $form_field, $post_id );
}
$html = implode( "\n", $output );
echo $html;
}
// salva il campo
public function save( $post_id ) {
$form_fields = $this->fields;
$config = $this->parameters;
if ( $config['screen'] != $_POST['post_type'] ) {
return $post_id;
}
if ( !current_user_can( 'edit_post', $post_id ) ) {
return $post_id;
}
foreach( $form_fields as $form_field ) {
$name = $form_field['name'];
update_post_meta( $post_id, $name, sanitize_text_field( $_POST[$name] ) );
}
}
// crea una stringa HTML a seconda del tipo di campo
private function _display( $field, $id ) {
$field_html = '';
if( !is_array( $field ) ) {
return '';
}
switch( $field['type'] ) {
case 'text':
$field_html = '<p><label style="display: block; font-weight: bold; margin-bottom: 0.6em" for="' . $field['name'] . '">' . $field['label'] . '</label><input type="' . $field['type'] . '" style="display: block; width: 100%;" name="' . $field['name'] . '" placeholder="' . $field['label'] . '" value="' . get_post_meta( $id, $field['name'], true ) . '" /></p>';
break;
case 'checkbox':
case 'radio':
$checked = ( get_post_meta( $id, $field['name'], true ) == $field['value'] ) ? ' checked="checked"' : '';
$field_html = '<p><input type="' . $field['type'] . '" name="' . $field['name'] . '" value="' . $field['value'] . '"' . $checked . ' /><label style="font-weight: bold; margin-left: 0.5em" for="' . $field['name'] . '">' . $field['label'] . '</label></p>';
break;
case 'textarea':
$field_html = '<p><label style="display: block; font-weight: bold; margin-bottom: 0.6em" for="' . $field['name'] . '">' . $field['label'] . '</label><textarea cols="20" rows="10" style="display: block; width: 100%;" name="' . $field['name'] . '" placeholder="' . $field['label'] . '">';
$field_html .= esc_html( get_post_meta( $id, $field['name'], true ) );
$field_html .= '</textarea></p>';
break;
case 'select':
$field_html = '<p><label style="display: block; font-weight: bold; margin-bottom: 0.6em" for="' . $field['name'] . '">' . $field['label'] . '</label>';
$field_html .= '<select name="' . $field['name'] . '" style="display: block; width: 100%;">';
$field_html .= '<option value=""></option>';
foreach( $field['options'] as $opt ) {
$selected = ( get_post_meta( $id, $field['name'], true ) == $opt['value'] ) ? ' selected="selected"' : '';
$field_html .= '<option value="' . $opt['value'] . '"' . $selected . '>' . $opt['label'] . '</option>';
}
$field_html .= '</select></p>';
break;
case 'image':
$field_html = '<div><label style="display: block; font-weight: bold; margin-bottom: 0.6em" for="' . $field['name'] . '">' . $field['label'] . '</label>';
$image = ( is_numeric( get_post_meta( $id, $field['name'], true ) ) ) ? wp_get_attachment_image_src( get_post_meta( $id, $field['name'], true ), 'thumbnail' ) : '';
$field_html .= '<div id="cf-image-' . $field['name'] . '" style="background-color: #ccc; background-size: cover; background-repeat: no-repeat; ; ;">';
if( $image !== '' ) {
$field_html .= '<img src="' . $image[0] . '" alt="" width="150" height="150" />';
} else {
$field_html .= '<img />';
}
$field_html .= '</div>';
$field_html .= '<input type="hidden" name="' . $field['name'] . '" value="' . get_post_meta( $id, $field['name'], true ) . '" />';
$field_html .= '<p><button type="button" class="cf-image button-primary">' . __( 'Seleziona', 'my-plugin' ) . '</button></p>';
$field_html .= '</div>';
break;
default:
break;
}
return $field_html;
}
}Di seguito verrà proposto invece il codice JavaScript (framework jQuery) che viene usato per selezionare le immagini dalla Media Library:
(function( $ ) {
var CF = function( element ) {
this.$el = $( element );
if( this.$el.length ) {
this.init();
}
};
CF.prototype = {
init: function() {
this.selectImage();
},
selectImage: function() {
this.$el.each(function() {
var $btn = $( this ),
$input = $btn.parent().prev(),
$img = $input.prev().find( "img" );
$btn.click(function() {
if( wp.media.frames.gk_frame ) {
wp.media.frames.gk_frame.open();
} else {
wp.media.frames.gk_frame = wp.media({
title: "Seleziona immagine",
multiple: false,
library: {
type: "image"
},
button: {
text: "Usa immagine"
}
});
var selectMedia = function() {
var selection = wp.media.frames.gk_frame.state().get( "selection" );
if( !selection ) {
return;
}
selection.each(function( attachment ) {
var attrs = attachment.attributes;
var imageID = attrs.id; // ID immagine
var url = attrs.url; // URL immagine
$input.val( imageID );
$img.parent().css( "background-image", "url(" + url + ")" );
});
};
wp.media.frames.gk_frame.on( "close", selectMedia );
wp.media.frames.gk_frame.open();
}
});
});
}
};
$(function() {
var _cf = new CF( ".cf-image" );
});
})( jQuery );Infine, ecco un esempio riguardante l'utilizzo del codice proposto:
require_once( 'My_CF.php' );
class My_Fields {
public $parameters = array();
public $fields = array();
protected $_cf;
public function __construct( $params, $flds ) {
$this->parameters = $params;
$this->fields = $flds;
if ( is_admin() ) {
// quando viene aperto l'editor
add_action( 'load-post.php', array( $this, 'loadFields' ) );
add_action( 'load-post-new.php', array( $this, 'loadFields' ) );
}
}
public function loadFields() {
$this->_cf = new My_CF( $this->parameters, $this->fields );
}
}Istanziamo quindi la classe, si noti l'impiego dei parametri per l'associazione del nuovo campo al metabox:
$my_params = array(
'id' => 'test',
'title' => 'Test',
'screen' => 'post',
'context' => 'side',
'priority' => 'default'
);
$my_fields = array(
array(
'name' => 'foo',
'type' => 'text',
'label' => 'Foo'
),
array(
'name' => 'bar',
'type' => 'checkbox',
'label' => 'Bar',
'value' => '1'
)
);
$cf = new My_Fields( $my_params, $my_fields );Conclusione
In questa seconda parte abbiamo mostrato un'implementazione possibile di una nuova feature per il nostro framework. L'utilizzo dell'OOP ci permetterà di estendere nostro framework creato sulla base delle esigenze correlate al progetto corrente.