Jak napsat vlastní kód do vašich příspěvků WordPress

Existuje mnoho důvodů, proč byste chtěli do svých příspěvků WordPress napsat nebo přidat další kód. Možná budete muset zobrazit reklamu, použít jedinečný styl v určitých částech svého webu nebo jednoduše označit nějaký text nebo obsah, abyste upoutali pozornost. Přesto můžete přidat kód, abyste dosáhli různých vizuálních efektů a nabídli lepší uživatelský dojem.


Všechny tyto a další důvody jsou platné důvody, ale bez ohledu na to, čeho chcete dosáhnout pomocí vlastního kódu, může být proces psaní kódu nervovým zničením nebo přímo náročným! V tomto tutoriálu se budeme zabývat následujícími oblastmi:

  • Přidání kódu, který vypadá jako kód, ale nechová se jako kód (v případě, že chcete ukázat řádky kódu nebo zlepšit vzhled vašeho webu)
  • Přidání kódu, který se má chovat jako kód, např. Skriptované reklamy, jako jsou reklamy Google AdSense

V těchto dvou kategoriích se ponoříme trochu do programovacího kódu, jako je HTML, CSS, Javascript, a dotkneme se reklam a krásy

kontejner. Nyní, bez dalších fanfár, pusťte se do práce a napište nějaký kód.

Přidání kódu, který vypadá jako kód, ale nechová se jako kód

Pokud byste chtěli ukázat kód (možná jste webový designér nebo vývojář), který vaši uživatelé mohou kopírovat a vložit, je důležité to udělat správně, protože i jediný konec řádku může kód zkomplikovat, a tím celou vaši práci. Způsob, jakým bude váš kód interpretován WordPressem, závisí na tom, zda používáte editor HTML nebo Visual Post. Zadání kódu přímo do vizuálního editoru nebude mít účinek, který chcete vytvořit, protože vizuální editor považuje kód za běžný text, což znamená, že webové prohlížeče váš kód nebudou interpretovat jako „kód“, ale jako běžný text..

Na druhou stranu editor HTML Post rozpozná všechny značky HTML nebo CSS, které používáte, což znamená, že budou interpretovány webovým prohlížečem, což by mohlo vést k neuspořádaným rozvržením a zábavně vypadajícímu obsahu. Například, 

ve vizuálním editoru bude interpretováno jako obyčejný text a výsledek bude spravedlivý
. nicméně,
 v editoru HTML bude interpretováno jako označení HTML a výsledkem bude vytvoření kontejneru.

Cvičení HTML

Je to cvičení marně, ale můžete to zkusit pro jasnější představu o tom, co myslím. Stačí otevřít svůj HTML editor, typ

a uložte jej jako koncept. Jakmile je pracovní koncept uložen, klikněte na „Náhled příspěvku“ zamčený web. Nedělejte si starosti, není to trvalé a můžete jen smetit koncept. Nyní zpět k podnikání.

Obecně můžete použít kód dvěma způsoby. Nejprve můžete použít kód v řádku (nebo odstavci) k vyjasnění bodu o vašem kódu. Za druhé, můžete psát, zvýrazňovat a vkládat svůj kód do bloku, jako je tento:



Psaní kódu ve výuce příspěvků WordPress


...

K dosažení výše uvedeného efektu používáme kódovou značku psanou jako ... náš kód jde sem . Náhradní šipky (<  >) S hranatými závorkami ([]) v závislosti na vašem webu WordPress a editoru příspěvků, který používáte (vizuální nebo HTML). Kód, který chcete zobrazit, musí jít mezi úvodní značku,   a závěrečnou značku, . Například použít kód v odstavci:

Kód V odstavci

Kódová značka způsobí, že text, který není HTML, vypadá jako kód, ale neříká webovému prohlížeči, aby interpretoval značení HTML nebo jej odstranil z příspěvku. To znamená, že prohlížeč může kódování HTML stále zakódovat, což ztěžuje předvedení HTML značky ve vašem kódu. Tento problém však můžete překonat pomocí rozšířených znaků nebo znakových entit reprezentujících < > znaky, které oklamou každý prohlížeč. Například…

Značky HTML lze interpretovat jako značkování HTML

… Vytvoří nový kontejner (díky

) a nadpis (

), které vaši webovou stránku zkazí. Ale pokud používáte znakové entity k nahrazení < > šipkami, tomuto chování se vyhnete a podle potřeby vydáte kód. Výše uvedený kód bude tedy vypadat takto:

