Opmaak van blogposts en basis HTML die elke blogger nodig heeft

Opmaak van blogposts vereist niet dat je veel HTML kent, maar het helpt zeker!

Als je wilt dat je blog serieus wordt genomen, moet je de opmaak van je blogposts onder de knie hebben.

Dit betekent ook dat je een paar basis HTML-trucjes moet leren om je artikelen interessant en consistent gestyled te maken.

Nu maak je geen zorgen, ik zeg niet dat je een programmeur of iets dergelijks moet worden om aantrekkelijke en ongeïnformeerde blogberichten te maken, maar het oppikken van een paar essentiële vaardigheden zal veel helpen.

WordPress is een CMS (Content Management System) en als zodanig vereist het niet dat je alles zelf codeert.

Er zijn hulpmiddelen voor.

De meeste code is weggestopt om te voorkomen dat er iets stuk gaat en je hebt een WYSIWYG (What You See is What You Get) Editor voor het schrijven en opmaken van blogberichten en pagina’s.

Als je WordPress al een tijdje gebruikt, dan weet je dat er zowel een Visual als een Text tabblad rechtsboven in de content editor is, waarmee je kunt switchen tussen de gestileerde versie van je bericht en de ruwe HTML.

Voor de newbies.

Visual = WordPress Visual Editor

Text = WordPress HTML Editor / Ruwe tekst

De meeste beginners zijn overweldigd en bang als ze voor de eerste keer de ruwe HTML op het tabblad tekst zien en snel terugschakelen.

Maar dit hoeft niet het geval te zijn en je zult een veel betere blogger worden door de tijd te nemen om comfortabel te worden met het werken en bewerken in deze modus.

Met een beetje oefening kun je gemakkelijk een aantal van de basisprincipes onder de knie krijgen, de syntaxis is eigenlijk heel logisch.

Syntaxis (Computerdefinitie): De structuur van verklaringen in een computertaal.

Wat is HTML?

HTML staat voor Hypertext Markup Language en is de programmeertaal die wordt gebruikt voor het maken van webpagina’s en applicaties.

MetHTML kunt u basisfunctionaliteit maken die u vervolgens kunt stijlen met CSS (Cascading Style Sheets).

Het is in 1990 gemaakt door Tim Berners-Lee, een persoonlijke held van mij die ook wordt toegeschreven aan het uitvinden van het internet, maar ik ga je niet alles leren over HTML en de geschiedenis, maar als je het nieuwsgierige type bent, kun je verder lezen op Wikipedia.

We zijn hier gewoon om te kijken naar hoe HTML betrekking heeft op het schrijven en bewerken van WordPress berichten en pagina’s.

Wanneer u onbekende code in het tabblad Tekst van de WordPress editor ziet, kijkt u naar HTML en in sommige gevallen kan het enkele CSS inline stijlen bevatten.

HTML Voorbeeld

<h2>This is a title</h2>

De rood gemarkeerde delen zijn HTML en in dit voorbeeld zie je aan het begin een openende h2 title tag en aan het eind de afsluitende h2 title tag.

Zie je dat het enige verschil is dat de afsluitende tag een backslash heeft voor de naam van de tag? Zo kunt u snel zien wanneer uw HTML is geopend en gesloten.

Dit is een geweldige tip om fouten of gebroken HTML op te sporen.

HTML met Inline CSS Voorbeeld

<h2 style="color:red;">This is a title</h2>

In bovenstaand voorbeeld hebben we dezelfde h2 gebruikt, maar deze keer hebben we HTML gebruikt om één stukje CSS aan te roepen om de kleur in rood te veranderen. Merk op dat het enige deel dat eigenlijk CSS is, in rood is gemarkeerd.

In het algemeen zult u niet veel inline CSS zien, omdat de beste manier is om uw HTML-elementen met externe CSS-bestanden te stijlen, dit is de typische manier waarop WordPress-thema’s stijlen automatisch op uw blogpagina toepassen.

