Articles

MarkoSaric

Tento článek je one stop shop pro WordPress HTML kódy. Zde je seznam značek a kódů HTML WordPress, které se nejčastěji používají k vytváření obsahu. Uložte seznam a použijte jej jako referenci při vytváření příspěvků a stránek blogu WordPress.

WordPress HTML v editoru Gutenberg

WordPress je jednou z nejlepších blogovacích platforem. Miliony lidí a značek jej používají k vytváření skvěle vypadajících webů.

tato příručka platí jak pro vlastní hostovanou, tak pro hostovanou verzi WordPress. Vidět rozdíl mezi WordPress.com nebo WordPress.org.

WordPress 5.0 s novým Gutenberg editor vydáno v prosinci 2018 se dramaticky zlepšila a zmírnil způsob práce s HTML tagy ve vašem blogu a stránky.

jak zobrazujete HTML kód v editovaných příspěvcích Gutenberg? Jednoduše přidáte blok” kód ” a zadáte kód. Zobrazí kód vašim návštěvníkům.

jak upravujete příspěvky Gutenberg pomocí HTML? Jednoduše kliknete na “Upravit jako HTML” v nabídce možností konkrétního bloku, který chcete upravit.

můžete také přidat blok “Classic” nebo plugin “Classic Editor”, abyste měli bývalý editor WYSIWYG, který v tomto příspěvku dále popisuji.

klasický Editor: jaký je rozdíl mezi vizuálním a textem?

při vytváření příspěvku na blogu nebo stránky v klasickém editoru WordPress máte dvě možnosti úprav. Můžete použít výchozí” vizuální “zobrazení nebo Režim” Text”.

ve vizuálním režimu můžete vidět svůj obsah Tak, jak je. Vizuální režim se nazývá WYSIWYG, což znamená přesně to, co vizuální režim dělá: to, co vidíte, je to, co dostanete.

vidíte svůj obsah Tak, jak ho návštěvníci uvidí ve svých prohlížečích, a máte jednoduchá tlačítka, která vám pomohou upravit. Většina lidí používá tento “vizuální” editor příspěvků ve WordPressu při vytváření svého obsahu.

v textovém režimu vidíte kód a značky HTML. Tento textový režim umožňuje přidat libovolný HTML kód na některý z vašich blogových příspěvků nebo stránek. Textový editor založený na HTML vypadá děsivější a není tak oblíbený u začátečníků.

ale co když víte, jak kódovat nebo chcete trochu větší kontrolu nad rozvržením a strukturou při vytváření příspěvků nebo stránek? Měli byste použít editor” Text”.

jak upravit HTML v editoru WordPress Classic?

jak se tedy dostanete do textového editoru HTML? V sekci WordPress admin post nebo page writing klikněte na kartu “Text”. V textovém editoru přidáváte a upravujete všechny značky HTML.

jak přidat HTML kód na Příspěvek nebo stránku WordPress?

můžete jednoduše napsat nebo vložit libovolný HTML kód přímo do editoru WordPress “Text”. Zkuste to s některou z nejčastěji používaných značek z mého seznamu níže.

zkopírujte jej zde na webu, vložte jej do textového editoru a “náhled” vašeho příspěvku nebo stránky, abyste viděli, jak to vaši návštěvníci uvidí.

někdy se stává, že se kód při přechodu z textového do vizuálního režimu odstraní.

buďte opatrní a zkontrolujte, zda se vám to nestalo. Nebo se pokuste držet textového editoru, pouze pokud plánujete psát kód, abyste se s tímto problémem nesetkali.

pro ty, kteří jsou spokojeni s kódováním, můžete dokonce zakázat” vizuální ” editor. V navigační nabídce WordPress Přejděte do části “Uživatelé”, klikněte na “váš profil” a vyberte “Zakázat vizuální editor při psaní”.

Kopírovat a vložit mezi Google Docs, Microsoft Word a WordPress

WordPress verze 5.0 bylo hladké a snadné kopírování jakéhokoli obsahu z Google Docs nebo Microsoft Word a vkládat je do vašeho WordPress příspěvky a stránky.

to nebylo vždy snadné. Když pracujete s HTML v klasickém editoru, můžete si někdy všimnout některých nesmyslných znaků.

k tomu může dojít, pokud zkopírujete / vložíte z aplikace Microsoft Word do aplikace WordPress. Jeden užitečný zdroj při vkládání HTML kódu z aplikace Word do editoru WordPress je Postable.

