Articles

MarkoSaric

dit artikel is een one stop shop voor uw WordPress HTML-codes. Hier is de lijst van WordPress HTML-tags en codes die het meest worden gebruikt om inhoud te maken. Sla de lijst op en gebruik deze als referentie bij het samenstellen van uw WordPress blogberichten en pagina ‘ s.

WordPress HTML in de Gutenberg editor

WordPress is een van de beste blogging platforms. Miljoenen mensen en merken gebruiken het om geweldige sites te maken.

deze gids is geldig voor zowel de zelf-gehoste als de gehoste versie van WordPress. Zie het verschil tussen WordPress.com of WordPress.org.

WordPress 5.0 met de nieuwe Gutenberg editor uitgebracht in December 2018 heeft drastisch verbeterd en vergemakkelijkt de manier waarop u werkt met HTML-tags binnen uw blog posts en pagina ‘ s.

hoe toont u HTML-code in de door Gutenberg bewerkte berichten? U voegt gewoon het blok “Code” toe en typt uw code. Het zal de code aan uw bezoekers tonen.

hoe bewerk je je Gutenberg berichten met behulp van HTML? U klikt gewoon op” Bewerken als HTML ” in het menu opties van het specifieke blok dat u wilt bewerken.

u kunt ook het “Classic” – blok of de “Classic Editor” – plugin toevoegen om de voormalige WYSIWYG-editor te hebben die ik verderop in dit bericht beschrijf.

Classic Editor: Wat is het verschil tussen visueel en tekst?

u hebt twee bewerkingsopties bij het samenstellen van een blogpost of pagina in de klassieke WordPress-editor. U kunt de standaard “visuele” weergave of de “tekst” modus gebruiken.

in de visuele modus kunt u uw inhoud zien zoals deze is. De visuele modus heet WYSIWYG, wat precies staat voor wat de visuele modus doet: wat je ziet is wat je krijgt.

u ziet uw inhoud zoals uw bezoekers het zullen zien in hun browsers en u hebt eenvoudige knoppen om u te helpen bij het bewerken. De meeste mensen gebruiken deze” visuele ” post-editor in WordPress bij het maken van hun inhoud.

in de tekstmodus ziet u de code en de HTML-tags. Met deze tekstmodus kunt u een HTML-code toevoegen aan een van uw blogberichten of pagina ‘ s. De HTML – gebaseerde teksteditor ziet er enger uit en is niet zo populair bij de beginners.

maar wat als u weet hoe te coderen of wilt u een beetje meer controle over de lay-out en structuur bij het maken van uw berichten of pagina ‘ s? Je moet de “tekst” editor gebruiken.

hoe HTML bewerken in WordPress Classic Editor?

Hoe kom je bij de HTML-teksteditor? In uw WordPress admin post of pagina schrijven sectie, klik op de” tekst ” tab. Het is in de teksteditor dat u al uw HTML-tags toe te voegen en te bewerken.

Hoe kan ik HTML-code toe te voegen aan een WordPress post of pagina?

u kunt gewoon een HTML-code direct in uw WordPress “tekst” editor schrijven of plakken. Probeer het met een van de meest gebruikte tags uit mijn onderstaande lijst.

kopieer het hier op de site, plak het in de teksteditor en “preview” uw bericht of pagina om te zien hoe uw bezoekers het zullen zien.

soms gebeurt het dat de code wordt uitgewist bij het overschakelen van tekst naar visuele modi.

wees voorzichtig en controleer of dit u niet is overkomen. Of probeer je alleen aan de teksteditor te houden als je van plan bent om code te schrijven om dit probleem niet tegen te komen.

voor degenen die vertrouwd zijn met coderen, kunt u zelfs de “visual” editor uitschakelen. Ga naar ” gebruikers “in uw WordPress navigatie menu, klik op” uw profiel “en selecteer”de visuele editor uitschakelen bij het schrijven”.

kopiëren en plakken tussen Google Docs, Microsoft Word en WordPress

