Share
Benvenuti nella seconda parte della serie. Nel primo articolo, abbiamo spiegato gli standard di codifica di WordPress, come evitare collisioni di spazi dei nomi, commenti nel codice e alcuni suggerimenti di sicurezza di base.
Oggi andremo un po 'più a fondo e scriveremo altro codice e impareremo alcune tecniche per migliorare le prestazioni e la sicurezza dei nostri plugin. Gli argomenti che tratteremo sono i seguenti:
Prendi il tuo editor di codice e preparati a giocare con WordPress!
La prima cosa che devi tenere a mente è che WordPress ha due funzioni meravigliose (wp_enqueue_script e wp_enqueue_style) per consentire di includere script e stili. A tal fine, si prega di non aggiungerli manualmente nell'intestazione o utilizzando wp_head gancio di azione.
Se usi i metodi di WordPress, i plugin di cache e minifying saranno in grado di includere i tuoi script nelle loro funzioni, sarai in grado di scegliere di metterli in footer o header molto facilmente, sarai in grado di aggiungere script dipendenti e anche di usare tutti trucchi spiegati di seguito insieme ad altre funzionalità.
non corretto:
Accentsconagua
add_action ('wp_head', 'my_custom_scripts'); function my_custom_scripts () echo ''; Corretta:
add_action ('wp_enqueue_scripts', 'my_customs_scripts'); function my_customs_scripts () wp_enqueue_script ('script-handler', get_template_directory_uri (). '/js/my.js', array ('jquery'), '1.0.0', vero); Non ti darò un tutorial completo su come usare wp_enqueue_xxxx perché ce ne sono molti disponibili (e il Codex è una grande risorsa!) E sto cercando di indicare semplicemente come dovresti aggiungere script nei tuoi temi o plugin.
Di cosa hai bisogno sempre avere in mente è lasciare l'impronta più leggera possibile. Ciò significa che non dovresti includere i file dove non dovrebbero essere.
Potresti pensare "è solo un file, non influenzerà il sito web" e con questa mentalità è come gettare un giornale nel parco nel parco perché è solo un pezzo di carta, ma non è così che funzionano le cose: se tutti gli sviluppatori lasciano i loro script ovunque, l'utente finale si concluderà con un sito totalmente gonfiato e non lo vogliamo.
Ora che ne abbiamo parlato, vediamo alcuni suggerimenti su come includere gli script solo quando necessario.
// SOLO FRONT END add_action ('wp_enqueue_scripts', 'my_front_customs_scripts'); function my_customs_scripts () wp_enqueue_script ('script-handler', get_template_directory_uri (). '/js/my.js', array ('jquery'), '1.0.0', vero); // BACKEND SOLO add_action ('admin_enqueue_scripts', 'my_back_customs_scripts'); function my_customs_scripts () wp_enqueue_script ('script-handler', get_template_directory_uri (). '/js/my.js', array ('jquery'), '1.0.0', vero); Ma aspetta! Facciamo un ulteriore passo avanti e includiamo solo script nelle pagine di cui hai veramente bisogno. Un buon metodo è registrarli prima e poi accodare nelle pagine necessarie
// SOLO FRONT END add_action ('wp_enqueue_scripts', 'my_front_customs_scripts'); function my_customs_scripts () wp_register_script ('script-handler', get_template_directory_uri (). '/js/my.js', array ('jquery'), '1.0.0', vero); if (is_page ('my-page')) wp_enqueue_script ('script-handler'); // Sii creativo per includere i file solo quando necessario // if (is_single ()) // if (is_home ()) // if ('cpt-name' == get_post_type ()) // BACKENDEND SOLO add_action (' admin_enqueue_scripts ',' my_back_customs_scripts '); function my_customs_scripts ($ hook) wp_register_script ('script-handler', get_template_directory_uri (). '/js/my.js', array ('jquery'), '1.0.0', vero); // Per includerlo solo quando si modifica un post se ('edit.php' == $ hook) wp_enqueue_script ('script-handler'); // Se hai aggiunto una pagina di opzioni come questa // $ plugin_screen_id = add_options_page (...) // puoi fare $ screen = get_current_screen (); if ($ plugin_screen_id == $ screen-> id) wp_enqueue_script ('script-handler'); / * Un altro modo per usare screen id * / add_action ('admin_print_styles-'. $ Plugin_screen_id, 'my_back_customs_scripts');// SOLO FRONT END add_action ('wp_enqueue_scripts', 'my_front_customs_scripts'); function my_customs_scripts () wp_register_script ('script-handler', get_template_directory_uri (). '/js/my.js', array ('jquery'), '1.0.0', vero); // se è necessario includere uno script per uno shortcode // Non aggiungerlo ovunque // Invece puoi includerlo solo quando necessario $ globale post; if (is_a ($ post, 'WP_Post') && has_shortcode ($ post-> post_content, 'custom-shortcode')) wp_enqueue_script ('script-handler'); Mentre gli altri snippet di codice si applicano a entrambi, script e stili, con i seguenti elementi funzionerà solo wp_enqueue_style (almeno per ora).
// SOLO FRONT END add_action ('wp_enqueue_scripts', 'my_front_customs_styles'); function my_front_customs_styles () wp_register_style ('my-plugin-css', plugins_url ('mio-plugin / css / plugin.css')); // Includiamo questo css solo per i vecchi browser (e schifosi) wp_enqueue_style ('my-plugin-css'); globale $ wp_styles; $ wp_styles-> add_data ('my-plugin-css', 'condizionale', 'lte IE 9'); Puoi vedere altri esempi nel Codice. Un altro eccellente esempio che è possibile utilizzare per avviare tutti i plugin è il plug-in WordPress Boilerplate. Dai un'occhiata al codice per vedere come sono inclusi script e stili. Il plugin Wpfavs (basato su WordPress Plugin Boilerplate) è un buon esempio su come creare un plugin per il backend di Wordpress.
Per questo argomento condividerò alcune cattive abitudini che ho visto molto durante l'esecuzione di Ajax in WordPress e potrebbero essere suddivisi nelle seguenti frasi:
wp_localize_scriptSo che jQuery fa Ajax chiama un pezzo di torta, e possiamo semplicemente creare un file chiamato ajax.php, includerewp-load.php su di esso e fare il nostro Ajax lì. Ma questo non è il "modo WordPress" - non è a prova di futuro. A maggior ragione, è meno sicuro e ti mancheranno molte funzionalità di WordPress.
Il modo corretto è usare il wp_ajax_my_action e wp_ajax_nopriv_my_action ganci di azione. La differenza principale tra i due è che il primo viene utilizzato per gli utenti registrati e il secondo per gli utenti non registrati.
Nota che "my_action" dovrebbe essere cambiato per il nome della tua azione. Vedremo come funziona in un momento.
Vediamo tutto questo in un semplice esempio con un po 'di codice e immaginazione. Immaginiamo di voler visualizzare 5 post quando un utente (registrato o meno) fa clic su un pulsante. Chiameremo questa azione come cool_ajax_example, quindi iniziamo ad aggiungere le funzioni di callback Ajax che restituiranno i dati.
Puoi includere questo codice sul tuo functions.php o dentro il tuo plugin.
// Per prima cosa aggiungiamo le azioni hooks add_action ('wp_ajax_cool_ajax_example', 'cool_ajax_example_callback'); add_action ('wp_ajax_nopriv_cool_ajax_example', 'cool_ajax_example_callback'); function cool_ajax_example_callback () ...Come puoi vedere entrambi i ganci usano la stessa funzione di callback che restituirà i dati. Notare anche che il nome della nostra azione è alla fine del nome del gancio wp_ajax_cool_ajax_example
È molto importantescrivere il nome dell'azione ovunque o non funzionerà affatto.
Prima di continuare con la funzione di callback, passiamo al jQuery necessario per la chiamata Ajax. Lo script jQuery scatterà quando premiamo un semplice pulsante HTML e dobbiamo inviare tale richiesta a admin-ajax.php file che è lo script che gestisce tutte le richieste AJAX in Wordpress. Inoltre abbiamo bisogno di aggiungere un nonce, come abbiamo già detto che vogliamo renderlo sicuro, quindi ecco che arriva l'azione wp_localize_script funzione.
Se hai incluso gli script nel modo giusto, come spiegato all'inizio di questo articolo, hai un nome di gestore di script (nei nostri esempi sopra 'script-handler'), usiamolo per passare i nostri valori PHP al nostro file javascript. È possibile includere questo bit di codice subito dopo wp_enqueue_function usato per includere il JavaScript.
wp_localize_script ('script-handler', 'MyVarName', array ('ajax_url' => admin_url ('admin-ajax.php'), 'nonce' => wp_create_nonce ('return_posts')));Come potete vedere wp_localize_script è un modo abbastanza semplice per passare qualsiasi variabile PHP ai nostri file JavaScript e stamperà xhtml valido a causa del tag. Il codice sopra verrà stampato nell'intestazione quando il file JavaScript con script gestore come viene caricato il nome e assomiglierà a qualcosa:
Ora è il momento di creare il nostro file javascript, chiamiamolo my.js e assomiglierà a qualcosa:
(function ($) $ (function () $ ('# button'). click (function (e) e.preventDefault (); $ .ajax (url: myVarName.ajax_url, data: azione: ' cool_ajax_example ', nonce: myVarName.nonce, success: function (response) $ (' # response-container '). html (response);, tipo: "POST",););); ) (jQuery);Si prega di notare come stiamo usando il nonce e ajax_url con cui siamo passati wp_localize_script. Controlla anche che stiamo passando un valore POST chiamato "action" che corrisponde al nome dell'azione che abbiamo usato nel wp_ajax ganci.
Ora è il momento di terminare la nostra funzione di callback. La prima cosa che dobbiamo fare è controllare che il nonce sia corretto e quindi possiamo restituire alcuni post.
function cool_ajax_example_callback () $ nonce = $ _POST ['nonce']; // La prima cosa che facciamo è controllare il nonce e uccidere lo script se è sbagliato se (! Wp_verify_nonce ($ nonce, 'return_posts')) muore ('Wrong nonce!'); $ args = array ('post_type' => 'post', 'post_status' => 'publish', 'posts_per_page' => 5,); // The Query $ the_query = new WP_Query ($ args); // The Loop if ($ the_query-> have_posts ()) echo ''; while ($ the_query-> have_posts ()) $ the_query-> the_post (); eco ''. get_the_title (). '
'; eco ''; else echo 'Posts non trovati'; / * Ripristina dati post originali * / wp_reset_postdata (); // non dimenticarlo // Stiamo facendo una semplice chiamata, non vogliamo che nient'altro esegua die (); Nel caso in cui tu abbia bisogno di qualcosa di più complesso come eliminare un post, controlla sempre le autorizzazioni dell'utente, come ho detto all'inizio di questo argomento. Ad esempio, se desideri che solo gli amministratori eseguano determinate azioni che puoi eseguire nel tuo script, ad esempio:
if (current_user_can ('administrator')) wp_delete_post ($ postid, $ force_delete); Con tutti i suggerimenti di cui sopra ora sei un maestro in WordPress Ajax e puoi eseguire qualsiasi azione tu voglia. Prova a giocare con quanto sopra e adattalo alle tue esigenze. Personalmente mi piace usare jSON tipo di dati e io faccio echo json_encode () invece di fare semplici echi sui miei script, ma questa è un'altra questione.
Lo scopo di questa sezione non è quello di insegnarti come funzionano i filtri e le azioni, ci sono tutorial eccellenti su quell'argomento che lo spiegano in modo dettagliato. Quello che sto per spiegare è il motivo per cui dovresti aggiungere filtri e azioni sui tuoi plugin e mostrarti alcuni esempi per una facile comprensione.
Ma prima facciamo un'introduzione a questi concetti:
Controlla il API plugin per ulteriori informazioni su hook e filtri di azione.
È semplice: perché rende il tuo plugin migliore. In questo modo gli sviluppatori e gli utenti normali tutti insieme saranno in grado di estendere, adattare o migliorare il tuo plug-in al di là dello scopo originale senza comprometterne il nucleo.
Prendi ad esempio un plugin eCommerce. Grazie agli hook e ai filtri, puoi creare nuovi plugin che si agganciano ad esso, come ad esempio nuovi gateway di pagamento, funzioni di spedizione e molto altro ancora.
Non impazzire aggiungendo azioni e filtri ovunque. All'inizio lo troverai un po 'difficile o fastidioso, quindi prova a pensare come se fossi un altro sviluppatore a guardare un nuovo plugin e chiediti "Ho bisogno di un hook di azione qui?". Anche un'enorme percentuale di azioni e filtri verranno aggiunti su richiesta una volta che inizi a ricevere la richiesta di supporto (sì, li ricevi sempre!) O il feedback dei tuoi utenti.
Come tutto nella vita, una volta che questa diventa un'abitudine, vedrai molto chiaramente dove includerli.
Alcuni consigli su dove includere i filtri:
Usiamo la funzione di callback usata in questo articolo per vedere un esempio delle raccomandazioni sopra. Per creare variabili filtrabili su questo caso usiamo apply_filters ()
function cool_ajax_example_callback () $ nonce = $ _POST ['nonce']; // La prima cosa che facciamo è controllare il nonce e uccidere lo script se è sbagliato se (! Wp_verify_nonce ($ nonce, 'return_posts')) die ('Wrong nonce!'); $ args = array ('post_type' => 'post', 'post_status' => 'publish', 'posts_per_page' => 5,); // The Query $ the_query = new WP_Query (apply_filters ('cool_ajax_query', $ args)); // The Loop if ($ the_query-> have_posts ()) echo ''; while ($ the_query-> have_posts ()) $ the_query-> the_post (); eco ''. get_the_title (). '
'; eco ''; else echo 'Posts non trovati'; / * Ripristina dati post originali * / wp_reset_postdata (); // non dimenticarlo // Stiamo facendo una semplice chiamata, non vogliamo che nient'altro esegua die (); Come puoi vedere ho aggiunto un filtro al $ args variabile che verrà eseguita prima WP_Query esegue la query. Con un semplice filtro ogni utente può cambiare per esempio quanti messaggi vengono restituiti.
function wpt_alter_coolajax_query ($ args) $ args ['posts_per_page'] = 10; restituire $ args; add_filter ('cool_ajax_query', 'wpt_alter_coolajax_query');Puoi usare i filtri in diversi scenari, usa la tua immaginazione. Ad esempio sul mio plugin WordPress Social Invitations ho lasciato che gli utenti cambiassero il foglio di stile popup con un filtro nel caso in cui avessero uno stile completamente diverso.
O in questa occasione, quando il plug-in invia e-mail, offro l'opportunità di cambiare "Da email" wp_mail () sta per usare.
function get_from_email () if (isset ($ this -> _ user_data)) return apply_filters ('wsi_from_email', $ this -> _ user_data-> user_email); return apply_filters ('wsi_from_email', get_bloginfo ('admin_email')); Quando si tratta di azioni questo cambia un po '. Si desidera aggiungere hook di azione nei seguenti scenari (non limitati a):
Per creare queste aree agganciabili usiamo il do_action () funzione. Appliciamoli nel nostro esempio.
function cool_ajax_example_callback () $ nonce = $ _POST ['nonce']; // La prima cosa che facciamo è controllare il nonce e uccidere lo script se è sbagliato se (! Wp_verify_nonce ($ nonce, 'return_posts')) muore ('Wrong nonce!'); $ args = array ('post_type' => 'post', 'post_status' => 'publish', 'posts_per_page' => 5,); // The Query $ the_query = new WP_Query (apply_filters ('cool_ajax_query', $ args)); // The Loop if ($ the_query-> have_posts ()) // eseguiamo il hook prima che il ciclo venga eseguito do_action ('cool_ajax_before_loop', get_the_ID ()); eco ''; while ($ the_query-> have_posts ()) $ the_query-> the_post (); // eseguiamo il hook prima che il titolo sia stampato do_action ('cool_ajax_before_title', get_the_ID ()); eco ''. get_the_title (). '
'; // eseguiamo il hook dopo che il titolo è stato stampato do_action ('cool_ajax_after_title', get_the_ID ()); eco ''; // eseguiamo il hook dopo che il ciclo è stato eseguito do_action ('cool_ajax_after_loop', get_the_ID ()); else echo 'Posts non trovati'; / * Ripristina dati post originali * / wp_reset_postdata (); // non dimenticarlo // Stiamo facendo una semplice chiamata, non vogliamo che nient'altro esegua die (); Come puoi vedere Im passando un argomento con i ganci get_the_ID () . Qualsiasi funzione che si agganci al nostro hook di azione sarà in grado di utilizzare tale argomento. Vediamo alcuni esempi:
/ ** * Mostra immagine in primo piano prima del titolo * / funzione wpt_show_post_image ($ post_id) echo get_the_post_thumbnail ($ post_id, 'miniatura'); add_action ('cool_ajax_before_title', 'wpt_show_post_image'); / ** * Mostra le categorie dei post dopo il titolo * / function wpt_show_post_cats ($ post_id) echo get_the_category_list (",", $ post_id); add_action ('cool_ajax_after_title', 'wpt_show_post_cats');Inoltre puoi usare do_action () ganci per eseguire altre azioni invece di aggiungere nuovi markup come nell'esempio sopra. Ad esempio, negli inviti sociali di WordPress ho un hook di azione che si attiva ogni volta che viene inviato un messaggio. Quindi usando mycred plugin Posso collegare l'azione di dare punti all'utente che ha appena inviato il messaggio.
Come puoi vedere, l'aggiunta di ganci e filtri non solo avvantaggerà il tuo plugin, ma andrà a beneficio anche di altri sviluppatori e utenti. Quindi, perché non inizi ad aggiungere alcuni filtri e azioni in giro?
Oggi abbiamo imparato come includere script e stili, come fare Ajax chiama il modo WordPress e alcuni suggerimenti di base per il filtro e le azioni. Abbiamo già un sacco di informazioni per sviluppare un buon plugin e ora posso dire che queste serie sono vicine alla fine.
Nell'articolo imminente e finale, parlerò dell'internazionalizzazione, del debug e della documentazione per concludere le cose su ciò che penso siano le cose migliori da considerare durante lo sviluppo di un plug-in.
