Salut, logo-theme custom wordpress

On va aller un peu plus loin avec ces histoires de boucle, puisqu’il est possible de personnaliser les boucles.

J’espère que tu as pu torturer un peu l’aspect de la loop du dernier article et que le fait de ne pas saisir le contenu de la page ne t’as pas perturbé.

Lorsqu’on a appris à faire tout ce que j’essaie d’expliquer à la 3WAcademy, j’étais un peu perturbé par 2-3 trucs, mais une fois que tu as compris ce que ça faisait, et surtout que PHP générait les pages à ta place, ça c’est mieux passé!

Si tu as exploré un peu les recoins de la documentation de WordPress, une notation un peu particulière si tu ne connais pas PHP : WP_Query… Il s’agit d’un objet PHP!

Objet WP_Query

Sans rentrer dans les détails de la programmation orientée objet de PHP, sujet qu’il faut d’ailleurs que j’approfondisse très bientôt, on va tout de même utiliser cette façon de personnaliser la boucle.

Dans n’importe quel langage de programmation, un objet est une sorte de plan de base qui va nous permettre de faire plusieurs maisons. Ce plan renferme des options, qu’on appelle méthode en programmation, que l’on décidera ou non d’appliquer. En gros on décidera d’avoir des volets roulants,  des volets bois ou pas de volets du tout. On fait ce qu’on veut pourvue que l’option existe. Pour avoir la liste des options, ou des méthodes, de WP_Query(), il faut aller voir la documentation…. Avant d’en arriver là, on va voir tout de suite un exemple d’utilisation de cet objet.

Utiliser WP_Query avec la boucle

Jusque là , on n’a eu qu’à modifier le code existant, ou faire des copiés-collés pour faire nos tests. Là on va devoir ajouter des choses.

Pour démarrer, je te propose de créer un fichier PHP, dans le dossier de ton thème html5blank, appelle ce fichier comme tu veux.

Ensuite, dans ce fichier, nous allons créer une balise HTML de type section. Puis à l’intérieur de cette section ouvre des balises PHP : .  Tu devrais avoir la chose suivante :

<section class="street-art">
	
		<?php

			//Ici notre code PHP

		?>
	
</section>

Ensuite nous allons créer un nouvel objet WP_Query, auquel nous allons passer des arguments pour avoir une  boucle sur une catégorie particulière. Dans mon petit projet, j’ai créé une catégorie street-art et 3 articles possèdes cette catégorie. Je vais demander à la boucle d’en afficher que 2.

Pour que ça soit un peu plus lisible et parce que j’aime bien séparer les choses, je vais écrire les arguments que je vais passer à mon objet dans une variable:

<section class="street-art">
	<h2>Get Template Part</h2>
	<p>Bloc obtenu depuis un autre template : cat_street-art.php</p>
	<?php
	// en option, en paramètre, je demande à afficher les articles de la catégorie street art et d'en avoir que 2
	$args = array('category_name' => 'street-art',
				  'posts_per_page' => 2);

	$new_object = new WP_Query( $args ); // $new_object est un copie, une instance de WP_Query



	<?php } ?>
</section>

Pour le moment on n’affiche rien à l’écran, on est dans une page que WordPress ne peut pas trouver.

Maintenant nous allons créer une boucle qui va être chargé de récupérer les 2 articles que l’on a demandé et de structurer ces données avec du code html, comme nous l’avions vu la dernière fois.

Tu auras sans doute remarqué que j’ai donné une classe CSS à ma section. Je lui ai appliqué un background-color: #DDD (gris-clair), afin de bien distinguer cette section du reste de la page où ce code sera intégré. De plus j’ai donnée titre et un paragraphe, que je supprimerais ensuite. J’ai pour habitude de mettre plusieurs marqueurs visuels quand je code, ça me permet de trouver les erreurs un peu plus vite, et de cette façon on voit ce qu’on fait.

Voici le code complet de notre page, il ressemble un peu à celui de la dernière fois :

<section class="cat_street-art">
	<h2>Get Template Part</h2>
	<p>Bloc obtenu depuis un autre template : cat_street-art.php</p>
	<?php
	// en option, en paramètre, je demande à afficher les article de la catégorie street art et d'en avoir que 2
	$args = array('category_name' => 'street-art',
								'posts_per_page' => 2);

	$new_object = new WP_Query( $args ); // $new_object est un copie, une instance de WP_Query

	//On va personnaliser la requête, pour avoir des articles d'une catégorie particulière


	if( $new_object->have_posts()){

			while($new_object->have_posts()){
				$new_object->the_post();

				?>


				<article class="">
						<h3><?php the_title(); ?></h3>
						<p>Publié le <?php the_date('j M Y'); ?></p>

						<a href="<?php the_permalink(); ?>">
							<?php the_post_thumbnail(array(120, 120)); // cette fonction retourne une balise html img?>
						</a>
						<p><?php the_excerpt(); ?></p>

				</article>

	<?php }//while
		wp_reset_query();
	?>

<?php
	}else{?>

		<article>
			<h2><?php _e( 'Sorry, nothing to display.', 'html5blank' ); ?></h2>
		</article>


	<?php } ?>
</section>

Et voilà, on a créé un petit template, qu’on peut insérer partout et qui affichera les 2 derniers articles de la catégorie street art, pour ce qui me concerne.

« Bon ok , on a une page mais comment on l’affiche?« 

Avant d’aller plus loin, je te laisse le lien vers la documentation de WP_Query. Il y a beaucoup de choses à lire, à comprendre et à tester. Et cela donne beaucoup d’exemple, et tu auras alors une belle vision de tout ce qu’il est possible de faire en termes de personnalisation de boucle!

 Insérer un template dans une page

Alors je t’ai pas tout dis, je vais profiter de cet exemple pour introduire une autre fonction très pratique de WordPress get_template_part();. Cette petite fonction va nous permettre d’insérer toutes la section que l’on vient de créer sur n’importe quelle page.

Faisons tout de suite un test, et revenons sur notre loop.php que nous décortiquions la dernière fois (Les boucles de WordPress et la Loop (première partie)).

Je te propose d’insérer, notre nouvelle section en haut de page, juste après la balise ouvrante PHP. Pour utiliser la fonction get_template_part, tu vas écrire le nom de la fonction, suivi des parenthèses et du point virgule, mais en paramètre, donc entre les parenthèses, on va inscrire le nom du fichier que je t’ai demandé de créer pour l’exemple:

<?php

get_template_part('street-art');

//ici le reste du code...

?>

Une fois fait je te propose de rafraîchir te page « d’accueil » de ton projet et tu devrais voir apparaître la section.

J’avais ajouté un background gris clair pour bien voir la différence, voilà ce que j’obtiens :

ajout-boucle personnalisée - WordPress

Tout cela est encore un peu moche, mais on a bien avancé! On peut maintenant afficher tout ce qu’on veut un peu où on veut avec les boucles personnalisées et l’objet WP_Query et la fonction get_template_part.

Dans le prochain article, on ajoutera un peu de CSS, et on verra comment on intègre une feuille de style, des fichiers Javascript, des librairies comme Google Font ou Font Awesome à notre petit projet. D’ici là fait un maximum de test, pour t’habituer à tout cela et à PHP si tu ne connais pas trop.

A bientôt,

Guillaume