Kolommen in Wordpress pagina’s en posts
24 mrt
Ik heb een Wordpress plugin geschreven om kolommen te maken in pagina’s en posts. Er zijn al soortgelijke plugins beschikbaar voor Wordpress maar deze voldeden niet aan mijn verwachting. Het doel van deze plugin is om op zo simpel mogelijke wijze kolommen aan te brengen.
Het maken van kolommen is super simpel, je kan simpelweg het kolom-scheidingsteken (standaard /---/) aanbrengen in de tekst van de pagina of post.
HTML Code wordt gegenereerd met verschillende CSS-classes om de kolommen gemakkelijk op te maken via de stylesheet.
Voorbeeld
1 2 3 4 5 | Deze tekst komt in de eerste kolom. /---/ Deze tekst komt in de tweede kolom. /---/ Deze tekst komt in de derde kolom. |
Zal de volgende HTML code opleveren:
1 2 3 4 5 | <div class="wpcolumn-wrapper wpcolumn-wrapper-3"> <div class="wpcolumn wpcolumn-1 wpcolumn-first">Deze tekst komt in de eerste kolom.</div> <div class="wpcolumn wpcolumn-2 wpcolumn-other">Deze tekst komt in de tweede kolom.</div> <div class="wpcolumn wpcolumn-3 wpcolumn-last">Deze tekst komt in de derde kolom.</div> </div> |
Door gebruik te maken van de dynamische CSS-classes die toegekend worden aan de kolommen kunnen verschillende kolom-layouts gemakkelijk, op verschillende manieren, opgemaakt worden in de stylesheet.
Het kolom scheidingsteken en de CSS-class kunnen ingesteld worden op de “WP Columns Settings” pagina.
Hieronder staat een voorbeeld zoals kolommen opgemaakt kunnen worden.
Deze CSS code is gebruikt om het bovenstaande resultaat te bereiken.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | .wpcolumn-clearfix { clear: both; } .wpcolumn-wrapper-3 .wpcolumn { float: left; margin: 10px 4% 15px 0; width: 46%; } .wpcolumn-wrapper-3 .wpcolumn-last { margin-right: 0; } .wpcolumn-wrapper-3 .wpcolumn-1 { color: #888888; font-family: ’Lucida Grande’,Verdana,Arial,sans-serif; font-size: 16px; float: none; width: auto; } |
Download & installatie
Klik hier om de “WP Columns Plugin” te downloaden & installeren
Ik heb de plugin geïnstalleerd, ik krijg hem werkend alleen de 1e kolom komt boven kolom 2 en 3 te staan.
Zo zeg maar:
Kolom1
Kolom2 | Kolom 2
Ik heb al zitten spelen met de breedte e.d. maar dit gaf geen resultaat. Enig idee wat dit kan zijn?
Nu werkt het opzich prima voor mijn site, want ik genruik maar 2 kolommen. Dus ik laat de 1e kolom gewoon leeg. Dan is het wel prima!
Hoi Jasper,
Met deze code zou het moeten lukken:
2
3
/---/
Kolom2
2
3
4
5
6
7
8
9
10
11
clear: both;
}
.wpcolumn-wrapper-2 .wpcolumn {
float: left;
margin: 10px 4% 15px 0;
width: 46%;
}
.wpcolumn-wrapper-2 .wpcolumn-last {
margin-right: 0;
}