WordPress 5.0 release heeft het soepel en gemakkelijk gemaakt om inhoud van Google Docs of Microsoft Word te kopiëren en te plakken in uw WordPress-berichten en-pagina ‘ s.

dit was niet altijd gemakkelijk. Wanneer u met HTML in de klassieke Editor werkt, kunt u soms wat wartaal tekens opmerken.

dit kan gebeuren als u kopieert/plakt van Microsoft Word naar WordPress. Een nuttige bron bij het plakken van HTML-code van Word in de WordPress editor is Postable.

kopieer / plak uw HTML uit Word (of een andere bron) in de tool om een WordPress vriendelijke en schone versie van de code te krijgen die u vervolgens in uw inhoud kunt invoegen.

hoe toon Ik HTML-codes op mijn blogberichten als normale tekst?

hoe zit het als u HTML-tags en andere codes in uw bericht wilt invoegen en weergeven zodat uw bezoekers ze als normale tekst kunnen bekijken?

een beetje zoals ik hier in mijn artikel doe? Je gebruikt nog steeds de teksteditor maar je wikkelt je code als volgt:

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

WordPress HTML syntaxis plugins voor een mooiere weergave van code

er zijn een aantal WordPress plugins die u kunnen helpen met dit proces en ook kunt u de lay-out en de manier waarop de code wordt gepresenteerd op uw blog te bewerken voor uw bezoekers.

ik beveel de volgende twee aan. SyntaxHighlighter Evolved is de meer populaire optie, terwijl Pastacode is degene die het beste werkt voor degenen die gebruik maken van pagina bouwers bij het ontwerpen van een blog.

meest gebruikte WordPress HTML-codes en tags

een afbeelding invoegen

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

de afbeelding aanklikbaar maken naar een nieuwe bestemming

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

link invoegen

merk op dat de ankertekst het zichtbare deel van uw link is. Het is het woord of de zin waarop uw bezoekers klikken om naar de pagina te gaan waarnaar u linkt.

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

maak de link nofollow

voor SEO-doeleinden moet u mogelijk een deel van uw link nofollow maken. Hier is hoe:

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

link openen in een nieuw browservenster

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

Link naar een specifieke sectie op een lange pagina

dit worden paginasprongen genoemd. Uw bezoekers kunnen klikken op een link en krijgen verplaatst ergens verder naar beneden of omhoog het artikel.

dit is vooral handig voor die langere hulplijnen die u in verschillende hoofdstukken wilt splitsen met behulp van de inhoudsopgave.

het eerste deel van het maken van een paginasprong is om een sectie (of doel) toe te wijzen waarnaar u wilt linken.

plaats deze code in het gedeelte van uw pagina waarnaar u wilt linken. Het tweede deel is om daadwerkelijk te linken naar die toegewezen sectie van uw intro of uw inhoudsopgave.

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

dit werkt ook als u naar een specifieke sectie van uw pagina wilt linken vanuit een ander artikel op uw blog. U kunt een link naar dit doel invoegen: https://yourblog.com/yourpost/#Specific-section.

Dit is ook hoe die “back to the top” links werken. Wijs een sectienaam toe aan de bovenkant van uw bericht en voeg een “ga naar de bovenkant” knop toe aan de onderkant van uw bericht die naar de bovenste sectie linkt.

Maak prominente titels en subtitels

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

een regeleinde Invoegen

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

Maak een nieuwe paragraaf

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

Maak een opsommingsteken in de lijst

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

Maak een genummerde lijst

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

Markeren van tekst in een bericht met gele (of een andere kleur) achtergrond

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

Toewijzen van het nummer van een item in de genummerde lijst

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

om de letters lijst

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

Maak een Romeinse cijfers lijst

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

uw tekst

<center>to be centered</center>

Maak uw tekst vet

<strong>to be bold</strong>

Maak uw tekst cursief

<em>to be italic</em>

Verander de kleur van de tekst

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

voeg een blokquote

<blockquote>Your quote</blockquote>

Maak een tabel

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd.