autoři WordPress mají možnost vytvářet stránky a příspěvky ve vizuálním editoru nebo textovém editoru. Zatímco vizuální Editor odvádí přiměřeně dobrou práci s možnostmi panelu nástrojů a snadným editačním prostředím, použití textového editoru umožňuje maximální flexibilitu při organizaci obsahu.

dovolte mi vysvětlit nejen to, proč byste chtěli použít textový Editor (místo vizuálního editoru), ale jak snadné může být použití.

proč byste mohli upřednostňovat textový Editor?

• váš obsah bude mít větší smysl pro vaše čtenáře a vyhledávače.
• potřebujete znát pouze několik značek HTML, aby byl textový Editor velmi užitečný.
• vlastnosti stylů CSS můžete použít přímo do kódu HTML.

Co Se Stane, Když Použijete Vizuální Editor?

když do vizuálního editoru přidáte kopii, média nebo odkazy, opravdu přidáte HTML na svou stránku nebo příspěvek. Vše se odehrává pod kapotou.

nejste si jisti, co tím myslím? Zkusit.

přidejte nějakou kopii do vizuálního editoru. Poté vyberte kartu Text. To, na co se budete dívat, je HTML. Stejně jako u vizuálního editoru můžete HTML kód upravovat přímo pomocí textového editoru.

ve skutečnosti můžete s textovým editorem udělat mnohem více než s vizuálním editorem. Díky tomu je práce v textovém režimu nejen produktivnější, ale také uspokojivější. Budete moci přesněji označit svůj obsah, který bude přínosem pro vaše čtenáře a zvýší vaše úsilí SEO.

HTML je asi tak jednoduché, jak to dostane. Každá webová stránka, včetně těch, které generuje WordPress, ji používá.

učení HTML bude mít výhody daleko za jeho použití s WordPress!

co je HTML?

známý jako lingua franca webu, HyperText Markup Language (HTML) je systém, který umožňuje autorům přiřadit význam obsahu. Pomocí prvků HTML (lépe známých jako značky) můžete definovat obsah jako odstavce, nadpisy, seznamy, odkazy a další struktury.

HTML je podobně jako gramatika.

nemá to nic společného s tím, jak webová stránka vypadá nebo jak je stylizovaná. Záležitost designu webových stránek-layout, typografie a barvy – je převzata pomocí CSS (Cascading Style Sheets), jazyka stylu webového designu.

HTML je vyvíjen World Wide Web Consortium (W3C). Nejaktuálnější verze je HTML5.

značky, které s největší pravděpodobností použijete

HTML je kontejnerizovaný značkovací systém. Pro každou otevřenou značku existuje odpovídající uzavírací značka.

například pro nejdůležitější obsah na Stránce nebo části stránky byste použili značku nadpisu 1, jako je tato.

< h1> vše o HTML< / h1>
otevřená značka je< h1>a kontejner je uzavřen</h1>

podobně je zde označen odstavec:

<p>před několika lety klient a dobrý přítel navrhl, abych se naučil WordPress. V té době jsem byl proti jakémukoli typu CMS. Trochu jsem věděl, že to budu milovat a učit to mnoha lidem v učebnách v New Yorku a prostřednictvím webináře.< / p>

vše, co musíte udělat, je napsat svůj obsah do textového editoru a přidat značky buď tak, jak jdete, nebo po zadání kopie.

zde je vysvětlení nejběžnějších značek, které použijete při psaní HTML. Jsou to Nadpis, seznam, odkaz, seskupení a několik různých značek.

Nadpis značky

<h1></h1>

<h2></h2>

<h3></h3>

• existují také H4, h5 a H6 nadpisy značky, které se v praxi používají jen zřídka.
• nikdy nepoužívejte značku nadpisu za účelem změny velikosti písma.

seznam značek

pomocí HTML můžete vytvořit 3 typy seznamů. 2 nejoblíbenější jsou objednané a neuspořádané seznamy.

neuspořádaný seznam se používá, když pořadí položek není důležité.

< ul>

<li>květiny< / li>

<li>zelenina< / li>

<li>stromy< / li>

</ul>

• květiny
• zelenina
• stromy

