Ghidul final pentru construirea unui plugin WordPress

Pluginurile sunt o parte vitală a site-urilor WordPress care au nevoie de funcționalități specifice.

În timp ce depozitul oficial WordPress are peste 45.000 de plugin-uri de la dvs. din care să alegeți, multe dintre aceste plugin-uri ratează semnul.

Doar pentru că un plugin se află în depozit nu înseamnă că nu îi va împiedica performanța sau nu îi va compromite securitatea.

Deci ce poți face? Ei bine, vă puteți construi singur.

Construirea unui plugin WordPress grozav începe cu o planificare atentă.

Fie că construiți unul de la zero, fie că vă bazați pe un standard, este absolut esențial să urmați cele mai bune practici bine documentate.

În acest tutorial, veți învăța cum să construiți un plugin WordPress simplu în mod corect.

Dacă doriți să revizuiți codul sursă final în timp ce citiți, îl puteți găsi aici.

Începeți cu un plan.

Mai întâi, să enumerăm caracteristicile pe care le va avea pluginul nostru și să descriem exact ce trebuie să facă.

Pluginul pe care îl construim va permite vizitatorilor site-ului să salveze conținut pentru a-l citi mai târziu.

Pentru utilizatorii înregistrați, vom stoca lista în baza de date, iar pentru utilizatorii anonimi, vom salva lista folosind cookie-uri.

Mai jos este o schiță a caracteristicilor și funcționalităților pe care le va oferi pluginul nostru.

Ecran de setări

• Capacitatea administratorilor de a adăuga butonul „Salvare articol” la sfârșitul conținutului.
• Posibilitatea de a alege tipul de postări în care dorim să fie adăugat acest buton.
• Oferiți utilizatorilor opțiunea de a decide dacă doresc să folosească stilul nostru predefinit sau nu
• Furnizați o opțiune pentru a activa funcționalitatea numai pentru utilizatorii conectați.
• Oferiți o opțiune de modificare a mesajelor care apar pe vizitatorul care se confruntă cu o parte a pluginului.

Salvarea Conținutului

• Dacă utilizatorul este autentificat, salvați conținutul într-un câmp de utilizator personalizat
• Dacă utilizatorul nu este autentificat, salvați conținutul în cookie-uri

Mesaje

Mesajele de mai jos vor apărea pe ecran ca răspuns la interacțiunea unui vizitator cu pluginul sau sub formă de etichete pentru elementele acționabile:

• „Salvați elementul”.
• „Anulați salvarea articolului.”
• „Salvat. Vedeți articolele salvate.”
• „Nu aveți niciun element salvat.”

Ecran salvat

Aici vizitatorii văd lista postărilor pe care le-au salvat.

• Afișează o listă de articole salvate
• Creați o pagină Salvată la activarea pluginului
• Ștergeți pagina salvată la dezactivarea pluginului

Cod scurt

Cu un shortcode, pagina Salvată poate fi redată oriunde este adăugată.

Folosiți un boilerplate.

Acesta este cel mai bun boilerplate pe care l-am găsit. Este bine structurat, orientat pe obiecte și eficient. Urmează toate cele mai bune practici. Și este rapid și ușor.

Puteți folosi această pagină pentru a genera o bază de cod pentru plugin bazată pe acest plugin WordPress Boilerplate:

Ar trebui să obțineți un fișier .zip .

Extrageți-l și puneți-l în folderul de instalare WordPress: wp-content/plugins/ .

Dacă deschideți tabloul de bord WordPress și accesați pluginuri, veți vedea că pluginul dvs. este listat acolo. Nu-l activați încă.

Gestionați activarea și dezactivarea.

Este important ca pluginul nostru să gestioneze corect activarea și dezactivarea.

Când pluginul nostru este activat, vom crea o pagină numită „Salvat”, care va păstra elementele salvate de utilizator în ea.

În timpul creării acelei pagini, vom adăuga un cod scurt pentru articolele noastre salvate în conținutul acelei pagini.

La final, vom salva pagina; obțineți-i identitatea; și îl stocăm în baza de date, astfel încât să îl putem accesa ulterior la dezactivarea pluginului.

Când pluginul nostru este dezactivat, vom obține ID-ul paginii „Salvat” din baza de date, apoi vom șterge pagina „Salvat”, eliminând orice urmă a pluginului în sine.

Putem face toate acestea în includes/class-toptal-save-activator.php și includes/class-toptal-save-deactivator.php .

Să începem cu procesul de activare:

 <?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 ); } }

