Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Estensione del framework per i plugin di WordPress

Scopriamo come estendere un framework per i plugin di WordPress a partire dai custom field, definendo una classe PHP, e implementando il necessario codice di jQuery, fino all'utilizzo pratico tramite istanza.
Scopriamo come estendere un framework per i plugin di WordPress a partire dai custom field, definendo una classe PHP, e implementando il necessario codice di jQuery, fino all'utilizzo pratico tramite istanza.
Link copiato negli appunti

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:

  1. ID (stringa identificativa);
  2. Titolo;
  3. Funzione o metodo di una classe che genera l'HTML del campo;
  4. Screen, ossia se il campo va associato a un post, a una pagina o a un custom post type;
  5. Contesto, ossia la posizione nell'editor di WordPress;
  6. 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.

Ti consigliamo anche