Comment structurer son site Internet ?

Comment fonctionne la partie graphique sous WordPress ?

Historiquement, dans le domaine de la création Web, le contenu (vos pages,  vos articles, etc) était lié au contenant (le graphisme).

Toute modification sur l’un avait des répercussions sur l’autre.

Cela augmentait forcément les coûts de développement et n’incitait pas forcément à changer le design de son site tous les jours.

La création graphique constituait alors l’un des postes de dépenses les plus importants dans la conception d’un site Internet.

thémes wordpress graphiste

Bien qu’il soit toujours possible de faire appel à un développeur pour la création d’un design personnalisé, installer WordPress pour créer son site a permis de fortement diminuer les coûts de conception en séparant simplement le graphisme et le contenu de votre site.

Cela a permis à de nombreux développeurs de créer et de vendre à grande échelle ces interfaces graphiques, plus communément appelées thèmes.

Comment structurer son site ?

Une bonne ou mauvaise impression se fait en quelques secondes ! Il en va de même pour votre site Internet.

Vous devez configurer WordPress en respectant les codes et habitudes de vos visiteurs, au risque de les voir partir rapidement vers des sites concurrents.

A vouloir trop se démarquer et / ou par méconnaissance des bonnes pratiques du Web, beaucoup de débutants en viennent à faire de mauvais choix en termes de design et de navigation.

ergonomie d'un site internet première impression

Il ne tombez pas dans l’erreur du “Je fais un site pour moi”.

Couleurs trop criardes, trop fades, menus trop complexe…attention, votre priorité doit être avant tout d’adapter l’expérience pour votre public cible.

Même si le design et la présentation diffèrent d’un site à l’autre, les internautes sont habitués à retrouver quelques éléments communs à tout site Internet.

Un site Internet doit faire partie intégrante de votre stratégie d’entreprise. Si vous n’en avez pas ou si elle est mal définie, cela va se ressentir sur votre site.

 

Le design d’un site Web ne doit pas être juste « beau » !

C’est une erreur que font beaucoup d’entrepreneurs en pensant le site pour eux, ou en voulant reprendre le superbe design qu’ils ont vu sur d’autres sites.

Imaginez que vous arrivez sur un site surchargé d’informations, de polices et de couleurs différentes. Vous ne savez pas où aller, l’information n’est pas claire, résultat… vous fermez la page.

Vos visiteurs auront le même réflexe sur votre site si vous ne leur indiquez pas clairement ce qu’ils doivent faire.

Chaque page de votre site doit avoir un objectif. Posez-vous simplement la question :

« Qu’est-ce que j’aimerais que mon visiteur fasse sur cette page pour le rapprocher du processus d’achat ? »

Pour inciter un visiteur à passer l’action, voici les 3 conseils que vous devez suivre :

  • N’utilisez qu’un verbe d’action par page ;
  • Utilisez la couleur et la taille pour attirer l’œil de vos visiteurs sur l’élément important d’une page ;
  • Placez cet élément en haut de page ou au centre.

ergonomie d'un site internet clic

Quelques astuces :

  • Affichez le nom et le logo de l’entreprise en gros et bien en vue. Il doit être visible sur toutes les pages de votre site ;

  • L’internaute doit être capable de savoir en quelques secondes ce qu’il va trouver sur le site. Décrivez donc rapidement votre activité au travers d’images, d’un court texte, d’une signature ou d’un slogan ;
  • Incluez une zone de recherche pour faciliter la navigation de vos visiteurs. Bien sûr, si votre site contient seulement deux ou trois pages, l’intérêt est moindre. Mais cette fonction devient indispensable dès lors que vous publiez du contenu ;

  • Faites des menus simplifiés. Il ne faut jamais plus de  trois clics pour accéder à l’information ;

  • Optionnel : intégrez un fil d’Ariane afin de permettre à tout moment à l’internaute de visualiser sa position sur le site.

ScreenHunter_890 Jan. 26 15.24

Bien que ce soit pour la plupart des recommandations de bon sens, on ne le retrouve malheureusement pas sur tous les sites.

 

Qu’est-ce qu’un thème WordPress?

Le thème correspond donc à l’habillage de votre site. Il va définir la disposition des éléments, le graphisme général, la typographie etc.

S’installant en quelques clics, vous pouvez changer de thème aussi facilement que la coque de votre smartphone.

