Utilisation des "template parts" : un bloc d’entete avec une image de fond

Un "template part" est un bout de code réutilisable. Une fois écrit, on peut le réemployer dans plusieurs templates, ce qui permet de limiter les erreurs de code.

Le but : un bloc d’entête

L’idée est de produire un bloc occupant une bonne partie de la hauteur de la fenêtre, avec en fond de ce bloc le logo du site chargé depuis l’interface de Wordpress. Centré dans ce bloc, le titre et le slogan du site.

Créer le fichier du template

Pour des raisons pratiques, on crée souvent un dossier pour y stocker les différents template parts. Dans le thème présent, un dossier "morceaux" a été créé, et un fichier big_header.php y a été créé (ainsi que d’autres fichiers dont on parle ailleurs).

Inclure le template part

Pour inclure le template part, un code simple est prévu par Wordpress

<?php
get_template_part( 'morceaux/big_header' );
?>

Remarquez que l’adresse du fichier dans la fonction get_template_part ne comporte pas l’extension php. La fonction get_template_part est en fait assez complexe et peut rechercher un template part dans le thème ou dans d’autres thèmes (voir la documentation sur cette fonction).

Le contenu de la template part

Le code est du bootstrap pur, avec un attribut style à deux endroit. Il est donc fonctionnel sans ajout css. Il utilise la fonction wp_get_attachment_image_src qui permet de récupérer le chemin vers l’image, pour le placer dans l’attribut style.
La suite est l’utilisation de la fonction bloginfo, pour récupérer le nom et la description du site depuis la base de données.

<?php
// récupérer le logo sous la forme de simple lien
$image = wp_get_attachment_image_src( get_theme_mod( 'custom_logo' ), 'full' );
?>
<div class="container-fluid mb-5" style="background: url(<?php echo $image[0]; ?>) center / cover; height:75vh;margin-top:64px;">
   <div class="row h-100 align-items-center">
       <div class="col-12 text-center text-light" style="text-shadow:0 0 10px #000;">
           <h1 class="text-light"><?php bloginfo('name'); ?></h1>
           <p class="lead"><?php bloginfo('description') ?></p>
       </div>
   </div>
</div>