Želite li naučiti kako napraviti kratki kod u WordPressu?
Učenje kako da kreirate kratki kod u WordPress-u može biti efikasan način da prilagodite svoje postove i stranice. Međutim, ako ste novi u procesu, možda će vam biti teško shvatiti kako koristiti takvu funkciju na svojoj web stranici.
Zato smo sastavili vodič koji će vam pomoći da počnete. Gledajući kako kratki kodovi funkcionišu i kako ih efikasno primijeniti, možete početi prilagođavati svoj sadržaj po svom ukusu bez potrebe za dodatnim dodacima.
U ovom članku ćemo razgovarati o tome šta su WordPress kratki kodovi i zašto biste mogli razmisliti o njihovoj upotrebi. Zatim ćemo vam pokazati kako da kreirate svoje.
Ali prije, ako nikad niste instalirali WordPress, otkrijte Kako instalirati WordPress blog u koracima 7 et Kako pronaći, instalirati i aktivirati WordPress temu na svom blogu
Onda se vratimo na pitanje zašto smo ovde.
Šta su WordPress kratki kodovi?
WordPress prečice djeluju kao prečice koje vam omogućavaju da brzo ugradite elemente u objavu ili stranicu. To su obično jedan red koda zatvoren u uglaste zagrade. Na primjer :
[exemplecodehortcode]Ovaj kod će prikazati unaprijed određenu funkciju na prednjem dijelu vaše web stranice.
WordPress prvi put uveo kratke kodove sa oslobađanjem od Shortcode API. Ovo je korisnicima olakšalo dodavanje atraktivnih elemenata svojim objavama i stranicama, kao što su Google Maps ili Facebook dugme "Sviđa mi se".
Postoji u WordPress-u defaultt šest kratkih kodova :
- Caption: Omotajte titlove oko sadržaja
- galerija : prikazuje galerije slika
- zvučni: ugrađuje i reprodukuje audio fajlove
- video : ugrađuje i reprodukuje video datoteke
- playlist : prikazuje kolekciju audio ili video datoteka
- ugraditi : obavija inline elemente
Također ćete naići na dvije osnovne vrste formatiranja kratkog koda: self-closing et enclosing.
Shortcodes self-closing mogu stajati samostalno i nije im potrebna završna oznaka.
U međuvremenu, enclosing okružite sadržaj koji želite da uredite i prisilite vas da ručno zatvorite oznaku. Na primjer, možete ugraditi YouTube video tako što ćete premotati URL između oznaka embed et /embed :
Na primjer, ovo bi stvorilo sljedeći rezultat:
Neki od najbolji WordPress dodaci dolaze sa svojim vlastitim kratkim kodovima. Na primjer, WP obrasci et Kontakt 7 imaju kratke kodove koji vam omogućavaju da brzo ugradite a kontakt formular u postu ili stranici. Možete koristiti i dodatak poput MaxButtons za dodavanje kratkog koda dugmeta gdje god želite na vašoj web stranici.
Zašto biste trebali razmisliti o korištenju WordPress kratkih kodova?
Postoji mnogo razloga zašto možete koristiti WordPress kratke kodove. Na primjer, to je lakše i brže od učenja i pisanja dugog dijela koda u HTML-u. Osim toga, pomažu vam da vaš sadržaj bude čist i pristupačan.
Kratki kodovi se mogu koristiti za automatizaciju određenih funkcija koje više puta koristite. Na primjer, ako koristite dugme poziv na akciju (CTA) za svaki vaš članak, spremanje namenskog kratkog koda može biti brzo i praktično rješenje.
Treba napomenuti da Gutenberg urednik radi na isti način, oslanjajući se na upotrebu kratkih kodova. Omogućava korisnicima WordPress-a da dodaju nekoliko interaktivnih funkcija korištenjem blokova.
Takva metoda je mnogo pogodnija za početnike jer možete dodati sadržaj direktno na korisničkom sučelju. Međutim, WordPress blok editor je i dalje ograničen u onome što nudi. Srećom, dolazi s blokom shortcode, što vam omogućava da dodate prilagođeni sadržaj na svoje stranice.
Kako napraviti kratki kod u WordPressu
Ako već imate znanje o kodiranju, možete kreirati vlastite prilagođene kratke kodove. To vam daje potpunu kontrolu nad izgledom i funkcionalnošću vaše web stranice.
Hajde da vidimo kako da kreiramo prilagođeni WordPress kratki kod. U ovom vodiču ćemo dodati linkove društvenih medija na članak kao primjer.
Korak 1 – Kreirajte novu datoteku teme
Prije nego što počnete, dobra je ideja potpuno napravite sigurnosnu kopiju vaše WordPress web stranice. Također ćete morati kreirati zasebnu datoteku za svoj prilagođeni kratki kod izvan datoteke functions.php vašeg WordPress tema. Ovo će pružiti rezervno rješenje u slučaju da nešto krene po zlu.
Možete koristiti klijenta FTP (File Transfer Protocol) kao FileZilla za pristup datotekama tema vaše web stranice. Nakon što ste prijavljeni na svoju web stranicu, idite na wp-content> teme i pronađite svoju trenutnu fasciklu teme. U našem primjeru, to će biti owl press:
Otvorite svoju fasciklu WordPress tema, kliknite desnim tasterom miša na njega i pritisnite Kreirajte novu datoteku.
Imenujte svoj novi fajl custom-shortcodes.php zatim kliknite OK. Zatim ga možete urediti desnim klikom miša na njega i odabirom opcije Pogledaj/Uredi :
Ovo će otvoriti datoteku u vašem zadanom uređivaču teksta. Zatim samo trebate dodati sljedeći blok koda:
<?php ?>
Ovo osigurava da će se vaš novi fajl tumačiti kao PHP, što je skriptni jezik na kojem je WordPress izgrađen.
Zatim možete sačuvati promjene i zatvoriti datoteku. Obavezno označite sljedeće polje kako biste bili sigurni da će biti ažuriran na serveru i primijenjen na vašu web stranicu:
Zatim otvorite datoteku functions.php u istoj fascikli teme i dodajte sljedeću liniju koda na dno dokumenta:
include('shortcodes-personnalises.php');
Ovo će reći sistemu da uključi sve promjene koje napravite u datoteci custom-shortcodes.php u functions.php dok vam dozvoljava da ih razdvojite. Kada budete spremni, sačuvajte promjene i zatvorite datoteku.
Korak 2 - Kreirajte funkciju kratkog koda
Zatim ćete morati da kreirate funkciju kratkog koda, dajući joj uputstva šta da radi. Ponovo odaberite opciju Pogledaj/Uredi vašeg fajla custom-shortcodes.php. Upotrijebite sljedeći isječak koda da dodate akciju na koju ćete povezati svoju funkciju:
function subscribe_link(){
return 'Follow us on <a rel="nofollow" href="https://twitter.com/BlogPasCher">Twitter</a>';
}Zatim ćete morati dodati funkciju povratnog poziva, koja će se pokrenuti kada se aktivira zakačivanje. Dodavanje sljedeće linije koda direktno nakon gore spomenutog reći će WordPressu da je vaša funkcija kratki kod:
add_shortcode('sabonner', 'subscribe_link');Kada kreirate kratki kod pomoću funkcije add_shortcode, dodjeljujete oznaku kratkog koda “ ($tag) " i odgovarajuću zakačicu funkcije " ($func) koji će se pokrenuti svaki put kada se koristi prečica.
Drugim riječima, ako je oznaka kratkog koda [subscribe], onda je kuka 'subscribe_link' preusmjerava posjetitelja na navedeni URL.
Stoga cijeli kod koji koristite u svom fajlu shortcodes-personnalises.php izgledat će ovako:
Treba napomenuti da prilikom imenovanja oznaka treba koristiti samo mala slova, iako se mogu koristiti donje crte. To je takođe ključno izbjegavajte korištenje crtica, jer može ometati druge kratke kodove.
Korak 3 – Dodajte kratki kod za samozatvaranje na web stranicu
Sada možete testirati svoj početni kod kao samozatvarajući kratki kod na vašoj WordPress stranici. Koristeći WordPress blok editor, možete umetnuti oznaku [subscribe] direktno u objavu:
Ovo će prikazati sljedeći sadržaj posjetiteljima vaše web stranice:
Ako ste zadovoljni ovim kratkim kodom, ne morate ništa drugo raditi. Međutim, ako ga želite prilagoditi, možete preskočiti na sljedeći korak.
Korak 4 - Dodajte parametre kratkom kodu
Možete prilagoditi kratki kod "pretplati se" za dodatnu funkcionalnost za prikaz drugih linkova društvenih medija. To možete učiniti dodavanjem parametra za izmjenu URL-a.
sipati dodati atribute upravljanja, potrebno je da otvorite datoteku custom-shortcodes.php i dodajte sljedeći kod:
function subscribe_link_att($atts) {
$default = array(
'link' => '#',
);
$a = shortcode_atts($default, $atts);
return 'Follow us on '.$a['link'];
}
add_shortcode('sabonner', 'subscribe_link_att');Ovo će vam omogućiti da prilagodite veze u oznaci kratkog koda kako biste ih dodali Gutenberg editoru. Možete ga zalijepiti preko prethodnog koda u datoteci custom-shortcodes.php. Trebalo bi izgledati otprilike ovako:
Dodavanje shortcode_atts() funkcija će kombinirati korisničke atribute sa svim poznatim atributima, a svi podaci koji nedostaju bit će zamijenjeni njihovim zadanim vrijednostima. Kada budete spremni, sačuvajte promjene i zatvorite datoteku.
Korak 5 - Testirajte postavke
Sada možete testirati ažurirani kratki kod u WordPress Block Editoru. U našem primjeru, testiramo naše Twitter i Facebook veze sa sljedećim kratkim kodovima:
[subscribe link='https://www.facebook.com/live.blogpascher']Facebook[/subscribe]
[subscribe link='https://twitter.com/BlogPasCher']Twitter[/subscribe]
Ovo će proizvesti sljedeći rezultat na front-endu:
Ovaj samozatvarajući kratki kod prikazuje posjetiteljima direktne URL-ove vaših društvenih profila. Međutim, možda biste željeli da ova funkcija izgleda malo uglađeno.
Na primjer, moći ćete kreirati priloženu verziju koja vam omogućava da u potpunosti prilagodite sidreni tekst koji se prikazuje korisnicima kada se spremaju kliknuti na njega. Pokazat ćemo vam kako to učiniti u sljedećem koraku.
Korak 6 – Kreirajte kratki kod za zatvaranje
Kratki kod koji se zatvara bit će formatiran na isti način kao prethodni primjer autoclose. Međutim, uključit će dodatni parametar za funkciju.
Prvo, moraćete da dodate $content = null, koji identifikuje ovu funkciju kao kratki kod. Zatim možete dodati do_shortcode iz WordPress-a, koji će pretraživati sadržaj za kratke kodove.
U dosijeu custom-shortcodes.php, dodajte novi kratki kod:
function subscribe_link_att($atts, $content = null) {
$default = array(
'link' => '#',
);
$a = shortcode_atts($default, $atts);
$content = do_shortcode($content);
return 'Suivez nous sur <a href="'.($a['link']).'" style="color: blue">'.$content.'</a>';
}
add_shortcode('sabonner', 'subscribe_link_att');Kada budete spremni, vaš fajl custom-shortcodes.php trebalo bi izgledati ovako:
Prethodni kod ima atribut "stil" dodatno, što će promijeniti sidreni tekst u plavu boju. Ne zaboravite da sačuvate promene kada završite.
Korak 7 – Dodajte kratki kod na web stranicu
Sada možete umetnuti svoj kratki kod u uređivač blokova WordPress-a da vidite konačni rezultat:
Kao što ste primijetili, možete lako promijeniti URL-ove stranica na društvenim mrežama i sidreni tekst koji se prikazuje posjetitelju pomoću ovog kratkog koda omotača. U ovom slučaju, mi smo izabrali " Facebook " et Twitter :
Tamo ! Sada ste kreirali prilagođeni kratki kod za veze za pretplatu na vašim stranicama i objavama. Imajte na umu da se svi gore spomenuti koraci mogu modificirati kako bi se kreirale razne vrste elemenata koristeći WordPress funkciju Shortcodes.
Dodavanje dodatne funkcionalnosti vašoj WordPress web stranici je mnogo lakše sa kratkim kodovima. Možete ih koristiti za personalizaciju postojećeg sadržaja i dodavanje interaktivnih funkcija, kao što su obrasci za kontakt, galerije slika ili linkovi za pretplatu.
Ostali preporučeni resursi
Također vas pozivamo da se konzultirate sa resursima u nastavku kako biste otišli dalje u nadzor i kontrolu vaše web stranice i bloga.
- Kako kreirati plutajuće dugme sa Z indeksom sa Elementorom
- Kada i kako instalirati WordPress u poddirektorijum
- Kako napraviti jednostavan Gutenberg Block WordPress dodatak
- Kako dodati prilagođene fontove na WordPress web stranicu
zaključak
U ovom članku naučili smo kako da kreirate sopstveni kratki kod u WordPress-u. Ako imate bilo kakvih nedoumica ili sugestija, javite nam u roku komentari.
Međutim, takođe ćete moći da se konsultujete sa našim sredstva, ako vam treba više elemenata za provođenje projekata kreiranja internetskih stranica, savjetujući se s našim vodičem o Izrada bloga WordPress ili onaj on Divi: najbolja WordPress tema svih vremena.
U međuvremenu, ovaj članak podijelite na svojim različitim društvenim mrežama.
...
