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
