Formátování příspěvků na blogu a základy HTML

Formátování příspěvků na blogu nevyžaduje, abyste znali hodně HTML, ale rozhodně vám to pomůže!

Pokud chcete, aby byl váš blog brán vážně, musíte zvládnout formátování příspěvků na blogu.

To také znamená naučit se několik základních triků v jazyce HTML, které vám pomohou udělat články zajímavé a důsledně stylizované.

Teď se nebojte, neříkám, že se musíte stát programátorem nebo něčím podobným, abyste mohli vytvářet atraktivní a neinformované příspěvky na blogu, ale osvojení si několika základních dovedností vám hodně pomůže.

WordPress je CMS (Content Management System) a jako takový nevyžaduje, abyste si všechno kódovali sami.

Na to existují nástroje.

Většina kódu je skryta, aby se nic neporušilo, a pro psaní a formátování příspěvků a stránek blogu máte k dispozici WYSIWYG (What You See is What You Get) editor.

Pokud WordPress používáte už nějakou dobu, pak víte, že v pravém horním rohu editoru obsahu je k dispozici jak vizuální, tak textová karta, která umožňuje přepínat mezi stylizovanou verzí příspěvku a surovým HTML.

Pro nováčky.

Vizuální = vizuální editor WordPressu

Textový = editor HTML WordPressu / surový text

Většina začátečníků je ohromena a vyděšena, když poprvé uvidí surový HTML na kartě text a rychle se vrátí zpět.

Nemusí tomu tak ale být a pokud věnujete čas pohodlné práci a úpravám v tomto režimu, stanete se mnohem lepšími blogery.

S trochou cviku snadno zvládnete některé základy, syntaxe je vlastně docela logická.

Syntaxe (počítačová definice):

Takže co je HTML?

HTML je zkratka pro Hypertext Markup Language a jedná se o programovací jazyk používaný pro tvorbu webových stránek a aplikací.

HTML umožňuje vytvářet základní funkce, které pak můžete stylizovat pomocí CSS (kaskádové styly).

Vytvořil ho v roce 1990 Tim Berners-Lee, můj osobní hrdina, kterému se také připisuje vynález internetu, ale nebudu vás učit všechno o HTML a historii, ale pokud jste zvídavý typ, můžete pokračovat ve čtení na Wikipedii.

Jsme tu jen proto, abychom se podívali na to, jak se HTML týká psaní a úprav příspěvků a stránek ve WordPressu.

Když vidíte neznámý kód na kartě Text v editoru WordPressu, díváte se na HTML a v některých případech může obsahovat některé inline styly CSS.

Příklad HTML

<h2>This is a title</h2>

Části, které jsou zvýrazněny červeně, jsou HTML a v tomto příkladu vidíte na začátku úvodní značku h2 title a na konci uzavírací značku h2 title.

Všimli jste si jediného rozdílu, že uzavírací značka má před názvem značky zpětné lomítko? Takto můžete rychle zjistit, kdy se vaše HTML otevřelo a uzavřelo.

Toto je skvělý tip pro odhalení chyb nebo nefunkčního HTML.

Příklad HTML s inline CSS

<h2 style="color:red;">This is a title</h2>

Ve výše uvedeném příkladu jsme použili stejný tag h2, tentokrát jsme však pomocí HTML zavolali jednu část CSS, která změnila barvu na červenou. Všimněte si, že jediná část, která je skutečně CSS, je zvýrazněna červeně.

V podstatě neuvidíte mnoho inline CSS, protože nejlepší způsob je stylovat prvky HTML pomocí externích souborů CSS, což je typický způsob, jak Motivy WordPress automaticky aplikují styly na stránku blogu.

Osobně nedoporučuji stylovat HTML inline v editoru WordPressu, ale je důležité o tom vědět pro případ, že byste někdy potřebovali upravit nebo vyčistit kód, který si našel cestu z jiných zdrojů, například z pluginu nebo z kopírování a vkládání z jiného zdroje.

Nevyhnutelně se vám bude hodit možnost vyčistit věci, když si gremlini (to není odborný termín) najdou cestu do vašeho obsahu.

Podívejme se tedy na to, jak přidávat HTML do příspěvků, příspěvků a stránek WordPressu a co k tomu potřebujete vědět.

Základy HTML ve WordPressu

Při přidávání HTML pro stylování obsahu nesmíte zapomenout obalit obsah příslušnými otevíracími a uzavíracími značkami.

Příklad:

<p>Paragraphs should be wrapped with p tags</p>

Existují příklady užitečných prvků HTML, které nevyžadují uzavírací značku, protože jsou samouzavírací.

Jedním z příkladů je zalomení řádku <br>, které bude fungovat bez uzavírací značky, to proto, že zalomení řádku neobsahuje a nemůže obsahovat obsah uvnitř.

Značky nadpisů & Podnadpisy

Existují různé typy nadpisů příspěvků ve WordPressu, nejprve máte nadpis s názvem příspěvku, to je <h1> a pak máte možnost přidávat nadpisy, které vám pomohou seskupit myšlenky.

Tyto nadpisy se pohybují od h1 (Nadpis 1) až po h6 (Nadpis 6) a vaše téma je obvykle nastylizuje tak, aby měly odpovídající velikost.

Protože nadpis vaší stránky nebo příspěvku je automaticky h1, chcete se vyhnout jeho používání v obsahu, protože všechny další případy budou konkurovat hlavnímu nadpisu, kterým je název vašeho příspěvku.

Namísto toho postupujte podle sémanticky správného řazení a při první potřebě použít nadpis sekce se přesuňte na nadpis h2.

Ačkoli je můžete snadno nastavit pomocí rozbalovacího seznamu v levém horním rohu WYSIWYG editoru příspěvků, je užitečné vědět, jak fungují ve formátu HTML, abyste mohli opravit případné chyby.

Tady je několik příkladů

<h1>This is a heading 1, you won't need to use me in your content</h1>
<h2>This is a heading 2, I'm very useful, you can use me to organize your articles into sections.</h2>
<h3>This is a heading 3, Only use me if you already have h2 section headings and you need to divide those sections into sub-sections.</h3>
<h4>This is a heading 4, I'm similar to the above, only use me if you have already used h3's</h4>

Doufejme, že zde začínáte vidět vzor syntaxe HTML.

Všechny prvky HTML začínají otevíracím <

Také se uzavírají uzavíracím >

Otevírací prvky mohou jednoduše obsahovat název prvku.

Zavírací značky obsahují za svým otevíracím < a před názvem prvku HTML, který uzavírají, lomítko vpřed.

Jen trochu bližší seznámení s výše uvedeným vás posune mílovými kroky před většinu blogerů používajících WordPress.

Tlusté písmo nebo kurzíva

Když chcete zdůraznit nějaký bod a upozornit na určitá slova, můžete použít tučné písmo nebo kurzívu, aby vynikla.

Tento přístup rozhodně upřednostňuji před VŠEMI KAPITÁLKAMI, které mi připadají jako křik.

V HTML je pro tučné písmo <strong> a pro kurzívu <em>.

Zábavný fakt: Strong si snadno zapamatujete, když chcete něco ztučnit, ale proč se pro prvek kurzívu používá em? Em je zkratka pro zdůraznění. To by mohlo pomoci, aby se to uchytilo.

<em>This text is italicized, I am for gentle emphasis</em>

<strong>This text is bold, I am for strong emphasis</strong>

Dále můžete samozřejmě použít WYSIWYG WordPressu nebo klávesovou zkratku CTRL + B pro tučné písmo a CTRL + I pro kurzívu po zvýraznění textu, který chcete upravit.

Úplný seznam klávesových zkratek WordPressu a dalších formátovacích metod najdete zde.

Existují určitá pravidla, jak byste je měli a neměli používat, včetně toho, aby se vzájemně vylučovaly, byly vyhrazeny pro krátké věty a byly používány střídmě.

Praktická typografie má skvělý článek vysvětlující důležitost těchto pravidel.

Píšete-li kopii, která má lidi opravdu zaujmout, například prodejní kopii, pak lze tato pravidla ohýbat, ale ne porušovat.

zdůraznění

Pamatujte, že pokud je zdůrazněno vše, pak není zdůrazněno nic!

Seznamy – uspořádané &neuspořádané

Existují dva typy seznamů, které můžete přidávat pomocí jazyka HTML a které podporuje i WYSIWYG WordPressu.

Jsou to:

Uspořádané seznamy – <ol>

Uspořádané seznamy se zobrazují jako řada očíslovaných položek. To je užitečné při psaní seznamu, kde na pořadí záleží.

<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>

Výše uvedený kód se změní na:

1. Položka 1
2. Položka 2
3. Položka 3

Neuspořádané seznamy – <ul>

Neuspořádané seznamy jsou v podstatě seznamy s odrážkami.

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

A ten se mění v níže uvedený bodový seznam.

• Položka 1
• Položka 2
• Položka 3

Všichni víme, jak užitečné jsou seznamy, které navíc pomáhají rozčlenit obsah a působí zajímavěji.

Jedním z klíčových rozdílů, kterého si zde všimnete, je, že zde jsou jednotlivé položky seznamu <li> a jsou celé obaleny jedním obalem <ol> nebo <ul>.

To je důležité si uvědomit, protože pokud obal <ol> nebo <ul> chybí, položky seznamu se nezobrazí.

