TPN°3 Design du site Wordpres

s

Modification du thème

L’affichage du site dépend du thème utilisé.

De nombreux thèmes sont disponibles, ils peuvent-êtres gratuits ou payants. Par défaut, dans la version 4 de wordpress, il y a 3 thèmes :

Nous allons choisir le thème « Twenty Twelve » qui correspond mieux pour un site statique.

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

En survolant le thème on peut l’activer

Le thème « Twenty Twelve » a été activé.

Affichage du site avec le nouveau thème.

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

Suppression des widgets

Les widgets sont des fonctionnalités qui peuvent-être placées sur les pages.

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

Dans ce thème, les widgets sont affichés dans une colonne à droite.

Chaque widget va être supprimé

Tous les widgets ont été supprimés. Ils pourront être réintégrés si besoin.

Affichage du site sans les widgets.

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

Les widgets ont disparus.

Configuration du header

Le header est la partie supérieure de l’affichage du site qui est commun à toutes les pages.

Par défaut le titre et sa description du site sont affichés comme header au-dessus du menu.

Une image peut-être insérée dans le header mais elle s’affichera par défaut en dessous du menu. Elle devra être d’une largeur maximum de 960 pixels correspondant à la largeur du bloc main (principal) du thème choisi.

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

Importer le logo imageHeader.png qui se trouve dans votre répertoire images..

Modification du fichier header.php

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

Voici le rendu de l’affichage du logo dans le header. Il s’affiche par défaut en dessous du menu. Ce n’est pas souhaité donc il faudra modifier manuellement le fichier header.php.

Dans la colonne de droite, il faut afficher le fichier header.php

Il faut décocher cette case pour que le titre du site et sa description ne soit pas affichée dans le header.

Après avoir importé l’image, voici le nouvel écran de configuration du header.

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

Cette partie concerne le menu.

Couper la partie du menu et la coller ici s (après la gestion de l’image).

Voici le fichier corrigé.

Configuration du footer

Par défaut est affiché en pied de page : "Fièrement propulsé par WordPress"

Cela n’est pas modifiable dans l’interface graphique.

Il faut modifier le fichier footer.php

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

Voici le résultat.

Dans la colonne de droite, il faut afficher le fichier footer.php

A supprimer

Saisir le texte à visualiser en pied de page.

Modification de l’arrière plan

La couleur de l’arrière plan peut-être modifiée.

Une image peut-être insérée et répétée en arrière plan. Cependant attention, la gestion de la transparence n’est pas prise en compte. Il faudra rajouter un plugin (extension) pour avoir cette fonctionnalité.

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

Vous pouvez : laisser par défaut, changer la couleur d’arrière plan, insérer une image.

Configuration de la barre de navigation

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

La barre de navigation sera appelée « menu ».

Créer ce nouveau menu.

Cocher cette case qui permet d’afficher le menu.

Enregistrer les modification.