Želite stvoriti a WordPress plugin ? Ovaj vodič će vas naučiti kako to učiniti.
Dodaci pridonose popularnosti WordPressa jer korisnicima bez znanja programiranja omogućuju stvaranje nevjerojatnih web stranica.
Postoji preko 50 dodataka u rWordPress imenik dizajniran za razne namjene. Naći ćete WordPress plugins za pretplata na newsletter , sigurnosti et e-trgovina . Samo ga nazovite.
Bez njih, WordPress web stranica samo je zbirka statičnih slika i blokova teksta. Pomoću dodataka sustav za upravljanje sadržajem može postići nevjerojatnu razinu prilagodbe.
Bilo da trebate prilagođeni dodatak za svoju web stranicu ili želite izraditi WordPress plugin i unovči to, idemo.
Često postavljana pitanja
Zarađuju li WordPress dodaci?
Da. THE WordPress plugins donijeti novac. Dodatak možete prodavati na svojoj web stranici ili na tržištu treće strane.
CodeCanyon, Themeforest i Mojo tržište su 3 najbolja web mjesta za prodaju dodataka.
Također možete dodati besplatnu verziju svog dodatka u WordPress repozitorij i ponuditi premium verziju s dodatnim značajkama.
Je li teško izraditi WordPress dodatke?
Stvaranje a WordPress plugin je relativno lako i teško, ovisno o značajkama koje želite.
Stvaranje dodatka jednostavno je ako ste već upoznati s osnovama WordPress razvoja i PHP programiranja. Ako niste, može biti jako teško. Najbolje je započeti s jednostavnim dodatkom, kao što je prikazano u ovom vodiču.
Koliko zarađuju programeri dodataka?
Prema Zip Recruiteru, prosječna satnica za programere WordPress plugins u Sjedinjenim Državama iznosi 35 dolara po satu. To iznosi oko 72 000 dolara godišnje i 6 000 dolara mjesečno.
Ako prodate svoj dodatak, možete zaraditi do 5 USD mjesečno, ovisno o broju prodaja. Ponuda usluga prilagodbe dodataka može vam zaraditi između 000 i 20 USD po satu.
Što vam je potrebno za izradu dodatka za WordPress
Da biste izradili dodatak, ne morate biti stručni programer za WordPress. Potrebno vam je samo neko osnovno znanje kodiranja da biste započeli.
- Osnovno znanje PHP programiranja: WordPress dodaci napisani su u PHP-u, pa biste trebali razumjeti jezik i njegovu sintaksu prije nego što počnete.
- Osnovni HTML i CSS: HTML i CSS vam omogućuju kontrolu prikaza i izgleda vaših dodataka. Stoga je ključno razumjeti njihove osnove za izradu WordPress dodatka.
- Poznavanje WordPressa: korisno je upoznati se s platformom WordPress i njezinim glavnim funkcijama, kao i s WordPress Codex (online priručnik za razvoj WordPressa).
- Razvojno okruženje: Da biste razvili i testirali svoj dodatak, trebate instalirati WordPress na vašem lokalnom računalu ili na razvojnom mjestu. To će vam omogućiti da testirate svoj dodatak bez utjecaja na aktivnu web stranicu. Pokazat ćemo vam kako to učiniti u sljedećem odjeljku.
- Uređivač teksta: Za pisanje koda dodatka trebat će vam uređivač teksta. Dostupne su mnoge opcije, poput Suzvišeni Tekst, Atom et Kôd Visual Studio.
Kako napraviti WordPress dodatak u 7 koraka
Korak 1: Shvatite kako rade WordPress dodaci
Budući da je WordPress napisan u programskom jeziku, svatko tko ima znanje programiranja može pristupiti i modificirati WordPress kod.
Upravo tako rade dodaci. Omogućuju vam izmjenu i proširenje funkcionalnosti WordPressa izravnom interakcijom s vašim WordPressom pomoću određenih PHP funkcija.
Stvaranje vašeg WordPress dodatka i dodavanje koda učinit će nešto samo ako PHP funkciju pozovete pomoću kuke. Kuke su ono što vašem dodatku omogućuje interakciju s WordPressom bez potrebe za uređivanjem osnovnih datoteka.
Pogledajmo odnos između uglatih zagrada i funkcija kako bismo razumjeli osnove dodataka za WordPress.
WordPress funkcije:
WordPress kôd izgrađen je na funkcijama koje omogućuju bilo kojem kodu treće strane interakciju s WordPressom. Zato ćete pronaći mnoge funkcije u dodacima i temama. Svaka funkcija ima svoje ime, nakon čega slijede zagrade i kod unutar zagrada.
Voici un su primjer:
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’ );Ovu funkciju možete pozvati izravno u svom WordPress dodatku upisivanjem sticky_header() gdje želite da se kôd pokrene. Ali to je loša praksa jer možete naići na probleme. Evo još dva razloga zašto ne biste trebali pozivati funkcije izravno u svom kodu.
Prvo, izravni poziv radi samo za osnovne funkcije, poput dodavanja sadržaja u datoteku teme. Također, koristeći ovaj pristup, morat ćete pozivati funkcije više puta da biste ih upotrijebili na više mjesta, što je dugotrajno i glomazno u kodnim datotekama.
Ručno pozivanje funkcije također može biti nezgodno ako ste novi u kodiranju. Kada stvarate dodatke, najbolje je pričvrstiti ih na kuku. To će vam uštedjeti potrebu pozivanja funkcije na više mjesta.
WordPress kuke:
Hook je određena točka u WordPress kodu gdje možete izvoditi vlastite prilagođene funkcije. Postoje dvije vrste kuka: akcijske kuke i filter kuke.
Akcijske udice
Akcijske kuke omogućuju vam izvršavanje prilagođenih funkcija u određeno vrijeme u ciklusu pokretanja WordPressa. Ovako izgleda sintaksa akcijske kuke.
add_action('hook_name', 'my_custom_function');Le ime_kuke je naziv radnje kuke koju želite koristiti.
Postoji nekoliko akcijskih kuka u WordPressu. Možete ih pronaći u codex WordPress.
moja_prilagođena_funkcija je funkcija koja sadrži kod koji želite izvršiti. Ova funkcija mora biti definirana prije funkcije ADD_ACTION.
Sintaksa će izgledati ovako za spajanje gornje funkcije ljepljivog zaglavlja na kuku.
add_action( 'wp_footer', 'sticky_header' );Ova funkcija izvršava funkciju sticky_header() kada se pozove radnja kuka wp_footer. Također možete pridružiti funkciju određenoj kuki tako da wp_footer zamijenite nazivom kuke po svom izboru.
Na primjer:
add_action( 'init', 'sticky_header' );Ovo će pokrenuti funkciju ljepljivog zaglavlja kada se pozove WordPress init radnja.
Kuke za filtere
Priključci za filtriranje omogućuju vam izmjenu podataka prije nego što se prikažu ili pohrane u bazu podataka. Ovdje je primjer kuke za filter koji mijenja naslov blog posta na velika slova.
add_filter( ‘the_title’, ‘uppercase_title’ );
function uppercase_title( $title ) {
return strtoupper( $title );
}Ova funkcija prihvaća jedan argument, $title, koji je izvorni naslov blog posta.
Funkcija zatim koristi funkciju strtoupper() za pretvaranje naslova u velika slova i vraća izmijenjenu vrijednost.
Razlika između akcijskih i filtarskih kuka
Akcijske kuke omogućuju vam izvršavanje prilagođenih funkcija u određeno vrijeme u ciklusu pokretanja WordPressa. U gornjem primjeru, akcijska udica wp_footer poziva se neposredno prije oznake.
S druge strane, kuke za filtriranje omogućuju vam izmjenu podataka dok prolaze kroz WordPress bazu koda.
Kao u gornjem primjeru, kuka za filter Naslov omogućuje uređivanje naslova blog posta prije nego što se prikaže na web stranici.
Korak 2: Postavite testno okruženje
Drugi korak u stvaranju WordPress dodatka je postavljanje testnog ili razvojnog okruženja. Cilj je izbjeći eksperimentiranje na stvarnom mjestu.
Stvaranje dodatka ponekad zahtijeva naprijed-natrag. Također možete napraviti greške koje će oštetiti vašu web stranicu.
Svoje računalo možete koristiti kao lokalni poslužitelj za hostiranje testne WordPress stranice na kojoj možete izraditi i testirati svoj dodatak.
Ako je vaš plansmještaj podržava stvaranje testnog mjesta, možete ga također koristiti. Ovdje ćemo koristiti prvo rješenje.
Mi ćemo postaviti testno okruženje preuzmi lokalno , razvojni alat za lokalno hostiranje WordPress web stranica.
Nakon što je preuzimanje završeno, pokrenite softver na računalu i kliknite + ikona u donjem lijevom kutu za stvaranje nove lokalne stranice.
Odabrati od Izradite novu stranicu a zatim pritisnite gumb nastaviti.
Zatim slijedite upute na zaslonu kako biste dodali naziv svoje web-lokacije, postavili okruženje i izradili podatke za prijavu na WordPress.
Nakon što završite. Kliknite na gumb Dodaj stranicu. Nakon dodavanja web-mjesta, odaberite svoje web-mjesto na lokalnoj nadzornoj ploči i pokrenite WordPress administratorsku nadzornu ploču.
Nakon što se otvori stranica za prijavu administratora, upotrijebite Korisničko ime i WordPress lozinka koje ste izradili iznad za pristup nadzornoj ploči.
Gotovo je. Vaše testno okruženje je spremno. Počnimo stvarati vaš dodatak za WordPress.
Korak 3: Stvorite svoju mapu dodataka
Nakon što je vaše testno okruženje postavljeno, prva stvar koju trebate učiniti je stvoriti datoteku dodatka u direktoriju vašeg web mjesta. Prema zadanim postavkama, WordPress pohranjuje sve dodatke u direktorij wp-content/plugin.
Svaki dodatak instaliran na WordPress stranici imat će mapu u ovom direktoriju. Stoga ćete za svoj dodatak morati stvoriti mapu unutar ovog direktorija i dati joj naziv.
Za ovaj vodič, otići ćemo do mape wp-content/plugin u našem lokalnom direktoriju stranica. Evo kako.
Napomena: Postupak je isti ako koristite posredničku stranicu.
Na lokalnoj nadzornoj ploči kliknite Idite na mapu stranice . Bit ćete preusmjereni na lokalni imenik web-mjesta.
odabrati aplikacije u opcijama kliknite na javni tada wp-sadržaja. Vidjet ćete različite mape u ovom direktoriju.
Otvorite mapu Dodaci i novu podmapu s nazivom vašeg dodatka. Ovdje ćemo koristiti Ljepljivo zaglavlje budući da je to naziv dodatka koji želimo stvoriti.
Korak 4: Napravite glavnu PHP datoteku za svoj dodatak
Nakon što stvorite mapu dodataka, sljedeći korak je dodavanje PHP datoteke u ovu mapu. Ovdje će biti dostupni kodovi i funkcije vašeg dodatka.
Za ovaj vodič potrebna nam je samo jedna PHP datoteka za jednostavan dodatak koji stvara ljepljivo zaglavlje u WordPressu.
Za složenije dodatke s naprednom funkcionalnošću, u mapi dodatka mogu postojati različite vrste datoteka, kao što su CSS i javascript. U našem slučaju dovoljna je jedna PHP datoteka.
Da biste to učinili, izradite PHP datoteku u mapi dodatka, kao na slici ispod.
Nakon što je datoteka spremna, vrijeme je da dodate neke informacije u svoj dodatak.
Korak 5: Konfigurirajte podatke o dodatku
Poznato i kao zaglavlje datoteke dodatka, informacije o vašem dodatku blok su PHP komentara koji uključuje pojedinosti o vašem dodatku kao što su naziv dodatka, verzija, URL, ime autora i njegovo web mjesto, licenca itd.
Ovo su informacije koje vidite na stranici WordPress dodatka nakon instaliranja dodatka.
Možete pronaći zaglavlje datoteke dodatka u WordPress kodeksu . Ovako izgleda.
Samo kopirajte i zalijepite ovaj kod u PHP datoteku vašeg dodatka, a zatim uredite detalje kako bi odgovarali vašem dodatku. U našem slučaju, čitač datoteke dodatka ljepljivog zaglavlja izgledat će ovako.
<?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
*/Nakon što spremite ovu datoteku, izradili ste novi dodatak i možete ga pronaći na popisu dodataka koji su već instalirani na vašoj stranici.
Prijavite se na WordPress nadzornu ploču testne stranice i idite na Plugins>Plugins installés.
Vidjet ćete dodatak Sticky Header s detaljima. Evo ga.
Sada možete aktivirati dodatak, ali on neće učiniti ništa jer mu još nismo dodali nikakve funkcije. Pa učinimo da naš dodatak učini nešto.
Korak 6: dodajte kod svom dodatku
Da bismo to učinili, dodat ćemo kod ljepljivog zaglavlja koji smo koristili prilikom učenja o funkcijama WordPressa i kukicama iznad. Evo kako.
Otvorite PHP datoteku dodatka. Pod pojedinostima zaglavlja kopirajte i zalijepite ove isječke koda u glavnu PHP datoteku dodatka i spremite je.
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’ );Ovaj kod radi dvije bitne stvari,
La fonction ljepljivo_zaglavlje aktivira se kada korisnik pomiče stranicu i zaustavlja se kada pomicanje prestane.
Drugo, akcija add_action('wp_footer', 'sticky_header'); koristi adresu....
Spremite kod i to je to. Uspješno ste izradili WordPress dodatak koji čini zaglavlje vaše web stranice ljepljivim kada se korisnici pomiču po njemu.
Korak 7: Aktivirajte dodatak. U akciji.
Vratite se na svoju stranicu i aktivirajte dodatak.
Kada se pomičete kroz verziju stranice uživo, zaglavlje vaše stranice ostat će na vrhu stranice.
Nakon što ste vidjeli učinak novog dodatka na svojoj demo stranici, vrijeme je da ga isprobate na svojoj stvarnoj stranici.
Prije toga provjerite jeste li dodatak testirali na pogreške i ranjivosti. Riješite ih, ako je primjenjivo. Kao mjera opreza, napravite sigurnosnu kopiju svoje WordPress stranice prije postavljanja vašeg novog dodatka.
Ako ste zadovoljni izvedbom dodatka na svojoj web stranici, možete prenijeti svoj dodatak u spremište dodataka WordPress. Kako ga vlasnici web stranica koriste besplatno, dobit ćete povratne informacije o tome što poboljšati i kako to učiniti.
A ako želite zaraditi sa svojim dodatkom, možete ga prodati na jednoj od web stranica koje smo gore naveli
Zaključak
Ako ste dogurali do sada, složit ćete se da je stvaranje WordPress dodatka relativno jednostavno. Slijedeći upute u ovom vodiču, moći ćete izraditi osnovni WordPress dodatak. Možete eksperimentirati s koliko god funkcija želite i poboljšati funkcionalnost svog dodatka.
Stvaranje složenih dodataka slijedi istu metodu. Više funkcionalnosti znači više funkcija u vašoj datoteci dodatka.
Jeste li ikada pokušali izraditi dodatak za WordPress? Razgovarajmo o vašem iskustvu u odjeljku za komentare u nastavku.
