Želite li naučiti kako stvoriti kratki kod u WordPressu?
Naučiti kako stvoriti kratki kod u WordPressu može biti učinkovit način za prilagodbu vaših postova i stranica. Međutim, ako ste novi u procesu, možda će vam biti teško shvatiti kako koristiti takvu značajku na svojoj web stranici.
Zato smo sastavili vodič koji će vam pomoći da počnete. Gledajući kako kratki kodovi rade i kako ih učinkovito primijeniti, možete početi prilagođavati svoj sadržaj svojim željama bez potrebe za dodatnim dodacima.
U ovom članku ćemo raspravljati o tome što su WordPress kratki kodovi i zašto biste mogli razmisliti o njihovoj upotrebi. Zatim ćemo vam pokazati kako sami stvoriti.
Ali prije, ako nikad niste instalirali WordPress, otkrijte Kako instalirati 7 korake WordPress blog et Kako pronaći, instalirati i aktivirati WordPress temu na svoj blog
Onda se vratimo zašto smo ovdje.
Što su WordPress kratki kodovi?
WordPress prečaci djeluju kao prečaci koji vam omogućuju brzo ugradnju elemenata u post ili stranicu. To je obično jedan redak koda zatvoren u uglaste zagrade. Na primjer :
[exemplecodehortcode]Ovaj će kod prikazati unaprijed određenu značajku na prednjoj strani vaše web stranice.
WordPress prvi uveo kratke kodove s oslobađanjem od Kratki kod API. To je korisnicima olakšalo dodavanje atraktivnih elemenata svojim objavama i stranicama, kao npr Google Maps ili Facebook gumb "Sviđa mi se".
Postoji u WordPressu zadanot šest kratkih kodova :
- naslov: Omotajte titlove oko sadržaja
- galerija : prikazuje galerije slika
- zvučni: ugrađuje i reproducira audio datoteke
- video : ugrađuje i reproducira video datoteke
- popis za reprodukciju : prikazuje zbirku audio ili video datoteka
- Ugraditi : obavija inline elemente
Također ćete naići na dvije osnovne vrste oblikovanja kratkog koda: self-closing et enclosing.
Kratki kodovi self-closing mogu stajati samostalno i ne trebaju im završnu oznaku.
U međuvremenu, enclosing okružite sadržaj koji želite urediti i prisiliti vas da ručno zatvorite oznaku. Na primjer, možete ugraditi YouTube video premotavanjem URL-a između oznaka embed et /embed :
Na primjer, to bi stvorilo sljedeći rezultat:
Neki od najbolji WordPress dodaci dolaze s vlastitim kratkim kodovima. Na primjer, WP obrasci et Kontaktirajte obrasca 7 imaju kratke kodove koji vam omogućuju da brzo ugradite a kontakt obrazac u postu ili stranici. Također možete koristiti dodatak poput MaxButtons za dodavanje kratkog koda gumba gdje god želite na svojoj 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 značajki koje više puta koristite. Na primjer, ako koristite gumb poziv na akciju (CTA) za svaki vaš članak, spremanje namjenskog kratkog koda može biti brzo i praktično rješenje.
Treba spomenuti da Gutenbergov urednik radi na isti način, oslanjajući se na korištenje kratkih kodova. Omogućuje korisnicima WordPress-a da dodaju nekoliko interaktivnih značajki korištenjem blokova.
Takva je metoda mnogo pogodnija za početnike jer sadržaj možete dodati izravno na korisničko sučelje. Međutim, WordPress blok uređivač još uvijek je ograničen u onome što nudi. Srećom, dolazi s blokom SHORTCODE, što vam omogućuje dodavanje prilagođenog sadržaja 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.
Pogledajmo kako stvoriti prilagođeni WordPress kratki kod. U ovom vodiču ćemo dodati veze na društvene mreže na članak kao primjer.
Korak 1 – Napravite novu datoteku teme
Prije nego što počnete, dobra je ideja da potpuno sigurnosno kopirajte svoju WordPress web stranicu. Također ćete morati stvoriti zasebnu datoteku za svoj prilagođeni kratki kod izvan datoteke functions.php vaš WordPress tema. To će osigurati rezervno rješenje u slučaju da nešto pođe po zlu.
Možete koristiti klijenta FTP (File Transfer Protocol) kao što su 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 mapu teme. U našem primjeru, to će biti sova preša:
Otvorite svoju mapu WordPress tema, desnom tipkom miša kliknite na njega i pritisnite Stvorite novu datoteku.
Imenujte svoju novu datoteku custom-shortcodes.php zatim kliknite OK. Zatim ga možete urediti tako da ga kliknete desnom tipkom miša i odaberete opciju Prikaži/Uredi :
Ovo će otvoriti datoteku u vašem zadanom uređivaču teksta. Zatim samo trebate dodati sljedeći blok koda:
<?php ?>
To osigurava da će se vaša nova datoteka tumačiti kao PHP, što je skriptni jezik na kojem je izgrađen WordPress.
Zatim možete spremiti promjene i zatvoriti datoteku. Obavezno označite sljedeći okvir kako biste bili sigurni da će biti ažuriran na poslužitelju i primijenjen na vašu web stranicu:
Zatim otvorite datoteku functions.php u istoj mapi teme i dodajte sljedeći redak koda na dno dokumenta:
include('shortcodes-personnalises.php');
To će reći sustavu da uključi sve promjene koje napravite u datoteci custom-shortcodes.php unutar functions.php dok vam dopušta da ih razdvojite. Kada budete spremni, spremite promjene i zatvorite datoteku.
Korak 2 - Izradite funkciju kratkog koda
Zatim ćete morati kreirati funkciju kratkog koda, dajući joj upute što treba učiniti. Ponovno odaberite opciju Prikaži/Uredi vaše datoteke custom-shortcodes.php. Upotrijebite sljedeći isječak koda da biste dodali radnju 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ćeg retka koda neposredno 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 funkcijsku kuku" ($func) koji će se pokrenuti svaki put kada se koristi prečac.
Drugim riječima, ako je oznaka kratkog koda [pretplati se], tada je kuka 'subscribe_link' preusmjerava posjetitelja na navedeni URL.
Stoga cijeli kod koji koristite u svojoj datoteci shortcodes-personnalises.php izgledat će ovako:
Treba napomenuti da prilikom imenovanja oznaka koristite samo mala slova, iako se mogu koristiti podvlake. Također je 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 svojoj WordPress stranici. Pomoću uređivača blokova WordPress-a možete umetnuti oznaku [subscribe] izravno u objavu:
To će posjetiteljima vaše web stranice prikazati sljedeći sadržaj:
Ako ste zadovoljni ovim kratkim kodom, ne morate raditi ništa drugo. 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 "pretplatiti se" za dodatnu funkcionalnost za prikaz drugih poveznica društvenih medija. To možete učiniti dodavanjem parametra za izmjenu URL-a.
Sipati dodati atribute upravljanja, morate otvoriti 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');To će vam omogućiti da prilagodite veze u oznaci kratkog koda kako biste ih dodali Gutenberg uređivaču. Možete ga zalijepiti preko prethodnog koda u datoteci custom-shortcodes.php. Trebalo bi izgledati otprilike ovako:
Dodavanje funkcija shortcode_atts(). kombinirat će korisničke atribute sa svim poznatim atributima, a svi podaci koji nedostaju bit će zamijenjeni njihovim zadanim vrijednostima. Kada budete spremni, spremite promjene i zatvorite datoteku.
Korak 5 - Testirajte postavke
Sada možete testirati ažurirani kratki kod u uređivaču blokova WordPress. 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]
To će proizvesti sljedeći rezultat na prednjem dijelu:
Ovaj samozatvarajući kratki kod posjetiteljima prikazuje izravne URL-ove vaših društvenih profila. Međutim, možda biste željeli da ova značajka izgleda malo uglađeno.
Na primjer, moći ćete izraditi priloženu verziju koja vam omogućuje da u potpunosti prilagodite tekst sidra koji se prikazuje korisnicima kada se spremaju kliknuti na njega. Pokazat ćemo vam kako to učiniti u sljedećem koraku.
Korak 6 – Izradite kratki kod za zatvaranje
Priloženi kratki kod bit će formatiran na isti način kao i prethodni primjer automatskog zatvaranja. Međutim, uključit će dodatni parametar za funkciju.
Prvo ćete morati dodati $content = null, koji ovu funkciju identificira kao kratki kod. Zatim možete dodati do_shortcode iz WordPressa, koji će pretraživati sadržaj za kratke kodove.
U dosjeu 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 trebao bi izgledati ovako:
Prethodni kod ima atribut " stil " dodatno, što će tekst sidra promijeniti u plavu boju. Ne zaboravite spremiti promjene kada završite.
Korak 7 – Dodajte kratki kod na web stranicu
Sada možete umetnuti svoj kratki kod u uređivač blokova WordPress da biste vidjeli konačni rezultat:
Kao što ste primijetili, pomoću ovog kratkog koda omota možete jednostavno promijeniti URL-ove stranica na društvenim mrežama i sidreni tekst koji se prikazuje posjetitelju. U ovom slučaju, mi smo odabrali " Facebook " et "Twitter" :
tamo ! Sada ste stvorili prilagođeni kratki kod za veze za pretplatu na svojim stranicama i objavama. Imajte na umu da se svi gore spomenuti koraci mogu izmijeniti za stvaranje svih vrsta različitih elemenata pomoću značajke WordPress Kratki kodovi.
Dodavanje dodatne funkcionalnosti vašoj WordPress web stranici puno je lakše s kratkim kodovima. Možete ih koristiti za personalizaciju postojećeg sadržaja i dodavanje interaktivnih značajki, kao što su obrasci za kontakt, galerije slika ili veze za pretplatu.
Ostali preporučeni resursi
Također vas pozivamo da se savjetujete sa donjim izvorima kako biste poboljšali i kontrolirali svoju web stranicu i blog.
- Kako stvoriti plutajući gumb sa Z indeksom s Elementorom
- Kada i kako instalirati WordPress u poddirektorij
- 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 stvoriti vlastiti kratki kod u WordPressu. Ako imate bilo kakvih nedoumica ili prijedloga, javite nam unutar Komentari.
Međutim, također ćete moći konzultirati naše sredstva, ako vam treba više elemenata za provođenje projekata kreiranja internetskih stranica, savjetujući se s našim vodičem na internetu Izrada bloga WordPress ili onaj koji je uključen Divi: najbolja WordPress tema svih vremena.
U međuvremenu, ovaj članak podijelite na svojim različitim društvenim mrežama.
...
