WordPress bericht-categorie gebruiken als css class

WordPress kent 2 manieren om content te plaatsen; Content die lange tijd niet aangepast hoeft te worden wordt als pagina (page) gepubliceerd, bijvoorbeeld een contact pagina. Content die regelmatig uitgebreid of ge-update wordt, wordt gepubliceerd als bericht (post). Bijvoorbeeld een aanbiedingen pagina van een bedrijf of webshop.

In dit voorbeeld bekijken we hoe we de geplaatste berichten kunnen vormgeven met css. Daarvoor gebruiken we de  categorie van het bericht als css class. Op die manier kunnen berichten met verschillende categories verschillend vorm gegeven worden omdat ze verschillende css classes krijgen. We beginnen met de berichten te laden. Ieder bericht wordt in een div geplaatst met de class-naam ‘post’. Met css kunnen de algemene opmaak van de post beschrijven.

<body>
     <div id=”wrapper”>
          <?php while ( have_posts() ) : 
               the_post();?>
               <div class=”post “> 
                    <?php the_content();
               </div>
           endwhile;?>
     </div>
</body>

De volgende stap is om een extra css-class toe te voegen aan ‘post’. De extra class wordt bepaald door de categorie van het bericht. Zo kunnen berichten verschillende classes krijgen, die we met css verschillend vorm kunnen geven. Eerst wordt een variabel gemaakt (herkenbaar aan $) met de naam ‘category’. Met de functie ‘get_the_category()’ maakt WordPress een lijst van eigenschappen van het bericht. Die lijst wordt opgeslagen in de variabel ‘category’. Met ‘echo’ wordt de opdracht gegeven om het item ‘cat_name’  (van het eerste item) in het html bestand te schrijven.

<body>
     <div id=”wrapper”>
          <?php while ( have_posts() ) :
               the_post();?>
               <div class=”post <?php $category=get_the_category() ; echo $category[0]->cat_name; ?>“>
                    <?php the_content();
               </div>
           endwhile;?>
     </div>
</body>

Het is mogelijk om aan een bericht meerdere categorien toe te voegen. Om elke categorie toe te voegen moet de opdracht een beetje aangepast worden.

<body>
     <div id=”wrapper”>
          <?php while ( have_posts() ) : 
               the_post();?>
               <div class=”post <?php foreach(get_the_category() as $category); echo $category->cat_name; ?>”> 
                    <?php the_content();
               </div>
           endwhile;?>
     </div>
</body>

De categorie namen worden nu achter elkaar geplakt als een lange class-naam achter de class “post”. Om de categories van elkaar te scheiden moeten we na elke categorie een spatie toevoegen:

<body>
     <div id=”wrapper”>
          <?php while ( have_posts() ) : 
               the_post();?>
               <div class=”post <?php foreach(get_the_category() as $category); echo $category->cat_name .” “; ?> “> 
                    <?php the_content();
               </div>
           endwhile;?>
     </div>
</body>

 

 

Leave a Reply

Your email address will not be published.