La guida definitiva alla creazione di un plugin per WordPress

I plugin sono una parte vitale dei siti Web WordPress che richiedono funzionalità specifiche.

Sebbene il repository ufficiale di WordPress abbia più di 45.000 plugin tra cui scegliere, molti di questi plugin mancano nel segno.

Solo perché un plugin è nel repository non significa che non ne ostacolerà le prestazioni o ne comprometterà la sicurezza.

Che cosa si può fare? Bene, puoi costruirne uno tuo.

La creazione di un ottimo plugin per WordPress inizia con un'attenta pianificazione.

Indipendentemente dal fatto che tu ne stia costruendo uno da zero o basandoti su una base standard, seguire le migliori pratiche ben documentate è assolutamente essenziale.

In questo tutorial imparerai come creare un semplice plugin per WordPress nel modo giusto.

Se vuoi rivedere il codice sorgente finale mentre leggi, puoi trovarlo qui.

Inizia con un piano.

Per prima cosa, elenchiamo le funzionalità che il nostro plugin avrà e delineiamo esattamente cosa deve fare.

Il plug-in che stiamo costruendo consentirà ai visitatori del sito di salvare i contenuti per leggerli in seguito.

Per gli utenti registrati, memorizzeremo l'elenco nel database e per gli utenti anonimi, salveremo l'elenco utilizzando i cookie.

Di seguito è riportato uno schema delle caratteristiche e delle funzionalità che il nostro plugin fornirà.

Schermata delle impostazioni

• La possibilità per gli amministratori di aggiungere il pulsante "Salva elemento" alla fine del contenuto.
• La possibilità di scegliere il tipo di post in cui vogliamo aggiungere questo pulsante.
• Offri agli utenti la possibilità di decidere se vogliono utilizzare il nostro stile predefinito o meno
• Fornire un'opzione per abilitare la funzionalità solo per gli utenti che hanno effettuato l'accesso.
• Fornire un'opzione per modificare i messaggi che appaiono sul visitatore di fronte alla parte del plug-in.

Salvataggio del contenuto

• Se l'utente ha effettuato l'accesso, salva il contenuto in un campo utente personalizzato
• Se l'utente non è loggato, salva il contenuto nei cookie

Messaggi

I messaggi seguenti appariranno sullo schermo in risposta all'interazione di un visitatore con il plug-in o come etichette su elementi utilizzabili:

• "Salva oggetto".
• "Annulla salvataggio elemento".
• "Salvato. Vedi gli elementi salvati."
• "Non hai elementi salvati."

Schermata salvata

Qui è dove i visitatori visualizzano l'elenco dei post che hanno salvato.

• Mostra un elenco di elementi salvati
• Crea una pagina salvata all'attivazione del plugin
• Elimina Pagina salvata alla disattivazione del plugin

Codice corto

Con uno shortcode, la pagina salvata può essere visualizzata ovunque venga aggiunta.

Usa un boilerplate.

Questo è il miglior boilerplate che ho trovato. È ben strutturato, orientato agli oggetti ed efficiente. Segue ogni best practice. Ed è veloce e leggero.

Puoi utilizzare questa pagina per generare una base di codice del plugin basata su questo WordPress Plugin Boilerplate:

Dovresti ottenere un file .zip .

Estrailo e inseriscilo nella cartella di installazione di WordPress: wp-content/plugins/ .

Se apri la dashboard di WordPress e vai su plug-in, vedrai che il tuo plug-in è elencato lì. Non attivarlo ancora.

Gestire l'attivazione e la disattivazione.

È importante che il nostro plugin gestisca correttamente l'attivazione e la disattivazione.

Quando il nostro plug-in è attivato, creeremo una pagina denominata "Salvato", che conterrà gli elementi salvati dell'utente al suo interno.

Durante la creazione di quella pagina, aggiungeremo uno shortcode per i nostri elementi salvati nel contenuto di quella pagina.

Alla fine salveremo la pagina; ottenere il suo ID; e salvarlo nel database, così potremo accedervi in ​​seguito alla disattivazione del plugin.

