Chcete vytvoriť a WordPress Plugin ? Tento tutoriál vás naučí, ako na to.
Pluginy prispievajú k popularite WordPress, pretože umožňujú používateľom bez znalosti kódovania vytvárať úžasné webové stránky.
Existuje viac ako 50 000 pluginov rWordPress adresár určené na rôzne účely. Nájdete WordPress pluginy pre prihlásenie na odber noviniek , zabezpečenia et l'e-commerce . Stačí pomenovať.
Bez nich je web WordPress len zbierkou statických obrázkov a blokov textu. S pluginmi môže redakčný systém dosiahnuť neuveriteľnú úroveň prispôsobenia.
Či už potrebujete vlastný doplnok pre svoje webové stránky alebo chcete vytvoriť WordPress Plugin a speňažiť to, poďme na to.
Otázky fréquemment posées
Zarábajú doplnky WordPress peniaze?
Áno. THE WordPress pluginy priniesť peniaze. Doplnok môžete predávať na svojej webovej lokalite alebo na trhu tretej strany.
CodeCanyon, Themeforest a Mojo inzercia sú 3 najlepšie webové stránky na predaj doplnkov.
Môžete tiež pridať bezplatnú verziu svojho doplnku do úložiska WordPress a ponúknuť prémiovú verziu s ďalšími funkciami.
Je ťažké vytvoriť doplnky WordPress?
Vytvorenie a WordPress Plugin je pomerne jednoduché a ťažké, v závislosti od požadovaných funkcií.
Vytvorenie doplnku je jednoduché, ak ste už oboznámení so základmi vývoja WordPress a programovania PHP. Ak nie, môže to byť veľmi ťažké. Najlepšie je začať s jednoduchým doplnkom, ako je uvedené v tejto príručke.
Koľko zarábajú vývojári doplnkov?
Podľa Zip Recruiter, priemerná hodinová sadzba pre vývojárov WordPress pluginy v Spojených štátoch je 35 dolárov za hodinu. To vyjde na približne 72 000 dolárov ročne a 6 000 dolárov mesačne.
Ak predáte svoj plugin, môžete zarobiť až 5 000 $ mesačne, v závislosti od počtu predajov. Ponuka služieb prispôsobenia doplnkov vám môže zarobiť od 20 do 200 USD za hodinu.
Čo budete potrebovať na vytvorenie doplnku WordPress
Ak chcete vytvoriť doplnok, nemusíte byť skúsený vývojár WordPress. Na začiatok potrebujete iba základné znalosti kódovania.
- 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 doplnkov. Na vytvorenie doplnku WordPress je preto kľúčové pochopiť ich základy.
- Zoznámenie sa s WordPress: je užitočné zozná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ť funkčnosť WordPress priamou interakciou s vaším WordPress pomocou určitých funkcií PHP.
Vytvorenie doplnku WordPress a pridanie kódu niečo urobí iba vtedy, ak zavoláte funkciu PHP pomocou háku. Háčiky umožňujú vášmu doplnku interagovať s WordPress bez toho, aby ste museli 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:
WordPress kód je založený na funkciách, ktoré umožňujú interakciu akéhokoľvek kódu tretej strany s WordPress. Preto v pluginoch a témach nájdete množstvo funkcií. Každá funkcia má svoj názov, za ktorým nasledujú zložené zátvorky a kód vo vnútri zátvorky.
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 zavolať priamo vo svojom doplnku WordPress zadaním sticky_header(), kde chcete spustiť kód. Je to však zlá prax, pretože sa môžete stretnúť s problémami. Tu sú ďalšie dva dôvody, prečo by ste nemali volať funkcie priamo v kóde.
Po prvé, priame volanie funguje iba pre základné funkcie, ako je pridávanie obsahu do súboru témy. Pri použití tohto prístupu budete musieť volať funkcie viackrát, aby ste ich mohli použiť na viacerých miestach, čo je časovo náročné a ťažkopádne v kódových súboroch.
Ručné volanie funkcie môže byť tiež zložité, ak ste v kódovaní nováčik. Pri vytváraní zásuvných modulov je najlepšie ich pripevniť na háčik. To vám ušetrí vyvolávanie funkcie na viacerých miestach.
Háčiky WordPress:
Hák je špecifický bod v kóde WordPress, kde môžete vykonávať svoje vlastné funkcie. Existujú dva typy háčikov: akčné háčiky a háčiky na filtre.
Akčné háčiky
Akčné háky vám umožňujú vykonávať vlastné funkcie v konkrétnom čase v cykle spustenia WordPress. Takto vyzerá syntax akčného háku.
add_action('hook_name', 'my_custom_function');Le názov_háku je názov akčného háku, ktorý chcete použiť.
Vo WordPresse je niekoľko akčných háčikov. 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 na pripojenie funkcie lepiacej hlavičky vyššie k háku.
add_action( 'wp_footer', 'sticky_header' );Táto funkcia vykoná funkciu sticky_header(), keď sa zavolá hák akcie wp_footer. Funkciu môžete tiež pripojiť ku konkrétnemu háčiku nahradením wp_footer názvom háčika podľa vášho výberu.
Napríklad:
add_action( 'init', 'sticky_header' );Toto spustí funkciu lepiacej hlavičky, keď sa zavolá akcia WordPress init.
Filtračné háčiky
Háčiky filtra vám umožňujú upraviť údaje pred ich zobrazením alebo uložením do databázy. Tu je príklad háčika filtra, ktorý zmení názov blogového príspevku na všetky veľké písmená.
add_filter( ‘the_title’, ‘uppercase_title’ );
function uppercase_title( $title ) {
return strtoupper( $title );
}Táto funkcia akceptuje jediný argument, $title, ktorý je pôvodným názvom 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 filtračnými háčikmi
Akčné háky vám umožňujú vykonávať vlastné funkcie v konkrétnom čase v cykle spustenia WordPress. Vo vyššie uvedenom príklade akčný hák wp_footer sa volá tesne pred značkou.
Háčiky filtrov vám na druhej strane umožňujú upravovať údaje pri ich prechode cez kódovú základňu WordPress.
Ako vo vyššie uvedenom príklade, hák filtra nadpis umožňuje upraviť názov blogového príspevku pred jeho zobrazením na webovej lokalite.
Krok 2: Nastavte testovacie prostredie
Druhým krokom pri vytváraní WordPress pluginu je nastavenie testovacieho alebo vývojového prostredia. Cieľom je vyhnúť sa experimentovaniu na skutočnej stránke.
Vytvorenie doplnku niekedy vyžaduje tam a späť. Môžete tiež urobiť chyby, ktoré poškodia váš web.
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áš plánubytovanie podporuje vytvorenie testovacej lokality, môžete ju tiež použiť. Tu použijeme prvé riešenie.
Ak chcete nastaviť testovacie prostredie, urobíme to stiahnuť lokálne , vývojový nástroj pre 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, nastavte prostredie a vytvorte prihlasovacie údaje WordPress.
Po dokončení. Kliknite na tlačidlo Pridať lokalitu. Po pridaní svojho webu vyberte svoj web na miestnom paneli a spustite panel správcu WordPress.
Po otvorení prihlasovacej stránky správcu použite používateľské meno a Heslo WordPress ktoré ste vytvorili vyššie, aby ste získali prístup k vášmu informačnému panelu.
Hotovo. Vaše testovacie prostredie je pripravené. Začnime s vytváraním doplnku WordPress.
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ý doplnok nainštalovaný na webe WordPress bude mať priečinok v tomto adresári. Pre váš plugin preto budete musieť 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 pretože je to názov doplnku, ktorý chceme vytvoriť.
Krok 4: Vytvorte hlavný súbor PHP pre váš doplnok
Po vytvorení priečinka doplnku je ďalším krokom pridanie súboru PHP do tohto priečinka. Tu budú k dispozícii kódy a funkcie vášho pluginu.
Pre tento tutoriál potrebujeme iba jeden súbor PHP pre jednoduchý doplnok, ktorý vytvorí lepiacu hlavičku vo WordPress.
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 pluginu, ako na obrázku nižšie.
Keď je súbor pripravený, je čas pridať do doplnku nejaké informácie.
Krok 5: Nakonfigurujte informácie o doplnku
Tiež známy ako hlavička súboru doplnku, informácie o vašom doplnku sú blok komentárov PHP, ktorý obsahuje podrobnosti o vašom doplnku, ako je názov doplnku, verzia, adresa URL, meno autora a jeho webová stránka, licencia atď.
Toto sú informácie, ktoré uvidíte na stránke doplnku WordPress po nainštalovaní doplnku.
Môžete nájsť hlavička súboru pluginu v kódexe WordPress . Vyzerá to takto.
Stačí skopírovať a prilepiť tento kód do súboru PHP vášho doplnku a potom upraviť podrobnosti tak, aby vyhovovali vášmu doplnku. V našom prípade bude čítačka doplnku s lepiacou hlavičkou 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 lepivej hlavičky, ktorý sme použili pri učení sa funkcií a háčikov WordPress vyššie. Tu je návod.
Otvorte súbor PHP svojho doplnku. Pod podrobnosťami hlavičky skopírujte a prilepte tieto útržky kódu do hlavného súboru PHP vášho doplnku 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 sa aktivuje, 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žite adresu....
Uložte kód a je to. Úspešne ste vytvorili doplnok WordPress, vďaka ktorému je hlavička vašej webovej stránky lepkavá, keď ju používatelia posúvajú.
Krok 7: Aktivujte doplnok. V akcii.
Vráťte sa na svoju stránku a aktivujte doplnok.
Keď sa posúvate cez živú verziu lokality, hlavička vašej lokality zostane v hornej časti stránky.
Keď uvidíte účinok nového doplnku na svojej ukážkovej stránke, je čas vyskúšať ho na vašej skutočnej stránke.
Predtým sa uistite, že ste plugin otestovali na chyby a zraniteľnosti. V prípade potreby ich vyriešte. Ako preventívne opatrenie zálohujte svoju stránku WordPress pred nasadením nového doplnku.
Ak ste spokojní s výkonom doplnku na vašom webe, môžete svoj doplnok nahrať do úložiska doplnkov WordPress. Keďže majitelia webových stránok to používajú zadarmo, dostanete spätnú väzbu o tom, čo zlepšiť a ako to urobiť.
A ak chcete pomocou svojho pluginu zarobiť peniaze, môžete ho predávať na jednej z webových stránok, ktoré sme uviedli vyššie
záver
Ak ste sa dostali až sem, dáte mi za pravdu, že vytvorenie doplnku WordPress je pomerne jednoduché. Podľa pokynov v tejto príručke budete môcť vytvoriť základný doplnok WordPress. Môžete experimentovať s ľubovoľným množstvom funkcií a zlepšiť 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.