thémes wordpress smartphone

Les thèmes WordPress sont entièrement personnalisables et permettent de rendre le graphisme de votre site unique.

Évidemment, les options de personnalisation varient d’un thème à un autre :

thème wordpress personnalisation                thème wordpress réglages

 

Le choix du thème

Comment choisir son thème WordPress ?

Le choix de votre thème doit principalement être orienté par ces sept critères :

  • Le visuel : le design, la lisibilité et l’originalité ;
  • Les possibilités de personnalisation ;
  • Le retour / témoignage des utilisateurs ;
  • La traduction (la majorité des thèmes sont en anglais) : indiquée par “translation ready” ;
  • La compatibilité avec les supports mobiles : indiquée par “responsive” ou “mobile friendly” ;
  • Le support : vérifiez s’il existe un support ou une FAQ ;
  • La compatibilité avec la dernière version de WordPress.

Où choisir son thème WordPress ?

thème wordpress gratuit

Comme vous vous en doutez, il existe des thèmes WordPress gratuits et payants.

Les thèmes payants bénéficient souvent de plus d’options, d’un meilleur design et d’un véritable support.

Pour le choix d’un thème gratuit, je vous recommande le site officiel de WordPress.

Pour les thèmes payants, rendez-vous sur le site Thème Forest.

thèmes wordpress attention

Je vous recommande d’éviter les thèmes gratuits trouvés au hasard sur le web.

En effet, des petits malins s’amusent à glisser des codes malicieux destinés notamment à récupérer vos codes d’accès une fois le thème installé.

Préférez les thèmes fournis et validés par WordPress.

Gratuit ou payant ?

Comme souvent, je vous recommande de commencer petit et de partir sur un thème gratuit afin de vous familiariser avec votre site.

Comme expliqué précédemment, vous pourrez par la suite facilement basculer sur un thème payant.

Mais cela est évidemment à évaluer au cas par cas avec votre prestataire et dépendra avant tout de votre projet.

L’un des avantages de WordPress est la possibilité de pouvoir changer rapidement et facilement l’aspect graphique de son site.

Nous allons voir aujourd’hui comment installer un thème WordPress.

Je vous livrerai en fin d’article une astuce bonus vous permettant de tester les thèmes WordPress sans modifier la structure de votre site 😉

 

Installation du thème via la base de données de WordPress

  • Dans le back office, cliquez sur “Apparence” et choisissez “Thèmes” ;

changer le thème wordpress

  • Vous retrouverez ici tous vos thèmes déjà installés ;

changer le thème wordpress

  • Cliquez sur “Ajouter” situé en haut à gauche ;

changer le thème wordpress

  • Voici le catalogue officiel de WordPress. Tous ces thèmes sont gratuits, mais pour certains il faudra payer si vous désirez bénéficier de plus d’options.

changer le thème wordpress

  • Pour choisir votre thème, vous avez la possibilité de le rechercher par filtre ou par son nom si vous le connaissez ;

changer le thème wordpress

  • Pour chaque thème vous avez la possibilité de voir un aperçu du résultat. Une fois votre thème choisi, cliquez sur “Installer”;

changer le thème wordpress

  • Une fois le thème installé, cliquez sur “Activer” ;

changer le thème wordpress

  • Une fois votre thème en ligne, il ne vous reste plus qu’à le personnaliser.

changer le thème wordpress

 

Installation via un dossier

Pour les thèmes payants dit “premium” et certains thèmes gratuits que vous pouvez télécharger via des sites tiers (bien que je ne vous le recommande pas, un code malveillant étant si vite arrivé 👿 ), vous avez la possibilité de les uploader directement sur WordPress.

  • Dans l’interface de gestion des thèmes, cliquez sur “Mettre un thème en ligne” ;

changer le thème wordpress

  • Cliquez sur “Parcourir…” ;

changer le thème wordpress

  • Sélectionnez votre fichier. Il doit être au format .zip ;

changer le thème wordpress

  • Cliquez sur “Installez maintenant” ;

changer le thème wordpress

  • Une fois le thème installé, cliquez sur “Activer” ;

changer le thème wordpress

 

Essayer ses thèmes avec l’extension Theme Test Drive

Avant d’activer un thème et de modifier la structure du site, il peut être préférable de le tester avant.

