23. WordPress: Post thumbnails toevoegen aan je theme.

Gedaan met de speeltijd (want dat is WordPress soms). We gaan nu kijken hoe we thumbnails kunnen toevoegen aan een artikel. Een kort maar krachtig hoofdstukje.

Eerst moeten we de functie activeren. Dit doen we door het volgende bij te typen in functions.php; het bestandje dat nu toch al bewezen heeft hoe belangrijk het wel is:
add_theme_support( 'post-thumbnails' );

Het enige wat je nu moet doen is in je theme een extra code toevoegen. Open index.php en zoek naar: <?php the_content(); ?>
Daarvoor voeg je dan deze php functie:
<?php the_post_thumbnail(); ?>

Als je nu een nieuw artikel schrijft kan je in de widgets rechts een link klikken ‘set featured image’:

featured-image

Als je daarop hebt geklikt kan je een afbeelding kiezen. Onderaan de opties zie je staan ‘use as featured image’. Klik daarop en de afbeelding wordt gelinked aan het artikel:

featured-image-select

Een thumbnail toevoegen aan de RSS-feed.

Een RSS feed is meestal maar relatief saai qua uitzicht. Het toevoegen van een afbeelding kan dit saaie uitzicht echter wat meer fleur geven.
Open functions.php en voeg daar volgende code aan toe:


function rss_post_thumbnail($content) {
global $post;
if(has_post_thumbnail($post->ID)) {
$content = '<p>' . get_the_post_thumbnail($post->ID) .
'</p>' . get_the_content();
}
return $content;
}
add_filter('the_excerpt_rss', 'rss_post_thumbnail');
add_filter('the_content_feed', 'rss_post_thumbnail');

Je kan het verder aanpassen naar je eigen wensen.

Optioneel: Afbeeldingen uit een bericht halen en weergeven

In plaats van een thumbnail in te stellen kan je ook afbeeldingen uit een bericht halen en dit weergeven. Volgende code moet binnenin de loop worden geplaatst, bijvoorbeeld net boven the_content()


<?php $szPostContent = $post->post_content; $szSearchPattern = '~<img [^\>]*\ />~';  // Run preg_match_all to grab all the images and save the results in $aPics preg_match_all( $szSearchPattern, $szPostContent, $aPics );  // Check to see if we have at least 1 image $iNumberOfPics = count($aPics[0]);  if ( $iNumberOfPics > 0 ) {      // Now here you would do whatever you need to do with the images      // For this example the images are just displayed      for ( $i=0; $i < $iNumberOfPics ; $i++ ) {           echo $aPics[0][$i];      }; }; ?>

Het volgende hoofdstuk is ook niet heel erg lang en het gaat ook om een functie, net zoals de post thumbnails, die relatief nieuw zijn bij wordpress: het plaatsen van een sticky bericht.

Wordpress theme maken of toch kopen?

Een Wordpress theme maken vergt veel werk, al is wat extra kennis altijd welkom. We maken zelf geen sites meer maar gebruiken nu de themes die terug te vinden zijn op: Theme Junkie. theme junkie Je kan op hun website ook gratis Wordpress themes terugvinden en downloaden!

Deze website gebruikt cookies om jou de beste ervaring te kunnen geven. Door deze website te gebruiken ga je hiermee akkoord. Meer info

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close