Chcete si vytvoriť plugin pre WordPress? Tento návod vás naučí ako.

Pluginy prispievajú k popularite WordPressu, pretože umožňujú používateľom bez znalostí programovania vytvárať úžasné webové stránky.

Existuje viac ako 50 000 pluginov rWordPress adresár  určené na rôzne účely. Nájdete tu pluginy WordPressu pre prihlásenie sa na odber noviniek , zabezpečenia et  elektronický obchod . Stačí pomenovať.

Bez nich je webová stránka WordPress len zbierkou statických obrázkov a blokov textu. S pluginmi môže systém správy obsahu dosiahnuť neuveriteľnú úroveň prispôsobenia.

Či už potrebujete vlastný doplnok pre svoju webovú stránku alebo si chcete vytvoriť doplnok pre WordPress a speňažiť ho, začnime.

---

Obsah

---

Otázky fréquemment posées

---

Čo budete potrebovať na vytvorenie doplnku WordPress

Na vytvorenie pluginu nemusíte byť expertom na WordPress. Na začiatok potrebujete len základné znalosti programovania.

• Základné znalosti programovania v PHP: WordPress pluginy sú napísané v PHP, takže by ste mali pochopiť jazyk a jeho syntax skôr, ako začnete.
• Základné HTML a CSS:  HTML a CSS vám umožňujú ovládať zobrazenie a vzhľad vašich pluginov. Preto je pochopenie ich základov kľúčové pre vytvorenie pluginu pre WordPress.
• Zoznámenie sa s WordPress:  Je užitočné oboznámiť sa s platformou WordPress a jej hlavnými funkciami, ako aj s WordPress Codex (online manuál pre vývoj WordPress).
• Vývojové prostredie: Ak chcete svoj doplnok vyvinúť a otestovať, musíte si nainštalovať WordPress na svoj lokálny počítač alebo na vývojársku stránku. To vám umožní otestovať váš doplnok bez ovplyvnenia aktívnej webovej stránky. V ďalšej časti vám ukážeme, ako to urobiť.
• Textový editor: Na napísanie kódu pluginu budete potrebovať textový editor. K dispozícii je veľa možností, napríklad Svznešený Text, Atóm et Kód Visual Studio.

---

Ako vytvoriť doplnok WordPress v 7 krokoch

Krok 1: Pochopte, ako fungujú doplnky WordPress

Pretože WordPress je napísaný v programovacom jazyku, každý so znalosťami kódovania môže pristupovať a upravovať kód WordPress.

Presne takto fungujú pluginy. Umožňujú vám upravovať a rozširovať funkcie WordPressu priamou interakciou s vašou stránkou WordPress pomocou určitých funkcií PHP.

Vytvorenie vášho pluginu pre WordPress a pridanie kódu bude fungovať iba vtedy, ak zavoláte funkciu PHP pomocou hooku. Hooky umožňujú vášmu pluginu interagovať s WordPressom bez nutnosti upravovať základné súbory.

Pozrime sa na vzťah medzi hranatými zátvorkami a funkciami, aby sme pochopili základy WordPress pluginov.

Funkcie WordPress:

Kód WordPressu je postavený na funkciách, ktoré umožňujú interakciu akéhokoľvek kódu tretej strany s WordPressom. Preto nájdete v pluginoch a témach veľa funkcií. Každá funkcia má svoj vlastný názov, za ktorým nasledujú zložené zátvorky a kód vo vnútri zátvoriek.

Tu je príklad:

function sticky_header() {

  ?>

  <script>

  // Select the header element

  var header = document.querySelector(‘header’);

  // Get the offset position of the header

  var sticky = header.offsetTop;

  // Add the sticky class to the header when you reach its scroll position. Remove “sticky” when you leave the scroll position

  function addSticky() {

    if (window.pageYOffset > sticky) {

      header.classList.add(“sticky”);

    } else {

      header.classList.remove(“sticky”);

    }

  }

  // Add the sticky class to the header when you scroll the page

  window.onscroll = function() {

    addSticky();

  };

  </script>

  <?php

}

