Code integreren in Joomla kan zowel eenvoudig als complex zijn, afhankelijk van wat voor soort code je wilt toevoegen (HTML, CSS, JavaScript, iFrame, PHP via plugins, enz.). In dit artikel verzamelen we de belangrijkste methoden en stappen uit de gekozen bronnen en zetten ze overzichtelijk naast elkaar, zodat je snel de juiste aanpak kunt kiezen voor jouw Joomla-website.
Basis: waar Joomla standaard mee werkt
In Joomla staat standaard de TinyMCE-editor ter beschikking. HTML-code kun je direct via de editor invoegen. Klicha onder de Editor aanklikken om over te schakelen naar de Code- of HTML-modus en daar kun je je code toevoegen. Met deze methode kun je eenvoudige HTML en iFrames in een artikel plaatsen.
Wanneer je een iFrame (bijvoorbeeld een YouTube-video) of een JavaScript wilt invoegen, kun je dit in principe exact op dezelfde manier doen als een HTML-code. Bij gebruik van TinyMCE kan het nodig zijn om de Code/HTML-weergave te activeren door te klikken op een knop onder het editor-gebied.
externe code en PHP: beperkingen en oplossingen
In Joomla is PHP-code standaard uit veiligheidsoverwegingen meestal gedeactiveerd. Dit betekent dat opgeslagen PHP-code in een artikel vaak nutteloos wordt doordat Joomla de code wijzigt bij het opslaan. Een oplossing is het gebruik van een plugin zoals Sourcerer van RegularLabs, waarmee PHP, CSS, HTML, JavaScript en iFrames veilig kunnen worden ingebed via de TinyMCE-editor of via aangepaste HTML-modulen.
Het Sourcerer-Plugin kan eenvoudig gevonden en geïnstalleerd worden vanuit het Joomla Extensions Directory. Hiermee kun je PHP, CSS, HTML, JavaScript en iFrames in artikelen en modules plaatsen zonder dat Joomla de code blokkeert bij het opslaan.
Andere editors en opties voor code-invoer
Naast TinyMCE kun je in Joomla ook de JCE Editor gebruiken. Als je JCE hebt geïnstalleerd, kun je binnen een artikel de HTML-broncode zien en bewerken via de specifieke “HTML-broncode” of "show/hide" opties. In de JCE-editor vind je een knop om de HTML-versie te bekijken en te bewerken, waarna je de wijzigingen weer kunt opslaan.
Voor gebruikers die veel met HTML willen werken is het handig om een module of positie te kiezen waar je de code consistent kunt plaatsen. Moderne templates bieden vaak de mogelijkheid om scripts toe te voegen in de head-tag; anders kan een HTML-module met Sourcerer of een System HeadTag-plugin een oplossing bieden. Deze aanpak helpt om code consistent en blijvend te laden ondanks Joomla-updates of template-aanpassingen.
Code plaatsen met behulp van een HTML-widget of module
In de meeste gevallen kun je de embed-code vinden in de editor als een HTML-/Code-widget. Gebruik deze widget om je code schoon en gestructureerd te plaatsen, wat vooral belangrijk is voor documentatie, tutorials en API-referenties. Door code in een net en consistent stilistische vorm aan te bieden, wordt de technische kwaliteit en zorg van je site duidelijk.
Om code te plaatsen, kun je de volgende stappen volgen:
- Log in op Joomla en open het gewenste artikel of de gewenste module.
- Schakel de editor in naar de HTML- of Code-weergave (Code-modus) via de knop onder of naast de editor.
- Plak of plak je code in het venster en sla het artikel op of publiceer de module.
- Als de code niet direct opgeslagen wordt of verdwijnen lijkt, controleer de editor-instellingen en toegangsrechten. Schakel eventueel een plugin zoals Sourcerer in voor veiligere code-invoer.
Specifieke stappen voor het gebruik van een Code/HTML-widget
Wanneer je code wilt embedden via een widget of module:
- Zoek de embed- of code-widget in de Joomla-editor. Vaak vind je deze als een knoop met HTML/Code-inhoud.
- Kopieer de embed-code en plak deze in de widget: zorg voor correcte markup, zodat de code zichtbaar blijft en correct wordt uitgevoerd.
- Controleer of de code ook in de frontend correct wordt geladen nadat de pagina is opgeslagen en gepubliceerd.
Inhoudsbeheer, opslaan en publiceren
In een artikel kun je de publicatiestatus en zichtbaarheid beheren via de rechterzijbalk. Nadat je de code hebt geplaatst, kun je het artikel publiceren door de status op "Gepubliceerd" te zetten. Voor safety en compatibiliteit is het verstandig de code eerst te testen op een staging-omgeving of een testartikel.
Tips en veelvoorkomende problemen
- Controleer of het editor-wijzigingsmenu (Editor aan/uit) correct ingesteld is en of je de code-modus hebt geselecteerd. Dit voorkomt dat code verandert of verdwijnt bij opslaan.
- Als code verdwijnt, controleer dan of er beveiligings- of filterregels zijn die inline scripts of iframes blokkeren via de server- of Joomla-beveiligingsinstellingen.
- Voor complexere integraties zoals externe scripts of widgets kun je overwegen om een aangepaste HTML-module te gebruiken of de head-tag via een System HeadTag-plugin te vullen.
- Gebruik een plugin zoals Sourcerer om PHP-/JS-/HTML-code te scheiden van de normale content en zo persistence te verbeteren.
Verfijningen en best practices
Een consistente en duidelijke codering draagt bij aan een professionele uitstraling en betere leesbaarheid. Gebruik duidelijke indents, syntax highlighting waar mogelijk en zorg voor foutloze HTML/JS/CSS om compatibiliteitsproblemen te voorkomen. Door code in een duidelijke structuur aan te bieden en waar nodig documentatie bij te voegen, kun je bezoekers sneller helpen en zelf sneller fouten lokaliseren.
Joomla Page formatting - Viewing - editing html code of a page
Schrijf je artikelen in een logische volgorde en gebruik blokken met duidelijke kopjes zodat bezoekers vlot kunnen navigeren tussen HTML-, CSS- en JavaScript-onderdelen. Met de juiste aanpak blijft de code werken bij toekomstige Joomla-updates en template-aanpassingen.