Ik persoonlijk adviseer niet om je HTML inline in de WordPress editor te stijlen, maar het is belangrijk om je ervan bewust te zijn voor het geval je ooit code moet bewerken of opschonen die afkomstig is van andere bronnen zoals een plugin of van kopiëren en plakken vanuit een andere bron.

Onvermijdelijk zul je er baat bij hebben om dingen op te kunnen ruimen wanneer gremlins (geen technische term) hun weg vinden in je inhoud.

Dus laten we eens kijken naar hoe HTML toe te voegen aan WordPress berichten en berichten en pagina’s en wat je nodig hebt om te weten.

WordPress Basis HTML Essentials

Wanneer u HTML toevoegt om uw inhoud te stijlen, moet u niet vergeten om uw inhoud te omwikkelen met de relevante openings- en sluitings-tags.

Voorbeeld:

<p>Paragraphs should be wrapped with p tags</p>

Er zijn voorbeelden van nuttige HTML-elementen die geen sluit-tag nodig hebben omdat ze zichzelf sluiten.

Een voorbeeld is de regeleinde <br> die werkt zonder een sluit-tag, dit komt omdat regeleinden geen inhoud bevatten en deze ook niet kunnen bevatten.

Kopteksten Tags & Subkopteksten

Er zijn verschillende soorten kopteksten op een WordPress bericht, ten eerste heb je de post titel koptekst, dit is een <h1> en dan heb je de mogelijkheid om kopteksten toe te voegen aan uw inhoud om u te helpen uw gedachten te groeperen.

Deze variëren van h1 (kop 1) tot en met h6 (kop 6) en uw thema zal ze meestal op de juiste grootte stylen.

Omdat de titel van uw pagina of bericht automatisch een h1 is, wilt u voorkomen dat u deze in uw inhoud gebruikt, omdat alle andere gevallen zullen concurreren met de hoofdtitel, die de naam van uw bericht is.

Volg in plaats daarvan het semantisch correcte ordeningsproces en de eerste keer dat u een sectietitel moet gebruiken, gaat u naar beneden naar de h2-titel.

Hoewel u deze eenvoudig kunt instellen met behulp van de drop-down linksboven in de post editor WYSIWYG, is het handig om te weten hoe ze werken in HTML-formaat, zodat u eventuele fouten kunt corrigeren.

Hier zijn enkele voorbeelden

<h1>This is a heading 1, you won't need to use me in your content</h1>
<h2>This is a heading 2, I'm very useful, you can use me to organize your articles into sections.</h2>
<h3>This is a heading 3, Only use me if you already have h2 section headings and you need to divide those sections into sub-sections.</h3>
<h4>This is a heading 4, I'm similar to the above, only use me if you have already used h3's</h4>

Hopelijk begint u hier een patroon te zien met de HTML-syntaxis.

Alle HTML-elementen beginnen met een opening <

Ze sluiten ook af met een sluiting >

Openende elementen kunnen gewoon de naam van het element bevatten.

Sluitende tags bevatten een voorwaartse schuine streep na hun opening < en voor de naam van het HTML-element dat ze afsluiten.

Alleen al door een beetje meer vertrouwd te raken met het bovenstaande, kom je al een heel eind verder dan de meeste bloggers die WordPress gebruiken.

Vet of cursief

Wanneer je een punt wilt benadrukken en de aandacht op bepaalde woorden wilt vestigen, kun je vet of cursief gebruiken om ze te laten opvallen.

Ik geef absoluut de voorkeur aan deze aanpak boven ALL CAPS, dat op mij overkomt als schreeuwen.

De HTML voor vet is <strong> en voor cursief <em>.

Leuk weetje: Strong is gemakkelijk te onthouden om iets vet te maken, maar waarom gebruikt het cursief-element em? Em is een afkorting van nadruk. Dat helpt misschien om het te onthouden.