add_action( ‘wp_footer’, ‘sticky_header’ );

Túto funkciu môžete volať priamo vo svojom plugine WordPress zadaním `sticky_header()` na miesto, kde chcete, aby sa kód spustil. Toto je však zlý postup, pretože pravdepodobne narazíte na problémy. Tu sú ďalšie dva dôvody, prečo by ste nemali volať funkcie priamo vo svojom kóde.

Po prvé, priame volania fungujú iba pre základné funkcie, ako je pridávanie obsahu do súboru témy. Okrem toho, použitie tohto prístupu vyžaduje opakované volanie funkcií na ich použitie na viacerých miestach, čo je časovo náročné a zväčšuje súbory kódu.

Manuálne volanie funkcie môže byť tiež zložité, ak ste v kódovaní nováčikom. Pri vytváraní pluginov je najlepším postupom pripojiť ich k hooku. Vďaka tomu nebudete musieť volať funkciu na viacerých miestach.

WordPress háčiky 

Hook je špecifický bod v kóde WordPressu, kde môžete spúšťať vlastné funkcie. Existujú dva typy hookov: akčné hooky a filtrovacie hooky.

Akčné háčiky

Akčné hooky vám umožňujú spúšťať vlastné funkcie v konkrétnom bode cyklu vykonávania WordPressu. Tu je syntax akčného hooku.

add_action('hook_name', 'my_custom_function');

Le  názov_háku  je názov akčného hooku, ktorý chcete použiť.

Vo WordPresse existuje niekoľko akčných hookov. Nájdete ich v codex WordPress.

moja_vlastna_funkcia  je funkcia, ktorá obsahuje kód, ktorý chcete spustiť. Táto funkcia musí byť definovaná pred funkciou ADD_ACTION.

Syntax bude vyzerať takto, aby sa funkcia lepkavej hlavičky pripojila k hooku.

add_action( 'wp_footer', 'sticky_header' );

Táto funkcia vykoná funkciu sticky_header() pri volaní hooku akcie wp_footer. Funkciu môžete tiež pripojiť ku konkrétnemu hooku nahradením wp_footer názvom vami zvoleného hooku.

Napríklad:

add_action( 'init', 'sticky_header' );

Toto vykoná funkciu lepkavej hlavičky pri volaní akcie init vo WordPresse.

Filtračné háčiky

Filterové hooky vám umožňujú upravovať údaje pred ich zobrazením alebo uložením do databázy. Tu je príklad filtračného hooku, ktorý zmení názov blogového príspevku na veľké písmená.

add_filter( ‘the_title’, ‘uppercase_title’ );

function uppercase_title( $title ) {

  return strtoupper( $title );

}

Táto funkcia akceptuje jeden argument, $title, čo je pôvodný názov blogového príspevku.

Funkcia potom použije funkciu strtoupper() na konverziu názvu na veľké písmená a vráti upravenú hodnotu.

Rozdiel medzi akčnými a filtrovacími háčikmi

Akčné hooky vám umožňujú spúšťať vlastné funkcie v konkrétnom bode cyklu vykonávania WordPressu. Vo vyššie uvedenom príklade akčný hook wp_footer sa volá tesne pred značkou.

Filter hooky vám na druhej strane umožňujú upravovať dáta počas ich prenosu cez kódovú základňu WordPressu.

Ako v uvedenom príklade, háčik filtra nadpis umožňuje zmeniť názov blogového príspevku pred jeho zobrazením na webovej stránke.

Krok 2: Nastavte testovacie prostredie

Druhým krokom pri vytváraní pluginu pre WordPress je nastavenie testovacieho alebo vývojového prostredia. Cieľom je vyhnúť sa experimentovaniu na živej stránke.

Vytvorenie pluginu si niekedy vyžaduje opakované úpravy. Môžete tiež urobiť chyby, ktoré poškodia vašu webovú stránku.

Počítač môžete použiť ako lokálny server na hosťovanie testovacej stránky WordPress, kde môžete vytvoriť a otestovať doplnok.

Ak váš hostingový plán podporuje vytvorenie testovacej stránky, môžete použiť aj tú. My tu použijeme prvú možnosť.

Ak chcete nastaviť testovacie prostredie, urobíme to stiahnuť lokálne , vývojový nástroj na lokálne hosťovanie webových stránok WordPress.

Po dokončení sťahovania spustite softvér v počítači a kliknite ikona + v ľavom dolnom rohu vytvorte novú miestnu lokalitu.

Vyber z Vytvorte nový web a stlačte tlačidlo pokračovať.

Ďalej postupujte podľa pokynov na obrazovke a pridajte názov svojej stránky, nakonfigurujte prostredie a vytvorte si prihlasovacie údaje pre WordPress.

Po dokončení. Kliknite na tlačidlo Pridať lokalitu. Po pridaní vašej stránky vyberte svoju webovú stránku na lokálnom paneli a spustite panel správcu WordPressu.

Keď sa otvorí prihlasovacia stránka administrátora, použite užívateľské meno a Heslo WordPress ktoré ste vytvorili vyššie, aby ste získali prístup k vášmu informačnému panelu.

To je všetko. Vaše testovacie prostredie je pripravené. Začnime s vytváraním vášho WordPress pluginu.

Krok 3: Vytvorte priečinok s doplnkami

Keď je vaše testovacie prostredie na mieste, prvá vec, ktorú musíte urobiť, je vytvoriť súbor doplnku v adresári vašej lokality. V predvolenom nastavení WordPress ukladá všetky pluginy do adresára wp-content/plugin.

Každý plugin nainštalovaný na stránke WordPress bude mať v tomto adresári priečinok. Preto budete musieť pre svoj plugin vytvoriť priečinok v tomto adresári a pomenovať ho.

Pre tento tutoriál prejdeme do priečinka wp-content/plugin v adresári našej lokality. Tu je návod.

Poznámka:  Postup je rovnaký, ak používate prechodné miesto.

Na miestnom informačnom paneli kliknite na položku  Prejdite do priečinka lokality . Budete presmerovaní do adresára vašej lokality.

vybrať aplikácie v možnostiach kliknite na verejnosť potom wp-content. V tomto adresári uvidíte rôzne priečinky.

Otvorte priečinok pluginy a nový podpriečinok s názvom vášho doplnku. Tu použijeme Lepkavá hlavička keďže to je názov pluginu, ktorý chceme vytvoriť.

Krok 4: Vytvorte hlavný súbor PHP pre váš doplnok

Po vytvorení priečinka s pluginom je ďalším krokom pridanie súboru PHP do tohto priečinka. Tu sa bude nachádzať kód a funkcie vášho pluginu.

Pre tento tutoriál potrebujeme iba jeden PHP súbor pre jednoduchý plugin, ktorý vytvára lepivú hlavičku vo WordPresse.

V prípade komplexnejších doplnkov s pokročilými funkciami môžu byť v priečinku doplnkov rôzne typy súborov, ako napríklad CSS a javascript. V našom prípade postačí jeden PHP súbor.

Ak to chcete urobiť, vytvorte súbor PHP v priečinku s pluginom, ako je znázornené na snímke obrazovky nižšie.

Keď je súbor pripravený, je čas pridať do vášho pluginu nejaké informácie.

Krok 5: Nakonfigurujte informácie o doplnku

Informácie o vašom plugine, nazývané aj hlavička súboru pluginu, sú blokom komentárov PHP, ktorý obsahuje podrobnosti o vašom plugine, ako je názov pluginu, verzia, URL adresa, meno a webová stránka autora, licencia atď.

Toto sú informácie, ktoré vidíte na stránke pluginu WordPress po jeho nainštalovaní.

Môžete nájsť hlavička súboru pluginu v kódexe WordPress . Vyzerá to takto.

Jednoducho skopírujte a vložte tento kód do PHP súboru vášho pluginu a potom upravte podrobnosti podľa vášho pluginu. V našom prípade bude čítačka hlavičkových súborov pluginu vyzerať takto.

<?php