C’est justement ce que l’extension Theme Test Drive propose. Vous pourrez activer votre nouveau thème et commencer à travailler dessus sans que personne ne le remarque.

  • Commencez par installer le Theme Test Drive ;

changer le thème wordpress

  • Tapez “Theme test drive” dans la barre de recherche ;

changer le thème wordpress

  • Cliquez sur “Installer maintenant” ;

changer le thème wordpress

  • Activez -le ;

changer le thème wordpress

  • Rendez-vous dans la rubrique “Apparence” et sélectionnez “Theme Test Drive” ;

changer le thème wordpress

  • Sélectionnez le thème que vous désirez tester parmi ce que vous avez installés ;

changer le thème wordpress

  • Vous pouvez activer (Enable) ou désactiver (Disable) le thème.

changer le thème wordpress

 

Comment organiser votre contenu

Regrouper le contenu par thème

Afin de faciliter la navigation de vos visiteurs, vous devez organiser vos contenus de façon cohérente en regroupant les informations  et tutoriels publiés par thèmes.

Les thèmes principaux doivent apparaître dans votre menu afin d’être clairement identifiables.

Faites également des liens entre les pages d’un même thème pour permettre à vos visiteurs d”aller plus loin et d’en apprendre plus sur le sujet.

Exemple de structure si vous utilisez des pages :

Exemple de structure si vous utilisez des articles :

La mise en page de vos contenus

De base, WordPress propose peu d’options de personnalisation pour la réalisation des pages et des articles :

Quelques options de mise en page, d’intégration d’images, de vidéos…et c’est tout.

Je vous propose trois extensions gratuites pour vous permettre d’ajouter quelques fonctions pour personnaliser en toute simplicité vos pages, articles et widget.

Structurez vos pages avec Page Builder

Page Builder va vous permettre de structurer vos pages selon vos envies et vos besoins.
Le principe consiste à vous permettre d’ajouter et de dimensionner des zones à widgets (module intégrant une fonction).

  • Installez Page Builder via l’interface administrateur WordPress ;

  • Créez une page ou un article ;
  • Vous pouvez remarquer un nouvel onglet appelé “Page Builder” dans l’éditeur de texte ;

  • C’est sur cette interface que vous pourrez définir la structure de vos pages. Commencez par cliquer sur “Ajouter une rangée” ;

  • Ajoutez des colonnes ;

  • Vous pouvez également ajuster leurs tailles ;

  • Vos colonnes sont maintenant intégrées ;

  • Cliquez sur“Ajouter un widget” ;

  • Sélectionnez maintenant le widget de votre choix ;

  • Vous pouvez maintenant configurer votre widget en cliquant sur“Éditez le widget” ;

  • Vous avez également accès à droite à quelques options de personnalisations.

Black-Studio Tiny MCE Widget et Shortcode Ultimate

Afin de vous permettre de pousser encore plus loin vos possibilités de personnalisation, je vous propose d’installer deux autres extensions.

La première, Black-Studio Tiny MCE Widget, ajoutera un widget proposant un éditeur de texte.

Il apparaît dans les widgets sous la forme “Éditeur Visuel” :

La seconde, Shortcode Ultimate, propose une multitude de fonctions spéciales à intégrer dans vos pages.

Il apparaît dans les widgets sous la forme “Shortcode Ultimate” :

 

Comment modifier un theme WordPress : les techniques basiques

Vous avez installé et commencé à configurer votre thème WordPress, mais vous aimeriez le personnaliser d’avantage ?

Vous trouverez dans ce tutoriel l’essentiel à savoir pour apprendre à modifier un theme WordPress.

Découverte

PPH, CSS, HTML… kézaco ?

Dans le domaine de la création Web, vous entendrez souvent parler de ces termes. Il est donc important de les comprendre avant de vouloir modifier un theme WordPress. Pour faire simple :

PHP = correspond aux fonctionnalités de votre site (barre de recherche, zone de texte, disposition des éléments etc.).

Exemple de code PHP

 

HTML = correspond au contenu de votre site (texte, image, video etc).

Exemple de code HTML

 

CSS = correspond à l’apparence de votre site Web (la taille de la police, la couleur de la police, la mise en page etc.).

Exemple de code CSS

 

Petite analogie pour simplifier la compréhension

Les éléments qui structurent un thème

