Salut, logo-theme custom wordpress

Suite de notre apprentissage de la réalisation d’un thème personnalisé dans WordPress. Cet article va être très important puisque WordPress est sans arrêt en train de faire des requêtes SQL, qui sont retournées le plus souvent sous forme de tableau PHP.

Si tu ne connais pas trop PHP, tu n’auras besoin de savoir comment cela fonctionne. En revanche il te faudra bien comprendre le fonctionnement d’une boucle. Une boucle en programmation, est une action ou une série d’action qui est répétée tant qu’une condition est vrai. Je raccourcis beaucoup, mais en gros, pour comprendre le principe simplement, tu peux trouver des cas simples dans la vie courante: tant que mon verre n’est pas plein je fais couler de l’eau dedans. Dès que c’est plein, je ferme robinet, c’est la condition d’arrêt.

 Si par la suite si tu as envi d’apprendre à coder en PHP, le fait d’en avoir manipulé un peu, devrait t’aider un peu.

Nous allons commencer à afficher des choses dans cet article, et à utiliser certaines fonctions de WordPress. Si tu ne connais le PHP, tu verras comment appeler une fonction et voir ce que ça retourne.

La loop

La Loop c’est le coeur de WordPress, bim rien que ça! C’est ce qui  sera affiché dans la balise « main » dans notre exemple de petit projet. Si tu as un trou de mémoire, jette un oeil à la petite maquette que j’avais proposé dans un article précédent (Préparer WordPress en local). Les autres parties (header, sidebar et footer) réalisent aussi des boucles mais elles réalisent toujours les mêmes, puisque ce sont des parties qui possèdent toujours le même contenu. Le « main » en revanche, va changer à chaque fois qu’on va appeler une nouvelle page.

Ce que contient la loop

La loop va contenir tout ce dont on va avoir besoin pour construire une page web habituelle. On va donc y trouver:

  • du code HTML, pour construire la structure de la page
  • du code PHP, (fonctions, structures de contrôle comme la syntaxe d’un boucle) pour récupérer le contenu de la page demandée.

Regardons maintenant le fichier loop.php de ton thème HTML5 BLANK:

<?php if (have_posts()){
				while (have_posts()) {

					 the_post(); ?>

					<!-- article -->
					<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

						<!-- post thumbnail -->
						<?php if ( has_post_thumbnail()) { // Check if thumbnail exists ?>
							<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
								<?php the_post_thumbnail(array(120,120)); // Declare pixel size you need inside the array ?>
							</a>
						<?php }//fin if post thumbnail ?>
						<!-- /post thumbnail -->

						<!-- post title -->
						<h2>
							<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
						</h2>
						<!-- /post title -->

						<!-- post details -->
						<span class="date"><?php the_time('F j, Y'); ?> <?php the_time('g:i a'); ?></span>
						<span class="author"><?php _e( 'Published by', 'html5blank' ); ?> <?php the_author_posts_link(); ?></span>
						<span class="comments"><?php if (comments_open( get_the_ID() ) ) comments_popup_link( __( 'Leave your thoughts', 'html5blank' ), __( '1 Comment', 'html5blank' ), __( '% Comments', 'html5blank' )); ?></span>
						<!-- /post details -->

						<?php html5wp_excerpt('html5wp_index'); // Build your custom callback length in functions.php ?>

						<?php edit_post_link(); ?>

					</article>
					<!-- /article -->

<?php }// fin while ?>

<?php } // fin if
	else{?>

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

<?php } // fin else?>

J’ai modifié un peu la syntaxe et ajouté des retours à la ligne pour que ça soit plus clair.

Essayons de comprendre ce que ça raconte, ça nous permettra de le modifier ensuite :

  • Ligne 1 :

On remarque que l’on a tout d’abord une structure conditionnelle IF, avec un if ligne 1 et un else à la ligne 39. Ceci permet de vérifier si on a bien quelque chose à afficher pour la requête (page) que l’on a demandé.

Si on a des choses à afficher, alors on entre dans le bloc if, sinon on entre dans le bloc else et dans ce cas on affiche la phrase qui apparaît dans la balise h2 de la ligne 43.

  • Ligne 2 :

Ici avec le While,  on entre dans la boucle. Tant que l’on a du contenu à afficher, tant que la fonction have_post(); retourne true, alors le contenu de la boucle se répète (entre les parenthèses du while).

  • Ligne 4:

Je ne rentre pas dans le détail, cette fonction permet de changer d’article à chaque tour de boucle, pour faire très simple.

  • Ligne 7 à 33:

On se retrouve ici dans quelque chose que tu connais sûrement beaucoup mieux: une balise html « article »! Prends 2 minutes pour repérer toutes les balises html de ce bloc.

Tu remarques aussi qu’au sein même des balises html on a des balises PHP qui elles même contiennent des fonctions PHP.

J’espère que tu as pu créer quelques pages et articles avec des images à la une, puisque qu’on va faire un parallèle avec les fonctions de cette page et ce qu’elles affichent.

