Ako napísať vlastný kód do vašich príspevkov WordPress

Existuje veľa dôvodov, prečo by ste chceli do svojich príspevkov WordPress napísať alebo zahrnúť ďalší kód. Možno budete musieť zobraziť reklamu, použiť jedinečný štýl v určitých častiach svojho webu alebo jednoducho označiť nejaký text alebo obsah, aby ste upútali pozornosť. Napriek tomu môžete pridať kód na dosiahnutie rôznych vizuálnych efektov a ponúknuť tak lepšiu používateľskú skúsenosť.


Všetky tieto a ďalšie dôvody sú platné, ale bez ohľadu na to, čo sa snažíte dosiahnuť pomocou vlastného kódu, proces písania kódu môže byť nervovo obtiažny alebo priamo náročný! V tomto návode sa budeme venovať týmto oblastiam:

  • Pridanie kódu, ktorý vyzerá ako kód, ale nechová sa ako kód (v prípade, že chcete ukázať riadky kódu alebo vylepšiť vzhľad svojich webových stránok)
  • Pridanie kódu, ktorý sa má správať ako kód, napr. Skriptované reklamy, ako sú reklamy Google AdSense

V rámci týchto dvoch kategórií sa trochu ponoríme do programovacieho kódu, ako je HTML, CSS, Javascript, a dotýkame sa reklám a krásy

kontajner. Teraz, bez ďalších fanfár, poďme sa pustiť do práce a napísať nejaký kód.

Pridanie kódu, ktorý vyzerá ako kód, ale nechová sa ako kód

Ak by ste chceli predviesť kód (možno ste webový dizajnér alebo vývojár), ktorý vaši používatelia môžu kopírovať a vkladať, je dôležité, aby ste to urobili správne, pretože kód môže zamlčať aj jediný riadok, a tým všetka vaša práca. Spôsob, akým bude váš kód interpretovať WordPress, závisí od toho, či používate editor HTML alebo Visual Post. Zadanie kódu priamo do vizuálneho editora nebude mať taký efekt, aký chcete vytvoriť, pretože vizuálny editor považuje kód za normálny text, čo znamená, že webové prehliadače váš kód nebudú interpretovať ako „kód“, ale ako obyčajný text..

Na druhej strane editor HTML Post rozpozná všetky značky HTML alebo CSS, ktoré používate, čo znamená, že ich bude interpretovať webový prehľadávač, čo môže viesť k narušeniu rozloženia a zábavne vyzerajúcemu obsahu. Napríklad, 

vo vizuálnom editore bude interpretovaný ako obyčajný text a výsledok bude spravodlivý

. však,

 v editore HTML sa bude interpretovať ako označenie HTML a výsledkom bude vytvorenie kontajnera.

Cvičenie HTML

Je to cvičenie zbytočne, ale môžete to skúsiť pre jasnejší obraz toho, čo tým myslím. Stačí otvoriť HTML editor, typ

a uložte ho ako koncept. Po uložení konceptu zobrazíte svoj príspevok kliknutím na položku „Preview Post“ upravená webová stránka. Nerobte si starosti, nie je to trvalé a môžete len koncept vyhodiť do koša. Teraz späť do podnikania.

Vo všeobecnosti môžete použiť kód dvoma spôsobmi. Najprv môžete použiť kód v riadku (alebo odseku) na objasnenie bodu o vašom kóde. Po druhé, môžete napísať, zvýrazniť a umiestniť kód do tohto bloku:



Písanie kódu v Príručke príspevkov WordPress


...

Na dosiahnutie vyššie uvedeného efektu používame kódovú značku napísanú ako ... náš kód ide sem . Náhradné šípky (<  >) S hranatými zátvorkami ([]) v závislosti od vášho webu WordPress a poštového editora, ktorý používate (vizuálny alebo HTML). Kód, ktorý chcete zobraziť, musí byť medzi úvodnou značkou,   a záverečnú značku, . Napríklad použitie kódu v odseku:

Kód v odseku

Značka kódu spôsobí, že text, ktorý nie je HTML, vyzerá ako kód, ale webovému prehliadaču nehovorí, aby interpretoval označenie HTML alebo ho z príspevku odstránil. To znamená, že prehliadač môže stále kódovať vaše značky HTML, čo sťažuje predvádzanie HTML značky vo vašom kóde. Tento problém však môžete prekonať pomocou rozšírených znakov alebo znakových entít, ktoré predstavujú < > znaky, ktoré oklamú každý prehliadač. Napríklad…

Značky HTML je možné interpretovať ako označenie HTML

… vytvorí nový kontajner (vďaka

) a nadpis (

), ktorá znetvorí vašu webovú stránku. Ale ak používate znakové entity na nahradenie < > šípkami, tomuto správaniu sa vyhnete a podľa potreby vydáte kód. Vyššie uvedený kód bude preto vyzerať takto:

