Handleidingen/Inhoud aanmaken/Code/Aangepaste HTML toevoegen

Aangepaste HTML toevoegen

Gebruik het Aangepaste HTML-blok om HTML-code toe te voegen en een voorbeeld te bekijken tijdens het bewerken. In deze handleiding leer je hoe je dit blok kan gebruiken om code toe te voegen aan je website.

Voordat je aan de slag gaat

Voordat je begint, het aangepaste HTML-blok is bedoeld voor het toevoegen van onbewerkte HTML-code aan een enkele pagina of bericht. Het is niet altijd de juiste tool. Als je doel overeenkomt met een van de onderstaande gevallen, is de gekoppelde gids een snellere manier:

  • Een video, kaart, sociaal bericht of service van derden insluiten (YouTube, Spotify, Instagram, Giphy, Pinterest en vele andere): zie Insluiten van inhoud van andere platforms. Het insluitblok werkt op elk abonnement en ondersteunt veel populaire services zonder aangepaste code.
  • Contactgegevens, aanmeldingen of feedback verzamelen: zie formulierblok. Het formulierblok bouwt een werkformulier zonder HTML.
  • CSS-styling toevoegen aan je site: zie Aangepaste CSS toevoegen.
  • Code toevoegen aan de headers van je site (metatags voor verificatie, scripts van derden die voor de hele site laden): zie Code toevoegen aan headers.

Voeg het aangepaste HTML-blok toe

Volg de volgende stappen om het aangepaste HTML-blok toe te voegen:

  1. Ga naar het dashboard van je site en selecteer de pagina, het bericht of de template waaraan je de HTML wilt toevoegen.
  2. Klik op het pictogram + blokinvoeger en zoek naar ‘HTML’.
  3. Klik op het aangepaste HTML-blok om het toe te voegen aan je inhoud.
A box drawn around the Custom HTML block in the block selector.

Meer gedetailleerde instructies over het toevoegen van blokken vind je hier.

Voeg je HTML toe

Nadat je het blok hebt toegevoegd, volg je deze stappen om je HTML-code toe te voegen:

  1. Klik op de knop ‘HTML bewerken‘.
The HTML block with an Edit HTML button.
  1. Schrijf of plak je HTML-code aan de linkerkant van de editor.
    • Terwijl je je HTML opstelt, zie je een voorbeeld van de code aan de rechterkant.
  2. Klik op de knop ‘Updaten‘ om je wijzigingen op te slaan.
The HTML editor with code on the left and a preview on the right.

Je ziet het resultaat van je HTML-code in de editor. Klik op de knop ‘HTML bewerken‘ in de blokwerkbalk om wijzigingen aan te brengen.

Ondersteunde HTML

HTML is een computertaal die browsers vertelt hoe ze website-inhoud moeten weergeven. WordPress.com staat de volgende HTML-tags toe voor alle abonnementen:

  • a
  • address
  • abbr
  • acronym
  • area
  • article
  • aside
  • b
  • big
  • blockquote
  • br
  • caption
  • cite
  • class
  • code
  • col
  • del
  • details
  • dd
  • div
  • dl
  • dt
  • em
  • figure
  • figcaption
  • footer
  • font
  • h1, h2, h3, h4, h5, h6
  • header
  • hgroup
  • i
  • img
  • ins
  • kbd
  • li
  • map
  • mark
  • ol
  • p
  • pre
  • q
  • rp
  • rt
  • rtc
  • ruby
  • s
  • section
  • small
  • span
  • strike
  • strong
  • sub
  • summary
  • sup
  • table
  • tbody
  • td
  • tfoot
  • th
  • thead
  • tr
  • tt
  • u
  • ul
  • var

Om de volgende tags toe te voegen, heb je een betaald abonnement nodig met geactiveerde hostingfuncties. Leer hoe je de hostingfuncties van je abonnement activeert.

embed, frame, iframe, form, input, object, textarea, script, style, link

Voor meer informatie over de soorten code die je aan je website kunt toevoegen, en alternatieven wanneer een soort code niet wordt ondersteund, bezoek onze gids over het toevoegen van code aan je website.

Veelvoorkomende problemen oplossen

Als je HTML-code na het opslaan niet zoals verwacht wordt weergegeven, controleer dan de volgende veelvoorkomende oorzaken.

Code verdwijnt na opslaan

WordPress.com filtert bepaalde HTML-tags voor beveiliging. Tags zoals iframe, script, style, form, embed en object vereisen een betaald abonnement waarbij hostingfuncties zijn geactiveerd.

Als je code verdwijnt of gedeeltelijk wordt verwijderd nadat je hebt opgeslagen, voer dan deze controles op volgorde uit:

  1. Controleer je abonnement. Ga naar het dashboard van je site en selecteer Upgrades → abonnementen. Het aangepaste HTML-blok accepteert alleen beperkte tags voor een betaald abonnement. Als je gebruikmaakt van het gratis abonnement, upgrade dan naar een betaald abonnement om door te gaan.
  2. Activeer hosting-functies. Een betaald abonnement alleen is niet genoeg – hostingfuncties moeten ook actief zijn. Installeer tenminste één plugin op je site om je abonnement te activeren en aangepaste code te accepteren.
  3. Voer je code opnieuw in. Zodra je abonnement is betaald en de hostingfuncties actief zijn, plak je de code opnieuw in het aangepaste HTML-blok en sla je deze op.

Als je code nog steeds wordt verwijderd na het activeren van hostingfuncties, wordt de tag mogelijk niet ondersteund in deze context, of de externe service kan insluitcode publiceren die niet-ondersteunde opmaak gebruikt. Probeer in plaats daarvan het insluitblok, of zie hieronder ‘Onverwachte of ongeldige inhoud oplossen‘.

Content van derden insluiten zonder aangepaste code

Als je inhoud probeert te embedden van een service van derden (video’s, muziek, kaarten, sociale berichten, agenda’s, nieuwsbrieven of documentlezers), gebruik dan in plaats daarvan het insluitblok. Het insluitblok werkt op elk abonnement, vereist niet dat je HTML schrijft en ondersteunt diensten zoals YouTube, Vimeo, Spotify, X, Instagram, TikTok en vele anderen.

Als het insluitblok je service niet vermeldt, heeft de service waarschijnlijk een iframe of script nodig. Voeg de insluitcode toe aan een aangepast HTML-blok op een betaald abonnement met geactiveerde hostingfuncties.

Los ‘onverwachte of ongeldige inhoud’-fouten op

Als je een bericht ziet dat je blok onverwachte of ongeldige inhoud bevat, kan de HTML in het blok verkeerd gevormd zijn of veranderd zijn. Selecteer “Probeer blokherstel” om de editor het probleem automatisch te laten oplossen. Als de fout zich blijft voordoen, bekijk dan onze handleiding over het oplossen van blokfouten voor meer opties.

Copied to clipboard!