/*

Plugin Name: Sticky Header

Plugin URI: https://wordpress.org/plugins/sticky-header/

Description: Make your website header sticks to the top of every page on your website as users scroll.

Author: The Team

Author URI: https://blogpascher.com/sticky-header

Text Domain: Sticky Header 

Domain Path: /languages

*/

Po uložení tohto súboru ste vytvorili nový plugin a nájdete ho v zozname pluginov už nainštalovaných na vašej stránke.

Prihláste sa na panel WordPress svojej testovacej stránky a prejdite na Plugins>Plugins installés.

Uvidíte doplnok Sticky Header s podrobnosťami. Tu to je.

Teraz môžete doplnok aktivovať, ale neurobí nič, pretože sme doň zatiaľ nepridali žiadnu funkcionalitu. Takže prinútime náš plugin niečo urobiť.

Krok 6: Pridajte kód do doplnku

Aby sme to dosiahli, pridáme kód sticky hlavičky, ktorý sme použili pri čítaní o funkciách a hookoch WordPressu vyššie. Tu je postup, ako to urobiť.

Otvorte súbor PHP vášho pluginu. V časti s podrobnosťami skopírujte a vložte tieto úryvky kódu do hlavného súboru PHP vášho pluginu a uložte ho.

function sticky_header() {

  ?>

  <script>

  // Select the header element

  var header = document.querySelector(‘header’);

  // Get the offset position of the header

  var sticky = header.offsetTop;

  // Add the sticky class to the header when you reach its scroll position. Remove “sticky” when you leave the scroll position

  function addSticky() {

    if (window.pageYOffset > sticky) {

      header.classList.add(“sticky”);

    } else {

      header.classList.remove(“sticky”);

    }

  }

  // Add the sticky class to the header when you scroll the page

  window.onscroll = function() {

    addSticky();

  };

  </script>

  <?php

}

add_action( ‘wp_footer’, ‘sticky_header’ );

Tento kód robí dve základné veci,

La fonction sticky_header aktivuje sa, keď používateľ posúva stránku a zastaví sa, keď sa posúvanie zastaví.

Po druhé, akcia add_action('wp_footer', 'sticky_header'); používa adresu …..

Uložte kód a to je všetko. Úspešne ste vytvorili doplnok pre WordPress, ktorý nastaví hlavičku vašej webovej stránky ako stálu, keď používatelia posúvajú stránku nadol.

Krok 7: Aktivujte doplnok

Vráťte sa na svoju stránku a aktivujte doplnok.

Keď prechádzate živou verziou stránky, hlavička vašej stránky zostane v hornej časti stránky.

Keď uvidíte účinok nového pluginu na vašej demo stránke, je čas vyskúšať ho na vašej živej stránke.

Predtým, ako to urobíte, sa uistite, že ste plugin otestovali na chyby a zraniteľnosti. V prípade potreby ich opravte. Ako preventívne opatrenie, zálohujte svoju stránku WordPress pred nasadením nového doplnku.

Ak ste spokojní s výkonom pluginu na vašej stránke, môžete ho nahrať do repozitára pluginov WordPress. Keďže majitelia webových stránok ho používajú zadarmo, dostanete spätnú väzbu o tom, čo je potrebné vylepšiť a ako to implementovať.

A ak chcete na svojom plugine zarobiť peniaze, môžete ho predať na jednej z webových stránok, ktoré sme uviedli vyššie.

---

Záver

Ak ste sa dostali až sem, budete súhlasiť s tým, že vytvorenie pluginu pre WordPress je relatívne jednoduché. Podľa pokynov v tejto príručke budete môcť vytvoriť základný plugin pre WordPress. Môžete experimentovať s toľkými funkciami, koľko chcete, a vylepšovať funkčnosť svojho pluginu.

Vytváranie komplexných doplnkov prebieha rovnakým spôsobom. Viac funkcií znamená viac funkcií v súbore doplnku.

Skúšali ste niekedy vytvoriť doplnok WordPress? Poďme sa porozprávať o vašich skúsenostiach v sekcii komentárov nižšie.