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

TP N°4

Page d’accueil Wordpress

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.

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

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

Création de la page Accueil La page d’accueil devrait ressembler à cela :

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>

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

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

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.

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

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

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.

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

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

Modification du menu

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 14

Affichage du site avec le menu.

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

Configuration de la page d’accueil en page statique

Cette page va devenir

l’équivalent d’une page

index.php