Thema van nul: template parts en eigen functies

Inladen van template parts.

In elke pagina template kan je delen van een template afzonderen naar de template-parts folder.

Dit is interessant:

  • bij hergebruik van bepaalde onderdelen
  • om de templates beter leesbaar te houden

Stel dat je een fragment inhoud bijvoorbeeld nodig hebt op zowel de home.php template als een archive.php template dan kan je dit afzonderen en hergebruiken.

Voorbeeld in header.php:

<!doctype html>
<html <?php language_attributes(); ?>>
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<?php 
wp_body_open();
get_template_part( 'template-parts/header/site-header' );
?>

In dit voorbeeld wordt het script template-parts/header/site-header.php ingeladen.

Voorbeeld in footer.php:

	<footer class="site-footer">
	<?php get_template_part( 'template-parts/footer/footer-sidebar' ); ?>
	</footer>
<?php wp_footer(); ?>
</body>
</html>

template-parts/header/site-header.php

<header class="site-header-content">
	<?php if ( has_custom_logo() ) : ?>
		<div class="site-logo">
			<?php the_custom_logo(); ?>
		</div>
	<?php endif; ?>

	<?php
	if ( has_nav_menu( 'primary' ) ) : ?>
		<nav class="primary-navigation">
			<?php
			wp_nav_menu();
			?>
		</nav>
	<?php
	endif;
	?>
</header>

has_custom_logo(): Wordpress functie om te controleren of er website logo is opgeladen. Het is resultaat is TRUE of FALSE.

the_custom_logo(): Wordpress functie om te het website logo te tonen.

has_nav_menu(): Wordpress functie om te controleren of er een navigatie is gedefinieerd. Het is resultaat is TRUE of FALSE.

wp_nav_menu(): Wordpress functie om de navitie te tonen (standaard: ‘primary’, in een <ul><li>-structuur)

template-parts/footer/footer-sidebar.php

<?php
if ( is_active_sidebar( 'footer-sidebar' ) ) :
    dynamic_sidebar( 'footer-sidebar' );
endif;
?>

is_active_sidebar(): controleer of een sidebar is geregistreerd

dynamic_sidebar(): toon de inhoud van een sidebar

template-parts/content/content.php

<?php 
the_title( '<h1>', '</h1>' ); 

uw_thema_naam_post_thumbnail(FALSE); 

the_content();
?>

the_title(): de Wordpress functie om de post titel te tonen.

uw_thema_naam_post_thumbnail(): Een ‘eigen’ functie om het featured image te tonen. Zie verder door.

the_content(): de Wordpress functie om de post inhoud te tonen.

template-parts/content/archive-post_type

<?php
// Parameters voor de Post query.
$args = array('post_type' => 'dienst');
// Execute query
$cpt_query = new WP_Query($args);
// Wanneer de query post(s) oplevert.
if ($cpt_query->have_posts()) {
    ?>
    <div class="archive-posts">
    <?php
    // Loop over de verschillende posts.
    while ( $cpt_query->have_posts() ) {
        // Laad de post in, op de achtergrond.
        $cpt_query->the_post();
        ?>
        <article>
            <header>

                <a href="<?php the_permalink(); ?>"><h2><?php the_title(); ?></h2></a>
            
                <?php uw_thema_naam_post_thumbnail( TRUE ); ?>				
            
            </header>

            <?php the_excerpt(); ?>

            <a href="<?php the_permalink(); ?>">Verder lezen</a>

        </article>
        <?php
    }
    ?>
    </div>
    <?php
}
?>

the_excerpt(): Toon de samenvatting van de post. uw_thema_naam_post_thumbnail(): Een ‘eigen’ functie om het featured image te tonen. Zie verder door.

Eigen functies je in je templates kan gaan (her)gebruiken.

Je kan stukjes code, die op verschillende plaatsen worden gebruikt, onder brengen in een aparte functie. Die kan je plaatsen in de functions.php.

Een eigen functie naam start je best met bijvoorbeeld de thema naam. Zo weet je in je code dat het om een eigen functie gaat en niet om een functie uit de Wordpress core.

Functie om featured image van een post te tonen

Onderstaande functie toont het featured image van de post wanneer het beeld bestaat. Met een extra parameter $post_link kan je optioneel een link plaatsen rond het beeld.

<?php
function uw_thema_naam_post_thumbnail($post_link = TRUE) {
    if ( ! has_post_thumbnail() ) {
        return;
    } 

    if ($post_link == TRUE) { 
        ?>
        <a href="<?php the_permalink(); ?>">
        <?php the_post_thumbnail(); ?>
        </a>
        <?php
    } 
    else {
        the_post_thumbnail(); 
    }
}
?>

De functie has_post_thumbnail() zal TRUE geven wanneer een post een beeld heeft, FALSE wanneer dat niet zo is.

De functie the_post_thumbnail() toont van een post het beeld.

De functie the_permalink() is de Wordpress core functie die van een post de link toont van de detail pagina.

Klik hier verder: