Usare Wordpress per lo sviluppo di applicazioni Web : Capendo Eventi, Azioni e Filtri

Attraverso questa serie, stiamo vedendo come WordPress possa essere utilizzato per la costruzione di applicazioni web.

A questo punto , abbiamo stabilito che WordPress è una forndazione - piuttosto che un framework - e abbiamo parlato un pò di come dobbiamo cercare di evitare di calzare WordPress su un design pattern diverso dal suo nativo.

A tal fine , abbiamo stabilito che WordPress utilizza un design pattern event-driven , e che questo è rappresentato al meglio con il sistema di azioni e filtri.

Anche se l'obiettivo generale di questa serie è quello di fornire uno studio di come WordPress può essere utilizzato per lo sviluppo di applicazioni web, credo che sia importante dare uno sguardo ad alcuni esempi pratici di quanto realmente sia potente il sistema di aggancio, per capire quanto, da sviluppatori, siamo in grado di personalizzare WordPress per soddisfare i nostri bisogni.

Quindi in questo articolo, vedremo del codice che rappresenta alcune azioni comuni, che possono essere richiamate utilizzando ganci WordPress, così come alcune funzionalità leggermente non standard.

In ultima analisi, alla fine dell'articolo, si dovrebbe avere una chiara comprensione del perché sfruttando la natura event-driven di WordPress è la chiave per la creazione di applicazioni, e perché non dovremmo cercare di rendere WordPress ed i suoi pattern sottostanti in qualcosa che non sono.

Ganci : Azioni e Filtri

Nell'articolo precedente,abbiamo dato due definizioni - una specifica per le azioni ed una specifica per i ganci:

Le Azioni sono eventi nel ciclo di vita della pagina WordPress quando certe cose si sono verificate - alcune risorse vengono caricate, alcune strutture sono disponibili, e, a seconda di quanto velocemente si è verificata l'azione, alcune cose non sono ancora state caricate.

I Filtri sono funzioni che WordPress passa attraverso i dati durante certi punti del ciclo di vita della pagina. Principalmente sono responsabili della intercettazione, gestione e ritorno dei dati prima del rendering al browser o del salvataggio dei dati nel database dal browser.

Questa è la chiave per comprendere i due tipi di eventi di WordPress, perché ci stanno per essere volte in cui si desidera anticipare un processo, il follow-up di un processo, o manipolare le informazioni prima del rendering allo schermo.

Conoscere la differenza tra azioni e filtri è la chiave nella costruzione di applicazioni , plugin e temi in WordPress.

A tal fine, accantoniamo per un attimo la discussione sul perché WordPress può essere utilizzato per le applicazioni web, e diamo un'occhiata più in dettaglio a diverse azioni e filtri per fare in modo di  capire come funziona il sistema di eventi, il tipo di cose che possiamo fare,sperando che la creatività scorra e ci consenta capire come questi possono essere usati per creare un'esperienza più personalizzata.

Azioni Comuni

In primo luogo, daremo uno sguardo a diverse azioni ciascuna dei quali aumenta in complessità rispetto alla precedente, al fine di contribuire a dimostrare quanto le azioni possono diventare potenti .

1.Aggiungiamo un JavaScript nell'Header

Quest'azione è cosi comume che sembra scritta addirittura da uno sviluppatore di livello intermedio. Eppure, il punto rimane: Questo è un esempio di un'azione WordPress classica che viene utilizzato in quasi ogni tipo di tema esistente.

In breve, si avvale del gancio wp_enqueue_scripts. Questa si esegue nella sequenza di caricamento della pagina e consente a WordPress quali file sorgenti deve includere come pure dove deve includerli (nella testata o nel pie di pagina).

function example_add_theme_scripts() {
  wp_enqueue_script( 're-example-script', get_stylesheet_directory_uri() . '/js/example.js', array( 'jquery' ), '1.0.0', FALSE );
}
add_action( 'wp_enqueue_scripts', 're_add_theme_scripts' );

Questo è sufficiente  per capire, giusto?

Prendete lo script del tema example.js dalla directory JavaScript, assicuratevi che sia collegato a jQuery già caricato in precedenza, si noti che è la versione 1.0.0 dello script, e noi non vogliamo caricarlo nel piè di pagina.

2. Configurate il link Leggi tutto

A scatola chiusa, WordPress offre la possibilità di aggiungere un link 'Leggi tutto' o 'Continua a leggere' che è raggiungibile utilizzando il tag <!--more--> nel editor del post.

E' possibile assegnargli uno Stile utilizzando gli stili nativi, ma lasciatemi dire che se avete intenzione di aggiungere codice che lo renderà in sintonia con il tema , è facile da integrare con un responsive design o qualcosa di simile.

Puoi utilizzare la seguente azione :

function example_add_more_link_class( $link, $text ) {

	$html = '<div class="more-link-wrapper">';
		$html .= '<div class="more-link">' . $link . '</div>';
	$html .= '</div>';

	return $html;

}
add_action( 'the_content_more_link', 'example_add_more_link_class', 10, 2 );

Nota che ci stiamo agganciando in the_content_more_link che accetta l'ancora ed il testo per diversi link.

All'interno della funzione, poi conteniamo il link all'interno del suo div container , in modo da avere il controllo sullo stile del lik.

3.Recupero del nome della persona via Ajax

Questo particolare esempio presume che stiate utilizzando Ajax nel progetto e che abbiate gia configurato le attrezzature appropriate che consentano di effettuare richieste asincrone.

Ciò presuppone anche che i dati che vengono inviati lato client al server, contengano l'ID di un utente per il quale si desidera che venga restiutito il nome.

function example_get_user_name() {

	$user = null;

	if ( isset( $_GET['user_id'] ) && 0 < strlen( trim( $_GET['user_id'] ) ) ) {

		$user = get_user_by( 'id', $_GET['user_id'] );

		if ( FALSE == $user ) {
			echo $user->first_name;
		} else {
			echo '-1';
		}

	} // end if

	die;

} // end re_get_employee_by_name
add_action( 'wp_ajax_example_get_user_name', 'example_get_user_name' );
add_action( 'wp_ajax_nopriv_example_get_user_name', 'example_get_user_name' );

Quindi nell'esmpio sopra , prima di tutto verifichiamo che lo user_id sia contenuto nella collezione di dati della $_GET , e ,se cosi fosse, allora tenteremo di recuperare il nome utente dall'ID.

Se l'utente esistesse , allora visualizzeremo il primo nome dell'utente al client, altrimenti, visualizzeremo il '-1'. Questo allora ci dà la flessibilità necessaria per rispondere in modo appropriato sul lato client.

Filtri Comuni

Proprio come abbiamo fatto con le azioni di cui sopra, daremo uno sguardo a diversi filtri, ciascuno dei quali aumenta leggermente in complessità, cosi da essere in grado di vedere alcune delle cose che possiamo fare con i filtri che ci garantiscono una maggiore flessibilità all'interno dei nostri progetti di WordPress.

1.Aggiunta di contenuti ad un messaggio singolo

Anche se il titolo di questa particolare azione dovrebbe essere abbastanza chiaro, diciamo che vogliamo aggiungere una frase nella parte inferiore di ogni post sul nostro blog, ma desideriamo farlo solo su singoli messaggi.

Ciò potrebbe essere ottenuto con il codice seguente :

function example_append_post_content( $content ) {

	if ( is_single() ) {

		$html = '<div class="post-suffix">';
			$html .= 'This content will appear at the end of a post.';
		$html .= '</div>';

		$content .= $html;

	}

	return $content;

}
add_filter( 'the_content', 'example_append_post_content' );

Questo è abbastanza chiaro da capire , giusto?

il filtro the_content passa il contenuto attuale del post alla funzione agganciata. Da li, siamo liberi di manipolare i dati nel modo che riteniamo più opportuno.

Nel nostro caso, per prima cosa controlliamo se sia una singola pagina. se cosi fosse , aggiungeremmo un container post-suffix con una singola frase , aggiungendola al contenuto, per poi restituirlo.

Se non fosse un singolo post, allora il contenuto verrebbe restituito come normale.

2 . Reindirizzare gli utenti dopo l'accesso.