Afin de voir les fichiers qui constituent votre thème, rendez-vous sur le code source de ce dernier en cliquant sur “Apparence” puis “Editeur” :

Vous avez ensuite accès aux différents fichiers qui composent votre thème :

Chacun de ces fichiers modèles apportent son lot de fonctionnalités. Dans l’absolu, WordPress n’a besoin que de deux fichiers pour fonctionner :

index.php : permettant d’afficher le site ;

style.css : agissant sur l’apparence du site.

 

Mais d’autres fichiers sont disponibles, soit pour avoir un affichage différent pour les pages (page d’accueil, catégories, articles etc), soit pour ajouter de nouvelles fonctions (recherche, commentaires).

Voici les principaux :

  • style CSS : permet de modifier le design du thème ;
  • single.php : le modèle d’article seul ;
  • sidebar.php : le modèle des barres latérales et des widgets (élément graphique permettant d’accéder à une fonction) ;
  • page.php : le modèle des pages du site ;
  • archives.php : le modèle des archives du site ;
  • header.php : le modèle de l’en-tête du site ;
  • home.php : le modèle de la page d’accueil ;
  • footer.php : le modèle du pied de page ;
  • search.php : le modèle de la barre de recherche ;
  • comments.php : le modèle pour les commentaires.

 

Il en existe évidemment d’autres que vous pouvez retrouver dans ce synoptique :

Cliquez pour agrandir

 

Les extensions à installer pour débuter

Le problème lorsque l’on modifie le code d’un thème, c’est que nos modifications sont susceptibles d’être écrasées lors d’une mise à jour.

Voici deux extensions qui vont vous permettre de contourner ce problème et de ne pas voir vos modifications disparaître.

Créer un thème enfant avec Child theme configurator

Un thème enfant est une copie de votre thème principale. Il en reprend toutes les fonctionnalités.

L’intérêt est que les modifications faites sur le thème enfant ne seront pas effacées après les mises à jour du thème principal.

Nous allons maintenant créer et configurer un thème enfant avec l’extension gratuite Child Theme Configurator.

  • Avant de démarrer, voici un aperçu du thème d’origine (le thème Suits), que nous appellerons thème parent. Vous retrouvez sur la droite l’ensemble des modèles de page PHP et de la page CSS.

  • Rendez-vous dans Extensions et cliquez sur Ajouter ;

  • Recherchez, installez et activez Child Theme Configurator ;

  • Cliquez sur Outils puis Child Themes ;

  • Sélectionnez le thème parent souhaité (celui que vous voulez modifier) et lancez une analyse ;

Vous pouvez ensuite créer le thème enfant ;

  • Rendez-vous ensuite dans Apparence puis Thèmes ;

  • Le thème enfant (Suits Child) est créé et activé ;

  • Cliquez sur Apparence puis Éditeur pour accéder aux fichiers du thème enfant ;

  • Le fichier functions.php et style.css sont créés par défaut :

Pour ajouter et modifier d’autres fichiers php (page.php, archives.php, header.php etc.),vous pouvez les créer facilement avec l’extension Child Theme Configurator :

  • Rendez-vous sur la page de configuration de l’extension ;

  • Cliquez sur l’onglet Files ;

  • Sélectionnez les fichiers que vous souhaitez dupliquer (Pour l’exemple ce sera le header.php et le page.php). Cliquez ensuite sur Copy Selected to Child Theme ;

  • Allez sur Apparence puis Editeur ;

  • Les deux fichiers sont maintenant créés.

Modifier le CSS de votre site avec Custom CSS

Si vous ne souhaitez modifier que le code CSS de votre site, je vous recommande d’installer l’extension Custom CSS.

Son avantage réside dans le fait que vous n’avez pas besoin de créer un thème enfant, les modifications sont enregistrées dans les fichiers de l’extension.

  • Recherchez, installez et activez Custom CSS ;

  • Apparence puis Custom Code ;

  • Cliquez sur Add New ;

  • Vous pouvez maintenant ajouter vos lignes CSS dans cette fenêtre.

Nous allons voir maintenant comment utiliser ces différents outils pour modifier votre thème WordPress.

Modifier les éléments d’un thème

Identifier un élément d’un thème

L’une des premières difficultés est de savoir sur quel élément agir pour modifier votre thème.

Admettons que nous voulions modifier la description du site :

Les navigateurs (Internet Explorer, Google Chrome et autres) ont intégré une fonction très utile : “Inspecter”.

