Tehnoloogia

Lõplik juhend WordPressi pistikprogrammi loomiseks

Pistikprogrammid on WordPressi veebisaitide oluline osa, mis vajavad konkreetseid funktsioone.

Kuigi ametlikus WordPressi hoidlas on teil valida rohkem kui 45 000 pistikprogrammi, jätavad paljud neist pistikprogrammidest märkamata.

See, et pistikprogramm asub hoidlas, ei tähenda, et see ei takistaks selle toimimist ega ohustaks selle turvalisust.



Mida siis teha? Noh, saate ise ehitada.

Lõplik juhend WordPressi pistikprogrammi loomiseks

Suurepärase WordPressi pistikprogrammi loomine algab hoolika planeerimisega.

Sõltumata sellest, kas ehitate seda nullist või lähete katlakivist, on hädavajalik järgida hästi dokumenteeritud parimaid tavasid.

Selles õpetuses saate teada, kuidas lihtsat WordPressi pistikprogrammi õigesti luua.

Kui soovite lugemisel lõpliku lähtekoodi üle vaadata, leiate selle siin .

Alustage plaanist.

Kõigepealt loetleme funktsioonid, mis meie pistikprogrammil on, ja kirjeldage täpselt, mida ta peab tegema.

Meie koostatav pistikprogramm võimaldab saidi külastajatel sisu hiljem lugemiseks salvestada.

Registreeritud kasutajate jaoks salvestame loendi andmebaasi ja anonüümsete kasutajate jaoks salvestame loendi küpsiste abil.

Allpool on toodud ülevaade funktsioonidest ja funktsioonidest, mida meie pistikprogramm pakub.

Seadete ekraan

  • Administraatorite võimalus lisada nuppu „Salvesta üksus” sisu lõppu.
  • Võimalus valida postituste tüüp, kuhu soovime selle nupu lisada.
  • Pakkuge kasutajatele võimalust otsustada, kas nad soovivad kasutada meie etteantud stiili või mitte
  • Andke võimalus funktsionaalsuse lubamiseks ainult sisseloginud kasutajatele.
  • Pakkuge võimalust muuta sõnumeid, mis kuvatakse külastajal plugina osa ees.

Sisu salvestamine

  • Kui kasutaja on sisse logitud, salvestage sisu kohandatud kasutajaväljale
  • Kui kasutaja pole sisse logitud, salvestage sisu küpsistesse

Sõnumid

Allpool olevad teated kuvatakse ekraanil vastusena külastaja suhtlusele pistikprogrammiga või siltidena toimitavatel üksustel.

  • 'Salvesta üksus.'
  • 'Üksust ei salvestata.'
  • “Salvestatud. Vaadake salvestatud üksusi. ”
  • 'Teil pole ühtegi salvestatud üksust.'

Salvestatud ekraan

Siin saavad külastajad vaadata salvestatud postituste loendit.

  • Kuva salvestatud üksuste loend
  • Looge pistikprogrammi aktiveerimiseks salvestatud leht
  • Plugina deaktiveerimisel kustutage salvestatud leht

Lühikood

Lühikoodiga saab salvestatud lehte renderdada kõikjal, kuhu see lisatakse.

Kasutage katla plaati.

See on parim katla plaat Olen leidnud. See on hästi struktureeritud, objektile orienteeritud ja tõhus. See järgib kõiki parimaid tavasid. Ja see on kiire ja kerge.

Sa võid kasutada sellel lehel sellel WordPressi pistikprogrammi katlaplaadil põhineva pistikprogrammi koodibaasi loomiseks:

Wordpressi katlaplaat

Sa peaksid saama a .zip faili.

Eemaldage see ja pange see oma WordPressi installikausta: wp-sisu / pistikprogrammid / .

Kui avate oma WordPressi juhtpaneeli ja avate pistikprogrammid, näete, et teie pistikprogramm on seal loetletud. Ärge seda veel aktiveerige.

Käivitage aktiveerimine ja deaktiveerimine.

