Kako napisati prilagođeni kôd u svojim WordPress postovima

Mnogo je razloga zbog kojih želite pisati ili uključivati ​​dodatni kod u svoje postove u programu WordPress. Možda ćete trebati pokazati reklamu, primijeniti jedinstveni stil na određene dijelove vaše web stranice ili jednostavno označiti neki tekst ili sadržaj kako biste privukli pažnju. Ipak, možete dodati kôd za postizanje različitih vizualnih efekata kako biste ponudili bolje korisničko iskustvo.


Sve ove i druge su valjani razlozi, ali bez obzira na to što tražite s prilagođenim kodom, postupak pisanja koda može biti nervozan ili potpuno zahtjevan! U ovom ćemo udžbeniku pokriti sljedeća područja:

  • Dodavanje koda koji izgleda kao kôd, ali ne ponaša se poput koda (ako želite prikazati retke koda ili poboljšati izgled vaše web lokacije)
  • Dodavanje koda koji se namjerava ponašati poput koda, npr. Skriptirani oglasi kao što su Google Adsense Ads

Pod ove dvije kategorije malo ćemo istražiti programski kôd kao što su HTML, CSS, Javascript i dotaknuti se reklama i ljepote

spremnik. Sada, bez daljnjih fanfara, prepustimo se poslu i napišemo neki kod.

Dodavanje koda koji izgleda kao kod, ali se ne ponaša kao kod

Ako želite prikazati kôd (možda ste web dizajner ili programer) koji korisnici mogu kopirati i zalijepiti, važno je da to učinite kako treba, jer čak i jedan prijelom retka može pokvariti kod, a time i sav vaš posao. Način na koji će vaš kôd tumačiti WordPress ovisi o tome koristite li HTML ili Visual Post editor. Unošenje koda izravno u vizualni uređivač neće imati učinak koji želite stvoriti, jer vizualni uređivač smatra da je kôd normalnim tekstom, što znači da web preglednici vaš kôd neće tumačiti kao “kod” već kao običan tekst.

S druge strane, HTML Post Editor prepoznat će sve HTML ili CSS oznake koje koristite, što znači da će ih internetski preglednik interpretirati, što može rezultirati zbrkanim izgledima i sadržajem koji izgleda dobro. Na primjer, 

u vizualnom uređivaču tumačit će se kao obični tekst i rezultat će biti pravedan
. Međutim,
 u HTML uređivaču će se tumačiti kao HTML označavanje, a rezultat će biti stvaranje spremnika.

HTML vježba

To je stvarno vježba u uzaludnosti, ali možete je isprobati da dobijete jasniju sliku o čemu mislim. Samo otvorite svoj HTML uređivač, tip

i spremite kao nacrt. Nakon što skica bude spremljena, kliknite “Preview Post” kako biste vidjeli svoj uređeno web mjesto. Ne brinite, nije trajan i na njemu možete tek tako baciti otpad. Vratite se poslu.

Općenito, kôd možete koristiti na dva načina. Prvo možete koristiti kôd unutar retka (ili odlomka) da biste pojasnili točku o svom kodu. Drugo, možete napisati, istaknuti i staviti svoj kod u sljedeći blok:



Kôd za pisanje u vodiču za postove programa WordPress


...

Da bismo postigli gornji efekt, koristimo oznaku koda napisanu kao ... naš kod je ovdje . Zamijenite strelice (<  >) S uglatim zagradama ([]), ovisno o vašem web mjestu WordPress i uređivaču postova koji koristite (vizualni ili HTML). Kôd koji želite prikazati mora biti između početne oznake,   i završnu oznaku, . Na primjer, za korištenje koda unutar stavka:

Šifra u odlomku

Kôdna oznaka čini da tekst koji nije HTML izgleda kao kod, ali web pregledniku ne nalaže da protumači HTML označavanje ili ga ukloni iz posta. To znači da preglednik i dalje može kodirati vašu HTML oznaku što otežava prikaz HTML oznake u svom kodu. Međutim, ovaj problem možete prevladati korištenjem proširenih znakova ili karakternih entiteta za predstavljanje < > znakova, što će zavarati svaki preglednik. Na primjer…

HTML oznake mogu se tumačiti kao HTML označavanje

… Stvorit će novi spremnik (zahvaljujući

) i naslov (

), što će zabrljati vašu web stranicu. Ali ako koristite entitete karaktera za zamjenu < > strelicama, izbjeći ćete takvo ponašanje i ispišite kod po želji. Stoga će gornji kôd izgledati ovako:

