Met Een CSS Class Tekst Een andere Opmaak Geven

Zo nu en dan is het handig dat je de mogelijkheid hebt om een stukje tekst of afbeelding een andere opmaak te geven dan de rest van de tekst. Bijvoorbeeld wanneer je lezers ergens specifiek op wilt wijzen. Dit kun je natuurlijk doen door tekst vet- of schuingedrukt te maken, maar je kan de tekst ook een compleet eigen opmaak geven.

Om een stukje tekst een aparte opmaak te geven, kun je hiervoor een apart ‘CLASS’ maken en deze toevoegen aan je CSS bestand van je theme. Klinkt misschien ingewikkeld, maar dat valt best mee. Lees maar mee…

Een class bedenken

De eerste stap is het bedenken van een nieuwe naam voor je class. Dit mag geen naam zijn die al in de themebestanden voorkomt. Theme codes zijn in het Engels, dus zolang je Nederlandse woorden gebruikt, ontstaan er geen problemen. Ik kies even voor de naam leesdit

Ok, deze naam gaan we verpakken in een stukje code. Die code zal de opmaak van de tekst bepalen. Dat gaan we eerst eens instellen. Hiervoor heb je het bestand nodig waar de code in geplaatst moet worden. Dit bestand heet voor de meeste WordPress theme style.css en is te vinden in de themefolder op je server.  (wp-content > themes > jouwthemenaam)

Commerciële themes

Veel commerciële themes hebben tegenwoordig ook een optie om deze codes direct via het beheerpaneel van WordPress in te voegen. Het theme dat ik gebruik (Salient) heeft die mogelijkheid en ik kan de code daarom direct verwerken via het WP beheerpaneel.

De css-code die gebruikt is om deze opmaak te bereiken, ziet er zo uit:

Hieronder vind je de betekenis van elk stukje code:

Om de code te koppelen aan een class (die naam die je eerder hebt bedacht) verwerk je de class-naam op de volgende manier in de code. Let vooral op de punt voor de naam van de class en beide accolades (achter de class-naam en aan het eind van de code):

Deze code plak je onderaan het style.css bestand. wanneer je de mogelijkheid om de css direct in je theme te verwerken, dan is dat natuurlijk een snellere en betere optie.

Tekst markeren met een CLASS

Zodra de code in je tekst is verwerkt, hoef je alleen nog maar het stukje tekst van de bijbehorende class-naam te voorzien. Hiervoor open je het artikel waarin de class wordt gebruikt en kies je links bovenaan de editor de optie ’tekst’. Je krijgt dan je tekst te zien inclusief onderliggende opmaak-codering.

Zoek nu de tekst op waarvoor je de clas wilt gebruiken en plaats aan het begin van de tekst de volgende code en gebruik op de plaats van naamvanjouwclass de naam die je voor de class gebruikt:

Plaats aan het eind van de tekst de volgende volgende code:

Sla nu de pagina op en controleer of de tekst er inderdaad uitziet zoals je had bedoeld!

Je kunt zoveel CLASSES aanmaken als je zelf wilt, zolang de naam maar uniek is. Verder kan het gebeuren dat je een bepaalde css-code gebruikt die ergens anders in je thema ook al is bepaald. Wil je bijvoorbeeld alle h2 kopteksten groter maken, dan kan het zijn dat er ondanks je class, niets verandert, omdat de h2 teksten ergens anders al opgemaakt worden.

Een handigheid bij dergelijke gevallen, is om achter de opmaakregel in de css code !important te plaatsen, zoals hieronder te zien is achter font-size.

Theme updates

Wanneer je bepaalde codes wijzigit in het theme en vervolgens het them update, dan worden alle CLASSES die je hebt aangemaakt verwijderd. Dit zal niet het geval zijn, wanneer je de css-code hebt verwerkt via de theme-instelling die je via het WordPress beheerpaneel kunt bereiken Indien het theme voorziet in die mogelijkheid.

Het is handig om de CLASSES die je hebt gemaakt altijd even in een apart bestand op te slaan en dit bestand een eigen naam te geven en in de themefolder te plaatsen. Mocht er iets misgaan, dan heb je in ieder geval altijd nog alle wijzigingen bij de hand.