Dossier : réaliser un blog sous WordPress (partie 3) : Choix du thème à utiliser et configuration
Dans la troisième partie de ce dossier consacré à la réalisation d’un blog sous WordPress, nous allons aborder l’aspect graphique du site, autrement dit, le choix du thème.
Plan du Dossier
- Partie 1 : Installation de WordPress sur un hébergeur
- Partie 2 : Configuration de l’administration WordPress
- Partie 3 : Choix du thème à utiliser et configuration
- Partie 4 : Choix des extensions et installation
- Partie 5 : Publication d’un article
Le thème constitue la charte graphique du site. En clair, c’est la présentation, la mise en page, l’interface de votre page qui comprend entre-autres, les couleurs, bordures, remplissages, arrières plans, polices…
Nous allons voir aujourd’hui comment les mettre en place sur votre site.
Installation d’un thème
Tout d’abord, ouvrez le panneau d’administration WordPress (http://nomdusite.com/wp-admin).
Cliquez sur l’onglet Apparence (Appearance). Vous voici dans la page de Gestion des thèmes. Par défaut, WordPress est fourni avec deux thèmes : le thème WordPress Default (ayant pour nom d’origine Kubrick) et le thème WordPress Classic.
Gestion des thèmes dans WordPress (le thème de G&T et le thème spécial Iphone)
Pour pouvoir en ajouter d’autres, connectez-vous à votre serveur FTP via Filezilla.
Rendez-vous dans le dossier racine de votre site, où vous avez installé WordPress (le dossier racine n’est pas forcément le premier dossier que vous voyez quand vous vous connectez : il correspond au dossier que l’hébergeur vous a indiqué pour y déposer les fichiers de votre site), puis double-cliquez sur wp-content, et enfin sur themes.
Dossier thèmes de WordPress dans Filezilla
Vous pouvez constater que les deux thèmes (Kubrick et Classic) y sont présents (dans cette capture nous retrouvons les deux thèmes vus précédemment).
Pour ajouter votre thème, dans la partie de gauche (côté client), recherchez via l’arborescence le dossier de votre thème, et faites un glisser-déposer dans le dossier themes de votre site (côté serveur).
Une fois les fichiers uploadés, vérifions que tout c’est bien passé. Retournez sur la page de gestion des Thèmes (onglet Apparence). Vous devriez-voir apparaître votre thème avec son screenshot (capture d’écran).
Remarque : votre thème ne s’affiche pas dans WordPress : Est-ce bien les fichiers du thème qui ont été mis en ligne et non l’archive ? Avez-vous uploadé les fichiers dans le dossier themes ? Si vous n’arrivez pas à résoudre votre problème, n’hésitez pas à poster un commentaire !
Activation d’un thème
Pour activer votre thème, c’est très simple, cliquez sur le nom du thème (ou sur l’image) sous l’onglet Apparence (Appearance). L’écran se grise pour faire place à une fenêtre de prévisualisation de votre thème. Pratique pour repérer les éventuels bugs d’affichage.
Fenêtre de prévisualisation d'un thème
Il ne vous reste plus qu’à cliquer sur Activer « nom du thème » (Activate). Pour commencer, je vous propose d’utiliser et d’activer le thème par défaut, dit « Thème Kubrick« , car très facile à modifier et à comprendre par la suite.
Cliquez sur « nom de votre site » en haut de l’administration WordPress pour visualiser l’activation du nouveau thème.
Visualisez votre site en grandeur nature
Configuration simple d’un thème
La plupart des thèmes sont dits « widgétisés (ou encore widget ready, sidebar widgétisée…). Cela signifie qu’ils sont compatibles avec la fonction Widgets (Gadgets) de WordPress.
Les widgets sont utilisés dans des sidebars (barres latérales) comme dans Windows Vista avec le Volet Windows. Ils permettent d’afficher absolument tout et n’importe quoi sur votre site.
Par défaut, WordPress est fourni avec une dizaine de widgets. D’autres viendront compléter la liste par l’ajout de plugins qui fera l’objet de la partie 4 du dossier.
Pour sélectionner les widgets à utiliser dans votre sidebar, cliquez sur Apparence (Appearance) puis sur Widgets.
La page est divisée en deux parties. A gauche, les widgets disponibles; à droite, les widgets actuellement utilisés.
Page de gestion des widgets dans WordPress
La première chose à faire est de sélectionner la sidebar à modifier. Dans la partie Widgets utilisés (Current widgets), cliquez sur la liste à choix déroulante et sélectionnez la sidebar à modifier (dans le cas de Protuts, deux sidebars présentes). Puis cliquez sur Montrer (Show).
Sélectionner votre sidebar à modifier
Dans la partie Widgets disponibles (Available widgets), cliquez sur le lien Ajouter (Add) pour ajouter (oui je sais, il y a redondance 
) le widget à votre sidebar.
Ajout d'un widget à une sidebar dans WordPress
Vous pouvez réordonner les widgets par des glisser-déposer (cf. capture d’écran).
Agencer les widgets dans WordPress et n'oubliez pas de sauvegarder
Dans la très grande majorité des cas, un widget est doté d’options, auxquelles vous pouvez accéder en cliquant sur Editer (Edit). N’oubliez pas, pour valider les modifications apportés au widget, de cliquer sur Done.
Cliquez sur le bouton Sauvegarder les changements (Save changes) pour terminer.
N.B : un fichier à mettre en ligne (à uploader sur votre serveur web) ne doit jamais contenir d’espaces, d’accents ou autres caractères spéciaux. Nommez vos fichiers (par exemple des images) avec des mots-clés, utilisez le – (juste en dessous du 6) pour séparer les mots-clés. Par exemple, vous souhaitez nommer l’image correspondant au logo de votre site, écrivez : logo-protuts.jpg. N’abusez pas des mot-clés. Les conjonctions de coordination (mais, ou, et, donc, or, ni, car…) ne sont pas des mots-clés.
Vous savez tout désormais (ou presque) sur les thèmes pour débuter. Le prochain article du dossier sera consacré aux plugins (extensions) qui permettent d’étendre considérablement les possibilités de WordPress. Et n’hésitez pas à poster un commentaire en cas de problèmes.
15 commentaires pour “Dossier : réaliser un blog sous WordPress (partie 3) : Choix du thème à utiliser et configuration”
Laisser un commentaire
Retrouvez des performances optimales sous Windows Vista avec ce guide gratuit réunissant les meilleures astuces pour optimiser Vista.
Télécharger e-Book "Booster Windows Vista"
Télécharger GRATUITEMENT l'ensemble des thèmes packs pour Windows 7 proposés sur Protuts.net.
Accéder aux thèmes
L'équipe Protuts.net a lancé le projet WordPress Channel, LA chaîne des tutoriels WordPress francophone multi-diffusion (iTunes, YouTube, DailyMotion, Facebook).
Accéder à WordPress Channel
Bonjour,
On me signale que ma sidebar peut s’afficher selon les explorateurs en bas de page des articles.
je n’ai pas constaté le problème, j’utilise le thème inove après avoir utilisé métamorhp-blue.
Avez vous une piste
Merci
Bonjour !
Tout d’abord merci d’avoir pris le temps d’écrire ce tuto
J’ai un problème assez embêtant avec mon blog… Je ne peux ajouter aucun widget, car si je le fais il apparaissent en bas de ma page… et non au niveau de la sidebar.
Any idea ?
Bises !
bonsoir, je suis entrain de terminer mon blog wp. Complètement mano-mano. Et donc, pas widget-ready… j’avais pas encore lu ton tuto mais j’ai trouvé une astuce d’ignorant-paresseux: un simple copier/coller des fichiers sidebar.php et fonction.php du thème kubrick par défaut et ça marche niquel…Mais ton tuto est super bien fait… il me permet de comprendre ce que je fais et par la même occaz de faire une double sidebar. merci
@david: le mieux pour apprendre c’est de regarder sur un autre thème fait par des pros comme par exemple kubrick et essayer de comprendre comment c’est fichu (évites de copier coller car souvent tu risques de te retrouver avec du code inutile, donc c’est pas terrible pour l’optimisation).
En tout cas, je suis heureux que ce tuto t’es aidé
Bonjour,
Je viens de mettre en ligne mon wp et comme un noob que je suis je n’avais pas fait les test sur IE avant, la hp s’affiche bien (apres quelques re modifications) mais la sidebar part en bas de page pour les 2 pages fixes.
Qqn peut-il m’aider por favor ?
ps / testé sous IE 7
@Julien : réduis la taille de ta sidebar (aide toi de Firebug : http://www.protuts.net/5-extensions-firefox-indispensables-pour-developper-votre-blog/ ) et ça devrait marcher.
PS: petit conseil pour ton site, c’est pas recommandé la lecture automatique de la musique au lancement. Imagines un peu si je le consulte dans un lieu public… de plus tu en ralentis l’accès. C’est dommage !
Salut Rainbow !
Merci beaucoup, je vais essayer,
Re
Ca n’influe en rien sur le positionnement de la sidebar dans mes pages fixes sous IE :’(
Je vois vraiment pas d’ou ça vient
@julien: essayes en mettant une width à la div content.
Merci Rainbow, je viens d’essayer, et ça me repete tout, meme sur ff du coup, avec le meme probleme sous ie + la hp qui est aussi décalée.
Merci pour le temps que tu perds a essayer de m’aider !
Je cherche toujours le problème, si j’y arrive je te le dirai
[...] Partie 3 : Choix du thème à utiliser et configuration [...]
[...] Partie 3 : Choix du thème à utiliser et configuration [...]
Bonjour,
j’ai testé ton site avec IE et FF : aucun problème d’affichage que ce soit en faible résolution ou non.
Difficile de t’aider si je ne peux constater le problème.
Quel navigateur utilises tu ? Screenshots possibles ?
Bonjour,
à mon avis, tu as du oublier de fermer une balise div, ou tu as indiqué une largeur trop importante…
Pourrais-tu m’indiquer l’adresse de ton blog pour que je puisse t’aider plus précisément ?