Revenons sur notre bannière. Sélectionnez l’élément, faite un clic droit dessus et cliquez sur “Inspecter” :

Vous verrez ensuite apparaître une fenêtre pleine de lignes de code. Elle correspond au code de votre page.

A gauche, vous retrouvez les languages PHP / HTML :

A droite, vous retrouvez le CSS :

Quelques exemples

Avant d’aller plus loin, je vous invite à vous rendre sur le site OpenClassrooms pour accéder à une liste complète des fonctions CSS ( Mémento des propriétés CSS) et des fonctions HTML (Mémento des propriétés HTML).

Modification du CSS

Pour cet exemple, nous allons reprendre la description du site et modifier :

  • La police (font) ;
  • La marge intérieur haute (padding-top);
  • La couleur (color).

Rendez-vous sur Custom CSS. Nous allons ajouter ces ligne de code :

#site-description {
font: normal 18px “Lucida Grande”,”Lucida Sans Unicode”,”Lucida Sans”,Geneva,Verdana,sans-serif;
padding-top: 1.3rem;
color: #289dcc;
}

N’oubliez pas de mettre à jour :

Voilà le résultat :

En inspectant la page, vous retrouvez la ligne de code ici :

Il n’est pas toujours évident de trouver la bonne fonction ou la bonne ligne de code. Aussi ne vous inquiétez si vous devez réaliser plusieurs essais pour obtenir le résultat désiré.

Modification du php

Le PHP est un langage de programmation qui, comme tout langage, demande de l’entrainement et de la pratique pour être maîtrisé.

Vous souhaitez vous lancer dans des modifications en php sur votre site WordPress ?

Vous avez trouvé votre bonheur parmi tous les thèmes WordPress disponibles, ou bien une extension bien pratique…mais malheureusement elle est intégralement en anglais ?

Si vos visiteurs sont entièrement francophones, il serait dommage de les laisser se débrouiller avec la langue de Shakespeare !

Traduire vos thèmes avec l’extension Loco Translate

loco translate langue

Loco Translate est une extension gratuite vous permettant de traduire pratiquement tous les textes de vos thèmes  et extensions sans avoir à toucher directement au code.

La traduction peut se faire dans la langue de votre choix.

Pensez à vérifier avant que vos thèmes aient la marque “Translation Ready”, c’est à dire qu’ils ont été développé de façon à permettre les traductions.

Mais aujourd’hui la marque Translation Ready est pratiquement une norme pour tous les développements.

Exemple de traduction d’un thème

Voici le texte à traduire :

screenhunter_1867-nov-18-15-01

Vous l’aurez compris, il va s’agir de changer “Read More” en “Lire la suite”.

  • Téléchargez et installez Loco translate ;

loco translate installation

  • Il se trouve à cet emplacement sur votre tableau de bord. Vous avez la possibilité de traduire les thèmes mais également les extensions (“Plugin”).  Cliquez maintenant sur “Themes” ;

screenhunter_1859-nov-18-13-17

  • Choisissez votre thème. Ici “EasyBlog” ;

screenhunter_1860-nov-18-13-17

  • Créez un nouveau fichier de langue avec “New language” et sélectionnez ensuite votre langage. Attention, il arrive parfois que vous deviez avant créer un template avec “Create template”;

screenhunter_1861-nov-18-13-17

  • Une fois arrivé sur l’interface de traduction, recherchez les termes concernés. Ici “Read more” ;

screenhunter_1863-nov-18-13-18

  • Traduisez votre texte ;

screenhunter_1864-nov-18-13-18

  • Sauvegardez ;

screenhunter_1865-nov-18-13-18

  • Synchronisez ;

screenhunter_1866-nov-18-13-18

  • Voici le résultat après traduction :

screenhunter_1867-nov-18-13-18

Certains thèmes et extensions comprennent des centaines de ligne à traduire. Autant vous le dire c’est un travail colossal !

Il arrive que certains thèmes ou extensions soient déjà partiellement traduits, mais dans tous les cas vous n’avez pas forcément besoin de traduire l’ensemble des textes.

Pour gagner du temps et vous simplifier la vie, vous pouvez vous contenter de traduire seulement les textes à destination de vos visiteurs.

Laissez un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

10 + 2 =

 
Partagez
Partagez
Tweetez