Articles

MarkoSaric

ten artykuł jest one stop shop dla kodów HTML WordPress. Oto lista tagów i kodów HTML WordPress najczęściej używanych do tworzenia treści. Zapisz listę i użyj jej jako punktu odniesienia podczas komponowania postów i stron na blogu WordPress.

WordPress HTML w edytorze Gutenberga

WordPress jest jedną z najlepszych platform blogowych. Miliony ludzi i marek używają go do tworzenia świetnie wyglądających witryn.

ten przewodnik jest ważny zarówno dla wersji hostowanej, jak i hostowanej WordPress. Zobacz różnicę między WordPress.com lub WordPress.org.

WordPress 5.0 z nowym edytorem Gutenberg wydanym w grudniu 2018 znacznie poprawił i ułatwił sposób pracy z tagami HTML w postach i stronach na blogu.

jak wyświetlać kod HTML w edytowanych postach Gutenberga? Wystarczy dodać blok ” kod ” i wpisać kod. Pokaże kod odwiedzającym.

jak edytować posty Gutenberga za pomocą HTML? Po prostu kliknij “Edytuj jako HTML” w menu opcji konkretnego bloku, który chcesz edytować.

Możesz również dodać blok “Classic” lub wtyczkę “Classic Editor”, aby mieć dawny edytor WYSIWYG, który opisuję dalej w tym poście.

Klasyczny edytor: Jaka jest różnica między wizualnym a tekstowym?

masz dwie opcje edycji podczas komponowania posta na blogu lub strony w klasycznym edytorze WordPress. Możesz użyć domyślnego widoku “wizualnego” lub trybu “tekstowego”.

w trybie wizualnym możesz zobaczyć swoją zawartość taką, jaka jest. Tryb wizualny nazywa się WYSIWYG, co oznacza dokładnie to, co robi tryb wizualny: to, co widzisz, Jest Tym, Co dostajesz.

widzisz swoje treści w sposób, w jaki odwiedzający zobaczą je w swoich przeglądarkach i masz proste przyciski, które pomogą Ci edytować. Większość ludzi używa tego” wizualnego ” edytora postów w WordPress podczas tworzenia treści.

w trybie tekstowym zobaczysz kod i znaczniki HTML. Ten tryb tekstowy umożliwia dodawanie dowolnego kodu HTML do dowolnych postów na blogu lub stron. Edytor tekstu oparty na HTML wygląda straszniej i nie jest tak popularny wśród początkujących.

ale co, jeśli wiesz, jak kodować lub chcesz mieć nieco większą kontrolę nad układem i strukturą podczas tworzenia postów lub stron? Powinieneś użyć edytora “tekst”.

jak edytować HTML w WordPress Classic Editor?

więc jak dostać się do edytora tekstu HTML? W sekcji Post admina lub pisania strony WordPress kliknij kartę” Tekst”. To w edytorze tekstowym dodajesz i edytujesz wszystkie znaczniki HTML.

Jak dodać kod HTML do posta lub strony WordPress?

możesz po prostu napisać lub wkleić dowolny kod HTML bezpośrednio w edytorze “tekstu” WordPress. Wypróbuj go z jednym z najczęściej używanych tagów z mojej listy poniżej.

skopiuj go tutaj na stronie, wklej do edytora tekstu i “podgląd” swojego posta lub strony, aby zobaczyć, jak użytkownicy go zobaczą.

czasami zdarza się, że kod jest usuwany podczas przełączania z trybu tekstowego na wizualny.

uważaj i sprawdź, czy ci się to nie przytrafiło. Lub spróbuj trzymać się edytora tekstu tylko wtedy, gdy planujesz napisać kod, aby nie napotkać tego problemu.

dla tych, którzy lubią kodować, możesz nawet wyłączyć edytor “wizualny”. Przejdź do ” użytkownicy “w menu nawigacyjnym WordPress, kliknij” Twój profil “i wybierz”Wyłącz edytor wizualny podczas pisania”.