Quando il nostro plugin sarà disattivato, otterremo dal database l'ID della pagina “Salvata”, quindi cancelleremo la pagina “Salvata”, rimuovendo ogni traccia del plugin stesso.

Possiamo fare tutto questo in includes/class-toptal-save-activator.php e includes/class-toptal-save-deactivator.php .

Iniziamo con il processo di attivazione:

 <?php // includes/class-toptal-save-activator.php // ... class Toptal_Save_Activator { /** * On activation create a page and remember it. * * Create a page named "Saved", add a shortcode that will show the saved items * and remember page id in our database. * * @since 1.0.0 */ public static function activate() { // Saved Page Arguments $saved_page_args = array( 'post_title' => __( 'Saved', 'toptal-save' ), 'post_content' => '[toptal-saved]', 'post_status' => 'publish', 'post_type' => 'page' ); // Insert the page and get its id. $saved_page_id = wp_insert_post( $saved_page_args ); // Save page id to the database. add_option( 'toptal_save_saved_page_id', $saved_page_id ); } }

La funzioneactivate activate() viene chiamata quando il plugin è attivato.

Crea una nuova pagina usando la funzione wp_insert_post() e salva l'ID pagina nel database usando add_option() .

Ora procediamo con la disattivazione del plugin.

 <?php // includes/class-toptal-save-activator.php // ... class Toptal_Save_Deactivator { /** * On deactivation delete the "Saved" page. * * Get the "Saved" page id, check if it exists and delete the page that has that id. * * @since 1.0.0 */ public static function deactivate() { // Get Saved page id. $saved_page_id = get_option( 'toptal_save_saved_page_id' ); // Check if the saved page id exists. if ( $saved_page_id ) { // Delete saved page. wp_delete_post( $saved_page_id, true ); // Delete saved page id record in the database. delete_option( 'toptal_save_saved_page_id' ); } } }

La funzione deactivate() , che viene chiamata quando il plugin viene disattivato, recupera la pagina utilizzando la funzione get_option() , rimuove la pagina corrispondente dal database utilizzando wp_delete_post() e rimuove l'ID salvato dalla tabella delle opzioni utilizzando delete_option() .

Se attiviamo il nostro plugin e andiamo alle pagine, dovremmo vedere una pagina chiamata "Salvata" con uno shortcode al suo interno.

Se dovessimo disattivare il plugin, quella pagina verrebbe rimossa.

Poiché abbiamo usato true come argomento nel nostro metodo wp_delete_post() , questa pagina non andrà nel cestino, ma verrà eliminata completamente.

Crea una pagina delle impostazioni del plug-in.

Possiamo creare la nostra pagina delle impostazioni all'interno del file admin/class-toptal-save-admin.php e la prima cosa che dobbiamo fare in quel file è rimuovere o commentare la chiamata a wp_enqueue_style() all'interno della funzione enqueue_styles() e chiamata a wp_enqueue_script() all'interno della funzione enqueue_scripts() se non aggiungeremo CSS/JS alla schermata di amministrazione.

Tuttavia, se vogliamo aggiungere uno stile, allora, ti consiglio di caricare quei file solo nella pagina delle impostazioni del nostro plugin, piuttosto che in tutte le pagine di amministrazione di WordPress. Possiamo farlo inserendo il seguente codice direttamente sopra le righe che avremmo commentato:

 if ( 'tools_page_toptal-save' != $hook ) { return; } wp_enqueue_style( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'css/toptal-save-admin.css', array(), $this->version, 'all' );

 if ( 'tools_page_toptal-save' != $hook ) { return; } wp_enqueue_script( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'js/toptal-save-admin.js', array( 'jquery' ), $this->version, false );

Se ti stai chiedendo da dove ho preso quella 'tools_page_toptal-save' .

Bene, ecco il punto, so che creerò una pagina delle impostazioni con uno slug toptal-save e so anche che la aggiungerò alla schermata Strumenti ( tools.php ). Quindi, mettendo insieme questi due, possiamo dire che il valore della variabile $hook sarà 'tools_page_toptal-save' - una concatenazione dei due valori.