<em>This text is italicized, I am for gentle emphasis</em>

<strong>This text is bold, I am for strong emphasis</strong>

Extra kun je natuurlijk de WordPress WYSIWYG gebruiken of de sneltoets CTRL + B voor vet en CTRL + I voor cursief nadat je de tekst die je wilt wijzigen hebt gemarkeerd.

Voor een volledige lijst met WordPress sneltoetsen en andere opmaakmethoden, ga je hierheen.

Er zijn enkele regels voor hoe je deze wel en niet moet gebruiken, waaronder ze wederzijds exclusief houden, ze reserveren voor korte zinnen en spaarzaam gebruiken.

Practical Typography heeft een geweldig artikel waarin het belang van deze regels wordt uitgelegd.

Als je kopij schrijft om mensen echt aan je te binden, zoals verkoop-copy, dan kun je deze regels buigen, maar niet breken.

accentuering

Bedenk: als alles wordt benadrukt, dan wordt niets benadrukt!

Lijsten – Geordend & Ongeordend

Er zijn twee soorten lijsten die u met HTML kunt toevoegen en die ook worden ondersteund door de WordPress WYSIWYG.

Dit zijn:

Geordende lijsten – <ol>

Geordende lijsten worden weergegeven als een reeks genummerde items. Dit is handig wanneer u een lijst opstelt waarbij de volgorde van belang is.

<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>

De bovenstaande code verandert in:

1. Item 1
2. Item 2
3. Item 3

Geordende lijsten – <ul>

Geordende lijsten zijn in wezen opsommingstekens.

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

En deze verandert in de onderstaande opsomming.

• Item 1
• Item 2
• Item 3

We weten allemaal hoe nuttig lijstjes zijn en ze helpen ook om je inhoud op te breken en interessanter te maken.

Een belangrijk verschil dat u hier zult opmerken, is dat er individuele lijstitems zijn <li> en ze zijn in hun geheel omwikkeld met een <ol> of <ul> wrapper.

Dit is belangrijk om op te letten, want als de wikkelende <ol> of <ul> ontbreken, zullen de lijstitems niet renderen.

Afbeeldingen

Een ander belangrijk aspect van het opmaken van een blog post of welke pagina dan ook met WordPress is het gebruik van afbeeldingen en je zou geen moeite moeten hebben om een aantal interessante foto’s te vinden die je kunt krijgen van Yahoo images en andere copyright vrije afbeeldingen websites. Sommige van deze opties zijn betaald, maar velen van hen zijn gratis op voorwaarde dat u krediet geeft met een bronvermelding en link.

Een kleine prijs om te betalen om professionele visuals op uw website of blog te hebben.

Een foto is meer waard dan duizend woorden, zoals ze zeggen, ze bieden ook uw lezers visuele stimuli, evenals pauzes om te helpen het uw inhoud in verteerbare brokken te breken.

Dit helpt je lezers betrokken te houden en hoewel je afbeeldingen niet zelf hoeft te coderen, is inzicht in de syntaxis nuttig.

Hier volgt een voorbeeld van afbeeldingscode en hoe die eruitziet als je op het tabblad Tekst van je editor kijkt.

<img src="https://mazepress.com/image.png">

Een afbeelding heeft geen afsluitende tag nodig omdat alle informatie die het nodig heeft, is opgenomen binnen de openings- en sluitingshaken van het HTML-element. De src roept eenvoudigweg de locatie van de URL op.

WordPress staat u toe uw afbeeldingen links of rechts te laten zweven of u kunt ze centreren. Als u dat doet en de code in het tabblad Tekst bekijkt, zult u zien dat er klassen zijn toegevoegd die worden gebruikt om de afbeeldingen dienovereenkomstig te stijlen.

Dit is een voorbeeld van waar externe CSS wordt gebruikt om verschillende stijlen op verschillende afbeeldingen toe te passen.

Belangrijk: Voordat u afbeeldingen aan uw berichten en pagina’s toevoegt, moet u ervoor zorgen dat ze zijn geoptimaliseerd voor snelheid en zoekmachines.

Embeds

Onvermijdelijk zult u embed-codes van externe websites willen gebruiken.

Een voorbeeld is wanneer u een video van YouTube of Vimeo wilt toevoegen, u gaat naar delen en het geeft u een lange code die u kunt kopiëren.

Het belangrijkste om te onthouden is dat u geen HTML of andere code op het visuele tabblad van de inhoudseditor kunt plakken. Als u dat doet, wordt de code vervormd en onbruikbaar wanneer u op Opslaan drukt.

Zorg ervoor dat u naar het tabblad Tekst gaat en plak de code op de plaats waar u deze wilt weergeven.

Hieronder vindt u een voorbeeld van insluitcode van YouTube.

<iframe width="560" height="315" src="https://www.youtube.com/embed/ssxCQuv3KzE" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Weliswaar kunt u met WordPress eenvoudig een YouTube-URL in uw bericht plakken om deze als video weer te geven, maar dit geeft u mogelijk niet de volledige controle over de videoafmetingen en de andere insluitinstellingen.

Om deze reden, en omdat ik van de oude stempel ben, gebruik ik nog steeds de iframe embed code.

De meeste websites die embed codes aanbieden, worden niet door WordPress ondersteund en dus moet je nog steeds op de hoogte zijn van embed codes, iframes en hoe ze werken om multimedia aan je berichten te kunnen toevoegen.

Shortcodes

Shortcodes zijn geen HTML. In feite zijn ze niet eens een programmeertaal, ze zijn een WordPress native functie waarmee plugin en thema ontwikkelaars eenvoudige manieren kunnen creëren voor jou en mij om elementen toe te voegen aan onze webpagina’s en berichten.

Het eenvoudigste voorbeeld dat op vrijwel elke blog staat, is een shortcode voor een contactformulier, maar er zijn honderden, zo niet duizenden potentiële toepassingen voor shortcodes die de mogelijkheid om toe te voegen omvatten:

• Tabellen
• Galerijen
• Prijzenpakketten
• Video’s
• Lead Magnets / E-mail Opt-in formulieren
• Podcast Afleveringen

Hier is een shortcode voor een contactformulier gegenereerd door de Contact Form 7 plugin, een van onze aanbevolen plugins die we installeren op 90% van onze sites en blogs.

Note: ik moest spaties toevoegen na de openende en voor de sluitende haakjes om het contactformulier niet te tonen, dus stel je het voor zonder de spaties.

Merk op dat de syntaxis voor een shortcode anders is. Ze beginnen met een openingstussen haakjes in plaats van < en >.

Ze worden vervolgens geformatteerd door de ontwikkelaar van de shortcode om het u gemakkelijk te maken essentiële instellingen aan te passen en te wijzigen.

Wanneer de webpagina wordt geladen, laadt dit contactformulier in feite ongeveer 20 regels rommelige HTML, dus het is veel gemakkelijker voor u wanneer u een shortcode kunt openen.

Het enige voorbehoud is dat u shortcodes niet te veel wilt gebruiken, omdat ze uw webpagina’s zullen vertragen.

Ze zijn handig om te weten en kunnen het proces van het bewerken van je bericht een stuk minder omslachtig maken als je geen grote hoeveelheden HTML hoeft te gebruiken die je niet begrijpt en waar je voorzichtig omheen moet werken.

Diverse Opmaak Adviezen

Er zijn verschillende andere tips die ik nieuwe WordPress studenten adviseer in gedachten te houden die ik kort ga behandelen.

Deze omvatten:

• Voeg geen onnodige regelafbrekingen toe. Dit betekent dat je geen <br> HTML-tag moet gebruiken en dat je niet twee keer op Enter moet drukken tussen alinea’s en secties, tenzij het echt niet anders kan. Het maakt uw artikelen rommelig en u bent gebonden aan het creëren van inconsistenties.
• Voeg geen pagina specifieke lettertype families, maten, en kleuren – Opnieuw dit maakt uw berichten zien er verschrikkelijk en alsof ze zijn gemaakt in 1995. Je denkt misschien dat een groene titel met een uniek lettertype de aandacht trekt, maar het ziet er inconsistent en onprofessioneel uit. Uw thema moet deze stijlen dicteren.
• Voeg nooit HTML of embed code toe aan het Visual Tab – Dit kan leiden tot onverwachte resultaten, veel opruimen of uw pagina helemaal afbreken.
• Upload nooit video’s naar WordPress – Uw website hosting is niet gebouwd voor het leveren van video-inhoud. Gelukkig bieden YouTube en Vimeo toch supersnelle en 100% gratis videohosting. Daarom kunt u het beste video’s van YouTube insluiten, zelfs als het uw eigen video’s zijn.

Niets te ingewikkeld, maar ik zie vaak mensen deze fouten maken en hun leven moeilijker maken.

Maar binnenkort zou het wel eens anders kunnen zijn, heel anders zelfs!

Gutenberg, de toekomst van bloggen?

Gutenberg is een nieuwe content editor die vanaf de grond wordt opgebouwd door WordPress en zeer binnenkort naar een installatie bij u in de buurt zal komen.

Is het de toekomst van bloggen? Wie weet? Maar het is zeker de toekomst van WordPress, dus het is tijd om mee te doen.

Gutenberg is een ander beest.

Als je ooit Medium.com hebt gebruikt voor bloggen, dan zal wanneer je Gutenberg voor het eerst probeert, het griezelig vergelijkbaar aanvoelen.

In mijn mening is dit een goede zaak, Medium’s afleidingsvrije inhoudseditor is prachtig gemakkelijk te gebruiken en zien dat WP hier nota van neemt is een positieve zaak voor iedereen die betrokken is bij het runnen van blogs en websites die op WP draaien.

De Gutenberg-editor is ook modulair en stelt je in staat om blokken in je inhoud te slepen die elk een ander doel hebben.

Dit is vergelijkbaar met hoe page builder plugins en bepaalde thema’s momenteel dit soort drag and drop-oplossing bieden, maar nu komen deze functies standaard naar WordPress.

Als er één aspect van WordPress is dat in de loop der jaren niet veel is geëvolueerd, is het de TinyMCE-editor geweest, dus ik verwelkom deze innovatie met open armen.

Als je worstelt met het formatteren van blogberichten met de huidige editor, kun je Gutenberg al proberen door het te downloaden en te installeren door naar plugins in je dashboard te gaan en te zoeken naar “Gutenberg”.

Blogpostopmaak & Basis HTML Final Word

Als je een beetje tijd besteedt aan het oefenen van het bovenstaande, krijg je veel meer controle over je inhoud en hoe deze wordt gepresenteerd.

Hopelijk voel je je nu een beetje meer op je gemak met blogpostopmaak en basis HTML-gebruik.

Deze vaardigheden kunnen je veel tijd, geld en hoofdkrabbels besparen wanneer de opmaak van je inhoud verkeerd gaat of niet goed rendert.

Terwijl de bovenstaande basisprincipes genoeg zijn voor de meeste bloggers en WordPress website-eigenaren, als je nieuwsgierig bent om meer te leren, zijn er een aantal geweldige gratis websites waar je HTML kunt leren, waaronder CodeAcademy en w3Schools.

Nu, ga en maak je inhoud mooi! 🙂

Als je dit artikel nuttig vond, overweeg dan om een aantal van onze andere nuttige bloggidsen te bekijken, zoals onze Blog Post Checklist: Essentials Guide or How to Repurpose Content and if you a fan of these kind of guides, subscribe to my newsletter and I will share my best content and discoveries with you via email.