uspořádaný seznam se používá, když je pořadí položek relevantní.

< ol>

<li>Kalifornie< / li>

<li> Texas< / li>

<li>Florida< / li>

</ol>

1. Kalifornie
2. Texas
3. Florida

(v tomto příkladu je pořadí relevantní a určeno největšími populacemi ve státech USA.)

poznámka: seznamy mohou být také vnořeny pro vytvoření hierarchie položek seznamu. To je obtížné provést při použití vizuálního editoru.

LINK TAG

text nebo obrázek můžete změnit na odkaz zabalením textu nebo obrázku uvnitř jakékoli značky kotvy (odkazu). Zatímco syntaxe pro vytvoření odkazu je vždy stejná (<a href= “ url “ >text odkazu< / a>), existují 2 velmi běžné způsoby, jak to udělat.

pro odkaz na stránku WordPress použijte:

<a href= „http://domain.com/this-is-the-page-title“>link na stránku WordPress< / a>

pro odkaz na jakoukoli stránku nebo zdroj, nejen na stránku WordPress, použijte:

<a href= “ http://domain.com/about.html“>link na HTML stránku< / a>

poznámka: ve skutečnosti existuje třetí cesta. Můžete použít speciální způsob, jak WordPress vytváří odkazy s následující syntaxí:

<href=“index.php?page_id=356 “ >odkaz na stránku na vašem webu< / a

v tomto případě budete potřebovat znát stránku nebo ID příspěvku stránky, na kterou odkazujete na svém webu. (Každá stránka nebo příspěvek má jedinečné identifikační číslo).

seskupování značek

technicky neexistuje nic jako „seskupování značek“, ale je to nejlepší způsob, jak popsat sadu značek HTML, které obsahují další prvky. Účelem těchto značek je přesněji popsat význam vašeho obsahu.

například značka <header> může být použita k definování části vaší stránky, která obsahuje hlavní informace, jako je tato:

<hlavička>

<h1>přední linie nadpisu< / h1>

<img src= „url obrazového souboru“>

<p>odstavec informací za nadpisem a obrázkem, který logicky drží pohromadě jako skupina informací.< / v>

</záhlaví>

zde jsou některé velmi běžné značky seskupení

<main>

<section>

<article>

<aside>

<header>

<footer>

<nav>

<div>

ostatní značky
kromě značky najdete tyto značky velmi užitečné při práci s textovým editorem.

<img src="url of image file">

<br>

<!-- hidden code or info here -->

<blockquote> or <q>

zatímco tyto značky vás dostanou dlouhou cestu, zde je několik zdrojů, které vám pomohou.

● potřebujete pouze 10 HTML tagy (tutorial)
● HTML Element Reference v Alfa pořadí
● HTML Element Reference

pravidla

krása HTML je, že existuje jen několik pravidel dodržovat a jsou snadno zapamatovatelné.

* HTML je malá a velká písmena

Velká, malá nebo smíšená písmena-napište HTML jakýmkoli způsobem. Běžnou praxí jsou malá písmena.

* pro každou otevřenou značku musí být blízká značka

existují výjimky, ale aby to bylo opravdu snadné, zvykněte si zavírat všechny otevřené značky.

* značky jsou uzavřeny v opačném pořadí, v jakém jsou otevřeny v bloku

to může být trochu obtížné pochopit, takže zde je příklad.

< p>zde je<silný >odstavec s <href= „url here“ >odkaz< / a>< / silný> uvnitř a část textu je zdůrazněna.< / p>

Všimněte si pořadí: <p>< strong>< a>….< / a>< / silný>< / p>

* některé prvky nemají uzavírací značku

značky jako < br> a <img> nemají uzavírací značku, protože pro ni není důvod.

* používejte HTML správně a ne styl stránky

například nepoužívejte <br> značky, pokud máte seznam. Nebo nepoužívejte <tabulka> značky k vytvoření mřížky pro rozvržení.

panel nástrojů textového editoru

protože považuji za efektivní psát kód do textového editoru, panel nástrojů obecně nepoužívám. Pokud však začínáte s HTML, můžete najít některé nástroje užitečné jako způsob, jak se naučit nějaký HTML. Nakonec si uvědomíte, že existuje více značek, které můžete použít ke správnému označení obsahu, než to, co umožňuje panel nástrojů.