Obrázky

Dalším důležitým aspektem formátování příspěvku na blogu nebo jakékoliv stránky pomocí WordPressu je použití obrázků a neměli byste mít problém najít zajímavé fotografie, které můžete získat z Yahoo images a dalších webových stránek s obrázky, na které se nevztahují autorská práva. Některé z těchto možností jsou placené, ale mnohé z nich jsou zdarma za předpokladu, že uvedete odkaz na zdroj a zmínku o něm.

Malá cena za to, že na svých webových stránkách nebo blogu budete mít profesionální vizuály.

Obrázek vydá za tisíc slov, jak se říká, navíc čtenářům poskytnou vizuální podněty a také pauzy, které pomohou rozdělit váš obsah na stravitelné kousky.

To pomáhá udržet čtenáře v napětí, a přestože nemusíte sami kódovat obrázky, je užitečné porozumět jejich syntaxi.

Tady je příklad kódu obrázku a jeho vzhledu na kartě Text v editoru.

<img src="https://mazepress.com/image.png">

Obrázek nevyžaduje uzavírací značku, protože všechny potřebné informace jsou obsaženy v úvodních a uzavíracích závorkách elementu HTML. Parametr src jednoduše volá umístění adresy URL.

WordPress umožňuje floatovat obrázky vlevo, vpravo nebo je můžete vycentrovat. Pokud tak učiníte a zkontrolujete kód na kartě Text, uvidíte, že byly přidány třídy, které se používají k odpovídajícímu stylování obrázků.

Toto je příklad, kdy se k použití různých stylů na různé obrázky používá externí CSS. Užitečné vědět!

Důležité: Před přidáním obrázků do příspěvků a stránek se ujistěte, že jsou optimalizovány pro rychlost a vyhledávače.

Embedy

Nevyhnutelně budete chtít používat embed kódy z externích webových stránek.

Jedním z příkladů je, když chcete přidat video z YouTube nebo Vimeo, přejdete na sdílení a nabídne se vám dlouhý kód, který můžete zkopírovat.

Hlavní věc, kterou si musíte zapamatovat, je, že na vizuální kartu editoru obsahu nemůžete vložit kód HTML nebo jiný kód. Tím kód zakódujete a po stisknutí tlačítka uložit se stane nepoužitelným.

Ujistěte se, že jste přešli na kartu text a pak jej vložili tam, kde chcete, aby se zobrazil.

Níže je uveden příklad vloženého kódu z YouTube.

<iframe width="560" height="315" src="https://www.youtube.com/embed/ssxCQuv3KzE" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Přestože WordPress umožňuje jednoduše vložit adresu URL YouTube do příspěvku a zobrazit jej jako video, nemusí vám to poskytnout plnou kontrolu nad rozměry videa a dalšími nastaveními vložení.

Z tohoto důvodu a protože jsem ze staré školy, stále používám kód pro vložení iframe.

Většina webových stránek, které nabízejí kódy pro vložení, není nativně podporována WordPressem, a proto budete muset stále znát kódy pro vložení, iframe a jejich fungování, abyste mohli přidávat multimédia do svých příspěvků.

Šortkódy

Šortkódy nejsou HTML. Vlastně to ani není programovací jazyk, jsou to nativní funkce WordPressu, která umožňuje vývojářům zásuvných modulů a témat vytvářet jednoduché způsoby, jak můžeme my dva přidávat prvky na naše webové stránky a příspěvky.

Nejjednodušším příkladem, který se vyskytuje téměř na každém blogu, je zkratka kontaktního formuláře, ale existují stovky, ne-li tisíce možných využití zkratek, které zahrnují možnost přidávání:

• Tabulky
• Galerie
• Cenové balíčky
• Videa
• Formuláře pro magnety na vedení / e-mailové opt-in formuláře
• Epizody podcastů

Tady je zkratka pro kontaktní formulář generovaný pluginem Contact Form 7, jeden z našich doporučených pluginů, který instalujeme na 90 % našich webů a blogů.

Poznámka: musel jsem přidat mezery za úvodní a před uzavírací závorku, aby se kontaktní formulář skutečně nezobrazoval, takže si ho představte bez mezer.

Všimněte si, že syntaxe zkráceného kódu je jiná. Začínají úvodní závorkou místo < a >.

Vývojář zkrácených kódů je pak naformátuje tak, abyste mohli snadno upravovat a měnit podstatná nastavení.

Při načítání webové stránky tento kontaktní formulář ve skutečnosti načítá asi 20 řádků nepřehledného HTML, takže je pro vás mnohem jednodušší, když můžete přistupovat ke zkrácenému kódu.

Jedinou výhradou je, že nechcete zkrácené kódy používat příliš často, protože zpomalují vaše webové stránky.

Jsou užitečné, když o nich víte, a mohou vám usnadnit proces úprav příspěvku, když nemusíte používat velké množství HTML, kterému nerozumíte a musíte s ním opatrně pracovat.

Různé rady pro formátování

Existuje několik dalších rad, které doporučuji novým studentům WordPressu mít na paměti a o kterých se krátce zmíním.

Mezi ně patří:

• Nepřidávejte zbytečné zalomení řádků. To znamená, že se snažte nepoužívat značku <br> HTML a vyhněte se dvojímu stisknutí enteru mezi odstavci a oddíly, pokud to není nezbytně nutné. Vaše články pak vypadají nepřehledně a určitě vytvoříte nesrovnalosti.
• Nepřidávejte na stránky specifické rodiny, velikosti a barvy písma – Opět to způsobuje, že vaše příspěvky vypadají příšerně a jako by byly vytvořeny v roce 1995. Možná si myslíte, že zelený nadpis vlastní velikosti s jedinečným písmem upoutá pozornost, zatímco ve skutečnosti působí nekonzistentně a neprofesionálně. Tyto styly by mělo diktovat vaše téma.
• Nikdy nepřidávejte kód HTML nebo vložený kód na kartu Vizuální – Může to vést k neočekávaným výsledkům, znamenat spoustu čištění nebo úplně rozbít vaši stránku.
• Nikdy nenahrávejte do WordPressu videa – Váš webhosting není stavěný na poskytování videoobsahu. Naštěstí YouTube a Vimeo i tak poskytují superrychlý a 100% bezplatný hosting videí. Proto je nejlepší vkládat videa z YouTube, i když jsou vaše vlastní.

Nic složitého, ale často vidím, že lidé dělají tyto chyby a ztěžují si život.

Brzy to ale může být jinak, vlastně úplně jinak!

Gutenberg, budoucnost blogování?

Gutenberg je nový editor obsahu, který WordPress vytváří od základů a který se již brzy objeví ve vaší blízkosti.

Je to budoucnost blogování? Kdo ví? Ale rozhodně je to budoucnost WordPressu, takže je na čase se s ním smířit.

Gutenberg je jiné zvíře.

Pokud jste někdy pro blogování používali Medium.com, pak vám při prvním vyzkoušení Gutenbergu bude připadat až děsivě podobný.

Podle mého názoru je to dobře, editor obsahu Medium, který nerozptyluje, se krásně snadno používá a to, že si toho WP všímá, je pozitivní pro všechny, kteří se podílejí na provozu blogů a webových stránek běžících na WP.

Editor Gutenberg je také modulární a umožňuje přetahovat do obsahu bloky, z nichž každý má jiný účel.

Je to podobné, jako když pluginy pro tvorbu stránek a některá témata v současnosti poskytují tento druh přetahování, ale nyní tyto funkce přicházejí do WordPressu ve výchozím nastavení.

Jestliže existuje nějaký aspekt WordPressu, který se v průběhu let příliš nevyvíjel, byl to editor TinyMCE, takže tuto inovaci vítám s otevřenou náručí.

Pokud se potýkáte s formátováním příspěvků na blogu pomocí současného editoru, můžete si již nyní vyzkoušet Gutenberg, a to tak, že si jej stáhnete a nainstalujete tak, že v hlavním panelu přejdete do zásuvných modulů a vyhledáte „Gutenberg“.

Formátování blogových příspěvků & Základy HTML Final Word

Pokud věnujete trochu času procvičování výše uvedeného, získáte mnohem větší kontrolu nad svým obsahem a jeho prezentací.

Snad se nyní cítíte o něco pohodlněji při formátování blogových příspěvků a základním používání jazyka HTML.

Tyto dovednosti vám mohou ušetřit spoustu času, peněz a škrábání hlavy, když se vám formátování obsahu nepovede nebo se nezobrazí správně.

Výše uvedené základy sice většině blogerů a majitelů webových stránek WordPress stačí, ale pokud jste zvědaví na další informace, existuje několik skvělých bezplatných webových stránek, kde se můžete HTML naučit, včetně CodeAcademy a w3Schools.

Teď se pusťte do tvorby pěkného obsahu! 🙂

Pokud se vám tento článek zdál užitečný, zvažte, zda se nepodíváte na některé z našich dalších užitečných průvodců blogováním, například na náš kontrolní seznam blogových příspěvků:

Průvodce základním obsahem nebo Jak přeformátovat obsah, a pokud jste fanouškem těchto návodů, přihlaste se k odběru mého newsletteru a já se s vámi podělím o svůj nejlepší obsah a objevy prostřednictvím e-mailu.