Articles

MarkoSaric

den här artikeln är en one stop shop för dina WordPress HTML-koder. Här är listan över WordPress HTML-taggar och koder som oftast används för att skapa innehåll. Spara listan och använd den som referens när du komponerar dina WordPress-blogginlägg och sidor.

WordPress HTML i Gutenberg-redigeraren

WordPress är en av de bästa bloggplattformarna. Miljontals människor och varumärken använder det för att skapa snygga webbplatser.

den här guiden är giltig både för den egna värdversionen och den hostade versionen av WordPress. Se skillnaden mellan WordPress.com eller WordPress.org.

WordPress 5.0 med den nya Gutenberg-redaktören som släpptes i December 2018 har dramatiskt förbättrats och underlättat hur du arbetar med HTML-taggar i dina blogginlägg och sidor.

Hur visar du HTML-kod i Gutenberg-redigerade inlägg? Du lägger helt enkelt till” kod ” – blocket och skriver din kod. Det kommer att visa koden för dina besökare.

Hur redigerar du dina Gutenberg-inlägg med HTML? Du klickar helt enkelt på” Redigera som HTML ” i alternativmenyn för det specifika blocket du vill redigera.

du kan också lägga till” Classic “- blocket eller” Classic Editor ” – plugin för att få den tidigare WYSIWYG-redigeraren som jag beskriver längre ner i det här inlägget.

Classic Editor: vad är skillnaden mellan visuell och Text?

du har två redigeringsalternativ när du skriver ett blogginlägg eller en sida i den klassiska WordPress-redigeraren. Du kan använda standardvyn “visuell” eller “Text” – läget.

i det visuella läget kan du se ditt innehåll som det är. Det visuella läget kallas WYSIWYG vilket står för exakt vad det visuella läget gör: vad du ser är vad du får.

du ser ditt innehåll som dina besökare kommer att se det i sina webbläsare och du har enkla knappar som hjälper dig att redigera. De flesta använder denna” visuella ” postredigerare i WordPress när de skapar sitt innehåll.

i textläget ser du koden och HTML-taggarna. Med det här textläget kan du lägga till valfri HTML-kod i något av dina blogginlägg eller sidor. Den HTML-baserade textredigeraren ser skrämmande ut och är inte så populär bland nybörjare.

men vad händer om du vet hur man kodar eller vill ha lite mer kontroll över layouten och strukturen när du skapar dina inlägg eller sidor? Du bör använda “Text” – redigeraren.

hur man redigerar HTML i WordPress Classic Editor?

så hur kommer du till HTML-textredigeraren? Klicka på fliken “Text” i ditt WordPress-administratörsinlägg eller sidskrivning. Det är i textredigeraren som du lägger till och redigerar alla dina HTML-taggar.

Hur lägger man till HTML-kod i ett WordPress-inlägg eller-sida?

du kan helt enkelt skriva eller klistra in någon HTML-kod direkt i din WordPress “Text” editor. Prova med någon av de vanligaste taggarna från min lista nedan.

kopiera det här på webbplatsen, klistra in det i textredigeraren och” förhandsgranska ” ditt inlägg eller sida för att se hur dina besökare kommer att se det.

ibland händer det att koden blir avskalad när man byter från text till visuella lägen.

var försiktig och kontrollera att detta inte har hänt dig. Eller försök bara hålla fast vid textredigeraren om du planerar att skriva kod för att inte stöta på det här problemet.

för dem som är bekväma med kodning kan du till och med inaktivera den “visuella” redigeraren. Gå till ” användare “i din WordPress-navigeringsmeny, klicka på” din profil “och välj”Inaktivera den visuella redigeraren när du skriver”.

kopiera och klistra in mellan Google Docs, Microsoft Word och WordPress

WordPress 5.0 release har gjort det smidigt och enkelt att kopiera innehåll från Google Docs eller Microsoft Word och klistra in det i dina WordPress-inlägg och sidor.

detta var inte alltid lätt. När du arbetar med HTML i den klassiska redigeraren kanske du märker några gibberish-tecken ibland.

detta kan hända om du kopierar/klistrar in från Microsoft Word till WordPress. En användbar källa när du klistrar in HTML-kod från Word i WordPress-redigeraren är Postbar.

kopiera / klistra in din HTML från Word (eller en annan källa) i verktyget för att få en WordPress-vänlig och ren version av koden som du sedan kan infoga i ditt innehåll.

Hur visar jag HTML-koder på mina blogginlägg som vanlig text?

vad sägs om om du ville infoga och visa HTML-taggar och andra koder i ditt inlägg för dina besökare att se dem som vanlig text?

ungefär som jag gör här i min artikel? Du använder fortfarande textredigeraren men du sätter in din kod så här:

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

WordPress HTML syntax plugins för en trevligare visning av kod

det finns några WordPress plugins som kan hjälpa dig med denna process och även tillåter dig att redigera layouten och hur koden presenteras på din blogg för dina besökare.

jag rekommenderar följande två. SyntaxHighlighter Evolved är det mer populära alternativet medan Pastacode är det som fungerar bäst för dem som använder sidbyggare när de utformar en blogg.

vanligaste WordPress HTML-koder och taggar

infoga en bild

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

gör bilden klickbar till en ny destination

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

infoga en länk

Observera att ankartexten är den synliga delen av din länk. Det är ordet eller frasen som dina besökare kommer att klicka på för att komma till sidan du länkar till.

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

gör länken nofollow

för SEO-ändamål kan du behöva göra en del av din länk nofollow. Så här gör du:

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

gör länken öppen i ett nytt webbläsarfönster

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

länk till ett specifikt avsnitt på en lång sida

dessa kallas sidhopp. Dina besökare kan klicka på en länk och få flyttas någonstans längre ner eller upp artikeln.

detta är särskilt användbart för de längre guider som du vill dela upp i olika kapitel med hjälp av innehållsförteckningen.

den första delen av att skapa ett sidhopp är att tilldela ett avsnitt (eller mål) som du vill länka till.

placera den här koden till vilken del av din sida du vill länka till. Den andra delen är att faktiskt länka till det tilldelade avsnittet från ditt intro eller din innehållsförteckning.

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

detta fungerar också om du vill länka till ett specifikt avsnitt på din sida från en annan artikel på din blogg. Du kan infoga en länk till detta mål: https://yourblog.com/yourpost/#Specific-section.

detta är också hur de “tillbaka till toppen” länkar arbete. Tilldela ett sektionsnamn till toppen av ditt inlägg och inkludera en “gå till toppen” – knappen längst ner i ditt inlägg som länkar till det övre avsnittet.

skapa framstående titlar och underrubriker

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

infoga en radbrytning

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

skapa ett nytt stycke

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

skapa en punktlista

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

skapa en numrerad lista

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

markera text i ett inlägg med gul (eller någon annan färg) bakgrund

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

tilldela numret för ett objekt i din numrerade lista

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

gör en bokstavslista

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

gör en romersk nummerlista

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

centrera din text

<center>to be centered</center>

gör din text fet

<strong>to be bold</strong>

gör din text kursiv

<em>to be italic</em>

ändra färgen på texten

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

infoga en blockquote

<blockquote>Your quote</blockquote>

skapa en tabell

Lämna ett svar

Din e-postadress kommer inte publiceras.