Umjesto toga koristite znakove entiteta

Stvorite označeni blok koda

Ako bih želio istaknuti blok koda (ili čak tekst), dobiti nešto poput;

Blok šifre

Započinjem stavljanjem koda (ili teksta) u takav spremnik:

To morate učiniti u HTML uređivaču

Zatim dodajem stil koristeći CSS ili izravno (kao na slici gore) ili putem style.css datoteka pronađena u glavnoj mapi vaše teme.

Stilske kodne oznake

Kodna oznaka koristi veličinu fonta iz a tekst zadano postavite u jednosezonski font. Sve to možete promijeniti da vaš kod izgleda upravo onako kako želite. Sve što trebate je dodati…

 kod {font-size: 1.2em; Boja: # 000; font-weight: normalna;} 

… ili nešto slično vašem style.css. Postoje neograničeni stilovi i sve ovisi o vašim osobnim preferencijama, tako da se ne suzdržavajte od stila.

Dodavanje koda koji se ponaša kao kod

Ovaj je odjeljak posebno koristan ako želite prikazati oglase ili druge skripte, npr. Isječci JavaScripta u vašim postovima. Dok postoje dodaci, kao što su Brzi Adsense, koji će vam pomoći u upravljanju oglasima u vašim postovima, možda će vas zanimati instaliranje samostalnih skripti nad kojima imate potpunu kontrolu nad.

Ako je vaš oglas jednostavna slika i veza, oglas možete dodati u svoj post putem uslužnog programa za prijenos. Samo prenesite sliku i unesite vašu vezu (i možda naslov) i vaš je posao završen. Ova je metoda ograničena, budući da oglas možete poravnati samo lijevo, desno ili u sredini – baš kao i tipična slika. Alternativno, možete stvoriti spremnik unutar svog posta pomoću HTML uređivača.

Primjer:


Napravite ovaj spremnik točno tamo gdje želite svoj oglas, što znači da morate pripremiti post prije nego što dodate oglas. Nakon što spremnik bude spreman, možete ga stilizirati kako želite. Možete ga premještati koristeći stil.css pomoću položaj nekretnine. Ako želite pokrenuti a Google Adsense oglas unutar svojih postova, još uvijek ih možete koristiti Brzi Adsense – dodatak – ili napravite spremnik i postavite oglasni kôd na ovaj način:


Napomena 1: Google oglasi se temelje na Javascriptu i mogu ih tumačiti svi glavni web preglednici pod uvjetom da je korisnik omogućio Javascript na svojim računalima.

Napomena 2: Morate odabrati prave dimenzije oglasa za vaše web mjesto da ne biste zabrljali svoje postove kao i web mjesto.

Ako želite dodati stalni oglas koji će se prikazivati ​​u svim vašim postovima (trenutni i budući postovi) bez dodatnog posla, morat ćete urediti Predložak jedne pošte (Single.php). Oglas 468 x 60 x 60 postavio sam na vrh svih svojih postova dodavanjem sljedećeg koda u single.php odmah nakon < – – END post-entry-meta – ->.


Naravno, morate koristiti vlastite Google oglase �� Ovako se oglas Google Adsense pojavljuje na mom blogu:

Pisanje koda u WordPressu

Pronaći single.php, idi na svoju Upravljačka ploča – >> Izgled – >> Uređivač – >> single.php. Nakon otvaranja Single.php koristite traku za pretraživanje (Ctrl + F) locirati < – – END post-entry-meta – ->.

Možete ostaviti spremnik takav kakav jeste ili ga oblikovati koristeći style.css koliko smatrate prikladnim. I ne zaboravite spremiti sve promjene.

spremnik je stvarno koristan, a kada ga povežete s CSS-om i s dozom kreativnosti, možete toliko postići sa svojom WordPress web stranicom. To vam može pomoći postaviti bilo koji kôd (ili bilo što stvarno) bilo gdje na vašoj web stranici.

Kutija s alatima

Ako želite saznati više o pisanju prilagođenog koda u svojim WordPress postovima, slobodno pogledajte sljedeće resurse:

Pa, to je to zbog toga. Uspjeli smo pokriti područja koja smo naveli u početku. Ali ako ne razumijete nijedan koncept u ovom postu ili želite dodati svoje prijedloge ili stavove, podijelite svoja razmišljanja u odjeljku za komentare ispod!

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