Cet exercice consiste à installer un thème, créer un thème enfant, gérer ses options et le personnaliser.
Consignes de l’exercice
Installation du thème
Connectez-vous à l’interface d’administration de votre installation de WordPress.
Installez le thème Shapely en utilisant le catalogue des thèmes de WordPress.
Créez un thème enfant à partir du thème Shapely en vous aidant de l’article suivant : Créer un thème enfant sur WordPress
Activez le thème enfant sur votre site.
Installez et activez le plugin Shapely Companion.
Personnalisation de la page d’accueil
Téléchargez l’archive contenant tous les fichiers nécessaires pour l’exercice ci-dessous :
Pour télécharger un fichier, faites un clic droit sur le fichier désiré et choisissez l’option Télécharger.
Pour télécharger plusieurs fichiers, sélectionnez les fichiers désirés puis cliquez sur Télécharger les sélectionnés. Les fichiers seront téléchargés sous la forme d’une archive .zip. Veillez à bien extraire le contenu de l’archive avant de commencer à travailler.
Installez et utilisez l’extension fournie si vous avez besoin de créer du contenu automatiquement pour cet exercice.
Utilisez le module de configuration automatique de la page d’accueil fourni avec le thème.
Activez le module de personnalisation de thème de WordPress.
Ajoutez le logo logo-texte.png en prenant soin de le redimensionner au préalable pour l’adapter à la taille recommandé par le thème.
Modifiez la couleur des liens et des boutons en récupérant les codes couleurs utilisés pour le logo avec un logiciel adapté.
Personnalisez la mise en forme de la page d’accueil afin qu’elle corresponde au modèle de l’image modele-accueil-1.png.
Gérez le pied de page pour obtenir le résultat présenté dans l’image modele-accueil-1.png.
Modifiez les champs du formulaire de contact pour correspondre au fichier modèle modele-accueil-2.png.
Utilisez la feuille de style du thème enfant pour personnaliser les couleurs des éléments comme dans l’image modele-accueil-2.png.
Utilisez la feuille de style du thème enfant pour modifier l’affichage du formulaire de contact comme dans l’image modele-accueil-2.png.