M3202 — TD #2

Développement web S3


Les thèmes

Pour faire les exercices, téléchargez et installez le site WordPress disponible sur AMeTICE dans «Fichier à télécharger».

La base de données s'appelle m3202td2_bdd. L'identifiant et le mot de passe sont m3202.

Un thème est une collection de fichiers qui travaillent ensemble pour faire une interface graphique cohérente.

Par exemple, on peut avoir un en-tête et un pied de page commun à toutes les pages.

Les thèmes sont indépendants du contenu et intégrés dans WordPress. Le contenu du site web est stocké dans la base de donnés, et le thème utilise de fonctions propres à WordPress.

Ainsi, on peut changer facilement de thème et le paramétrer dans le back office.

Wordpress vient avec trois thèmes par défaut : «Twenty fifteen», «Twenty sixteen» et «Twenty seventeen».

Comment savoir si un site web utilise WordPress ?

Normalement, il est possible de trouver si un site web utilise WordPress en lisant son code HTML. Il suffit de chercher wordpress ou wp-.

On peut aussi essayer de se loguer en ajoutant /wp-admin a l'adresse web.

Chercher si les sites web suivants utilisent WordPress

  • Le Gorafi (legorafi.fr)
  • La poste (laposte.fr)
  • L'OM (om.net)
  • mademoiZelle (madmoizelle.com)
  • La maison blanche (whitehouse.gov)
  • Walt Disney Co. (thewaltdisneycompany.com)
  • Ariana Grande (arianagrande.com)
  • Usain Bolt (usainbolt.com)
  • Sylvester Stalone (sylvesterstallone.com)

La structure d'un thème

Les thèmes se trouvent dans le répertoire wp-content/themes/. Dedans, chaque répertoire contient un thème.

Un thème contient de fichiers CSS, des fichiers modèles (template files), un fichier de fonctions (functions.php), de fichiers JavaScript et des images.

Les thèmes utilisent souvent une structure similaire, mais les fichiers et dossiers peuvent varier.

Le fichier screenshot.png

L'image screenshot.png est une miniature du thème qui est affichée dans le menu «Thèmes» du back office.

Exercice #1

Modifier la miniature du thème «Twenty Seventeen» et vérifier le résultat sur le back office.

Prendre une capture d'écran et la renommer m3202-td2-exo1.png

Le fichier style.css

Le fichier style.css contient, en plus des règles CSS, un en-tête avec les propriétés du thème en commentaires. Ces informations sont affichées dans le back office.

Pour savoir plus

Exercice #2

Changer le nom et la description du thème «Twenty Seventeen» et vérifier le résultat sur le back office.

Prendre une capture d'écran et la renommer m3202-td2-exo2.png

Exercice #3

Modifier le fichier style.css du thème «Twenty Seventeen» pour que le titre du site soit en noir et vérifier le résultat sur le front office.

Prendre une capture d'écran et la renommer m3202-td2-exo3.png

Le fichier functions.php

Le fichier functions.php contient de fonctions PHP pour le thème qui affectent le front et le back office.

Il utilise les hooks, les globals et les template tags pour bien s'intégrer dans WordPress. Donc il est normal de ne rien comprendre maintenant.

Vous pouvez au moins comprendre la ligne 15 du fichier wp-content/themes/twentyseventeen/functions.php

Exercice #4

Modifier le fichier index.php du thème «Twenty Seventeen» pour afficher la valeur de la variable $GLOBALS['wp_version']

Prendre une capture d'écran et la renommer m3202-td2-exo4.png

Début du TD #3.

Les fichiers modèles

Les fichiers modèles (template files) servent à générer les fichiers HTML à partir de la base de données. Il y en a plusieurs :

index.php
le fichier principal
page.php/single.php
pour afficher une seule page/article
header.php, footer.php et sidebar.php
pour générer des parties du code HTML
content.php
pour afficher un contenu. Il y a plusieurs fichiers, et ils peuvent être n'importe où
searchform.php et search.php
pour afficher un formulaire de recherche et son résultat
archive.php
afficher la liste d'articles par mois
404.php
la page d'erreur 404
comments.php
pour les commentaires
category.php/tag.php
liste d'articles pour une catégorie/étiquette
image.php
pour afficher une image

Les fichiers modèles utilisent de fonctions définies par WordPress, comme get_header(), is_home(), etc.

Pour voir ce qu'elles font, on peut chercher dans le code source de WordPress. Par exemple, la fonction get_header() est définie dans le fichier wp-includes/general-template.php.

Sinon, on peut les chercher sur la documentation de WordPress

À rendre (aujourd'hui)

Envoyer par AMeTICE le fichier m3202-td2.zip contenant toutes les captures d'écran dans «Exercices à rendre du TD 2/5».

Vous devez soumettre une bonne question sur ce qu'on a vu aujourd'hui dans «Question à rendre du TD 2/5»