Un altro tipo di filtro di cui vorrete fare uso è reindirizzare gli utenti dopo il loro accesso all'applicazione.

Per esempio, se sono un amministratore dovrei essere reindirizzato al post dashboard; altrimenti dovrei essere reindirizzato alla home page del sito.

Per raggiungere questo obiettivo, possiamo sfruttare il filtro login_redirect:

function example_login_redirect( $redirect_to, $request, $user  ) {
	return ( isset( $user->roles ) && is_array( $user->roles ) && in_array( 'administrator', $user->roles ) ) ? home_url( '/wp-admin/' ) : home_url();
} // end soi_login_redirect
add_filter( 'login_redirect', 'example_login_redirect', 10, 3 );

Nel codice sopra, abbiamo fornito un filtro personalizzato nel gancio login_redirect che esegue le seguenti:

• Se l'utente è un amministratore, lo reindirizzo alla dashboard
• Altrimenti, lo reindirizza alla home_url del sito.

Abbastanza semplice.

Anche se è un esmpio estemamente semplice, che dovrebbe farti pensare di più delle cose più avanzate in base al ruolo dell'utente o alle sue capacità.

Ad esempio, piuttosto che indirizzarli verso alcuni aspetti dell'applicazione, potreste  mostrare loro parti delle informazioni sulla base, ad esempio, dei loro ruoli.

3. Personalizzare le emails

Questo particolare esempio è un pò più complicato perchè la chiamata add_filters viene fatta nel contensto di un'altra funzione richiamata da una terza parte.

In particolare, stiamo per inaviare una email, ma vogliamo essere sicuri di aver personalizzato il Content type, il contenuto del mittente e il nome del mittente, prima di inviare il contenuto.

Per fare questo , abbiamo bisogno prima di tutto di definire una funzione :

function example_exmail_user( $input ) {

	// Code removed from brevity.
	// Assume $message is defined as the content of the email

	add_filter( 'wp_mail_content_type', create_function( '', 'return "text/html";' ) );
	add_filter( 'wp_mail_from', 'example_mail_from' );
	add_filter( 'wp_mail_from_name', 'example_mail_from_name' );

	if ( wp_mail( $input['email-address'], 'Your Account Has Been Created!', $message ) ) {

		// Redirect back home
		wp_redirect( home_url() );

	} else {

		// Specify a page to which to direct upon an error

	}

	exit;

}

function example_mail_from( $email ) {
	return 'donotreply@emailaddress.com';
}

function example_mail_from_name( $name ) {
	return 'Example Web App';
}

Dopo di chè, abbiamo bisogno di definire funzioni agganciate ai filtri specificati sopra. Cioè...

• wp_mail_content_type
• wp_mail_from
• wp_mail_from_name

Come potete vedere,i filtri possono complicarsi in tempi relativamente brevi, ma sono potenti e se si capisce che cosa si sta facendo, e come tutti i pezzi si incastrano, per così dire, allora si può davvero fare alcune cose incredibili.

Solo l'inizio

Come la maggior parte tutorial ed esempi su questo sito, stiamo solo grattando la superficie di ciò che può essere fatto utilizzando il sistema di aggancio WordPress.

Naturalmente, questi esempi sono destinati ad essere solo che - esempi di come le azioni potenti e filtri possono essere quando si tratta di personalizzare l'esperienza di WordPress.

Anche se questo particolare articolo e il codice di esempio sono destinati a servire come un esempio pratico di alcune delle cose che si possono fare, non sono destinate ad essere la guida definitiva per lavorare con ganci.

Al contrario, essi hanno lo scopo di mostrarci come possiamo sfruttare ciò che è disponibile nelle API di WordPress per la costruzione di una applicazione web.

Nel prossimo articolo...

Nel prossiomo articolo , inizieremo a vedere diverse strutture fornite da WordPress a scatola chiusa. Vedremo come sono utili nella costruzione di applicazioni web, che infuenza avranno per il nostro specifico lavoro e come possono essere utili nella creazione di applicazioni web.

Dopo di che, daremo uno sguardo a come molte di queste caratteristiche funzionano bene nel contesto di una applicazione web, e come possiamo usare i ganci per personalizzare ulteriormente il comportamento che essi forniscono.