Voici un rappel de la partie Admin de la saisie d’une page :

back-office saisie d'un article wordpress

Correspondance avec les fonctions PHP de WordPress

Ce qui suit est très important et en même temps assez simple à comprendre, puisque les noms de fonctions sont bien choisi et même pour un français ayant un niveau d’anglais de français, on s’y retrouve très bien. Il faut toutefois bien veiller à appeler ces fonctions dans la loop (dans une boucle). Elles font toutes références à un article, donc si on appelle ces fonctions ailleurs, on peut avoir des résultats assez surprenant… Je t’encourage à faire des tests…

Voici donc les correspondances entre ce qu’on a saisi dans l’admin et ce qu’on récupère avec les fonctions :

  • the_permalink() :  (permalien sous le titre dans l’admin) Retourne une chaîne de caractère contenant l’url de la page de l’article courant.
  • : (image à la une, en bas à droite) Retourne une chaine de caractère, l’url de l’image de l’article courant.  Tu remarqueras qu’on vérifie si l’article courant possède une image (thumbnail) avec la fonction . Autre précision, la fonction the_post_thumbnail prend en argument un tableau (array), contenant 2 chiffres : ce sont les dimensions en pixel de la photo rendue à l’écran. Essaye de modifier ces valeurs et de voir ce que ça donne… Pour cela, reste sur la page « d’accueil »  de ton petit projet et rafraîchit la page…
  • the_title() :  (le titre de l’article) Retourne une chaîne de caractère contenant le titre de l’article.
  • the_time() : (heure de publication, en haut à droite, onglet publier) Retourne une chaîne de caractère contenant la date de publication de l’article. Le format de date retourné est celui de PHP. Je vais pas rentrer dans les détails, parce qu’il y aurait beaucoup à dire sur le format de date de PHP et je ne connais pas tout encore… Cette fonction prend une chaîne de caractère un peu bizarre en paramètre, il s’agit du mois (F), du jour (j), de l’année (Y),  de l’heure (g) et des minutes (i). Pour en savoir plus sur les formats de date, je te recommande la documentation de PHP à ce sujet. Tu noteras qu’elle est appelée deux fois avec des argument différents…
  • the_author() : (nom de l’auteur, dépend de la personne connecté qui publie l’article) Retourne le nom de l’auteur de l’article courant.
  • _e() : Retourne la première chaine de caractère entre simple quote traduite.
  • comments_open() : Vérifie si les commentaires sont autorisés sur cet article, retourne un booléen (true/false). Dans notre exemple, cette fonction prend une autre fonction en paramètre:
    • get_the_id() : Retourne l’id de l’article courant, permet de récupérer les commentaires pour cet article
  • comment_popup_link() :  Cette fonction retourne un lien qui permet d’accéder à la page de l’article et donc à ces commentaires. Et en plus elle gère l’affichage du message, selon qu’il n’y ai pas de commentaire, qu’il y en ai un ou qu’il y en ai plusieurs. Encore une fois je t’encourage à faire le test pour vérifier comment cela fonctionne.
  • html5wp_excerpt() :  Cette fonction retourne un résumé de l’article. Il y a une fonction native WordPress que je te conseille d’utilisée, qui s’appelle the_excerpt(), qui fait plus ou moins la même chose. La différence est que html5wp_exerpt() te retourne une chaîne de caractère comprenant déjà la balise html « p », alors que la fonction the_excerpt() te retournera une simple chaine de caractère non formaté, sans balise html. Je préfère récupérer une chaîne de caractère sans balise d’une manière générale, cela permet d’éviter d’avoir un paragraphe dans une autre balise html, comme « em » ou « strong ». Normalement on fait l’inverse, on met ces balises là dans un paragraphe. Dernier avantage à utiliser the_exerpt(), c’est que cette fonction est documentée, je vais y venir… Donc pour terminer avec cette fonction, saisis une balise HTML « p », puis place des balises PHP à l’intérieur puis la fonction the_excerpt();, ça devrait bien fonctionner!
<p><?php the_excerpt(); ?></p>

Le codex

Le codex, c’est le nom de la documentation de WordPress qui est assez bien faite et claire. En ce moment j’ai toujours un onglet d’ouvert avec le codex. J’en ai besoin tout le temps. Je t’encourage à rechercher les fonctions dont j’ai parlé et de lire la doc de ces fonctions pour te familiariser à lire ce genre de chose…

On ira plus loin encore dans le prochain article, d’ici là je te propose de modifier un peu la loop.php, de voir comment ça fonctionne. Essaye même d’ajouter du CSS, tu as des balises HTML, tu peux donc ajouter des classes. N’oublie pas que tu as un fichier CSS dans ton dossier de thème!

On verra plus tard comment ajouter des fichiers CSS, JS, etc…

J’espère que tu en as appris un peu plus sur WordPress et ce que j’explique est clair, sinon hésite pas à poser des questions, j’essaierais d’y répondre, mais j’apprends aussi… !

A bientôt,

Guillaume