Développement web S3 (M3202) — TP n° 3

Dans cette séance de TP on va faire des exercices sur la modification d'un thème avec un thème enfant.

Ensuite, on fera des exercices sur la hiérarchie des fichiers modèles.

Avant de commencer, créez un répertoire nommé m3202-tp3 contenant les répertoires exo1, ..., exo5. Chacun de ces répertoires contient votre travail sur l'exercice correspondant.

À la fin de la séance, vous devez compresser le répertoire m3202-tp3 en format ZIP et le soumettre sur AMeTICE.

Modifier un thème

Vous savez maintenant qu'il ne faut jamais modifier directement un thème WordPress. Si vous voulez le personnaliser, il faut créer un thème enfant et faire les modifications dedans.

Exercice 1

Dans cet exercice vous allez faire une petite modification sur le thème «Twenty Sixteen». Pour cela, vous devez créer un thème enfant.

La modification à faire consiste à remplacer les texte «X réflexions sur Y» par un texte moins sérieux. Ce texte se trouve dans les pages web qui montrent un seul article. Pour cela, il faudra modifier le fichier modèle qui génère ces pages web, ou les fichiers modèles partiels qui sont utilisés.

Puisque ce texte est en français, vous ne devez pas utiliser les fonctions de traduction __(), _e(), _x(), etc.

Envoyez le répertoire du thème enfant que vous avez fait avec seulement cette modification (il ne devrait contenir que trois fichiers).

Exercice 2

Maintenant vous allez faire une modification dans la mise en page du thème «Twenty Sixteen». Vous pouvez réutiliser le thème enfant que vous avez créé pour l'exercice 1.

Il faut réduire l'espace entre l'auteur de l'article et le contenu de l'article dans la page d'accueil. Vous savez maintenant qu'il faut modifier le fichier style.css qui se trouve dans le répertoire du thème enfant.

Pour cet exercice, envoyez uniquement le fichier que vous avez modifié.

Exercice 3

Dans cet exercice vous allez modifier le thème «Twenty Sixteen» pour que, lors d'une recherche sans résultat, votre site web affiche un lien vers les résultats donnés par Google.

Dans un thème enfant pour «Twenty Sixteen» (vous pouvez reprendre celui de l'exercice 2), vous devez modifier le fichier modèle qui s'occupe d'afficher les résultats d'une recherche sur le site WordPress. Dans ce fichier, s'il n'y a pas de résultats, il faut afficher un message avec un lien vers la page qui montre les résultats de Google pour cette même recherche. La ligne à ajouter doit ressembler à

<p>
  Trouvez plus de réponses sur <a href="https://www.google.com/search?q={requete}" target="_blank">Google</a>.
</p>

où à la place de {requete}, il faut mettre le contenu de votre recherche. Si vous lisez bien le fichier modèle, vous trouverez la fonction qu'il faut utiliser.

Envoyez seulement le fichier que vous avez modifié dans votre thème enfant.

La hiérarchie des fichiers modèles

On a vu en cours comment WordPress décide quel fichier modèle utiliser pour générer une page web. Toutes les explications peuvent se réduire à suivre ce diagramme.

Exercice 4

Dans cet exercice vous allez modifier le thème «Twenty Sixteen» pour que, quand on clique sur un auteur, on soit envoyé vers sa page Wikipédia au lieu de voir sa liste d'articles publiés.

La pire façon de faire cela consiste à créer un fichier author-{auteur}.php avec

<?php
  header('Location: https://fr.wikipedia.org/wiki/{auteur}');
?>

pour chaque auteur.

Faites cet exercice en utilisant un seul fichier et la fonction de WordPress is_author().

Vous avez ici la liste des pages Wikipédia de tous les utilisateurs de notre site web, mais il y a des utilisateur qui ne peuvent pas publier des articles, donc ne les utilisez pas.

https://fr.wikipedia.org/wiki/Stanley_Kubrick
https://fr.wikipedia.org/wiki/Christopher_Nolan
https://fr.wikipedia.org/wiki/Alfred_Hitchcock
https://fr.wikipedia.org/wiki/Martin_Scorsese
https://fr.wikipedia.org/wiki/Quentin_Tarantino
https://fr.wikipedia.org/wiki/Steven_Spielberg
https://fr.wikipedia.org/wiki/David_Fincher

Envoyez seulement le fichier que vous avez créé dans votre thème enfant pour le thème «Twenty Sixteen».