Funcția activate() este apelată când pluginul este activat.

Acesta creează o pagină nouă folosind funcția wp_insert_post() și salvează ID-ul paginii în baza de date folosind add_option() .

Acum, să continuăm cu dezactivarea pluginului.

 <?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' ); } } }

Funcția deactivate() , care este apelată când pluginul este dezactivat, preia pagina folosind funcția get_option() , elimină pagina corespunzătoare din baza de date folosind wp_delete_post() și elimină ID-ul salvat din tabelul de opțiuni folosind delete_option() .

Dacă ne activăm pluginul și mergem la pagini, ar trebui să vedem o pagină numită „Salvat” cu un shortcode în ea.

Dacă ar fi să dezactivăm pluginul, pagina respectivă ar fi eliminată.

Deoarece am folosit true ca argument în metoda noastră wp_delete_post() , această pagină nu va merge la coșul de gunoi, ci mai degrabă va fi ștearsă complet.

Creați o pagină de setări pentru plugin.

Ne putem crea pagina de setări în fișierul admin/class-toptal-save-admin.php , iar primul lucru pe care trebuie să-l facem în acel fișier este să eliminăm sau să comentăm apelul către wp_enqueue_style() din cadrul enqueue_styles() și apelați la wp_enqueue_script() în interiorul funcției enqueue_scripts() dacă nu vom adăuga niciun CSS/JS la ecranul de administrare.

Cu toate acestea, dacă vom adăuga ceva stil, atunci, vă recomand să încărcăm acele fișiere numai în pagina de setări a pluginului nostru, mai degrabă decât în ​​toate paginile de administrare WordPress. Putem face asta plasând următorul cod direct deasupra liniilor pe care le-am fi comentat:

 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 );

Dacă vă întrebați de unde am luat acea 'tools_page_toptal-save' .

Ei bine, iată chestia, știu că voi crea o pagină de setări cu un slug toptal-save și, de asemenea, știu că o voi adăuga la ecranul Instrumente ( tools.php ). Deci, punând cele două împreună, putem spune că valoarea variabilei $hook va fi 'tools_page_toptal-save' - o concatenare a celor două valori.

Dacă nu ne aflăm în pagina noastră de setări pentru plugin, folosim return pentru a încheia imediat execuția funcției în care ne aflăm.

Deoarece nu voi adăuga niciun stil personalizat pe ecranul meu de administrare – pentru că vreau ca ecranul meu plugin să arate ca ecranul WordPress nativ – nu voi adăuga acel cod.

Acum, putem continua cu crearea paginii noastre de setări.

Vom începe prin a adăuga o metodă simplă la clasa Toptal_Save_Admin care va apela funcția 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 ); }

Sunt destul de multe argumente pe care le transmitem funcției add_submenu_page() . Iată ce înseamnă fiecare dintre ele.

• Parent slug: numele slug-ului pentru meniul părinte (sau numele fișierului unei pagini standard de administrare WordPress). Puteți vedea lista completă a melcilor părinți aici.

• Titlul paginii: textul care urmează să fie afișat în etichetele de titlu ale paginii când este selectat meniul.

• Titlul meniului: textul care va fi folosit pentru titlul meniului.

• Capacitate: Capacitatea cerută de utilizator pentru ca acest meniu să le fie afișat. Am folosit „manage_options” care permite accesul la opțiunile panoului de administrare. Puteți citi mai multe despre Roluri și Capabilități aici.

• Meniu slug: Numele slug-ului care se referă la acest meniu.

• Funcție apelabilă: Funcția care trebuie apelată pentru a afișa conținutul acestei pagini. Deoarece am definit numele funcției noastre apelabile, trebuie să o creăm, dar înainte de a o face, am folosit $this pentru a face referire la o instanță a unei clase din interiorul ei. Iată ce are de spus documentația PHP despre asta:

Pseudovariabila $this este disponibilă atunci când o metodă este apelată din contextul unui obiect. $aceasta este o referire la obiectul apelant (de obicei obiectul căruia îi aparține metoda, dar eventual un alt obiect, dacă metoda este apelată static din contextul unui obiect secundar).