Namiesto toho použite znakové entity

Vytvorte zvýraznený blok kódu

Ak by som chcel zdôrazniť blok kódu (alebo dokonca text), aby sa niečo podobné;

Blok kódu

Začnem vložením kódu (alebo textu) do kontajnera takto:

Musíte to urobiť v editore HTML

Potom pridám štýl pomocou CSS buď priamo (ako na obrázku vyššie) alebo cez style.css súbor sa nachádza v hlavnej zložke témy.

Upravte svoje kódové značky

Kódová značka použije veľkosť písma z a v predvolenom nastavení vložte text do monospaced font. To všetko však môžete zmeniť, aby kód vyzeral presne podľa vašich predstáv. Všetko, čo musíte, je pridať…

 kód {font-size: 1.2em; color: # 000; font-weight: normálne;} 

… alebo niečo podobné vám style.css. Existuje neobmedzený štýl a všetko záleží na vašich osobných preferenciách, takže sa nemusíte zdržiavať – ​​štýl už nie je.

Pridanie kódu, ktorý sa správa ako kód

Táto časť je obzvlášť užitočná, ak chcete zobraziť reklamy alebo iné skripty, napr. Úryvky kódu Javascript v rámci vašich príspevkov. Zatiaľ čo existujú doplnky, ako napríklad Rýchle Adsense, ktoré vám pomôžu spravovať reklamu vo vašich príspevkoch, možno budete chcieť nainštalovať samostatné skripty, nad ktorými máte úplnú kontrolu.

Ak je vaša reklama jednoduchým obrázkom a odkazom, môžete ju pridať do svojho príspevku pomocou nástroja na nahrávanie. Stačí nahrať obrázok a zadať odkaz (a možno aj titulok) a vaša práca je hotová. Táto metóda je obmedzená, pretože svoju reklamu môžete zarovnávať iba doľava, doprava alebo do stredu – rovnako ako bežný obrázok. Prípadne môžete vo svojom príspevku vytvoriť kontajner pomocou editora HTML.

Príklad:


Vytvorte tento kontajner presne tam, kde chcete reklamu. To znamená, že pred pridaním reklamy musíte mať pripravený príspevok. Akonáhle je kontajner pripravený, môžete ho upraviť podľa svojich predstáv. Môžete sa pohybovať pomocou vášho style.css pomocou pozície nehnuteľnosť. Ak chcete spustiť Reklamy Google AdSense vo svojich príspevkoch môžete stále používať Rýchle Adsense – doplnok – alebo vytvorte kontajner a vložte svoj reklamný kód takto:


Poznámka 1: Reklamy Google sú založené na Javascripte a môžu byť interpretované všetkými hlavnými webovými prehliadačmi za predpokladu, že používateľ povolil Javascript na svojich počítačoch.

Poznámka 2: Musíte si vybrať správne dimenzie reklamy pre svoj web, aby ste zabránili neporiadku s vašimi príspevkami aj s webom.

Ak chcete pridať trvalú reklamu, ktorá sa bude zobrazovať na všetkých vašich príspevkoch (súčasné a budúce príspevky) bez akejkoľvek ďalšej práce, budete musieť upraviť Šablóna jedného príspevku (Single.php). Umiestnil som reklamu s rozmermi 468 x 60 pixlov na začiatok všetkých svojich príspevkov pridaním nasledujúceho kódu do single.php ihneď po < – – END post-entry-meta – ->.


Samozrejme musíte použiť svoje vlastné reklamy Google is Takto sa na mojom blogu zobrazí reklama Google Adsense:

Písanie kódu v WordPress

Nájsť single.php, choď k tebe Panel administrácie – >> Vzhľad – >> Editor – >> single.php. Po otvorení súboru single.php použite vyhľadávací panel (Ctrl + F) lokalizovať < – – END post-entry-meta – ->.

Kontajner môžete opustiť tak, ako je, alebo ho môžete upraviť pomocou štýlu style.css podľa vlastného uváženia. Nezabudnite uložiť všetky zmeny.

kontajner je skutočne užitočný a keď ho spárujete s CSS a uncom kreativity, môžete s webom WordPress toho veľa dosiahnuť. Môže vám pomôcť umiestniť akýkoľvek kód (alebo čokoľvek skutočne) kdekoľvek na vašom webe.

Panel nástrojov

Ak by ste sa chceli dozvedieť viac o písaní vlastného kódu vo svojich príspevkoch vo WordPress, neváhajte a pozrite si nasledujúce zdroje:

No, to je o tom. Podarilo sa nám pokryť oblasti, ktoré sme načrtli na začiatku. Ak však v tomto príspevku nerozumiete žiadnemu konceptu alebo by ste chceli pridať svoje návrhy alebo názory, podeľte sa o svoje myšlienky v sekcii komentárov nižšie!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me