Fait vivre votre communication

Webmaster à temps partagé - 01 - 71 - 69 - 39
10 impasse des Acacias
Berzé-la-Ville
Bourgogne
71960
France

Afficher un extrait d’article avec un thumbnail dans WordPress

…avec un excerpt “manuel”

Un client m’a demandé de faire en sorte que les actus du site associées à un certain tag, soient “extraites” et affichées séparément sur une page, sous forme de liste. Cette liste doit comporter chaque actu résumée, avec une image cliquable et un texte résumé de l’actu. En clair, une liste d’articles avec une image informative et cliquable, le fait de cliquer amenant sur l’article dans sa totalité.

Etape 1 : mise à jour de functions.php

La mise à jour de ce fichier va permettre à WordPress d’afficher une fenêtre supplémentaire dans l’interface de création des articles.


<?php
add_theme_support('post-thumbnails');
?>

Etape 2 : modification du thème pour afficher le thumbnail


<?php

		// The Query
		$query = new WP_Query( 'tag=name_of_the_tag' ); // si 'name_of_the_tag' est le slug du tag

		// The Loop

		if ( $query->have_posts() ) {
			while ( $query->have_posts() ) {
				$query->the_post();
					
				?>

				<article class="post">
					<h1><a href="<?php the_permalink();?>" title="<?php the_title();?>"><?php the_title();?></a></h1>

					<?php 

					if ( has_post_thumbnail()) :

					?>
				   	
				   		<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
				   		<?php the_post_thumbnail('medium'); ?>
				   		</a>

				 	<?php 

				 	endif;
					
					?>

						<?php the_excerpt();?>
						<div class="clear">
						</article>

					<?php }

		} else {
			echo 'No post found';
		}
		// Restore original Post Data
		wp_reset_postdata();
		?>
		
		</div>

Plus le temps passe, plus j’interviens sur ce fichier dans WordPress. Il faudra que je pense à creuser à fond le codex là-dessus.

A noter : je souhaite que mon thumbnail fasse 300 pixels de large par 150 pixels de haut; le codex m’indique que c’est l’argument ‘medium’ qu’il faut utiliser.

Etape 3 : Modifier les paramètres dans l’administration de WordPress

Dans Settings > Media, je précise la taille de mon thumbnail : 300 x 150.

Etape 4 : Rédaction de l’article

L’article se rédige comme de coutume. Seulement, je dois choisir et uploader l’image qui me servira de thumbnail (WordPress la traitera automatiquement, je n’ai pas à la modifier sa définition) et écrire l’excerpt manuel (sans quoi c’est l’excerpt automatisé qui s’affichera, avec les balises HTML effacées).

Nota Bene

WordPress démontre une fois de plus, via cet exemple, l’écrasante supériorité de sa documentation.

Article écrit par Jean Sam Denis

jean-sam

Bonjour, je suis Jean-Sam, webmaster / community manager à temps partagé, auprès de PME installées en Bourgogne, en Franche-Comté et Rhône-Alpes. J'essaie d'apporter de la cohérence et de l'ambition aux projets internet, afin qu'ils soient durables et profitables.
Ma particularité est de rester à proximité du client durant toute la durée de notre collaboration, en assurant la maintenance complète ou partielle du site (rédactionnel, photo, vidéo, newsletter, réseaux sociaux, référencement...).

Me joindre par mail ou me joindre par téléphone

De 2007 à 2017