Meie pistikprogrammi jaoks on oluline aktiveerimise ja deaktiveerimisega korralikult hakkama saada.

Kui meie pistikprogramm on aktiveeritud, loome lehe nimega „Salvestatud“, mis hoiab selles kasutaja salvestatud üksusi.

Selle lehe loomise ajal lisame selle lehe sisusse oma salvestatud üksuste lühikoodi.

Lõpus salvestame lehe; saada oma ID; ja salvestage see andmebaasi, et saaksime sellele hiljem juurde pääseda pistikprogrammi deaktiveerimisel.

Kui meie pistikprogramm on deaktiveeritud, saame andmebaasist lehe „Salvestatud” ID ja seejärel kustutame lehe „Salvestatud”, eemaldades pistikprogrammi enda jäljed.

Saame seda kõike teha aastal sisaldab / class-toptal-save-activator.php ja sisaldab / class-toptal-save-deactivator.php .

Alustame aktiveerimisprotsessist:

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

activate() funktsioon käivitatakse, kui pistikprogramm on aktiveeritud.

See loob uue lehe, kasutades wp_insert_post() funktsiooni ja salvestab lehe ID andmebaasi kasutades add_option() .

Nüüd jätkame pistikprogrammi desaktiveerimist.

deactivate() Funktsioon, mida nimetatakse pistikprogrammi deaktiveerimisel, otsib lehe, kasutades get_option() funktsioon eemaldab vastava lehe andmebaasist, kasutades wp_delete_post() ja eemaldab salvestatud ID suvandite tabelist delete_option() .

Kui aktiveerime oma pistikprogrammi ja läheme lehtedele, peaksime nägema lehte nimega “Salvestatud”, kus on lühikood.

Wordpress-mooduli aktiveerimine

Kui me pistikprogrammi deaktiveeriksime, eemaldataks see leht.

Kuna me kasutasime true argumendina meie wp_delete_post() meetodil ei lähe see leht prügikasti, vaid pigem kustutatakse see täielikult.

Looge pistikprogrammi seadete leht.

Saame oma seadete lehe luua admin / class-toptal-save-admin.php fail ja esimene asi, mida peame selles failis tegema, on wp_enqueue_style() kõne eemaldamine või kommenteerimine enqueue_styles() sees funktsioon ja helistage wp_enqueue_script() enqueue_scripts() sees funktsioon, kui me ei lisa administraatoriekraanile ühtegi CSS / JS-i.

Siiski, kui kavatseme lisada mõne stiili, soovitan need failid laadida ainult meie pistikprogrammi seadete lehele, mitte kõikidele WordPressi administraatori lehtedele. Saame seda teha, asetades järgmise koodi otse nende ridade kohale, mida oleksime kommenteerinud:

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

Kui te ei tea, kust ma selle sain ‘tools_page_toptal-save’ osa aastast.

Noh, siin on asi, ma tean, et ma teen seadete lehe, millel on nälkjas toptal-save, ja tean ka, et lisan selle tööriistadesse ( tools.php ) ekraan. Neid kahte kokku pannes võime öelda, et muutuja $hook väärtus saab olema ‘tools_page_toptal-save’ - kahe väärtuse liitmine.

Kui me pole pistikprogrammi seadete lehel, kasutame return kohe lõpetada selle funktsiooni täitmine, milles oleme.

Kuna ma ei lisa oma administraatori ekraanile ühtegi kohandatud stiili - kuna ma tahan, et minu pistikprogrammi ekraan näeks välja nagu WordPressi native ekraan -, siis ma seda koodi ei lisa.

Nüüd saame jätkata oma seadete lehe loomist.

Alustame lihtsa meetodi lisamisega ApeeScape_Save_Admin klass, mis kutsub add_submenu_page() funktsioon.

