TPN°6 Page Visites Wordpres

sObjectifs

Créer des articles Gérer des articles

La page Visites devra ressembler à cela : http://site.feyder.net/visites.php

Notions sur les articles

Plusieurs articles peuvent-être affichés sur une page. Les articles sont classés par catégorie. L’affichage d’une catégorie permet d’afficher les articles correspondants. Les articles sont affichés par ordre chronologique de leur création. Le nombre d’articles visibles sur une page est paramétrable (par défaut 10) Une catégorie est associée à un onglet.

Catégorie 1 Catégorie 2

Notre but va être de créer une catégorie visites qui va contenir 3 articles : 1 article pour la ville d’Ostuni, 1 article pour les grottes de Castellana, 1 article pour les trulli d’Alborebello.

A chaque nouvelle destination, nous pourrons ajouter un nouvel article et il viendra se positionner en haut de la page.

Une catégorie visites sera créée.

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

Article 1 du 01/01/2015

Article 6 du 08/01/2015

Article 3 du 07/01/2015

Article 2 du 04/01/2015

Article 5 du 12/01/2015

Article 4 du 11/01/2015

Affichage sur une page de la catégorie 1 qui contient 3 articles.

Affichage sur une page de la catégorie 2 qui contient 3 articles.

Ajout des images dans la bibliothèque

Nous allons ajouter toutes les images qui seront insérées dans les articles de la catégorie visites.

Ajouter à la bibliothèque les images suivantes : imageOstuni.jpg imageCastellana.jpg imageAlberobello.jpg qrcode-itineraire-ostuni.png qrcode-itineraire-castellana.png qrcode-itineraire-alberobello.png

se trouvant dans votre répertoire GIT.

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

Etat de la bibliothèque avec les images uploader.

Création de la catégorie d’articles "visites"

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

Structure des articles de la catégorie visites

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

Titre centré

Image d’une largeur de 300 pixels.Alignement sur la droite.En css : float right

Le texte devra venir s’imbriquer sur la droite de l’image.

Texte : Itinéraire souhaitéA aligner sur la droite

Image du qr code d’une largeur de 150 pixels.Alignement sur la droite.

Le texte sera mis avec une balise de titre 4.Les titres disposent d’un style css clear: both ; qui permet de casser le flux.

Création de l’article Les trulli d’Alberobello

Insertion de la ligne horizontale

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

Saisie du titre

Affectation de l’article à la catégorie Visites

Insertion de l’image d’alberobello

Alignement à droite Taille : largeur de 300 pixels Affichage de l’image à sa taille réelle par un clic

Configuration de l’image pour la placer à gauche et qu’elle s’ouvre à sa taille normale.

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

Prévisualisation de l’article.

L’image viendra flotter à droite et le texte pourra s’imbriquer sur sa gauche.

Saisie du texte qui viendra s’imbriquer à droite de l’image.

Mettre sous forme de paragraphe et justifié. A faire en mode visuel.

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

Saisie du texte "Itinéraire conseillé"

Le texte sera sous forme d’un paragraphe aligné à droite. Le texte sera placé sous l’image Il faudra donc placer un bloc div avec un La page d’accueil devrait ressembler à cela :

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

Insertion de l’image du qr code

Alignement à droite Taille : 150 pixels

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

Publier l’article

Création de l’article Les grottes de Castelana

Refaire les mêmes opérations que pour le premier article du .

Création de l’article Ostuni la citta Biancha

Refaire les mêmes opérations que pour le premier article du .

Ajout de l’onglet Visites dans le menu

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

Ajout de la catégorie d’articles « Visites » dans le menu.

Première amélioration   : suppression du lien pour les archives

Il faut modifier le fichier category.php

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

Affichage du site avec le menu modifié.

Notre thème affiche un lien pour les archives en haut de la page.

Affichage de la description de la catégorie en style paragraphe.

La ligne ne va pas jusqu’au bout du bloc main.

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

Supprimer ces lignes de codes.

Ce titre est par défaut sur ce thème en paragraphe. Il faudrait le mettre en titre h1 mais cela serait trop compliqué à réaliser.

Le lien sur les archives a disparu

Deuxième amélioration   : agrandissement de la ligne horizontale

Il suffit de modifier la classe de la balise <hr /> du fichier css

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

Supprimer ces deux lignes de code css

Affichage de la catégorie Visites avec toutes les modifications.