Kako v kodo WordPress zapisati kodo po meri

Obstaja veliko razlogov, zakaj želite v svoje objave v WordPressu napisati ali vključiti dodatno kodo. Morda boste morali prikazati oglas, uporabiti edinstveno oblikovanje določenih delov svojega spletnega mesta ali preprosto označiti nekaj besedila ali vsebine, da pritegnete pozornost. Kljub temu lahko dodate kodo, da dosežete različne vizualne učinke in tako zagotovite boljšo uporabniško izkušnjo.


Vsi ti in drugi so utemeljeni razlogi, toda ne glede na to, kaj iščete s kodo po meri, je postopek pisanja kode lahko živčni ali pa naravnost zahteven! V tej vadnici bomo zajeli naslednja področja:

  • Dodajanje kode, ki je videti kot koda, vendar se ne obnaša kot koda (če želite prikazati vrstice kode ali izboljšati videz svojega spletnega mesta)
  • Dodajanje kode, ki naj bi se obnašala kot koda, npr. Skriptirani oglasi, kot so Google Adsense Ads

Pod tema dvema kategorijama se bomo nekoliko podrobneje seznanili s programsko kodo, kot so HTML, CSS, Javascript in se dotaknili oglasov in lepote

posoda. Zdaj pa se brez nadaljnjih fanfarije lotimo poslovanja in napišemo nekaj kode.

Dodajanje kode, ki je videti kot koda, vendar ne deluje kot koda

Če želite prikazati kodo (morda ste spletni oblikovalec ali razvijalec), ki jo lahko vaši uporabniki kopirajo in prilepijo, je pomembno, da to storite pravilno, saj lahko celo en prelom vrstice pokvari kodo, torej tudi vse vaše delo. Način, kako bo WordPress razlagala vašo kodo, je odvisen od tega, ali uporabljate urejevalnik HTML ali Visual Post. Vnašanje kode neposredno v vizualni urejevalnik ne bo imelo učinka, ki ga želite ustvariti, saj vizualni urejevalnik meni, da je koda običajno besedilo, kar pomeni, da spletni brskalniki vaše kode ne bodo razlagali kot “kodo”, ampak kot običajno besedilo.

Po drugi strani pa bo urejevalnik HTML objav prepoznal vse oznake HTML ali CSS, ki jih uporabljate, kar pomeni, da jih bo interpretiral spletni brskalnik, kar bi lahko povzročilo zmešane postavitve in vsebino čudovitega izgleda. Na primer, 

v vizualnem urejevalniku bodo interpretirani kot navadno besedilo in rezultat bo pravičen
. Vendar pa,
 v urejevalniku HTML se bo razlagalo kot oznaka HTML, rezultat pa bo ustvarjanje zabojnika.

Vadba HTML

Res je vaja v jalovosti, vendar lahko poskusite za bolj jasno sliko, kaj mislim. Samo odprite svoje HTML urejevalnik, tip

in jo shranite kot osnutek. Ko je osnutek shranjen, kliknite »Predogled objave« in si oglejte svoj urejeno spletno mesto. Ne skrbite, ni trajno in lahko samo pretaknete osnutek. Zdaj pa nazaj k poslu.

Na splošno lahko kodo uporabite na dva načina. Najprej lahko uporabite kodo v vrstici (ali odstavku), da razjasnite točko o svoji kodi. Drugič, lahko kodo napišete, poudarite in postavite v takšen blok:



Pisanje kode v vadnicah za WordPress Posts


...

Za dosego zgornjega učinka uporabimo kodno oznako, zapisano kot ... naša koda je tukaj . Nadomestne puščice (<  >) S kvadratnimi oklepaji ([]), odvisno od vašega spletnega mesta WordPress in urejevalnika objav, ki ga uporabljate (vizualni ali HTML). Koda, ki jo želite prikazati, mora biti med začetno oznako,   in zaključna oznaka, . Na primer, za uporabo kode znotraj odstavka:

Koda V odstavku A

Kodna oznaka naredi besedilo, ki ni HTML, kot kodo, vendar spletnemu brskalniku ne pove, da bi razlagal oznako HTML ali ga odstranil iz objave. To pomeni, da lahko brskalnik še vedno kodira vašo oznako HTML, kar otežuje prikaz Oznake HTML v kodi. Vendar lahko to težavo premagate z uporabo razširjenih znakov ali karakternih entitet za zastopanje znaka < > znakov, ki bodo sledili vsak brskalnik. Na primer …

Oznake HTML se lahko razlagajo kot oznaka HTML

… Bo ustvaril nov zabojnik (zahvaljujoč se

) in naslov (

), kar bo zmešalo vašo spletno stran. Če pa za zamenjavo uporabite entitete znakov < > puščice, se boste izognili temu vedenju in izpisali kodo po želji. Zgornja koda bo torej videti tako:

Namesto tega uporabite znakovne entitete

Ustvari označen blok kode

Če bi rad izpostavil blok kode (ali celo besedilo), da dobim nekaj takega;

Blok kode

Začnem tako, da kodo (ali besedilo) vstavim v posodo tako:

To morate storiti v urejevalniku HTML

Nato dodam slog s pomočjo CSS bodisi neposredno (kot na sliki zgoraj) bodisi prek style.css datoteko, ki jo najdemo v glavni mapi svoje teme.

Označite svoje kodne oznake

Kodna oznaka bo uporabila velikost pisave v in besedilo privzeto postavite v enobarvno pisavo. Vse to lahko spremenite, da bo vaša koda izgledala tako, kot želite. Vse kar morate dodati je dodati …

 koda {font-size: 1.2em; barva: # 000; teža pisave: normalno;} 

… Ali nekaj podobnega tvoji style.css. Obstaja neomejeno število stilov in vse je odvisno od vaših osebnih želja, zato se ne oddaljite od stila.

Dodajanje kode, ki deluje kot kod

Ta razdelek je še posebej uporaben, če želite prikazati oglase ali druge skripte, npr. Odseki Javascript v vaših objavah. Medtem ko obstajajo vtičniki, kot so Hitri Adsense, ki vam bo pomagal pri upravljanju oglasov v vaših objavah, morda bi vas zanimali nameščanje samostojnih skript, nad katerimi imate popoln nadzor.

Če je vaš oglas preprosta slika in povezava, lahko oglas dodate v svojo objavo s pomočjo pripomočka za nalaganje. Samo naložite sliko in vnesite svojo povezavo (in morda napis) in vaše delo je končano. Ta metoda je sicer omejena, saj lahko poravnate oglas le v levo, desno ali v sredini – tako kot na običajni sliki. Lahko pa ustvarite zabojnik v svoji objavi s pomočjo urejevalnika HTML.

Primer:


Ustvarite ta vsebnik točno tam, kjer želite svoj oglas, kar pomeni, da morate pred objavo oglasa pripraviti objavo. Ko je posoda pripravljena, jo lahko poljubno oblikujete. Lahko ga premikate s pomočjo style.css z uporabo položaj premoženje. Če želite zagnati a Google Adsense oglas v svojih objavah lahko še vedno uporabljate Hitri Adsense – vtičnik – ali ustvarite vsebnik in postavite svojo kodo oglasa takole:


Opomba 1: Googlovi oglasi temeljijo na Javascriptu in jih lahko razlagajo vsi večji spletni brskalniki, pod pogojem, da je uporabnik na svojih strojih omogočil Javascript.

Opomba 2: Za svoje spletno mesto morate izbrati prave razsežnosti oglasov, da se izognete zmešnjavi svojih objav in tudi spletnega mesta.

Če želite dodati trajni oglas, ki se bo pojavil v vseh vaših objavah (trenutne in prihodnje objave) brez dodatnega dela, boste morali urediti Predloga za eno objavo (single.php). Oglas z velikostjo 468 x 60 pik sem postavil na vrh vseh svojih objav, tako da sem naslednjem kodu dodal naslednjo kodo single.php takoj za < – – END post-entry-meta – ->.


Seveda morate uporabiti svoje Google Ads �� Tako se oglas Google Adsense prikazuje na mojem blogu:

Pisanje kode v WordPressu

Najti single.php, pojdi na svoje Nadzorna plošča – >> Videz – >> Urejevalnik – >> single.php. Ko je single.php odprt, uporabite iskalno vrstico (Ctrl + F) najti < – – END post-entry-meta – ->.

Zaboj lahko pustite takšnega, kot je, ali pa ga oblikujete s style.css, kot se vam zdi primerno. In ne pozabite shraniti vseh sprememb. The

vsebnik je res uporaben, in ko ga povežete s CSS-om in unčo ustvarjalnosti, lahko toliko dosežete s svojim WordPress spletnim mestom. Lahko vam pomaga, da katero koli kodo (ali karkoli resnično) postavite kamor koli na svojem spletnem mestu.

Orodja

Če želite izvedeti več o pisanju kode po meri v svojih objavah v WordPressu, si oglejte naslednje vire:

No, o tem gre. Uspeli smo pokriti področja, ki smo jih začrtali na začetku. Če pa v tej objavi ne razumete nobenega koncepta ali želite dodati svoje predloge ali poglede, prosimo, delite svoje misli v razdelku za komentar spodaj!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map