/** * 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 __( 'ApeeScape Save', 'toptal-save' ), // page title __( 'ApeeScape Save', 'toptal-save' ), // menu title 'manage_options', // capability 'toptal-save', // menu_slug array( $this, 'display_settings_page' ) // callable function ); }

See on üsna vähe argumente, millele me edastame add_submenu_page() funktsioon. Siin on, mida igaüks neist tähendab.

  • Vanem nälkjas: Ülemmenüü nälkja nimi (või tavalise WordPressi administraatori lehe failinimi). Näete vanemate nälkjate täielikku loendit siin .

  • Lehe pealkiri: Menüü valimisel lehe pealkirja siltides kuvatav tekst.

  • Menüü pealkiri: Menüü pealkirja jaoks kasutatav tekst.

  • Võime: Kasutaja poolt selle menüü kuvamiseks vajalik võime. Oleme kasutanud valikut „manage_options”, mis võimaldab juurdepääsu halduspaneeli suvanditele. Lisateavet rollide ja võimete kohta saate lugeda siin .

  • Menüü nälkjas: Sellele menüüle viitav nälkja nimi.

  • Helistatav funktsioon: Funktsioon, mida kutsutakse selle lehe sisu väljastamiseks. Kuna oleme määranud oma kutsuva funktsiooni nime, peame selle looma, kuid enne seda kasutasime $this klassi eksemplari viitamiseks enda seest. PHP dokumentatsioon ütleb selle kohta järgmist:

Pseudomuutuja $ see on saadaval, kui meetodi kutsumine toimub objekti kontekstis. $ see on viide kutsuvale objektile (tavaliselt objektile, kuhu meetod kuulub, kuid võib-olla ka teisele objektile, kui meetodit nimetatakse staatiliselt teisese objekti kontekstist).

Järgmisena lisame klassi veel ühe meetodi:

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

See helistatav funktsioon sisaldab meie malli, mis näitab meie seadete lehte. Näete, et viidame failile, mis asub admin / osalised helistas toptal-save-admin-display.php .

Kui lähete menüüsse Tööriistad, ei näe te seda ekraani. Miks? Sest me pole oma register_admin_page() konksu külge pannud meetodit admin_menu konks.

Me saame seda teha, avades oma sisaldab / class-toptal-save.php fail ja lisades selle kooditüki define_admin_hooks() sisse meetodi all, kus $plugin_admin = new ApeeScape_Save_Admin( $this->get_plugin_name(), $this->get_version() ); osa on.

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

Ärge muretsege add_action() -le helistamise pärast kuna sellest räägime hiljem.

Praegu avage lihtsalt tööriistade leht ja näete ApeeScape Save lehte. Kui me selle avame, töötab see, kuid näeme tühja ekraani, kuna sellel pole midagi.

Wordpress-tööriistade leht

Me teeme mõningaid edusamme, aga hei, me peame siin mõned seaded kuvama, nii et tehkem seda.

Hakkame väljad looma ja see on midagi, mille abil me ka teeme WordPressi seadete API .

Kui te pole sellega kursis, võimaldab see meil luua vormivälju, mida saaksime oma andmete salvestamiseks kasutada.

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

register_settings() Sees funktsiooni saame lisada ja konfigureerida kõik väljad. Leiate funktsiooni täieliku rakendamise siin . Oleme ülaltoodud funktsioonis kasutanud järgmist:

Alati, kui kasutasime ühte neist kolmest funktsioonist, pakuti desinfitseerimise tagasihelistamist. See võimaldab andmeid desinfitseerida ja kui see on väli, näidata sobivat HTML-elementi (märkeruut, raadio, sisend jne).

Samuti oleme neile tagasihelistamistele edastanud hulga andmeid, näiteks label_for, kirjeldus või vajaduse korral vaikimisi.

Nüüd saame luua need sanitaarmeetmete tagasihelistamised. Nende tagasihelistamiste koodi leiate siin .

See kõik on tore, aga me peame põllud admin_init sisse haakima konksu ja siis näidata neile.

Kasutame add_action mis on konks, mille WordPressi tuum algab käivitamise ajal konkreetsetes punktides või konkreetse sündmuse toimumisel. admin_init käivitatakse enne muud konksu, kui kasutaja pöördub administraatoripiirkonda.

Esiteks peame lisama toimingu sisse sisaldab / class-toptal-save.php faili.

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

Järgmine, sisse admin / partss / topal-save-admin-display.php , peame andma vaate oma pistikprogrammi administraatoripiirkonnale:

settings_fields() funktsiooni kasutatakse sätete lehe väljade nonce, action ja option_page väljastamiseks.

Sellele järgneb do_settings_sections() mis prindib välja kõik seadete jaotised, mis on lisatud konkreetsele seadete lehele.

Lõpuks lisatakse edastusnupp, kasutades sisestatud teksti ja sobivat klassi (de), kasutades submit_button() funktsioon.

Kui vaatame oma lehte, näeb see välja järgmine:

Wordpress-lehe täielik näide

See on kõik, mida peame oma administraatoris tegema. Alustame oma pistikprogrammi avaliku osa kallal töötamist.

Looge pistikprogrammi funktsioon.

Siit tuleb huvitav osa. Funktsionaalsuse eraldamiseks peame looma mitu funktsiooni:

  • Funktsioon, mis näitab nuppu „Salvesta üksus“. See peab kontrollima, kas praegune kasutaja on selle üksuse juba salvestanud või mitte, sõltuvalt sellest kuvame ka erinevat teksti ja värvi.
  • Funktsioon, mis salvestab / tühistab üksuse (AJAX).
  • Funktsioon, mis näitab kõiki salvestatud üksusi.
  • Funktsioon, mis genereerib meie lühikoodid.

Alustame siis nupu näitamisega. Teeme seda kõike aastal public / class-toptal-save-public.php .

Seda tehes peame looma mõned täiendavad abifunktsioonid, et hoolitseda teatud asjade eest.

  • Veebisaidile ainulaadse küpsise nime loomine
  • Küpsise loomine
  • Küpsise väärtuse saamine
  • Liikmesuse oleku hankimine seadetest

Nende abifunktsioonide koodi leiate siin .

get_unique_cookie_name() Funktsioon aitab meil luua veebisaidi URL-ist, veebisaidi nimest ja meie kohandatud määratletud järelliitest ainulaadse küpsise nime. Seda selleks, et loodud küpsise nimi ei oleks vastuolus, kui seda kasutatakse mitmes domeenis asuvas WordPressi saidis.

toptal_set_cookie() ja toptal_get_cookie() funktsioonid loovad ja saavad meie küpsiste väärtuse vastavalt.

get_user_status() funktsioon saab meie liikmesuse märkeruudu oleku seadetes (tagastamisel märkimisel tagastatakse 1, muidu 0).

Nüüd, mahlane osa, luues funktsiooni, mis vastutab salvestamisnupu kuvamise eest. Meie show_save_button() rakendamine funktsiooni leiate siin . Ja siin oleme kasutanud mõningaid uusi funktsioone WordPressi API-st:

Nüüd loome funktsiooni, mis lisab meie nupu sisu lõppu. Siin on meil kaks peamist nõuet.

  1. Veenduge, et nuppu kuvatakse ainult postituste tüüpidel, mis on seadetes valitud.
  2. Veenduge, et nupu lisamise märkeruut on märgitud.
/** * 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; }

Nüüd peame selle funktsiooni the_content külge ühendama konks.

Miks? Sest the_content kasutatakse postituse sisu filtreerimiseks pärast andmebaasist hankimist ja enne ekraanile printimist.

Sellega saame oma salvestamisnupu lisada ükskõik kuhu sisusse. Saame seda teha aastal sisaldab / class-toptal-save.php aastal define_public_hooks() meetodit, nagu see:

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

Nüüd, kui avate pistikprogrammi seaded, kontrollite postitusi ja lehti ning lisate nupu, näeme kõigil ajaveebipostitustel seda nuppu.

Wordpressi pistikprogrammi seadete ekraan

Siit peaksime edasi liikuma ja selle nupu kujundama.

Saame seda teha aastal public / css / toptal-save-public.css . Leidke värskendatud CSS-fail siin .

Nüüd loome funktsiooni, mis elemendi tegelikult salvestab.

Teeme seda oma avalikus tunnis ja teeme seda koos AJAX-iga. Kood on siin .

Ühendame selle funktsiooni WordPressi AJAX-i.

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

Lisateavet AJAX-i kohta leiate pistikprogrammidest siin .

Enne selle osa lõpetamist peame tegema veel kaks asja.

  1. Lokaliseerige skript.
  2. Looge meie AJAX-kõne avalikus / js / toptal-save-public.js

Skripti lokaliseerimine toimub wp_localize_script() funktsioon meie public/class-toptal-save-public.php sees faili.

Sel ajal, kui me sellega tegeleme, rakendame ka CSS- ja JS-failide kuvamise sõltuvalt meie märkeruudu 'Kasuta meie stiili' olekust.

/** * 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 ApeeScape_Save_Loader as all of the hooks are defined * in that particular class. * * The ApeeScape_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 ApeeScape_Save_Loader as all of the hooks are defined * in that particular class. * * The ApeeScape_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 ) ); }

Nüüd saame jätkata oma AJAX-kõnet.

Meie esiotsa skript otsib elemente klassiga „toptal-save-button”.

Kõigile sobivatele elementidele registreeritakse klõpsude käitleja, kes teostab API-kõnet ja värskendab kasutajaliidest vastavalt.

Koodi leiate siin ja vajalik CSS siin .

Olen lisanud ka funktsiooni, mis haldab teatist, kui üksus lisatakse.

Kuidas see kõik toimib?

Wordpressi pistikprogrammi demo on lõpule viidud

Järgmisena peame looma lühikoodi, mida kasutajad saaksid sisestada kuhu iganes nad tahavad.

Saame seda teha aastal 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(); }

Peame selle ka registreerima, kuna funktsioon iseenesest ei tee midagi.

Sisse sisaldab / class-toptal-save.php lisage see kood selle rea järele, kuhu me oma nupu lisasime.

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

Nüüd see ei toimi, sest me ei ole veel add_shortcode() meetod meie laaduriklassis.

Siin on kogu koodi sisaldab / class-toptal-save-loader.php faili.

Olen lisanud uue kaitstud muutuja nimega shortcodes, seejärel muutsin klassi konstruktori meetodis selle massiiviks.

Reale 104 olen lisanud funktsiooni, mis vastutab meie lühikoodide loomise eest; näete, et see on peaaegu sama mis funktsioon selle kohal (add_filter()), välja arvatud see, et ma muutsin 'filtri' 'lühikoodiks' ja 'filtrid' lühikoodideks.

Ka run() meetodi lisasin veel ühe foreach mis läbib meie lühikoodide massiivi ja registreerib need WordPressis.

See oli lihtne.

Pidage meeles, et alguses kasutasime lühikoodi [toptal-saved], nii et looge meetod, mis näitab kõiki meie salvestatud üksusi.

Leidke selle meetodi täielik kood siin .

Nagu alati, peame sisse registreerima lühikoodi sisaldab / 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 ApeeScape_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' ); }

Meil on siin veel kaks asja teha.

  1. Salvesta meie salvestatud üksuste leht.
  2. Veenduge, et kui kasutaja eemaldab salvestatud üksuse, kaob see salvestatud üksuste lehelt.

Esimese ülesande jaoks leiate vajaliku CSS-koodi siin .

Teise jaoks hõlmab see natuke esiotsa skriptimist.

Selle täieliku JavaScripti koodi leiate siin .

Nagu näete real 52, otsisin div-i klassi „toptal-saved-item”.

Seejärel kontrollime ridadel 70-75, kas sellel vanemdivil on klassi toptal-saved-element.

Kui see juhtub, peidame oma üksuse fadeOut abil ja eemaldame siis, kui animatsioon on läbi, üksuse ekraanilt täielikult.

Nüüd liigume raskema osa juurde - muutes selle modulaarseks.

Muutke pistikprogramm modulaarseks.

Modulaarse pistikprogrammi põhiline määratlus on:

Laiendatav ehk moodulkood on kood, mida saab muuta, sellega suhelda, sinna lisada või manipuleerida - seda kõike ilma põhikoodibaasi muutmata.

Selle pistikprogrammi osas veendun, et kasutajad saaksid salvestatud üksuste lehel HTML-i muuta.

Niisiis peame oma register_saved_shortcode() -is mõned muudatused tegema meetod:

  • Muuda html_to_return kuni inner_html_to_return kõikjal, kus me tahame, et kasutajad saaksid HTML-i muuta. Veenduge, et meie inner_html_to_return esimese deklaratsiooni muutuja on “=” ilma sellele eelneva punktita.
  • Kasutage apply_filters() meetod meie filtri registreerimiseks.

Nende kahe muudatusega peaksite jõudma millegi sarnaseni seda .

Kui kasutajad soovivad meie koodiga suhelda, saavad nad oma functions.php sisse lisada midagi sellist fail:

Tõlkefailide genereerimine.

Tõlkimine on väga oluline, kuna see võimaldab WordPressi kogukonna liikmetel ja polüglottidel teie pistikprogrammi tõlkida, muutes selle kättesaadavaks mitte-ingliskeelsetele saitidele.

Sellest lähtuvalt uurime mõningaid tehnilisi üksikasju selle kohta, kuidas WordPress tõlkidega tegeleb.

WordPress kasutab GNU gettext tõlkimise lokaliseerimisraamistik. Selles raamistikus on kolme tüüpi faile:

  • Kaasaskantava objekti mall (POT)
  • Kaasaskantav objekt (PO)
  • Masinaobjekt (MO)

Kõik need failid tähistavad tõlkeprotsessi etappi.

POT-faili genereerimiseks vajame programmi, mis otsib WordPressi koodi ja saadab kogu teksti meie tõlkefunktsioonidesse, näiteks __e() ja _e(). Tõlkefunktsioonide kohta saate lähemalt lugeda siin .

Tõlgime siin teksti POT-failist, salvestades nii inglise kui ka tõlke PO-faili ja teisendame PO-faili MO-failiks.

Selle käsitsi tegemine võtab palju aega, sest iga pluginas oleva tõlgitava faili jaoks peaksite kirjutama paar rida koodi. Õnneks on parem viis, kasutades käepärast väikest pistikprogrammi nimega Loco Translate.

Kui olete selle installinud ja aktiveerinud, minge aadressile Hull tõlk > Pluginad> ApeeScape Save.

Sealt klõpsake Redigeeri malli, seejärel Sünkrooni ja Salvesta. See muudab meie toptal-save.pot fail meie keelte kaustas.

Nüüd on pistikprogramm tõlkimiseks saadaval.

Ehitage oma WordPressi pistikprogramm kohe.

Oleme selles artiklis loonud üsna lihtsa pistikprogrammi, kuid selle käigus järgisime tavasid ja standardeid, mis võimaldaksid meil seda pistikprogrammi hõlpsalt hooldada ja laiendada.

Oleme WordPressi funktsioone kasutanud viisil, mis ei kahjusta platvormi üldist jõudlust.

Kas see on lihtne pistikprogramm või keeruline, olenemata sellest, kas olete individuaalne arendaja või a WordPressi arendusettevõte , kavandamine ja järgimine parimad tavad on tugeva pistikprogrammi loomise võti.

Scala vs Java: Miks peaksin Scalat õppima?

Tehnoloogia

Scala vs Java: Miks peaksin Scalat õppima?
Kasvav kasv: tehke selle avatud lähtekoodiga oma kohordianalüüs

Kasvav kasv: tehke selle avatud lähtekoodiga oma kohordianalüüs

Andmeteadus Ja Andmebaasid