HTML pluginy

dříve nebo později si všimnete, že pokud vytvoříte odstavec ve vizuálním editoru, neuvidíte kolem vaší kopie značku<p >, když ji uvidíte v textovém editoru. Nenech se tím obtěžovat. WordPress bude i nadále generovat značku <p>, když se kopie objeví na vaší stránce.

pokud máte tento nebo jiné problémy s kódem, můžete použít tyto pluginy.

vždy upravujte v HTML

to zaručuje, že při vytváření nebo úpravě stránky nebo příspěvku se váš editor vždy otevře jako textový Editor a ne jako vizuální Editor. To může být velmi užitečné, protože WordPress může odstranit vaše značky za určitých okolností, kdy se používá vizuální Editor.

zachovat HTML Editor Markup Plus

pokud máte problémy s odstraněním značek, mohlo by to být vaše řešení.

Zvýrazňovač syntaxe HTML editoru

Jedná se o skvělý plugin, který změní nevýrazný textový Editor na barevně kódovanou hojnost. Může se také změnit na černé pozadí a větší písma. Nejlepší je použít tento plugin s možností celé obrazovky.

poznámka: netestoval jsem dva nebo více těchto pluginů současně, takže by mohly existovat nekompatibility.

jak krátké kódy zapadají do obrázku

krátké kódy jsou to, co mnoho pluginů používá k přidání formuláře, nastavení sloupců nebo přidání jiné funkce na stránku nebo příspěvek. Je to snadný způsob, jak přidat kód, jako je HTML, javascript, CSS a PHP, aniž byste o těchto jazycích museli něco vědět.

používejte krátké kódy v textovém editoru stejně jako ve vizuálním editoru.

pro nezasvěcené mohou krátké kódy vypadat jako HTML,ale nejsou.

můžete buď vložit zkrácený kód tímto způsobem, pokud přidáváte kontaktní formulář, například s populárním pluginem Contact Form 7,

nebo jej můžete použít pro plugin,

obsah pro levou stranu sloupce

obsah pro pravou stranu sloupce

který vytváří dva sloupce na stránce.

tento krátký kód vypadá jako HTML s otevřenou a blízkou značkou, ale není

přidání CSS stylingu pomocí textového editoru

můžete poskytnout vlastnosti CSS stylu obsahu, který přidáte do textového editoru. To nelze provést pomocí výchozího vizuálního editoru.

s textovým editorem to lze provést 2 způsoby.

jedním ze způsobů je přidání ID nebo atributu třídy do prvku HTML, jako v tomto příkladu:

<p id=“olovo“ >Toto je hlavní odstavec v mém příspěvku.< / p>

pak ve vašem stylu.css soubor byste přidali vlastnosti stylu pro #lead. Možná něco takového:

# lead

{font-weight: bold;

text-align: center;

barva:#f00;}

druhým způsobem je přidání inline stylu. (Nicméně, nejlepší přístup je, aby vaše HTML a CSS oddělené jako ve výše uvedeném scénáři.) Můžete přidat inline styl, jako je tento:

<p style=“font-family:arial,helvetica,sans-serif“ >písmo pro tento odstavec je Arial.< / p>

Poznámka: Toto by přepsalo jakékoli pravidlo stylu rodiny písem pro tento odstavec, které může být přítomno v externím souboru nebo v kontejneru <head> stránky.

závěr

textový Editor vám poskytne úplnou kontrolu nad tím, jak chcete formátovat svou stránku nebo zveřejňovat obsah. Můžete použít libovolnou značku HTML, nejen ty v panelu nástrojů textového editoru. Výsledkem bude obsah, který je snáze čitelný a pochopitelný lidmi a pavouky vyhledávačů. Může to chvíli trvat, než si zvyknete na psaní HTML, ale nakonec to bude velmi uspokojivé.

autor Bio

Bud Kraus [email protected] je veterán WordPress instruktor v New Yorku a učí WordPress pro jednotlivce i skupiny prostřednictvím webináře. Pracuje také na stránkách pro malé podniky. http://joyofwp.com