În continuare, vom adăuga o altă metodă clasei:

 /** * 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'; }

Această funcție apelabilă include șablonul nostru care va afișa pagina noastră de setări. Puteți vedea că facem referință la un fișier situat în admin/ partials numit toptal-save-admin-display.php .

Acum, dacă accesați Instrumente, nu veți vedea acel ecran. De ce? Pentru că nu am conectat metoda noastră register_admin_page() la cârligul admin_menu .

Putem face asta deschizând fișierul includes/class-toptal-save.php și adăugând această bucată de cod în cadrul define_admin_hooks() , chiar mai jos, unde $plugin_admin = new Toptal_Save_Admin( $this->get_plugin_name(), $this->get_version() ); parte este.

 /** * 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' ); }

Nu vă faceți griji cu privire la apelurile la add_action() deoarece acesta este ceva pe care îl vom acoperi mai târziu.

Pentru moment, pur și simplu deschideți pagina Instrumente și veți putea vedea pagina Toptal Save. Dacă îl deschidem, funcționează, dar vedem un ecran gol, deoarece nu este nimic pe el.

Facem ceva progrese, dar trebuie să afișăm câteva setări aici, așa că hai să facem asta.

Vom începe să creăm câmpurile și asta e ceva pe care îl vom face cu ajutorul API-ului WordPress Settings.

Dacă nu sunteți familiarizat cu acesta, ne permite să creăm câmpuri de formular pe care să le folosim pentru a ne salva datele.

 /** * 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' ) ) ); // ... }

În cadrul funcției register_settings() putem adăuga și configura toate câmpurile. Puteți găsi implementarea completă a funcției aici. Am folosit următoarele în funcția prezentată mai sus:

• register_setting() : Înregistrează o setare și apel invers de igienizare.
• add_settings_section() : adaugă o nouă secțiune la o pagină de setări.
• add_settings_field() : adaugă un câmp nou la o secțiune a unei pagini de setări.

Ori de câte ori am folosit una dintre aceste trei funcții, a fost oferit un apel invers de dezinfectare. Acest lucru permite ca datele să fie igienizate și, dacă este un câmp, să arate elementul HTML corespunzător (căsuță de selectare, radio, intrare, etc).

De asemenea, am transmis o serie de date acelor apeluri inverse, cum ar fi label_for, description sau default, după cum este necesar.

Acum, putem crea acele apeluri de dezinfectare. Puteți găsi codul pentru aceste apeluri înapoi aici.

Totul este în regulă, totuși, trebuie să conectăm câmpurile în hook admin_init și apoi să le arătăm.

Vom folosi add_action , care este un cârlig pe care nucleul WordPress îl pornește în anumite puncte în timpul execuției sau când are loc un anumit eveniment. admin_init este declanșat înaintea oricărui alt hook atunci când un utilizator accesează zona de administrare.

Mai întâi, trebuie să adăugăm o acțiune în fișierul includes/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' ); }

Apoi, în admin/partials/topal-save-admin-display.php , trebuie să oferim o vizualizare pentru zona de administrare a pluginului nostru:

 <?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>

Funcția settings_fields() este utilizată pentru a afișa câmpurile nonce, action și option_page pentru o pagină de setări.

Este urmat de do_settings_sections() care tipărește toate secțiunile de setări adăugate la o anumită pagină de setări.

În cele din urmă, se adaugă un buton de trimitere folosind textul furnizat și clasele corespunzătoare folosind funcția submit_button() .

Acum, dacă aruncăm o privire pe pagina noastră, va arăta astfel:

Acesta este tot ce avem de făcut în zona noastră de administrare. Să începem să lucrăm la partea publică a pluginului nostru.

Creați funcționalitatea pluginului.

Aici vine partea interesantă. Trebuie să creăm mai multe funcții pentru a ne separa funcționalitatea:

• O funcție care va afișa butonul „Salvare articol”. Aceasta trebuie să verifice dacă utilizatorul actual a salvat deja acel element sau nu, în funcție de asta, vom afișa text diferit, precum și culoare.
• O funcție care va salva/anura un articol (AJAX).
• O funcție care va afișa toate elementele salvate.
• O funcție care va genera codurile noastre scurte.

Deci, să începem cu afișarea butonului. Vom face toate acestea în public/class-toptal-save-public.php .

În timp ce facem acest lucru, va trebui să creăm câteva funcții auxiliare suplimentare pentru a ne ocupa de anumite lucruri, cum ar fi:

• Crearea unui nume cookie unic pentru site-ul web
• Crearea unui cookie
• Obținerea valorii cookie
• Obținerea statutului de membru din setări

Codul pentru aceste funcții de ajutor poate fi găsit aici.

Funcția get_unique_cookie_name() ne va ajuta să generăm un nume cookie unic din adresa URL a site-ului web, numele site-ului web și sufixul nostru definit personalizat. Acest lucru este astfel încât numele cookie-ului generat să nu intre în conflict atunci când este utilizat în mai multe site-uri WordPress sub același domeniu.

Funcțiile toptal_set_cookie() și toptal_get_cookie() vor crea și, respectiv, vor obține valoarea cookie-urilor noastre.

Funcția get_user_status() va primi starea casetei de selectare a apartenenței noastre în setări (returnând 1 când este bifată, 0 în caz contrar).

Acum, partea suculentă, creând funcția care va fi responsabilă pentru afișarea butonului de salvare. Implementarea funcției noastre show_save_button() poate fi găsită aici. Și am folosit câteva funcții noi din API-ul WordPress aici:

• get_queried_object_id() : Preia ID-ul obiectului interogat curent.
• is_user_logged_in() : Verifică dacă vizitatorul curent este un utilizator conectat.
• get_user_meta() : Preia câmpul de metadate ale utilizatorului pentru un utilizator.
• wp_create_nonce() : creează un token criptografic legat de o anumită acțiune, utilizator, sesiune de utilizator și fereastră de timp.

Acum, să creăm o funcție care va adăuga butonul nostru la sfârșitul conținutului. Aici avem două cerințe cheie.

1. Asigurați-vă că butonul este afișat numai pe tipul (tipurile) de postare care este/sunt selectate în setări.
2. Asigurați-vă că caseta de selectare pentru adăugarea butonului este bifată.

 /** * 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; }

Acum, trebuie să conectăm această funcție la cârligul the_content .

De ce? Pentru că the_content este folosit pentru a filtra conținutul postării după ce acesta este preluat din baza de date și înainte de a fi imprimat pe ecran.

Cu aceasta, putem adăuga butonul nostru de salvare oriunde în conținut. Putem face asta în includes/class-toptal-save.php în metoda define_public_hooks define_public_hooks() , astfel:

 /** * 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' ); }

Acum, dacă accesați setările pluginului și verificați postările și paginile, precum și adăugați butonul, vom vedea pe orice postare de blog că butonul este afișat.

De aici, ar trebui să mergem mai departe și să stilăm acel buton.

Putem face asta în public/css/toptal-save-public.css . Găsiți fișierul CSS actualizat aici.

Acum, să creăm o funcție care va salva de fapt elementul.

Vom face asta în clasa noastră publică și o vom face cu AJAX. Codul este aici.

Să conectăm această funcție în 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' ); }

Puteți citi mai multe despre AJAX în pluginuri aici.

Înainte de a termina această parte, trebuie să mai facem două lucruri.

1. Localizați un script.
2. Creați apelul nostru AJAX în public/js/toptal-save-public.js

Localizarea unui script se va face prin intermediul funcției wp_localize_script() din fișierul nostru public/class-toptal-save-public.php .

De asemenea, în timp ce suntem la asta, ne vom asigura și că implementăm afișarea fișierelor CSS și JS, în funcție de starea casetei de selectare „utilizați stilul nostru”.

 /** * 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 ) ); }

Acum, putem continua cu apelul nostru AJAX.

Scriptul nostru front-end va căuta elemente cu clasa „toptal-save-button”.

Un handler de clic va fi înregistrat pentru toate elementele care se potrivesc, care vor efectua apelul API și vor actualiza interfața de utilizare în consecință.

Puteți găsi codul aici și CSS-ul necesar aici.

Am adăugat, de asemenea, o funcție care va gestiona notificarea atunci când articolul este adăugat.

Iată cum funcționează totul.

Apoi, trebuie să creăm un cod scurt pentru ca utilizatorii să-l introducă oriunde doresc.

Putem face asta în 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(); }

De asemenea, trebuie să-l înregistrăm, deoarece funcția în sine nu va face nimic.

În includes/class-toptal-save.php adăugați acest cod după acea linie în care am atașat butonul.

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

Acum, acest lucru nu va funcționa, deoarece nu am încărcat încă metoda add_shortcode() în clasa noastră de încărcare.

Iată codul complet al fișierului includes/class-toptal-save-loader.php .

Am adăugat o nouă variabilă protejată numită shortcodes , apoi în metoda constructorului clasei, am transformat-o într-o matrice.

Pe linia 104, am adăugat o funcție care va fi responsabilă pentru crearea codurilor noastre scurte; puteți vedea că este aproape aceeași cu funcția de mai sus ( add_filter() ), cu excepția faptului că am schimbat „filtrul” în „shortcode” și „filtre” în „shortcodes”.

De asemenea, în metoda run() , am adăugat un alt foreach care va trece prin matricea noastră de coduri scurte și le va înregistra pe WordPress.

A fost ușor.

Amintiți-vă, la început, am folosit un shortcode [toptal-saved] , așa că haideți să creăm o metodă care să arate toate articolele noastre salvate.

Găsiți codul complet pentru această metodă aici.

Acum, ca întotdeauna, trebuie să înregistrăm codul scurt în 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' ); }

Mai avem două lucruri de făcut aici.

1. Stilează pagina noastră de articole salvate.
2. Asigurați-vă că, atunci când un utilizator elimină un articol salvat, acesta dispare din pagina articolelor salvate.

Pentru prima sarcină, puteți găsi codul CSS necesar aici.

Pentru al doilea, implică un pic de scripting front-end.

Codul JavaScript complet pentru acesta poate fi găsit aici.

După cum veți vedea pe linia 52, am căutat div-ul cu o clasă „toptal-saved-item”.

Apoi, pe rândurile 70-75, verificăm dacă acel div părinte are o clasă toptal-saved-item.

Dacă se întâmplă, ne ascundem elementul cu fadeOut și apoi, după ce animația se termină, eliminăm complet elementul de pe ecran.

Acum, să trecem la partea mai dificilă – să o facem modulară.

Faceți pluginul modular.

Definiția de bază a unui plugin modular este:

Codul extensibil sau modular este codul care poate fi modificat, interacționat, adăugat sau manipulat - totul fără a modifica niciodată baza codului de bază.

Acum, când vine vorba de acest plugin, m-aș asigura că utilizatorii pot schimba codul HTML din interiorul articolului salvat pe pagina articolelor salvate.

Deci, va trebui să facem câteva modificări în metoda noastră register_saved_shortcode() :

• Schimbați html_to_return în inner_html_to_return oriunde dorim ca utilizatorii să poată schimba codul HTML. Asigurați-vă că prima declarație a variabilei noastre inner_html_to_return are „=" fără un punct s-o precedă.
• Utilizați metoda apply_filters() pentru a înregistra filtrul nostru.

Cu aceste două modificări, ar trebui să ajungeți cu așa ceva.

Acum, dacă utilizatorii doresc să interacționeze cu codul nostru, pot adăuga ceva de genul acesta în fișierul 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ți fișiere de traducere.

Traducerea este foarte importantă deoarece permite membrilor comunității WordPress și poligloților să vă traducă pluginul, făcându-l accesibil site-urilor care nu sunt în limba engleză.

Acestea fiind spuse, haideți să ne aruncăm în câteva detalii tehnice despre modul în care WordPress gestionează traducerile.

WordPress folosește cadrul de localizare GNU gettext pentru traducere. În acest cadru, există trei tipuri de fișiere:

• Șablon de obiect portabil (POT)
• Obiect portabil (PO)
• Obiect mașină (MO)

Fiecare dintre aceste fișiere reprezintă un pas în procesul de traducere.

Pentru a genera un fișier POT, avem nevoie de un program care va căuta prin codul WordPress și va trece tot textul la funcțiile noastre de traducere, cum ar fi __e() și _e() . Puteți citi mai multe despre funcțiile de traducere aici.

Aici traducem textul din fișierul POT, salvând atât limba engleză, cât și traducerea noastră într-un fișier PO și convertim fișierul PO într-un fișier MO.

A face acest lucru manual ar dura mult timp, deoarece ar trebui să scrieți câteva rânduri de cod pentru fiecare fișier translabil pe care îl aveți în plugin. Din fericire, există o modalitate mai bună, folosind un mic plugin la îndemână numit Loco Translate.

După ce l-ați instalat și activat, accesați Loco Translate > Plugins > Toptal Save.

De acolo, faceți clic pe Editați șablonul, apoi pe Sincronizare și salvare. Acest lucru va edita fișierul nostru toptal-save.pot în dosarul nostru de limbi.

Acum, pluginul este disponibil pentru traducere.

Construiește-ți pluginul WordPress acum.

Am construit un plugin destul de simplu în acest articol, dar pe parcursul procesului am urmat practicile și standardele care ne-ar permite să menținem și să extindem acest plugin cu ușurință.

Am folosit funcționalitățile WordPress în moduri care nu vor împiedica performanța generală a platformei.

Fie că este un plugin simplu sau unul complicat, fie că sunteți un dezvoltator individual sau o companie de dezvoltare WordPress, planificarea și respectarea celor mai bune practici este cheia pentru construirea unui plugin robust.