WordPress custom Field gebruiken als css class

Bij het schrijven van een bericht is het mogelijk om een aantal extra gegevens toe te voegen aan het bericht. Standaard kan voor een bericht een datum, categorie en tags ingevuld worden. Maar er zijn meer mogelijkheden. Door gebruik te maken van Custom Fields is het mogelijk zelf invul vensters toe te voegen aan een bericht. Ga hiervoor naar de ‘Screen Options’ en vink ‘Custom Fields’ aan.

Er verschijnt nu een invul veld met de titel Custom Fields. Daarin kan een ‘Name’ en een ‘Value’ ingevuld worden. Bijvoorbeeld Name: ‘soort’, value:’fotobericht’. Deze informatie kan door WordPress makkelijk toe gevoegd worden aan een bericht door de opdracht ‘the_meta()’. Deze WordPress functie wordt net als bijvoorbeeld ‘the_content()’ en ‘the_title()’ gebruikt om content te plaatsen. ‘the_meta()’ maakt een ul-tag met daarin li-elementen voor elke Custom Field waarde.

Deze functie is minder geschikt voor het toevoegen van een css-class. We gebruiken wel het Custom Field, maar in combinatie met de opdracht ‘get_post_meta()’. We gebruiken ‘get_post_meta()’ in onderstaand voorbeeld om de value(s) van het Custom Field als css-class toe te voegen. We beginnen met de post-loop om berichten te laden:

<body>
     <div id=”berichten”>
     <?php while(have_posts()):
           the_post(); 
           endwhile; ?>
     </div>
</body>

Vervolgens plaatsen we de content van ieder bericht in een div. Let op, de php code wordt onderbroken door html. Vergeet dus niet de php-tag voor de html te sluiten en na de html weer te openen.

<body>
     <div id=”berichten”>
     <?php while(have_posts()):
          the_post();?>
          <div>
               <?php the_content()?>
          </div>
     <?php endwhile; ?>
     </div>
</body>

De content van ieder bericht wordt in een div-tag geplaatst. Nu willen we de Value van het Custom Field gebruiken als css-class voor de div die ieder bericht verpakt.

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

Voordat WordPress de meta gegevens kan laden met de functie ‘get_post_meta()’  moeten een aantal gegevens aan de functie doorgegeven worden:  Van welk bericht moeten de gegevens opgehaald worden:

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

Ook moet aangegeven worden welke meta gegevens opgehaald moeten worden. In dit voorbeeld hebben we in het Custom Field de Name ‘soort’ ingevuld. Door die Name aan de functie door te geven wordt de Value (‘fotobericht’) opgehaald.

<body>
     <div id=”berichten”>
     <?php while(have_posts()):
          the_post();?> 
          <div class=” <?php get_post_meta(get_the_ID(), ‘soort’); ?> “>
               <?php the_content()?>
          </div>
     <?php endwhile; ?>
     </div>
</body>

De laatste waarde die doorgegeven moet worden aan de functie is of het wel of niet een enkele waarde moet zijn. In het voorbeeld hebben we een Name en een Value ingevuld, het betreft dus een enkele waarde:

<body>
     <div id=”berichten”>
     <?php while(have_posts()):
          the_post();?> 
          <div class=” <?php get_post_meta(get_the_ID(), ‘soort’, true); ?> “>
               <?php the_content()?>
          </div>
     <?php endwhile; ?>
     </div>
</body>

Leave a Reply

Your email address will not be published. Required fields are marked *