Pridobivanje spretnosti za učinkovito predstavitev kode v WordPressu je izrednega pomena za blogerje in ustvarjalce vsebine, ki dosledno objavljajo kodo na spletu, da jo lahko uporabi svoje občinstvo. Računalniška koda, kot je bilo predvideno, ustvari nov vizualni izhod na sprednji strani spletnega mesta, ki se razlikuje od oznak, poševnic in oklepajev v dejanskih delčkih kode.
Vendar to povzroča težave posameznikom, ki pišejo o razvoju in oblikovanju, saj potrebujejo sredstva za ustrezno predstavitev kode, ne da bi ta izvajala predvideno funkcionalnost, kot je generiranje gumba ali uporaba slogov za blok odstavka.
Preprosto povedano, ko ustvarjate objavo v spletnem dnevniku, ki kot primer vključuje delček kode, je nujno preprečiti izvajanje kode. Ta pristop omogoča bralcem, da zaznajo kodo v njeni izvirni obliki, si jo ogledajo znotraj dobro oblikovanega bloka in celo kopirajo njeno vsebino za lastna razvojna prizadevanja.
Namen tega priročnika je prikazati različne metode za prikaz kode v WordPressu, ne glede na izbrano temo WordPress. Poleg tega vam bo pomagal pri določanju najprimernejše metode za vaš potek dela.
Ustvarite neverjetna spletna mesta
Z najboljšim brezplačnim graditeljem strani Elementor
Začni zdajKaj se zgodi, ko v WordPress? dodate običajno kodo
Ko dodate običajno kodo neposredno v objavo ali stran WordPress, ne da bi sprejeli kakršne koli posebne ukrepe, lahko koda povzroči neželene posledice. WordPress ima vgrajene mehanizme, ki samodejno obdelajo in očistijo vsebino, da zagotovijo varnost in pravilno delovanje. Posledično lahko WordPress, ko je dodana običajna koda, spremeni ali popolnoma odstrani.
Tukaj je nekaj stvari, ki se lahko zgodijo, ko v WordPress dodate običajno kodo:
- Sprememba kode: WordPress lahko spremeni kodo tako, da odstrani ali spremeni določene elemente, da prepreči morebitna varnostna tveganja ali konflikte s funkcionalnostjo platforme. To lahko povzroči, da se koda ne izvaja, kot je predvideno, ali povzroči napake.
- Odstranjevanje kode: WordPress ima vzpostavljene filtre in varnostne ukrepe, ki lahko odstranijo določene vrste kode, ki se zdijo nevarne ali nepotrebne. To lahko povzroči odstranitev pomembnih odrezkov kode ali samega celotnega bloka kode.
- Vizualno popačenje: Koda običajno vsebuje posebne znake, simbole in oblikovanje, ki lahko motijo vizualno predstavitev vaše vsebine WordPress. Lahko povzroči težave pri oblikovanju, neporavnanost ali kodo, ki se prikaže kot golo besedilo, namesto da bi bila upodobljena kot koda.
- Izvajanje kode: V nekaterih primerih, če koda ni pravilno razčiščena ali z njo ne ravnamo, se lahko izvede in izvede predvideno delovanje. To ima lahko nenamerne posledice, na primer ustvarjanje gumbov, spreminjanje videza vsebine ali celo vpliva na splošno delovanje vašega spletnega mesta.
Za premagovanje teh težav in varen prikaz kode v WordPressu je priporočljivo uporabljati ustrezne metode ali vtičnike, ki so posebej zasnovani za predstavitev odrezkov kode. Te metode zagotavljajo, da je koda pravilno oblikovana, ohranjena in prikazana brez neželenih sprememb ali izvajanja.
Tu bomo v delček dodali naslednjo kodo HTML:
<!DOCTYPE html>
<html>
<head>
<style>
.cities {
background-color: green;
color: white;
border: 4px solid black;
margin: 10px;
padding: 10px;
}
</style>
</head>
<body>
<div class="cities">
<h2>Chicago</h2>
<p>A nickname for Chicago is The City of Broad Shoulders.</p>
</div>
<div class="cities">
<h2>Los Angeles</h2>
<p>A nickname for Los Angeles is The City of Angels.</p>
</div>
<div class="cities">
<h2>New York</h2>
<p>A nickname for New York is The Big Apple.</p>
</div>
</body>
</html>
Ta specifičen odlomek kode uporablja elemente oblikovanja HTML za ustvarjanje treh blokov vsebine, okrašenih z zeleno, skupaj z glavami in odstavki.
Kljub temu je naš namen predstaviti neobdelano kodo v objavi v spletnem dnevniku, namesto da bi ji dovolili upodabljanje v danih blokih.
Naslednje rezultate je mogoče opaziti, ko je koda prilepljena neposredno v WordPress Gutenberg Block Editor:
Glede na omenjeno je očitno, da si WordPress prizadeva uporabiti kodo za svojo primarno funkcijo generiranja vsebine. Vendar pa odstrani slog iz kode, s čimer bralcem ne uspe predstaviti želenega rezultata.
Da bi preprečili takšne okoliščine, močno zagovarjamo uporabo enega od spodaj naštetih načinov za prikaz kode.
4 načini za prikaz kode v WordPressu
Naslednje tehnike so razvrščene po naraščajočem vrstnem redu glede na težavnost in ponujamo posebne pristope, prilagojene posameznikom, ki so zadovoljni s sestavljanjem kode in vsebine v urejevalnikih markdown, v nasprotju z uporabo WordPressa.
1. način: Uporaba Gutenbergovega urejevalnika blokov
Urejevalnik Gutenberg vključuje že obstoječi blok kode, ki olajša predstavitev odrezkov kode, hkrati pa ohranja njihovo oblikovanje in brez izvajanja kode.
Za začetek odprite objavo ali stran v WordPressu in nadaljujte z izbiro enega od gumbov Dodaj blok.
Za nadaljevanje izberite enega od gumbov »Dodaj blok«.
S tem se bo razkril izbor razpoložljivih blokov. Imate možnost iskanja po bloku »Koda« ali v iskalno vrstico vnesete ključno besedo, kot je »koda«.
Ko najdete blok kode, ki ga prepoznate po ikonah v oklepaju, nadaljujte s klikom nanj, da v objavo vstavite del kode.
Trenutno bi vam moralo biti vidno območje z iztočnico "Compose code…".
Urejevalnik WordPress Gutenberg nudi podporo za označevanje, ki omogoča odkrivanje in vstavljanje blokov kode z uporabo poševnice (/), ki ji sledi vnos »C« ali »kode« v urejevalniku. WordPress bo nato prikazal vse ustrezne bloke, kar bo omogočilo hitrejši postopek vstavljanja.
Pomembno je upoštevati razliko med blokom kode in blokom HTML po meri. Medtem ko je blok HTML po meri namenjen vključitvi kode HTML po meri, ki bo upodobljena na sprednji strani, je blok kode zasnovan posebej za dodajanje neobdelane kode za namene prikaza.
Trenutno je pravi trenutek, da kopirate želeno kodo in jo vstavite v določeno območje, označeno kot "Napiši kodo ..."
Koda, ki ste jo posredovali, je zdaj zaprta v označenem bloku kode.
Ugoden vidik bloka kode je njegova skladnost z oblikovanjem presledkov in zavihkov v izvirnem delčku kode. Posledično mora prikazana koda ohraniti svojo vizualno skladnost z virom, iz katerega je bila kopirana.
Če želite prikazati svojo kodo v svoji objavi ali strani WordPress, zaključite postopek s klikom na gumb »Objavi«. Poleg tega imate možnost pridobiti vizualno predstavitev njegovega videza pred objavo, tako da izberete "Predogled".
Ko kliknete gumb »Objavi«, nadaljujte z dostopom do različice objave v živo, da preverite, ali je delček kode prikazan kot neobdelana koda.
Kot je bilo ugotovljeno, je za blok kode značilna preprostost, vendar služi bistvenemu namenu ohranjanja oblikovanja pri predstavitvi kode v objavah v spletnem dnevniku.
Glejte spodnji posnetek zaslona. V tem konkretnem primeru izvirni delček kode ostane nespremenjen; predstavljen je le na sprednji strani v sivem polju.
Da bi povečali vidnost kodnega bloka, je priporočljivo razmisliti o spremembi njegovega privzetega videza.
Za dostop do razpoložljivih izbir sloga za blok izberite blok kode in nadaljujte s klikom na gumb Nastavitve (ikona zobnika). S tem dejanjem se odpre zavihek Blok, ki prikazuje izključno nastavitve bloka, ki veljajo za izbrani blok, in sicer v tem primeru za blok kode.
Eden ima možnost prilagajanja bloka kode glede na osebne nastavitve, vključno z možnostjo spreminjanja vidikov, kot so besedilo in barve ozadja.
2. način: Uporaba vtičnika
Prosimo, uporabite želeni način namestitve vtičnika, da vključite vtičnik Enlighter – Customizable Syntax Highlighter v svoje spletno mesto WordPress.
Ko ga aktivirate, bo vtičnik popolnoma funkcionalen in vam bo omogočal vstavljanje kode v katero koli objavo/stran prek Gutenbergovega bloka ali gumba Vstavi klasičnega urejevalnika.
Če uporabljate WordPress Gutenberg Block Editor, odprite objavo, v kateri želite prikazati kodo. Izberite enega od gumbov za dodajanje bloka (ki ga prepozna simbol »+«), da razkrijete izbor razpoložljivih blokov.
Preglejte ali vnesite ključno besedo, ki se nanaša na blok izvorne kode Enlighten. Nadaljujte s klikom na ustrezni blok, da ga vključite v objavo.
Blok označevalnika Enlighter se nato pojavi v vmesniku urejevalnika blokov, ki vsebuje določen naslov z naslovom »Splošno označevanje« in polje za vnos besedila z oznako »Vstavi izvorno kodo ...«
Prosimo, da vnesete ali kopirate in prilepite želeno kodo, namenjeno za prikaz v WordPressu, v označeno besedilno polje »Vstavi izvorno kodo ...«.
Kot označevalnik sintakse vtičnik ohrani vse nastavitve oblikovanja in tabele. Ko ste zadovoljni z rezultatom, nadaljujte z izbiro gumba »Objavi«.
Z uporabo te funkcionalnosti lahko dostopate do uporabniškega vmesnika svoje objave in opazujete isto vsebino kot obiskovalci spletnega mesta.
Vtičnik Enlighter ponuja poenostavljeno privzeto temo za prikaz kode, ki jo spremljajo številke vrstic, ki pomagajo pri procesu strukturiranja in sklicevanja.
Kot je bilo že omenjeno, uporaba vtičnika za prikaz kode na platformi WordPress nudi izrazite prednosti v primerjavi z alternativnimi metodami. Ilustrativen primer takšne prednosti je funkcija sprednjega dela, ki jo zagotavlja sintaksni vtičnik Enlighter, kjer so vrstice kode dinamično označene, ko se uporabnik pomika po vsebini.
Poleg tega je v polju s kodo, ki se nahaja v zgornjem desnem kotu, več gumbov, ki izboljšajo uporabniško izkušnjo. Predvsem eden od teh gumbov omogoča predstavitev kode v obliki navadnega besedila, brez številk vrstic.
Drugi gumb, označen kot "Kopiraj v odložišče," omogoča takojšnje podvajanje vse vsebine v polju s kodo, kar uporabnikom omogoča udoben prenos in lepljenje kode v kateri koli želeni program.
Nazadnje tretji gumb odpre kodo v novem oknu in jo tako prikaže v oknu brskalnika, oblikovanem kot golo besedilo.
Vtičnik Enlighter ponuja vrsto tem in robustnih orodij za prilagajanje, s katerimi lahko prilagodite videz kodnega polja glede na vaše želje. Če ne želite uporabiti privzete teme, se lahko pomaknete nazaj do svoje objave v WordPressu in izberete trenutno aktivni blok izvorne kode Enlighter.
To dejanje bo razkrilo stransko vrstico Blokiraj v WordPressu. Če se ne prikaže takoj, prosimo, da kliknete gumb Nastavitve (ikona zobnika), ki se nahaja v zgornjem desnem kotu okna WordPress.
Začetna možnost prilagajanja, ki jo je treba upoštevati, je polje Jezik, saj daje navodilo vtičniku, kateri jezik kode naj prikaže, kar omogoča ustrezno oblikovanje in funkcije označevanja.
Obstaja velik izbor kodirnih jezikov, ki jih je treba upoštevati, zato preglejte seznam in izberite tistega, ki je najbolj primeren.
Funkcija Speciallines poudari določene vrstice tako, da uporabnikom omogoči vnos številk vrstic, ločenih z vejicami.
Posledično so določene vrstice, ki ste jih določili, vizualno poudarjene za vse posameznike, ki dostopajo do spletnega mesta.
Parameter Lineoffset zagotavlja način za začetek kodirnega odrezka pri določeni številki vrstice, kar se izkaže kot prednostno pri predstavitvi podnabora kode iz večjega nabora vrstic.
Očitno se z vnosom vrednosti "10" v polje Lineoffset celotno kodno polje začne s številko vrstice 10.
3. način: Uporaba orodja za kodiranje
Obiščite spletno mesto W3Docs HTML Encoder. Na strani boste našli dve sosednji polji. Leva je namenjena lepljenju vaše kode, desna pa prikazuje kodirano različico, ki jo lahko kopirate in prilepite v WordPress.
Pred nadaljevanjem je potrebno določiti želeno vrsto ohranjanja kode:
- Izberite JavaScript Unicode, če nameravate prilepiti kodo, ki vsebuje elemente JavaScript.
- Če delate s HTML, izberite simbole HTML.
Vstavite želeno kodo, ki bo prikazana v WordPressu, v označeno polje na levi. Nato poiščite in izberite gumb Encode zgoraj na desni strani.
Končni rezultat se lahko zdi zavajajoč; vendar je v bistvu združitev elementov HTML, katerih namen je ohraniti celotno vstavljeno kodo, hkrati pa se izogniti kakršni koli nenamerni aktivaciji ali prikazu alternativne vsebine na sprednji strani.
Kliknite gumb "Kopiraj".
Vrnite se v WordPress in odprite želeno objavo ali stran. Nadaljujte z izbiro menija Možnosti (predstavljenega s tremi navpičnimi pikami), ki se nahaja v zgornjem desnem kotu. Nato se odločite za funkcijo urejevalnika kode.
Trenutni vmesnik bo predstavil urejevalnik kode namesto vizualnega urejevalnika blokov. Poiščite želeni razdelek za prikaz kode in nadaljujte z vstavljanjem kodiranega HTML-ja v urejevalnik.
V primeru, da uporabljate klasični urejevalnik WordPress, se nujno pomaknite na zavihek Besedilo, ki ustreza urejevalniku kode v Gutenbergovem urejevalniku blokov.
Izberite možnost »Posodobi« ali »Objavi«, da dokončate objavo, in nadaljujte na sprednji del objave, da si ogledate njeno vizualno predstavitev.
Opazili boste lahko nespremenjeno kodo, ki je bila prvotno vstavljena v kodirnik pred vključitvijo elementov kodiranja HTML. Pomembno je omeniti, da kodirniki ne nudijo nobenih stilskih možnosti, zaradi česar je ta pristop idealen za doseganje urejene in minimalistične estetike.
4. način: Uporaba kratke kode po meri
Ustvarjanje kratke kode po meri izpolni nalogo vstavljanja ponovno uporabnih blokov kode brez potrebe po ročnem kopiranju in lepljenju. Ravno zato kratke kode po meri zagotavljajo zanesljivo priložnost za prikaz kode na platformi WordPress.
Prednosti uporabe kratkih kod po meri za predstavitev kode so naslednje:
- Kratke kode po meri omogočajo shranjevanje zapletenih delov kode za prihodnjo ponovno uporabo, s čimer se odpravi potreba po ponavljajočem vnašanju dolgih odrezkov kode.
- Možno je definirati prilagojene sloge CSS za označevalce kode in vsebnike.
- Kratke kode lahko uporabi kateri koli uporabnik, kar drugim sodelujočim omogoča, da brez težav izkoristijo vaše označevalce kode in bloke s preprostim klikom.
Ustvarjanje kratke kode po meri zahteva strokovnost pri spreminjanju tematskih datotek WordPress, delo s kodo PHP in potencialno razvijanje vtičnikov WordPress. Posledično lahko ustvarjanje kratke kode po meri za WordPress predstavlja težave za posameznike, ki še ne poznajo PHP.
Kljub temu končni rezultat ponuja bistveno enostavnejši pristop k prikazovanju kode na platformi WordPress.
Lahko izberete poljubno želeno ime za kratko kodo po meri in vzpostavite različne alternative, kot sta [html] [/html] in [css] [/css], da se prilagodite različnim programskim jezikom.
Upoštevajte, da je za optimalno poudarjanje sintakse priporočljivo uporabiti kratke kode po meri v povezavi z urejevalnikom besedil (v WordPress Classic) ali poljem HTML po meri, ko delate z urejevalnikom blokov WordPress Gutenberg.
Cilj je sestaviti kratko kodo po meri, ki uporabnikom omogoča vnos ali vstavljanje kode znotraj razmejenih meja začetnih in končnih oznak kratke kode.
Cilj je razviti prilagojeno kratko kodo, ki uporabnikom omogoča vnos ali vstavljanje kode v označene začetne in končne oznake kratke kode.
Zavijanje
Prikaz kode v WordPressu je ključnega pomena za izmenjavo programskih konceptov, zagotavljanje natančnosti, izboljšanje estetike in spodbujanje sodelovanja. Razvijalcem omogoča, da izobražujejo svoje občinstvo, zagotovijo konkretne dokaze, izboljšajo uporabniško izkušnjo in spodbujajo sodelovanje skupnosti. Predstavljanje izrezkov kode spodbuja preglednost, zaupanje in zanesljive informacije. Kratke kode po meri ali vtičniki lahko zagotovijo vizualno privlačen in dobro strukturiran prikaz kode. Skupna raba kode olajša razprave, povratne informacije in inovacije. Na splošno je učinkovit prikaz kode v WordPressu bistvenega pomena za širjenje znanja, zagotavljanje kakovosti in rast razvojne skupnosti WordPress.