Místo toho použijte znakové entity

Vytvořte zvýrazněný blok kódu

Pokud bych chtěl zdůraznit blok kódu (nebo dokonce text), abych získal něco podobného;

Blok kódu

Začnu tím, že vložím kód (nebo text) do kontejneru takto:

Musíte to udělat v editoru HTML

Pak přidám styl pomocí CSS buď přímo (jako na obrázku výše) nebo přes style.css soubor nalezen v hlavní složce motivu.

Upravte své kódové značky

Kódová značka použije velikost písma z a ve výchozím nastavení je text monospaced. To vše však můžete změnit tak, aby váš kód vypadal přesně tak, jak chcete. Stačí přidat…

 code {font-size: 1.2em; barva: # 000; font-weight: normal;} 

… nebo něco podobného vašemu style.css. Existuje neomezený styl a vše záleží na vašich osobních preferencích, takže se nemusíte zdržovat – styl pryč.

Přidání kódu, který se chová jako kód

Tato část je zvláště užitečná, pokud chcete zobrazovat reklamy nebo jiné skripty, např. Úryvky JavaScriptu ve vašich příspěvcích. I když existují pluginy, například Rychlé Adsense, které vám pomohou spravovat reklamy ve vašich příspěvcích, možná budete mít zájem o instalaci samostatných skriptů, nad nimiž máte úplnou kontrolu.

Pokud je vaše reklama jednoduchým obrázkem a odkazem, můžete ji přidat do svého příspěvku pomocí nástroje pro nahrávání. Stačí nahrát obrázek a zadat odkaz (a možná i titulek) a vaše práce je hotová. Tato metoda je však omezená, protože svou reklamu můžete zarovnat pouze doleva, doprava nebo uprostřed – stejně jako typický obrázek. Případně můžete vytvořit kontejner v rámci svého příspěvku pomocí editoru HTML.

Příklad:


Vytvořte tento kontejner přesně tam, kde chcete reklamu, což znamená, že před přidáním reklamy musíte mít připravený příspěvek. Jakmile je kontejner připraven, můžete jej stylizovat, jak chcete. Můžete ji pohybovat pomocí vašeho style.css pomocí pozice vlastnictví. Pokud si přejete spustit Reklama Google Adsense ve svých příspěvcích můžete stále používat Rychlé Adsense – plugin – nebo vytvořte kontejner a umístěte svůj reklamní kód takto:


Poznámka 1: Reklamy Google jsou založeny na Javascriptu a mohou být interpretovány všemi hlavními webovými prohlížeči, pokud uživatel povolil Javascript na svých počítačích.

Poznámka 2: Musíte si vybrat správné dimenze reklamy pro svůj web, abyste se vyhnuli rozdělování vašich příspěvků i webových stránek.

Pokud chcete přidat trvalou reklamu, která se zobrazí na všech vašich příspěvcích (stávajících i budoucích příspěvcích) bez zbytečné práce, budete muset upravit Šablona jednoho příspěvku (single.php). Umístil jsem 468px na 60px inzerát na začátek všech mých příspěvků přidáním následujícího kódu do single.php hned potom < – – END post-entry-meta – ->.


Samozřejmě musíte použít své vlastní reklamy Google �� Takto se na mém blogu zobrazí reklama Google Adsense:

Psaní kódu v WordPress

Najít single.php, jdi na svůj Panel administrace – >> Vzhled – >> Editor – >> single.php. Po otevření souboru single.php použijte vyhledávací lištu (Ctrl + F) lokalizovat < – – END post-entry-meta – ->.

Pokud to uznáte za vhodné, můžete kontejner opustit tak, jak je, nebo jej stylovat pomocí style.css. A nezapomeňte uložit všechny změny.

kontejner je opravdu užitečný, a když jej spárujete s CSS a uncí kreativity, můžete toho na svém webu WordPress toho dosáhnout. Může vám pomoci umístit jakýkoli kód (nebo cokoli skutečně) kdekoli na vašem webu.

Panel nástrojů

Pokud byste se chtěli dozvědět více o psaní vlastního kódu ve vašich příspěvcích WordPress, neváhejte a podívejte se na následující zdroje:

No, to je o tom. Podařilo se nám pokrýt oblasti, které jsme nastínili na začátku. Pokud však tomuto příspěvku nerozumíte, nebo byste chtěli přidat své návrhy nebo názory, podělte se prosím o své myšlenky v sekci komentářů níže!

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