zkopírujte / vložte HTML z aplikace Word (nebo jiného zdroje)do nástroje a získejte WordPress přátelskou a čistou verzi kódu, kterou pak můžete vložit do svého obsahu.

Jak zobrazit HTML kódy na mém blogu jako normální text?

co kdybyste chtěli do svého příspěvku vložit a zobrazit značky HTML a další kódy, aby je návštěvníci mohli zobrazit jako normální text?

něco jako dělám tady ve svém článku? Stále používáte textový editor, ale můžete zabalit svůj kód, jako je tento:

<code><div class="header"></code> 

WordPress HTML syntaxe pluginy pro hezčí zobrazení kódu

Tam jsou některé WordPress pluginy, které vám mohou pomoci s tímto procesem, a také vám umožní upravit rozvržení a způsob kód je uveden na vašem blogu pro vaše návštěvníky.

doporučuji následující dva. SyntaxHighlighter Evolved je více populární volba, zatímco Pastacode je ten, který funguje nejlépe pro ty, kteří používají stránky stavitelé při navrhování blogu.

Nejčastěji se používá WordPress HTML kódy a tagy

Vložení obrázku

<img src="https://markosaric.com/essential-html-tags-wordpress/Image-URL" alt="Description of the image">

Udělat obrázek, kliknout na nové místo určení

<a href="Destination-URL"><img alt="Description of the image" src="https://markosaric.com/essential-html-tags-wordpress/Image-URL" /></a>

Vložit odkaz

Všimněte si, že anchor text je viditelná část vašeho odkazu. Je to slovo nebo fráze, na které návštěvníci kliknou, aby se dostali na stránku, na kterou odkazujete.

<a href="Destination-URL">Anchor text</a>

Vytvořit odkaz nofollow

Pro SEO účely, budete potřebovat, aby se některé z vašich odkaz nofollow. Zde je návod:

<a href="Destination-URL" rel="nofollow">Anchor text</a>

otevřete odkaz v novém okně prohlížeče

<a href="Destination-URL" target="_blank">Anchor text</a>

odkaz na konkrétní sekci na dlouhé stránce

tyto se nazývají skoky stránek. Vaši návštěvníci mohou kliknout na odkaz a přesunout někam dále dolů nebo nahoru článek.

to je zvláště užitečné pro ty delší průvodce, které chcete rozdělit do různých kapitol pomocí obsahu.

první částí vytvoření skoku na stránku je přiřazení sekce (nebo cíle), na kterou chcete odkazovat.

umístěte tento kód do kterékoli části stránky, na kterou chcete odkazovat. Druhou částí je skutečně odkaz na přiřazenou sekci z vašeho úvodu nebo obsahu.

<a></a><a href="#Specific-section">Anchor text</a>

to také funguje, pokud chcete odkazovat na konkrétní část vaší stránky z jiného článku na vašem blogu. Můžete vložit odkaz na tento cíl: https://yourblog.com/yourpost/#Specific-section.

takto fungují také odkazy” zpět na začátek”. Přiřaďte název sekce k horní části příspěvku a ve spodní části příspěvku přidejte tlačítko” Přejít na vrchol ” odkazující na horní část.

Vytvořit významných titulů a podpoložek

<h1>This is a heading H1</h1> <h2>This is a heading H2</h2> <h3>This is a heading H3</h3>

Vložit konec řádku

<p>This is<br>a paragraph</br> with a line break</p>

Vytvořit nový odstavec

<p>This is the first paragraph</p> <p>This is the second paragraph</p>

Vytvořit bod odrážky v seznamu

<ul> <li>list item with a bullet point</li><li>another item with a bullet point</li></ul>

Vytvořit číslovaný seznam

<ol><li>list item with number 1</li><li>list item with number 2</li></ol>

Zvýraznění textu v příspěvku s žlutá (nebo jiná barva) pozadí

<span style="background-color:yellow;">Your text</span>

Přiřadit číslo pro položky v číslovaném seznamu

<ol start="7"><li>List item number 7</li></ol>

Vytvořit dopisy seznam

<ol type="A"><li>Item A</li><li>Item B</li><li>Item C</li><li>Item D</li></ol>

Aby Římská čísla seznam

<ol type="I"><li>Item I</li><li>Item II</li><li>Item III</li><li>Item IV</li></ol>

vystředit text

<center>to be centered</center>

Aby váš text tučně

<strong>to be bold</strong>

, Aby váš text kurzívou

<em>to be italic</em>

změňte barvu textu

<span style="color: #000000;">Your text</span>

vložte blockquote

<blockquote>Your quote</blockquote>

vytvořte tabulku

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna.