TPN°4 Page d’accueil Wordpres

s

Ojectif

Gérer du texte avec des images

Accueil par défaut

Par défaut, la page d’accueil affiche les 10 derniers articles publiés.

Nous souhaitons une page d’accueil avec un contenu fixe.

Pour cela nous allons : créer une page qui sera utilisée comme page d’accueil du site, associer la page créée à un onglet Accueil dans le menu.

Ajout d’une image dans la bibliothèque

Nous allons ajouter une image qui sera insérée dans la page d’accueil.

Récupérer l’image « imageAccueil.jpg » se trouvant dans :http://images.feyder.net/

et la télécharger dans votre répertoire GIT.

BTS Tourisme 2ème année - GIT option multimédia - Wordpress TP n° 4 - Page 1

Par défaut, la page d’accueil affiche les 10 derniers articles publiés.

BTS Tourisme 2ème année - GIT option multimédia - Wordpress TP n° 4 - Page 2

Fichier à télécharger

Upload de l’image comme le drive de google

Une image miniature a été générée

3 images sont créées automatiquement à partir de l’image originale.Elles sont stockées dans un répertoire uploads / année / mois

Création de la page Accueil

La page d’accueil devrait ressembler à cela :

BTS Tourisme 2ème année - GIT option multimédia - Wordpress TP n° 4 - Page 3

Ajout d’une page

Il s’agit du titre de la page, il sera affiché par défaut en haut de la page avec une balise <h1>

Insertion de l’image « imageAccueil.jpg » à gauche et le texte à droite.

BTS Tourisme 2ème année - GIT option multimédia - Wordpress TP n° 4 - Page 4

Sélectionner la bibliothèque

Sélectionner l’image

Cliquer sur le bouton pour insérer l’image

BTS Tourisme 2ème année - GIT option multimédia - Wordpress TP n° 4 - Page 5

L’image a été ajoutée sans aucun attribut.

Code html de l’image

Texte brut à insérer

BTS Tourisme 2ème année - GIT option multimédia - Wordpress TP n° 4 - Page 6

Le texte se place en dessous de l’image et non à sa droite.Il faut faire "flotter" l’image à gauche et le texte à "droite".Pour cela il faut donner un attribut "gauche" à l’image.

Après avoir sélectionné l’image, on peut cliquer sur l’icône "modifier".

BTS Tourisme 2ème année - GIT option multimédia - Wordpress TP n° 4 - Page 7

Flottement à gauche, le texte viendra se mettre sur la droite.

Texte à afficher lors du survol de l’image avec la souris.

Choix de la taille d’affichage de l’image

Lors du clic sur l’image, celle-ci sera ouverte dans un nouvel onglet.

Le texte s’est placé à droite de l’image.

BTS Tourisme 2ème année - GIT option multimédia - Wordpress TP n° 4 - Page 8

Mise en forme du texte :

justifier, centrer, paragraphe.

Publication de la page pour voir son affichage sur le site.

Nous approchons du résultat souhaité.

BTS Tourisme 2ème année - GIT option multimédia - Wordpress TP n° 4 - Page 9

Copie du texte brut.

Le texte s’est inséré à la suite, ce qui n’est pas voulu.

BTS Tourisme 2ème année - GIT option multimédia - Wordpress TP n° 4 - Page 10

La solution est de casser le flux grâce à un style css "clear".

Les sous titres sont en <h2> (titre 2) et le texte en paragraphe + justifié. Cela peut-être fait en mode visuel.

Le titre n’est pas centré

Pour baisser le texte de 100 pixels, utiliser le style css padding.

Création d’un thème enfant pour relooker le thème.

https://codex.wordpress.org/fr:Thèmes_Enfant transférer les fichiers du thème twenty création du dossier twenty-child Copier les fichier header.php et footer.php

BTS Tourisme 2ème année - GIT option multimédia - Wordpress TP n° 4 - Page 11

Il faut modifier les styles css du thème.

Rajouter cette propriété à la balise <h1>.

Ne pas oublier de cliquer sur le bouton en bas de page pour enregistrer la modification.

Les titres <h1> seront centrés dans toutes les pages et tous les articles.

Modification du menu

BTS Tourisme 2ème année - GIT option multimédia - Wordpress TP n° 4 - Page 12

Ajout de la page « Bienvenue » dans le menu.

Changer l’intitulé de l’onglet qui apparaîtra dans le menu.

BTS Tourisme 2ème année - GIT option multimédia - Wordpress TP n° 4 - Page 13

Affichage du site avec le menu.

Configuration de la page d’accueil en page statique

BTS Tourisme 2ème année - GIT option multimédia - Wordpress TP n° 4 - Page 14

Cette page va devenir l’équivalent d’une page index.php