Een te gek coole bulletlist zonder plugins voor WordPress… hoe doe je dat?

Een bulletlist zonder plugins… tenminste zonder extra plugins.

Wanneer je een aantal zaken op een rijtje wilt zetten, dan is dat vrij makkelijk in WordPress en ik maar hier dan ook regelmatig gebruik van. Een ‘bulletlist’ zoals hieronder… daar hoef je niet eens bij na te denken!

• Eerste optie
• Tweede optie
• Derde optie

Maar die zwarte punten, dat wordt al snel saai. Daar wil je mogelijk andere tekens voor gebruiken. En dan komt de uitdaging.

Er zijn talloze plugins die je -meestal met behulp van shortcodes- helpen om makkelijk zo’n lijst samen te stellen. Maar dan heb je toch twee serieuze punten te pakken.

Een extra plugin… en shortcodes.

Allebei zaken die de performance van je website ietwat omlaag helpen. Dat moet anders kunnen toch?

En dat kan ook inderdaad anders en in dit artikel laat ik je zien hoe je makkelijk een bulletlist zonder plugins maar met met andere dan de standaard ‘rondjes’ en andere tekens makkelijk kan realiseren.

Je moet alleen niet bang zijn om een klein beetje CSS aan je website toe te voegen.

CSS – Wat is dat ook al weer?

Wanneer je net zo oud bent als ik en een ‘early adopter’ was met betrekking tot het internet, dan kan je je vast nog wel herinneren dat er een tijd was, waar je in je HTML aangaf, hoe je HTML elementen er uit moesten zien. Bijvoorbeeld

<h1 color="#FF0000">Dit is fel rood</h1>

zette een felrode tekst op het scherm. Wanneer ik al mijn koppen fel rood had, en mijn klant mij vertelde, dat zachtroze toch meer zijn kleur was, dan mocht ik in alle pagina’s die kleur vervangen.

Dus op een gegeven moment, kwam er het idee, dat structuur (HTML) en stijl(CSS) van elkaar gescheiden moest worden en in verschillende bestanden moest komen te staan. Dus, hetzelfde voorbeeld als hierboven, maar dan ‘modern’

<h1 class="red-header">Dit is fel rood</h1>

en in een CSS bestand

.red-header {
    color: #ff0000;
}

Het aardige was, dat je er nog veel meer bij kon schrijven met betrekking tot de kenmerken van de gewenste tekst. Zoals

.red-header {
   color: #ff0000;
   font-family: Verdana;
   font-size: 2.3em;
   background-color: #efefef;
}

En met ditzelfde CSS gaan we dus aan de slag voor het maken van onze bulletlijsten.

Toevoegen aan je CSS

Vroeger had je meestal een extra plugin nodig wilde je CSS aan je WordPress website toe kunnen voegen. Maar gelukkig ondersteunt tegenwoordig vrijwel ieder thema via de ‘Customizer’ de mogelijkheid om dit toe te voegen, waardoor een bulletlist zonder plugins eigenlijk een fluitje van een cent is geworden.

In dit artikel bespreek ik twee mogelijkheden :

• Een bulletlist in Gutenberg
• Een bulletlist in Elementor (Pro).

Een bulletlist in Gutenberg

Voor je een bulletlist kan toevoegen, wil je natuurlijk eerst weten wat voor bullets je eigenlijk toe kan voegen. Zelf gebruik ik hier graag de iconen uit de FontAwesome collectie voor. Dit is denk ik wel de grootste verzameling ‘font icons’ die er op dit moment beschikbaar is. Op het moment dat ik dit schrijf bestaat de collectie uit 1603 iconen, maar de collectie groeit nog steeds.

Om dit font daadwerkelijk te kunnen gebruiken, moet je het font eerst laden. Aangezien veel plugins dit font gebruiken, is de kans groot, dat het al geladen is. Mocht je echter de aanwijzingen in dit blogartikel volgen en je ziet niets, dan zal je eerst zelf het font moeten laden. Dat kan met de FontAwesome plugin van Font Awesome zelf, maar je kan het ook doen door een codefragment aan je functions.php toe te voegen (we wilden immers extra plugins voorkomen!).

Als we dit gedaan hebben, dan gaan we op zoek naar een aardige icon voor onze bullet. Zelf heb ik voor dit artikel de ‘angry’ icon uitgekozen.

Waar het hier om gaat is de regel met tekst en icoontjes die je onder de naam van het icoon ziet staan. Eén van die teksten is een code van vier cijfers en letters. Die hebben we nodig, dit is namelijk de ‘Unicode’ waarde van het icoon en alleen die code kunnen we veilig in onze CSS bestanden gebruiken.

