Développement web S3 (M3202) – Exercices de TD

Exercice 1

Créez un site web avec WordPress en suivant les instructions données en cours.

Exercice 2

Installez manuellement un thème.

Une fois l'installation est faite, activez-le et vérifiez qu'il est bien utilisé.

Exercice 3

Installez manuellement une extension. Je vous suggère «Post Hit Counter».

Une fois l'installation est faite, activez l'extension.

Exercice 4

Exportez votre site web.

Exercice 5

Restorez le site web que vous venez d'exporter.

Exercice 6

Dans cet exercice vous allez migrer votre site web sur le serveur de l'IUT.

Ajoutez au moins un article ou une page dans votre site web (en local), avec une image.

Ensuite, suivez les étapes pour mettre le site en ligne de façon manuelle. Le nom de la base de données est votre identifiant, quelque chose comme a18000000. L'identifiant est le même, et le mot de passe est ...

L'URL de votre page est quelque chose comme https://a-pedagoarles-mmi.aix.univ-amu.fr/a18000000/m3202-wp

Vérifiez que le site web est correctement affiché sur le serveur.

Exercice 1

Modifiez le fichier index.php du thème «Twenty Nineteen» pour qu'il affiche un compteur d'article avant chaque article

Pour qu'il soit plus visible, vous pouvez le mettre dans un paragraphe avec une couleur de fond rouge :

<p style="background-color: red;">Article 1</p>

Exercice 2

Modifiez le thème «Twenty Nineteen» pour que, dans la page d'accueil, le nom du site web ne contienne pas de lien vers la page d'accueil.

Il faut modifier une seule ligne dans un fichier du thème.

Exercice 3

Modifiez le thème «Twenty Nineteen» pour suprimer l'élément <p class="site-description">.

Exercice 4

Dans cet exercice vous allez trouver tous les fichiers modèles utilisés pour générer la page d'acceuil d'un site web WordPress.

Ajoutez dans chaque fichier modèle *.php importé (directement ou indirectement) dans la page d'accueil une boîte avec fond vert le nom du fichier modèle. Pour vous éviter d'écrire le nom du fichier à chaque fois, vous pouvez utiliser la fonction PHP basename() :

<div style="background-color: green;"><?php echo(basename(__FILE__)); ?></div>

Exercice 1

Créez un thème enfant pour le thème que vous avez choisi pour votre site web.

Le but de cet exercice est de trouver les bonnes valeurs à mettre dans les fichiers styles.css et functions.php, qui sont différentes pour chaque thème.

Vous pouvez créer un fichier screenshot.png pour ce thème enfant.

Exercice 2

Dans ce module on a fait plusieurs modifications directement dans un thème, ce qui est déconseillé. Vous allez refaire maintenant correctement, avec un thème enfant.

Créez un thème enfant pour le thème «Twenty Nineteen» et refaites l'exercice 2 du TD 3, l'exercice 3 du TD 3 et l'exercice 3 du TP 3.

Exercice 3

Toujours dans votre thème enfant pour le thème «Twenty Nineteen», faites le nécessaire pour que, dans la page web d'un article, les liens vers les articles précédent et suivant soient comme dans le thème «Twenty Sixteen».

Il vous faut trouver comment cette partie de la page web (HTML et CSS) est généréé dans les deux thèmes pour pouvoir les fusionner.

C'est un exercice difficile et vous n'allez surement pas arriver à le faire parfaitement, mais vous devriez arriver à obtenir un resultat comme ceci :

Exercice 1

Dans cet exercice on va continuer à travailler avec la hiérarchie de fichiers modèles de WordPress. Récupérez le site web WordPress du TP #4.

Créez un thème enfant pour le thème «Twenty twenty». Dedans, ajoutez un fichier modèle pour que l'article «Théorie cinéthique» affiche une image très moche en bas.

Exercice 2

Toujours dans le même thème enfant de l'exercice 1, faites le nécessaire pour que les articles

• Et si CSS vous renvoyait l’ascenseur ?
• Les 8 bonnes raisons d’abandonner Photoshop
• L’astuce pour animer le point sur la lettre « i ».

affichent la même image en bas, encore plus moche.

Exercice 3

Toujours dans le même thème enfant de l'exercice 1, faites le nécessaire pour que tous les articles de l'auteur «David Fincher» aient une couleur de fond verte.

On peut récupérer l'auteur d'un article avec la variable $post->post_author

Exercice 4

Toujours dans le même thème enfant de l'exercice 1, faites un en-tête différent pour la page d'erreur 404. Créer pour cela un fichier header-404.php