Se non siamo nella nostra pagina delle impostazioni del plug-in, utilizziamo return per terminare immediatamente l'esecuzione della funzione in cui ci troviamo.

Dal momento che non aggiungerò alcuno stile personalizzato alla mia schermata di amministrazione, perché voglio che la schermata del mio plug-in assomigli alla schermata nativa di WordPress, non aggiungerò quel codice.

Ora possiamo procedere con la creazione della nostra pagina delle impostazioni.

Inizieremo aggiungendo un metodo semplice alla classe Toptal_Save_Admin che chiamerà la funzione add_submenu_page() .

 /** * Register the settings page for the admin area. * * @since 1.0.0 */ public function register_settings_page() { // Create our settings page as a submenu page. add_submenu_page( 'tools.php', // parent slug __( 'Toptal Save', 'toptal-save' ), // page title __( 'Toptal Save', 'toptal-save' ), // menu title 'manage_options', // capability 'toptal-save', // menu_slug array( $this, 'display_settings_page' ) // callable function ); }

Questa è una manciata di argomenti che stiamo passando alla funzione add_submenu_page() . Ecco cosa significa ognuno di loro.

• Slug principale: il nome dello slug per il menu principale (o il nome del file di una pagina di amministrazione di WordPress standard). Puoi vedere l'elenco completo delle lumache genitore qui.

• Titolo della pagina: il testo da visualizzare nei tag del titolo della pagina quando si seleziona il menu.

• Titolo menu: il testo da utilizzare per il titolo del menu.

• Capacità: la capacità richiesta dall'utente per visualizzare questo menu. Abbiamo utilizzato "manage_options" che consente l'accesso alle opzioni del Pannello di amministrazione. Puoi leggere di più su ruoli e capacità qui.

• Menu slug: il nome dello slug per fare riferimento a questo menu.

• Funzione richiamabile: la funzione da chiamare per generare il contenuto di questa pagina. Poiché abbiamo definito il nome della nostra funzione richiamabile, dobbiamo crearla, ma prima di farlo, abbiamo usato $this per fare riferimento a un'istanza di una classe dall'interno di se stessa. Ecco cosa ha da dire la documentazione PHP a riguardo:

La pseudo-variabile $this è disponibile quando un metodo viene chiamato dall'interno di un contesto di oggetto. $questo è un riferimento all'oggetto chiamante (di solito l'oggetto a cui appartiene il metodo, ma eventualmente un altro oggetto, se il metodo viene chiamato staticamente dal contesto di un oggetto secondario).

Successivamente, aggiungeremo un altro metodo alla classe:

 /** * Display the settings page content for the page we have created. * * @since 1.0.0 */ public function display_settings_page() { require_once plugin_dir_path( dirname( __FILE__ ) ) . 'admin/partials/toptal-save-admin-display.php'; }

Questa funzione richiamabile include il nostro modello che mostrerà la nostra pagina delle impostazioni. Puoi vedere che stiamo facendo riferimento a un file situato in admin/ partials chiamato toptal-save-admin-display.php .

Ora, se vai su Strumenti, non vedrai quella schermata. Come mai? Perché non abbiamo agganciato il nostro metodo register_admin_page() admin_menu .

Possiamo farlo aprendo il nostro file include/class-toptal-save.php e aggiungendo questo pezzo di codice all'interno del metodo define_admin_hooks() , proprio sotto dove $plugin_admin = new Toptal_Save_Admin( $this->get_plugin_name(), $this->get_version() ); parte è.

 /** * Register all of the hooks related to the admin area functionality * of the plugin. * * @since 1.0.0 * @access private */ private function define_admin_hooks() { $plugin_admin = new Toptal_Save_Admin( $this->get_plugin_name(), $this->get_version() ); $this->loader->add_action( 'admin_menu', $plugin_admin, 'register_settings_page' ); $this->loader->add_action( 'admin_enqueue_scripts', $plugin_admin, 'enqueue_styles' ); $this->loader->add_action( 'admin_enqueue_scripts', $plugin_admin, 'enqueue_scripts' ); }

Non preoccuparti delle chiamate a add_action() poiché è qualcosa di cui parleremo in seguito.

Per ora, apri semplicemente la pagina Strumenti e sarai in grado di vedere la pagina Toptal Save. Se lo apriamo, funziona, ma vediamo uno schermo vuoto poiché non c'è nulla su di esso.

Stiamo facendo dei progressi, ma ehi, abbiamo bisogno di visualizzare alcune impostazioni qui, quindi facciamolo.

Inizieremo a creare i campi, ed è qualcosa che faremo con l'aiuto dell'API delle impostazioni di WordPress.

Se non lo conosci, ci consente di creare campi modulo che possiamo utilizzare per salvare i nostri dati.

 /** * Register the settings for our settings page. * * @since 1.0.0 */ public function register_settings() { // Here we are going to register our setting. register_setting( $this->plugin_name . '-settings', $this->plugin_name . '-settings', array( $this, 'sandbox_register_setting' ) ); // Here we are going to add a section for our setting. add_settings_section( $this->plugin_name . '-settings-section', __( 'Settings', 'toptal-save' ), array( $this, 'sandbox_add_settings_section' ), $this->plugin_name . '-settings' ); // Here we are going to add fields to our section. add_settings_field( 'post-types', __( 'Post Types', 'toptal-save' ), array( $this, 'sandbox_add_settings_field_multiple_checkbox' ), $this->plugin_name . '-settings', $this->plugin_name . '-settings-section', array( 'label_for' => 'post-types', 'description' => __( 'Save button will be added only to the checked post types.', 'toptal-save' ) ) ); // ... }

All'interno della funzione register_settings() possiamo aggiungere e configurare tutti i campi. Puoi trovare l'implementazione completa della funzione qui. Abbiamo utilizzato quanto segue nella funzione mostrata sopra:

• register_setting() : registra un'impostazione e la relativa richiamata di sanificazione.
• add_settings_section() : aggiunge una nuova sezione a una pagina delle impostazioni.
• add_settings_field() : aggiunge un nuovo campo a una sezione di una pagina delle impostazioni.

Ogni volta che utilizzavamo una di queste tre funzioni, veniva fornita una richiamata di sanificazione. Ciò consente di sanificare i dati e, se si tratta di un campo, di mostrare l'elemento HTML appropriato (casella di controllo, radio, input, ecc.).

Inoltre, abbiamo passato un array di dati a quei callback, come label_for, description o default, se necessario.

Ora possiamo creare quei callback di sanificazione. Puoi trovare il codice per quelle richiamate qui.

Va tutto bene, tuttavia, dobbiamo agganciare i campi in admin_init hook e quindi mostrarli.

Useremo add_action che è un hook che il core di WordPress avvia in punti specifici durante l'esecuzione o quando si verifica un evento specifico. admin_init viene attivato prima di qualsiasi altro hook quando un utente accede all'area di amministrazione.

Innanzitutto, è necessario aggiungere un'azione nel file include/class-toptal-save.php .

 /** * Register all of the hooks related to the admin area functionality * of the plugin. * * @since 1.0.0 * @access private */ private function define_admin_hooks() { $plugin_admin = new Toptal_Save_Admin( $this->get_plugin_name(), $this->get_version() ); // Hook our settings page $this->loader->add_action( 'admin_menu', $plugin_admin, 'register_settings_page' ); // Hook our settings $this->loader->add_action( 'admin_init', $plugin_admin, 'register_settings' ); $this->loader->add_action( 'admin_enqueue_scripts', $plugin_admin, 'enqueue_styles' ); $this->loader->add_action( 'admin_enqueue_scripts', $plugin_admin, 'enqueue_scripts' ); }

Successivamente, in admin/partials/topal-save-admin-display.php , dobbiamo fornire una vista per l'area di amministrazione del nostro plugin:

 <?php /** * Provide a admin area view for the plugin * * This file is used to markup the admin-facing aspects of the plugin. * * @link https://www.toptal.com/resume/ratko-solaja * @since 1.0.0 * * @package Toptal_Save * @subpackage Toptal_Save/admin/partials */ ?> <!-- This file should primarily consist of HTML with a little bit of PHP. --> <div> <form method="post" action="options.php"> <?php settings_fields( 'toptal-save-settings' ); do_settings_sections( 'toptal-save-settings' ); submit_button(); ?> </form> </div>

La funzione settings_fields() viene utilizzata per generare i campi nonce, action e option_page per una pagina delle impostazioni.

È seguito da do_settings_sections() che stampa tutte le sezioni delle impostazioni aggiunte a una particolare pagina delle impostazioni.

Infine, viene aggiunto un pulsante di invio utilizzando il testo fornito e le classi appropriate utilizzando la funzione submit_button() .

Ora, se diamo un'occhiata alla nostra pagina, sarà simile a questa:

Questo è tutto ciò che dobbiamo fare nella nostra area di amministrazione. Iniziamo a lavorare sulla parte pubblica del nostro plugin.

Crea la funzionalità del plug-in.

Ecco la parte interessante. Abbiamo bisogno di creare più funzioni per separare le nostre funzionalità:

• Una funzione che mostrerà il pulsante "Salva elemento". Questo deve verificare se l'utente corrente ha già salvato quell'elemento o meno, a seconda di ciò, mostreremo testo e colore diversi.
• Una funzione che salva/annulla un elemento (AJAX).
• Una funzione che mostrerà tutti gli elementi salvati.
• Una funzione che genererà i nostri codici brevi.

Quindi iniziamo a mostrare il pulsante. Faremo tutto questo in public/class-toptal-save-public.php .

Durante questa operazione, dovremo creare alcune funzioni di supporto aggiuntive per occuparci di alcune cose come:

• Creazione di un nome cookie univoco per il sito web
• Creazione di un biscotto
• Ottenere il valore del cookie
• Ottenere lo stato di abbonamento dalle impostazioni

Il codice per queste funzioni di supporto può essere trovato qui.

La funzione get_unique_cookie_name() ci aiuterà a generare un nome cookie univoco dall'URL del sito Web, dal nome del sito Web e dal nostro suffisso personalizzato. In questo modo il nome del cookie generato non entrerà in conflitto se utilizzato in più siti WordPress sotto lo stesso dominio.

Le toptal_set_cookie() e toptal_get_cookie() creeranno e otterranno rispettivamente il valore dei nostri cookie.

La funzione get_user_status() otterrà lo stato della nostra casella di controllo di appartenenza nelle impostazioni (restituendo 1 quando selezionata, 0 altrimenti).

Ora, la parte succosa, creando la funzione che sarà responsabile della visualizzazione del pulsante di salvataggio. L'implementazione per la nostra funzione show_save_button() può essere trovata qui. E abbiamo utilizzato alcune nuove funzioni dell'API di WordPress qui:

• get_queried_object_id() : recupera l'ID dell'oggetto interrogato corrente.
• is_user_logged_in() : controlla se il visitatore corrente è un utente connesso.
• get_user_meta() : recupera il campo dei metadati dell'utente per un utente.
• wp_create_nonce() : crea un token crittografico legato a un'azione, un utente, una sessione utente e una finestra temporale specifici.

Ora creiamo una funzione che aggiungerà il nostro pulsante alla fine del contenuto. Qui abbiamo due requisiti chiave.

1. Assicurati che il pulsante sia mostrato solo sui tipi di post selezionati nelle impostazioni.
2. Assicurati che la casella di controllo per aggiungere il pulsante sia selezionata.

 /** * Append the button to the end of the content. * * @since 1.0.0 */ public function append_the_button( $content ) { // Get our item ID $item_id = get_queried_object_id(); // Get current item post type $current_post_type = get_post_type( $item_id ); // Get our saved page ID, so we can make sure that this button isn't being shown there $saved_page_id = get_option( 'toptal_save_saved_page_id' ); // Set default values for options that we are going to call below $post_types = array(); $override = 0; // Get our options $options = get_option( $this->plugin_name . '-settings' ); if ( ! empty( $options['post-types'] ) ) { $post_types = $options['post-types']; } if ( ! empty( $options['toggle-content-override'] ) ) { $override = $options['toggle-content-override']; } // Let's check if all conditions are ok if ( $override == 1 && ! empty( $post_types ) && ! is_page( $saved_page_id ) && in_array( $current_post_type, $post_types ) ) { // Append the button $custom_content = ''; ob_start(); echo $this->show_save_button(); $custom_content .= ob_get_contents(); ob_end_clean(); $content = $content . $custom_content; } return $content; }

Ora, dobbiamo agganciare questa funzione the_content .

Come mai? Perché the_content viene utilizzato per filtrare il contenuto del post dopo che è stato recuperato dal database e prima che venga stampato sullo schermo.

Con questo, possiamo aggiungere il nostro pulsante di salvataggio in qualsiasi punto del contenuto. Possiamo farlo in include/class-toptal-save.php nel metodo define_public_hooks() , in questo modo:

 /** * Register all of the hooks related to the public-facing functionality * of the plugin. * * @since 1.0.0 * @access private */ private function define_public_hooks() { $plugin_public = new Toptal_Save_Public( $this->get_plugin_name(), $this->get_version() ); // Append our button $this->loader->add_action( 'the_content', $plugin_public, 'append_the_button', 45 ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_styles' ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_scripts' ); }

Ora, se vai alle impostazioni del plug-in e controlla post e pagine, oltre ad aggiungere il pulsante, vedremo su qualsiasi post del blog che il pulsante è mostrato.

Da qui, dovremmo andare avanti e modellare quel pulsante.

Possiamo farlo in public/css/toptal-save-public.css . Trova il file CSS aggiornato qui.

Ora creiamo una funzione che salverà effettivamente l'elemento.

Lo faremo nella nostra classe pubblica e lo faremo con l'AJAX. Il codice è qui.

Attacchiamo questa funzione in WordPress AJAX.

 /** * Register all of the hooks related to the public-facing functionality * of the plugin. * * @since 1.0.0 * @access private */ private function define_public_hooks() { $plugin_public = new Toptal_Save_Public( $this->get_plugin_name(), $this->get_version() ); // Append our button $this->loader->add_action( 'the_content', $plugin_public, 'append_the_button', 45 ); // Save/unsave AJAX $this->loader->add_action( 'wp_ajax_save_unsave_item', $plugin_public, 'save_unsave_item' ); $this->loader->add_action( 'wp_ajax_nopriv_save_unsave_item', $plugin_public, 'save_unsave_item' ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_styles' ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_scripts' ); }

Puoi leggere di più su AJAX nei plugin qui.

Prima di finire questa parte, dobbiamo fare altre due cose.

1. Localizzare uno script.
2. Crea la nostra chiamata AJAX in public/js/toptal-save-public.js

La localizzazione di uno script verrà eseguita tramite la funzione wp_localize_script() all'interno del nostro file public/class-toptal-save-public.php .

Inoltre, già che ci siamo, ci assicureremo anche di implementare la visualizzazione di file CSS e JS a seconda dello stato della nostra casella di controllo "usa il nostro stile".

 /** * Register the stylesheets for the public-facing side of the site. * * @since 1.0.0 */ public function enqueue_styles() { /** * This function is provided for demonstration purposes only. * * An instance of this class should be passed to the run() function * defined in Toptal_Save_Loader as all of the hooks are defined * in that particular class. * * The Toptal_Save_Loader will then create the relationship * between the defined hooks and the functions defined in this * class. */ $options = get_option( $this->plugin_name . '-settings' ); if ( ! empty( $options['toggle-css-override'] ) && $options['toggle-css-override'] == 1 ) { wp_enqueue_style( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'css/toptal-save-public.css', array(), $this->version, 'all' ); } } /** * Register the JavaScript for the public-facing side of the site. * * @since 1.0.0 */ public function enqueue_scripts() { /** * This function is provided for demonstration purposes only. * * An instance of this class should be passed to the run() function * defined in Toptal_Save_Loader as all of the hooks are defined * in that particular class. * * The Toptal_Save_Loader will then create the relationship * between the defined hooks and the functions defined in this * class. */ wp_enqueue_script( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'js/toptal-save-public.js', array( 'jquery' ), $this->version, false ); // Get our options $options = get_option( $this->plugin_name . '-settings' ); // Get our text $item_save_text = $options['text-save']; $item_unsave_text = $options['text-unsave']; $item_saved_text = $options['text-saved']; $item_no_saved = $options['text-no-saved']; $saved_page_id = get_option( 'toptal_save_saved_page_id' ); $saved_page_url = get_permalink( $saved_page_id ); wp_localize_script( $this->plugin_name, 'toptal_save_ajax', array( 'ajax_url' => admin_url( 'admin-ajax.php' ), 'item_save_text' => $item_save_text, 'item_unsave_text' => $item_unsave_text, 'item_saved_text' => $item_saved_text, 'item_no_saved' => $item_no_saved, 'saved_page_url' => $saved_page_url ) ); }

Ora possiamo procedere con la nostra chiamata AJAX.

Il nostro script front-end cercherà elementi con la classe "toptal-save-button".

Un gestore di clic verrà registrato per tutti gli elementi corrispondenti, che eseguirà la chiamata API e aggiornerà l'interfaccia utente di conseguenza.

Puoi trovare il codice qui e il CSS necessario qui.

Ho anche aggiunto una funzione che gestirà la notifica quando l'elemento viene aggiunto.

Ecco come funziona tutto.

Successivamente, dobbiamo creare uno shortcode che gli utenti inseriscano dove vogliono.

Possiamo farlo in public/class-toptal-save-public.php :

 /** * Create Shortcode for Users to add the button. * * @since 1.0.0 */ public function register_save_unsave_shortcode() { return $this->show_save_button(); }

Dobbiamo anche registrarlo, poiché la funzione da sola non farà nulla.

In include/class-toptal-save.php aggiungi questo codice dopo quella riga in cui abbiamo aggiunto il nostro pulsante.

 // Add our Shortcodes $this->loader->add_shortcode( 'toptal-save', $plugin_public, 'register_save_unsave_shortcode' );

Ora, questo non funzionerà perché non abbiamo ancora caricato il metodo add_shortcode() all'interno della nostra classe caricatore.

Ecco il codice completo del file include/class-toptal-save-loader.php .

Ho aggiunto una nuova variabile protetta chiamata shortcodes , quindi nel metodo di costruzione della classe l'ho trasformata in un array.

Alla riga 104 ho aggiunto una funzione che sarà responsabile della creazione dei nostri shortcode; puoi vedere che è praticamente la stessa della funzione sopra di essa ( add_filter() ), tranne per il fatto che ho cambiato il "filtro" in "shortcode" e "filtri" in "shortcode".

Inoltre, nel metodo run() , ho aggiunto un altro foreach che passerà attraverso il nostro array di codici brevi e li registrerà con WordPress.

È stato facile.

Ricorda, all'inizio, abbiamo usato uno shortcode [toptal-saved] , quindi creiamo un metodo che mostrerà tutti i nostri elementi salvati.

Trova il codice completo per questo metodo qui.

Ora, come sempre, dobbiamo registrare lo shortcode in includes/class-toptal-save.php :

 /** * Register all of the hooks related to the public-facing functionality * of the plugin. * * @since 1.0.0 * @access private */ private function define_public_hooks() { $plugin_public = new Toptal_Save_Public( $this->get_plugin_name(), $this->get_version() ); // Append our button $this->loader->add_action( 'the_content', $plugin_public, 'append_the_button', 45 ); // Add our Shortcodes $this->loader->add_shortcode( 'toptal-save', $plugin_public, 'register_save_unsave_shortcode' ); $this->loader->add_shortcode( 'toptal-saved', $plugin_public, 'register_saved_shortcode' ); // Save/unsave AJAX $this->loader->add_action( 'wp_ajax_save_unsave_item', $plugin_public, 'save_unsave_item' ); $this->loader->add_action( 'wp_ajax_nopriv_save_unsave_item', $plugin_public, 'save_unsave_item' ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_styles' ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_scripts' ); }

Abbiamo altre due cose da fare qui.

1. Dai uno stile alla nostra pagina degli elementi salvati.
2. Assicurati che quando un utente rimuove un elemento salvato, questo scompaia dalla pagina degli elementi salvati.

Per la prima attività, puoi trovare il codice CSS necessario qui.

Per il secondo, comporta un po' di scripting front-end.

Il codice JavaScript completo per questo può essere trovato qui.

Come vedrai alla riga 52, ho cercato il div con una classe "elemento salvato in alto".

Quindi, alle righe 70-75, controlliamo se quel div genitore ha una classe toptal-saved-item.

In tal caso, nascondiamo il nostro elemento con la dissolvenza in uscita e quindi, al termine dell'animazione, rimuoviamo completamente l'elemento dallo schermo.

Ora, passiamo alla parte più difficile: renderla modulare.

Rendi il plugin modulare.

La definizione di base di un plugin modulare è:

Il codice estensibile, o modulare, è codice che può essere modificato, interagito, aggiunto o manipolato, il tutto senza mai modificare la base di codice principale.

Ora, quando si tratta di questo plugin, mi assicurerei che gli utenti possano modificare l'HTML all'interno dell'elemento salvato nella pagina degli elementi salvati.

Quindi, dovremo apportare alcune modifiche al nostro metodo register_saved_shortcode() :

• Cambia html_to_return in inner_html_to_return ovunque desideriamo che gli utenti possano modificare l'HTML. Assicurati che la prima dichiarazione della nostra variabile inner_html_to_return abbia "=" senza un punto che la precede.
• Usa il metodo apply_filters() per registrare il nostro filtro.

Con queste due modifiche, dovresti finire con qualcosa del genere.

Ora, se gli utenti vogliono interagire con il nostro codice, possono aggiungere qualcosa di simile all'interno del loro file functions.php :

 <?php add_filter( 'toptal_saved_item_html', 'change_toptal_saved_item_html'); function change_toptal_saved_item_html( $inner_html_to_return ) { // Some custom code return $inner_html_to_return; }

Genera file di traduzione.

La traduzione è molto importante perché consente ai membri della comunità e ai poliglotti di WordPress di tradurre il tuo plug-in, rendendolo accessibile a siti non in inglese.

Detto questo, tuffiamoci in alcuni dettagli tecnici su come WordPress gestisce le traduzioni.

WordPress utilizza il framework di localizzazione gettext GNU per la traduzione. In questo quadro, ci sono tre tipi di file:

• Modello oggetto portatile (POT)
• Oggetto portatile (PO)
• Oggetto macchina (MO)

Ciascuno di questi file rappresenta una fase del processo di traduzione.

Per generare un file POT, abbiamo bisogno di un programma che esegua la ricerca nel codice di WordPress e ottenga tutto il testo passato alle nostre funzioni di traduzione, come __e() e _e() . Puoi leggere di più sulle funzioni di traduzione qui.

Qui traduciamo il testo dal file POT, salvando sia l'inglese che la nostra traduzione in un file PO, e convertiamo il file PO in un file MO.

Farlo manualmente richiederebbe molto tempo poiché dovresti scrivere alcune righe di codice per ogni file traducibile che hai nel tuo plugin. Fortunatamente, c'è un modo migliore, utilizzando un piccolo plug-in pratico chiamato Loco Translate.

Una volta installato e attivato, vai su Loco Translate > Plugin > Toptal Save.

Da lì, fai clic su Modifica modello, quindi Sincronizza e salva. Questo modificherà il nostro file toptal-save.pot all'interno della nostra cartella delle lingue.

Ora il plugin è disponibile per la traduzione.

Costruisci ora il tuo plugin per WordPress.

Abbiamo creato un plug-in piuttosto semplice in questo articolo, ma nel processo abbiamo seguito le pratiche e gli standard che ci avrebbero consentito di mantenere ed estendere facilmente questo plug-in.

Abbiamo utilizzato le funzionalità di WordPress in modi che non ostacoleranno le prestazioni complessive della piattaforma.

Che si tratti di un plug-in semplice o complicato, che tu sia uno sviluppatore individuale o una società di sviluppo WordPress, pianificare e seguire le migliori pratiche è la chiave per creare un plug-in robusto.