Kopiuj i wklej między dokumentami Google, Microsoft Word i WordPress

WordPress 5.0 uwolnienie sprawiło, że gładko i łatwo skopiować dowolną treść z Dokumentów Google lub Microsoft Word i wkleić ją do postów i stron WordPress.

nie zawsze było to łatwe. Podczas pracy z HTML w klasycznym edytorze możesz czasem zauważyć jakieś bełkoczące znaki.

może się to zdarzyć, jeśli skopiujesz/wkleisz z programu Microsoft Word do WordPress. Jednym z użytecznych źródeł podczas wklejania kodu HTML z programu Word do edytora WordPress jest Postable.

skopiuj / wklej swój kod HTML z programu Word (lub innego źródła) do narzędzia, aby uzyskać przyjazną i czystą wersję kodu WordPress, którą możesz następnie wstawić do treści.

Jak wyświetlić kody HTML na moim blogu jako normalny tekst?

a jeśli chcesz wstawić i wyświetlić tagi HTML i inne kody w swoim poście, aby odwiedzający mogli je zobaczyć jak normalny tekst?

Nadal używasz edytora tekstu, ale zawijasz kod w ten sposób:

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

wtyczki składni HTML WordPress dla ładniejszego wyświetlania kodu

istnieje kilka wtyczek WordPress, które mogą pomóc w tym procesie, a także pozwalają edytować układ i sposób, w jaki kod jest prezentowany na blogu dla odwiedzających.

polecam następujące dwa SyntaxHighlighter Evolved jest bardziej popularną opcją, podczas gdy Pastacode jest tą, która działa najlepiej dla tych, którzy używają kreatorów stron podczas projektowania bloga.

najczęściej używane kody HTML i tagi WordPress

Wstaw obrazek

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

zaznacz obrazek w nowym miejscu docelowym

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

Wstaw link

zauważ, że tekst zakotwiczenia jest widoczną częścią łącza. Jest to słowo lub fraza, które odwiedzający klikną, aby przejść do strony, z którą łączysz się.

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

Utwórz link nofollow

do celów SEO może być konieczne wykonanie niektórych linków nofollow. Oto jak:

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

spraw, aby link otworzył się w nowym oknie przeglądarki

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

Link do określonej sekcji na długiej stronie

są to skoki strony. Odwiedzający mogą kliknąć link i przenieść się gdzieś dalej w dół lub w górę artykułu.

jest to szczególnie przydatne dla tych dłuższych przewodników, które chcesz podzielić na różne rozdziały za pomocą spisu treści.

pierwszą częścią tworzenia skoku strony jest przypisanie sekcji (lub celu), do której chcesz połączyć.

Umieść ten kod w dowolnej sekcji strony, do której chcesz linkować. Druga część to link do przypisanej sekcji z twojego intro lub spisu treści.

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

działa to również, jeśli chcesz połączyć się z określoną sekcją swojej strony z innego artykułu na swoim blogu. Możesz wstawić link do tego celu: https://yourblog.com/yourpost/#Specific-section.

tak też działają linki” powrót na górę”. Przypisz nazwę sekcji Do góry swojego posta i dołącz przycisk “Przejdź do góry” u dołu posta łączący się z górną sekcją.

Utwórz wyróżniające się tytuły i podtytuły

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

Wstaw Podział wiersza

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

Utwórz nowy akapit

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

Utwórz listę punktorów

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

Utwórz listę numerowaną

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

Wyróżnij tekst w post z żółtym (lub innym kolorem) tłem

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

przypisz numer pozycji na liście numerowanej

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

Utwórz listę liter

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

Utwórz listę liczb rzymskich

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

wyśrodkuj swój tekst

<center>to be centered</center>

Utwórz swój tekst pogrubienie

<strong>to be bold</strong>

zaznacz tekst kursywą

<em>to be italic</em>

Zmień kolor tekstu

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

Wstaw blockquote

<blockquote>Your quote</blockquote>

Utwórz tabelę

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.