In mijn CSS moet ik nu een ‘class’ definieren, die ik wil gebruiken wanneer ik het ‘angry’ icoon als bullet wil gebruiken.

ul.angry-bullet  {
    
  padding-left: 30px;
   text-indent: -25px;
   list-style: none;
   list-style-position: inside;
  
}

ul.angry-bullet  li:before {
  font-family: "Font Awesome 5 Free";
  content: '\f556\00a0\00a0';
  margin-right:15px;
  color: green;
  font-weight: bold;
  font-size: 1.2em;
  margin-right: .100em;
}

De vetgedrukte code die moet je vervangen door iets ‘passends’. De naam voor de bullet moet natuurlijk een zinvolle naam zijn en de code moet de code voor het juiste icoon zijn. Vergeet de punt niet voor de class naam! Ook de kleur wil je mogelijk aanpassen.

In het Dashboard voeg je via Weergave->Customizer->Extra CSS (of wat de omschrijving ook is voor jouw thema, in ieder geval iets met ‘CSS’) bovenstaande code toe.

Vervolgens voeg je in de Gutenberg editor in je tekst, waar je het hebben wilt, een ‘blok’ met een lijst toe.

• Een lijst als
• deze bijvoorbeeld.

Bij de instellingen van het blok kan je onder ‘Geavanceerd’ een extra CSS class toevoegen

In het veld ‘Extra CSS-class(es)’ vul ik nu de naam die ik voor mijn CSS class heb bedacht in, dus in mijn geval ‘angry-bullet’. Let op, ditmaal zonder punt!

En als eindresultaat krijgen we dus zoiets.

• Een lijst
• die voor
• veel
• kwade
• gezichten zal
• gaan zorgen…

Tot zover Gutenberg. Voor Elementor werkt het iets anders!

Een bulletlist in Elementor

Eén ding waar je je in Elementor niet druk over hoeft te maken is het laden van je icon fonts. Want Elementor gebruikt FontAwesome al standaard.

De HTML die je moet gaan gebruiken is alleen wel iets anders.

Want wanneer ik in Gutenberg een class toeken aan een blok, dan wordt die class direct toegevoegd aan het HTML element van dag block. Dus in ons voorbeeld aan de lijst.

Doe ik hetzelfde in Elementor, dan wordt er eigenlijk een ‘blok’ (door middel van een <div>) om het geheel heen getekend. De CSS die we hier nodig hebben wijkt dan ook lichtelijk af van de CSS in Gutenberg, maar het idee blijft hetzelfde.

.angry-bullet ul {
    
  padding-left: 30px;
   text-indent: -25px;
   list-style: none;
   list-style-position: inside;
  
}

.angry-bullet ul li:before {
  font-family: "Font Awesome 5 Free";
  content: '\f556\00a0\00a0';
  margin-right:15px;
  color: green;
  font-weight: bold;
  font-size: 1.2em;
  margin-right: .100em;
}

Je ziet, de ‘ul’ staat anders gepositioneerd ten opzichte van de .angry-bullet.

Wanneer is dit handig om te doen in Elementor?

Je zal je misschien afvragen, waarom je dit eigenlijk zou willen doen in Elementor. Elementor heeft toch zelf al een ‘icon list’, kan je die dan niet gebruiken?

Jawel hoor. Maar die ‘icon list’ is eigenlijk wel heel bewerkelijk in gebruik, onder meer omdat deze ook veel flexibeler bedoelt is. Je kan met die item list bijvoorbeeld makkelijk een eigen icoon gebruiken.

Maar wat nog veel belangrijker is, een icon list kan niet gevoed worden door de Dynamische data van Elementor!

Dus wanneer je een thema-template hebt gemaakt en een bullet list toe wilt voegen, die gevoed wordt vanuit een ACF, PODS of Toolset field, dan gaat dat niet zomaar met de icon list. Gebruik je echter een ‘gewone’ teksteditor om daar je bulletlijst in te plaatsen, en geef je in de ‘Advanced Widget Settings’ die widget dezelfde class als je CSS fragment (in ons geval ‘angry-bullet’, dan krijg je netjes de bullets te zien die je ook werkelijk verwachtte.

Blijf bij!

Met WordPress heb je oneindig veel mogelijkheden en ‘bijblijven’ kost soms de nodige moeite. Gelukkig is er al tien jaar lang de WordXPression blog, die jou alle informatie geeft die je nodig hebt.

Zorg dat je bij blijft en schrijf je hieronder op de pagina in voor de nieuwsbrief, of abonneer je op de ‘browser push berichten’ door op de rode bel links onder op de pagina te klikken.