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

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.

À la fin, vous trouverez le sujet du projet de ce module.

Pour faire ces exercices, vous devez télécharger ce fichier compréssé contenant la sauvegarde d'un site web qui se trouve 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 Seventeen». Pour cela, vous devez créer un thème enfant.

La modification à faire consiste à remplacer les texte «… réponses sur …» par un texte moins sérieux. Ce texte se trouve dans les pages web qui montrent un seul article, avant les commentaires des visiteurs. 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.

Exercice 2

Maintenant vous allez faire une modification dans les règles CSS du thème «Twenty Seventeen». Vous pouvez réutiliser le thème enfant que vous avez créé pour l'exercice 1.

Il faut ajouter l'emoji de l'horloge devant la date de publication de chaque 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.

La règle CSS doit être quelque chose comme ceci :

selecteur::before {
  content: '🕒';
}
Exercice 3

Dans cet exercice vous allez modifier le thème «Twenty Seventeen» 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 Seventeen» (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 Seventeen» 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 du site web fourni pour ce TP.

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

Projet de développement web

Pour évaluer ce que vous avez appris dans ce module, à part l'examen finale, vous allez créer un site web avec WordPress.

Objectifs

L'objectif de ce projet et de créer un site avec WordPress. Concrètement :

Rendu

La date de rendu de ce projet est le . Chaque heure de retard vous enlèvera 10% de la note de ce projet (donc 1 point dans ce module).

Vous devez créer un utilisateur avec identifiant m3202 et mot de passe m3202 afin que je puisse accèder à l'espace d'administration.

Le projet est à soumettre par deux voies :

  1. Sur AMeTICE, dans le devoir dédié. Vous devez envoyer la sauvegarde de votre site web (fichier PHP et base de données) et un rapport pour expliquer votre travail et m'aider à l'évaluer : URL de votre site web sur le serveur, difficultés rencontrées, références proprement citées, présentation des thèmes ou extensions utilisées, détails sur les modifications faites sur le thème, etc. Le fichier compressé ne doit pas depasser 50 Mo.
  2. Sur le serveur web de l'IUT. Il n'y a pas besoin de déposer le fichier SQL contenant la sauvegarde de la base de données ni le rapport.

Exceptionnellement, si votre fichier compressé est beaucoup plus lourd que 50 Mo et vous n'arrivez pas à réduire sa taille, vous pouvez soumettre seulement le répertoire de votre thème enfant au lieu de tous les fichiers de WordPress.

Évaluation

La note de ce projet, qui vaut 10 points sur la note de ce module, sera calculée en fonction de ce barème :

Partie Points
Qualité du contenu 3
Bon usage des outils : menus, catégories, extensions, réglages… 6
Modifications du thème 6
Qualité du code (HTML, CSS, PHP) 2
Originalité et creativité 3

Le non-respect des consignes (date de rendu, rapport, citations) vous fera perdre des points.