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
Top Related