Rechercher

#Tuto Comment créer un site sous WordPress quand on n’y connaît pas grand’chose

Tu as envie de lancer un blog, une vitrine pour ton petit commerce, une présentation des menus de ton restaurant… Mais tu n’as pas le budget pour embaucher une agence de design web et tu ne connais rien au code. Alors tu te dis que ça n’est pas possible. Et bien si !

NB : ce tutoriel est plutôt long. Si tu le consultes depuis un mobile, je te suggère de le mettre en favori et d’y revenir depuis un ordinateur, ce sera plus confortable.

Il existe de nombreux CMS (Content Management Systems), ou en français Système de Gestion de Contenu, c’est-à-dire des outils simples d’utilisation, qui ne nécessitent pas de maîtriser le code, pour te permettre de publier des pages ou même des sites entiers sur Internet.

Le plus utilisé au monde est WordPress (37% au 1er Juin 2020)[1], très loin devant le 2ème… donc on a choisi de te présenter celui-là.

WordPress étant un « gros » morceau, nous avons choisi de te proposer plusieurs tutos à ce sujet :

  1. WordPress, les thèmes, la personnalisation du thème (cet article que tu lis)
  2. WordPress, comment créer du contenu qui répond aux exigences d’accessibilité
  3. WordPress, les 10 extensions indispensables pour aller plus loin

Présentation générale de WordPress

WordPress est un CMS donc. Il est né de la plateforme opensource de blogging appelée b2 en janvier 2003 (avec une version 0.7), mais la version 1.0 ne voit le jour qu’en Janvier 2004. La version actuelle est la 5.4.1.

Il y a deux façons d’utiliser WordPress, parce qu’aujourd’hui le nom WordPress regroupe en fait 2 typologies de produits et services par abus de langage.

WordPress.org, le CMS : open-source et gratuit, le système de gestion de contenu le plus utilisé du monde, donc (même si plus de 40% des sites n’utilisent aucun CMS). C’est cet outil que nous allons détailler dans ce tutoriel. De nombreux hébergeurs proposent WordPress en CMS.

WordPress.com, la plateforme d’hébergement et plus si affinités : l’hébergement semble attractif par son côté « tout-en-un » et a priori gratuit, l’hébergement de votre contenu créé sous WordPress (CMS) par WordPress.com présente toutefois des inconvénients majeurs sur les fonctionnalités disponibles. De plus, pour avoir « la même chose » que chez un hébergeur autre, il se révèle en fait assez cher donc a peu d’intérêt.

Cependant, pour essayer l’outil et le prendre en main avant de prendre ta décision de te lancer avec un hébergeur tiers, c’est une bonne première étape – sous la version gratuite, pour juste la prise en main.

Les choses que tu ne pourras pas faire avec la version 100% gratuite :

  • Choisir un thème payant – et il faut admettre que le choix est plus vaste et plus professionnel… ou alors il faudra payer le thème en sus
  • Migrer « simplement » et gratuitement ton contenu vers ton hébergeur final si tu en crées déjà pendant ta phase de test de wordpress.com
  • Avoir un nom de domaine autre que le format « nomdedomain.wordpress.com »
  • Installer des extensions (on en parlera dans le troisième tuto de cette série)

Dernier conseil avant le tuto : achètes ton nom de domaine chez l’hébergeur que tu choisiras au final ; le « pointage » d’un nom de domaine d’un hébergeur vers un autre est tout à fait possible, mais si tu es aussi peu codeur que moi, les instructions données seront parfois difficilement compréhensibles… Autant éviter ce tracas ! Mais c’est néanmoins tout à fait possible. Si ce paragraphe te semble obscur, ne t’en fais pas, j’en parle à nouveau plus bas.

Par quoi commencer ?

Tu l’auras compris, le plus simple est donc de commencer par choisir un hébergeur pour ton site Web. Il en existe de nombreux, mais attention, tous n’ont pas de version française de leurs outils, donc à prendre en compte lors de ton choix si tu ne parles pas couramment anglais.

Si hébergeur ne te parle pas, il s’agit de la société qui va faire tourner en bon état de marche des gros ordinateurs 24h/24h pour que ton site soit toujours accessible sur le Web. Wikipedia en parle de façon un peu plus technique ici.

Le choix d’un hébergeur mériterait un article à part entière… Mais il existe déjà des sites qui font régulièrement le travail de comparaison des offres, donc tu peux regarder ici par exemple si tu souhaites regarder les tarifs en particulier (de quelques euros par mois à plusieurs dizaines d’euros par mois, quand même) et les offres précises (langue française, taille de site, visites espérées, etc.).

Une fois l’hébergeur choisi, tu devras choisir ton nom de domaine. La plupart des hébergeurs proposent ce service (frais d’abonnement annuel au domaine en sus) et te permet de vérifier directement depuis leur site – parfois même dans les pages d’abonnement – si le nom de domaine souhaité est disponible. C’est là que tu devras aussi choisir si tu préfères le réserver en .fr, .com, etc.

Enfin, il te faudra indiquer ou installer WordPress comme CMS au sein de l’hébergeur ; là encore, de nombreux tutoriels existent, et normalement l’hébergeur choisi a prévu a minima du texte, voire une vidéo, pour expliquer comment « lancer » ton CMS au sein du site réservé.

Donc une fois que tu as l’hébergeur, le nom de domaine et installé WordPress comme CMS, tu peux lire la suite de ce tutoriel.

Le thème WordPress

Ah, si tu réfléchis à prendre WordPress en CMS, tu as forcément entendu parler du thème. Tu as même parfois lu en bas de certains sites le nom du thème WordPress sous lequel est publié tel ou tel site.

Le thème, c’est l’apparence générale du site. L’avantage d’utiliser un CMS quand on ne sait pas coder, c’est qu’on va pouvoir s’appuyer sur la mise en page déjà préparée par le thème. Mais il y en a beaucoup, et pour en avoir essayé un paquet, c’est difficile d’avoir un site qui ressemble à la photo après avoir rempli le thème avec ton propre contenu…

Donc le thème c’est la forme, le contenu créé dans le CMS (par toi) c’est le fond.

Une astuce pour choisir ton thème tranquillement : une fois dans le CMS même, les critères de recherche de thème (nombre de colonnes, e-commerce, plutôt blog, style artistique ou épuré…) ne sont pas tous les mêmes selon la façon dont WordPress est intégré par l’hébergeur. Je te conseille donc de passer pas mal de temps sur le site même de WordPress sur leur page dédiée aux thèmes pour utiliser les critères de filtre très utiles et une fois trouvés les 3-4 thèmes possibles à essayer, les chercher par leur nom dans le CMS même sur ton compte administrateur de l’hébergeur.

La page des thèmes de WordPress.com
  • Fonctionnalités : WordPress propose 35 axes de fonctionnalités différents, parmi lesquels l’accessibilité, le ecommerce (disponible avec l’option Woo Commerce uniquement), la personnalisation des couleurs, le « one-page » qui permet d’avoir l’ensemble des éléments du menu sur une seule page,etc.
  • Le « layout » : je ne saurai trop te recommander de sélectionner « responsive » pour être certain d’avoir un site lisible facilement quel que soit l’appareil de consultation, en particulier le mobile.
  • Le nombre de colonnes : de 1 à 4, en choisissant pour les 2 colonnes si la colonne « fixe » est à gauche ou à droite. Tous les thèmes ne permettent pas toutes les mises en page, donc si tu as des idées très arrêtées sur le sujet, c’est un bon critère de sélection.
  • Le sujet : si tu souhaites partager beaucoup de photographies par exemple, ce critère peut rapidement permettre de te présenter les thèmes les plus adaptés à la mise en valeur de photographies. Sur certains sujets c’est un peu moins évident, mais si tu as un sujet clair, autant essayer ce filtre aussi.
  • Le style : là, il m’est difficile de commenter car je ne suis pas sûre d’être en phase avec la définition de WordPress de « futuriste » ou « industriel » par exemple, mais le « dark » est effectivement sombre… ?

Une fois tes filtres sélectionnés, tu as donc une liste de thèmes qui y correspond… Et elle peut être longue ! Les vignettes présentées ne sont donc pas suffisantes pour te donner une idée de ce qui est possible.

Pas de panique, tout est prévu en cliquant sur les 3 petits points verticaux à côté du nom du thème :

Quand tu cliques sur les 3 points verticaux cela ouvre un menu

En cliquant sur une des vignettes directement ou sur « Info » sur le menu des trois points, tu arriveras à la page spécifique du thème qui va te donner beaucoup d’infos complémentaires sur le niveau de personnalisation possible.

Je te mets un exemple ici :

Va savoir pourquoi WordPress mélange anglais et français…

Je parlerai de « Essayer et personnaliser » plus tard dans ce tutoriel.

Il existe aussi des sites d’éditeurs de thèmes spécialisés – donc WordPress.com n’est pas la seule source de thème possible.

Il existe toute une littérature sur Internet sur les thèmes, les choix, les recommandations… Donc si tu souhaites quelque chose de vraiment professionnel, mieux vaut aller vers ces éditeurs, mais qui sont généralement des thèmes payants.

Avant d’aller plus loin, un petit mot sur les widgets : presque tous les thèmes (même gratuits) permettent l’inclusion de widgets, ces petites boîtes permanentes sur les sites (en colonne latérale, en haut, en bas…) – mais tous ne proposent pas les mêmes widgets en revanche.

Il est donc important d’aller explorer plus avant le thème (chapitre « Personnaliser le thème ») pour vérifier si le thème qui te plaît te permettra d’inclure ce que tu souhaites : ton fil Twitter, un calendrier de publication du blog, les catégories, des nuages de mots, etc. On en parlera plus loin.

Thème gratuit ou thème payant ?

Il existe plusieurs écoles et tu trouveras des articles qui disent que mieux vaut un thème payant, d’autres qui défendent que les thèmes gratuits suffisent… En fait, cela dépend de ce dont tu as besoin.

Comme un thème n’est que la forme et pas le fond, ma suggestion est la suivante : commences par un thème gratuit qui répond à tes besoins, en prenant soin de vérifier la compatibilité avec les extensions (on en parlera dans le troisième article de cette série) dont tu as besoin. Si au bout d’un moment tu te rends compte que tu as besoin de quelque chose de plus abouti, il sera toujours temps de changer de thème, le contenu créé ne sera pas perdu ?. Et il sera alors temps d’aller explorer les sites de thèmes payants, comme ThemeForest par exemple.

D’autres points à vérifier ?

Tous les thèmes ne sont pas forcément aussi flexibles que la démo veut bien nous le faire croire… Tous ne tiennent pas leurs promesses d’apparence ni de flexibilité.. Ni ne sont maintenus à jour par leur créateur.

Un dernier conseil avant que de choisir un thème : va faire un tour sur les forums vérifier les commentaires au sujet de la souplesse du thème. Vérifies la date de dernière mise à jour aussi, si elle est trop ancienne il se peut que le thème ne soit plus maintenu… et que tu ne bénéficies plus des mises à jour de WordPress en l’utilisant.

Personnaliser le thème

Ça va sans dire, mais ça va mieux en le disant : quand tu choisis un thème, tu es forcément influencé par le contenu qui remplit le thème de démonstration. Or ce contenu ne sera pas le tien… Il faut donc faire des essais avec ton propre contenu. C’est donc là qu’intervient le choix « Essayer et personnaliser » quand tu passes en revue les thèmes qui te plaisent…

Continuons la démonstration sur le thème gratuit essayé plus tôt, Cerauno.

Si tu veux essayer et personnaliser un thème sur wordpress.com avant d’avoir ouvert l’hébergement, etc., WordPress.com te demandera de créer un compte (gratuit) et de choisir un nom de domaine (gratuit sous le format nomdedomaine.wordpress.com). Pour ce tutoriel, j’ai ouvert le site sitedetestledigitalpourtoustuto.wordpress.com donc ?

Le thème sera à retrouver en cliquant sur « Thèmes » sous « Design » dans le menu de gauche. WordPress m’a mis le thème par défaut « Hever » (ton hébergeur t’en proposera peut-être un autre, ou aucun), mais je souhaite le modifier.

Je descends sur la page, je clique sur « Afficher tous les thèmes », et je tape « Cerauno » dans la barre de recherche (il faut scroller vers le bas, elle n’apparaît pas immédiatement)

On doit d’abord cliquer sur « Afficher tous les thèmes »….
…puis on a accès à la barre de recherche

J’arrive alors sur le cœur de la personnalisation du thème, une page qui permet de définir les éléments graphiques permanents du site.

Le thème n’est pas vide quand on l’essaye

La colonne de gauche comprend les éléments qu’on va personnaliser pour le site tout entier et qui apparaîtront donc sur toutes les pages.

Identité du site

Tout est mis à jour en temps réel

Le gros avantage d’un CMS devient évident quand on commence ne serait-ce qu’à personnaliser un thème : au fur et à mesure que tu tapes des éléments de personnalisation (ici « Titre du site » et « Description ») dans la colonne de gauche, tu vois apparaître à droite ce à quoi cela ressemble…

Couleurs et arrière-plan

WordPress propose plusieurs couleurs par défaut.

J’ai fait exprès de prendre une couleur criarde pour que tu le vois bien

WordPress te propose d’utiliser des palettes par défaut qui vont rapidement harmoniser les couleurs (arrière-plan, texte, etc.) entre elles plutôt que de les choisir une à une.

Tu peux aussi aller consulter des sites spécialisés qui conseillent des harmonies de couleur que tu devras installer une à une, comme celui-ci ou celui-là.

Je n’ai pas encore cliqué sur une palette à gauche

Tu peux aussi choisir ta propre couleur. Si par exemple tu as une couleur en particulier qui te plairait en arrière-plan, tu peux la chercher avec son code HEX (c’est une classification des couleurs ; tu trouveras plein de super explications sur les couleurs, leur codage, etc. dans cet article).

Polices

Généralement, chaque thème a une police par défaut, mais te permet de la modifier.

Par défaut

Tu as besoin de conseils pour bien choisir ta police ? Tu en trouveras plein dans cet excellent article sur comment choisir sa police, mais aussi d’autres conseils pour rendre le texte lisible en général.

Tu peux aussi directement tester sur la page de personnalisation puisque tes choix sont immédiatement reflétés dans la page

Cela permet à la fois de tester la police et de vérifier où la police s’applique
La police par défaut (pas de titre) a modifié le menu ici par exemple

Image d’en-tête

Là il s’agit de l’image qui va venir sous le titre du site dans ce thème particulier (ce n’est pas le cas dans tous les thèmes). WordPress te propose quelques images, mais tu peux aussi téléverser tes propres images (ou aller en chercher sur des sites d’images libres de droits – attention à n’utiliser que des images dont tu possèdes les droits ou qui sont libres de droit).

Avant de la choisir
J’en ai choisi une parmi celles suggérées par WordPress.com

Pour mieux faire ressortir l’image, on peut retourner modifier l’arrière-plan.

Avec la palette qui comprend le violet choisi, on a immédiatement la police du titre passée en violet, et un arrière-plan plus agréable visuellement.

J’ai changé la palette en revenant dans « Couleurs et arrière-plan »

Menus

Un des éléments clés d’un site est son menu : il permet de très rapidement dire à ton audience où trouver les différentes informations – par défaut, tu auras remarqué que WordPress propose 4 entrées de menu : Accueil, Blog, À propos et Contact sur ce thème.

Les menus dépendent du thème choisi, ici deux

Dans la majorité des thèmes, WordPress propose aussi d’ajouter un menu dit « Social » – en activant ce menu tu pourras voir où le thème propose de le mettre (dans l’exemple en haut à droite)

Quand on clique sur le menu « Social », pour en choisir la place (ici, Liens sociaux)

Widgets

Wikipedia précise la définition de widget :

Un widget interactifvignette interactive ou mini-logiciel, est un outil disponible sur un système d’exploitation, une page web ou un blog. Les widgets interactifs proposent habituellement des informations ou des divertissements. (…) Les widgets de site sont des éléments qui permettent aux webmasters de rajouter des « modules » à leurs sites web. Utilisés principalement sur les blogs, ils permettent par exemple d’inclure dans la « sidebar » (la colonne sur le côté) des informations internes (ex. : les derniers commentaires) ou externes (ex.: les derniers billets d’un autre site). 

Donc les widgets vont te permettre de personnaliser les colonnes latérales, voire le header (en-tête) ou le footer (bas-de-page) avec des modules parmi toute une liste que tu trouves sous le nom « Widgets » tout simplement.

Le menu Widgets de ce thème (attention, selon les thèmes, les emplacements de widgets diffèrent… cf. les conseils pour choisir son thème plus haut)

Donc le thème choisi propose 5 zones de widgets : 2 en colonne latérale et 3 en pied-de-page.

Je te montre dans les quelques images suivantes comment tu peux très facilement choisir et personnaliser les widgets sur la colonne latérale 1.

On doit personnaliser les widgets zone par zone
Pour ajouter un widget…
Premier widget ajouté…
Deuxième widget ajouté

Tu le vois, tout est facilement personnalisable et tu peux immédiatement voir à quoi va ressembler la page une fois ta personnalisation sauvegardée.

Ajout d’un widget « Texte » sur la deuxième colonne proposée

Paramètres de la page d’accueil

Avant de te détailler ces paramètres, un peu de sémantique WordPress s’impose.

Tes publications peuvent être de 2 types : pages ou articles. En gros, une page, c’est un contenu plutôt statique (par exemple À propos, Contact…). Un article, c’est un billet de blog.

WordPress va donc te demander quelle est ta page d’accueil (celle sur laquelle tu arrives avec ton nom de domaine) et sous quelle page tu vas lister tes articles de blog.

Par défaut dans le thème choisi – cela peut être différent selon le thème

Soyons fous et choisissons « Blog » comme page des articles :

Une fois « Blog » sélectionné comme Page des articles dans le menu de gauche

CSS additionnel

CSS est un acronyme qui signifie « Cascading Style Sheet », ou feuilles de style en cascade. C’est dans la feuille de style qu’on va définir la police, l’arrière-plan, les couleurs, etc., tout ce qu’on vient de faire dans la personnalisation du thème.

Si tu lis ce tutoriel, il est fort probable que tu n’en sois pas encore à développer du CSS par toi-même donc nous laisserons de côté cet aspect de personnalisation plus élaboré que ce que nous venons de faire – et dont tu peux tout à fait te passer.

Et si on écrivait ?

Une fois la personnalisation du thème terminée, n’oublies pas de cliquer sur « Activate and Save » en haut à gauche pour sauvegarder toutes tes modifications. Il est enfin temps de passer au contenu !

L’éditeur de blocs

WordPress propose un éditeur de pages ou d’articles appelé « éditeur de bloc ». En gros, il te propose de diviser ton contenu en plusieurs blocs, que tu peux ensuite regrouper ou déplacer facilement. L’avantage de cette solution est que tu peux enregistrer des blocs en bloc « réutilisables », comme nous le faisons par exemple avec les blocs « Auteurs » sur le site Le Digital Pour Tous : si tu changes l’info dans un bloc ré-utilisable dans un article, les modifications sont immédiatement répercutées sur toutes les autres pages ou articles qui utilisent le même bloc.

La liste des pages du site à date (créées par défaut par le thème)

Choisissons « Blog » :

La page « Blog » par défaut du thème sélectionné

Nous avons personnalisé le site pour que la page « Blog » recense l’intégralité des articles publiés. Tu remarqueras que pour l’instant, le site n’est pas encore activé, ce qui signifie qu’il n’est pas visible par d’autres et pas indexé sur le Web, c’est à dire que Google ne sait pas encore qu’il existe, en gros. Tant mieux, il faut d’abord remplir le contenu !

Il est sans doute impossible de détailler pas à pas l’ensemble des fonctionnalités et possibilités de modification des articles ou des pages. Le mieux est souvent de se lancer et d’essayer !

Pour illustration, je te mets quelques copies d’écran de rédaction d’articles : tu verras au fur et à mesure comment j’alterne entre les instructions de blocs dans le corps de la page (les instructions de type de bloc par exemple sont au dessus du bloc, comme quand je transforme un bloc en « citation ») et celles disponibles dans le menu de droite (comme quand j’inclus une lettrine en début de paragraphe pour bien faire ressortir ce paragraphe).

Choix de style de paragraphe « liste » dans le corps de la page de l’éditeur
Autre possibilité : type « citation » – dans le corps de la page de l’éditeur
Le résultat quand on choisit « Citation »
Activer l’option « Lettrine » dans le menu de droite

Il faut donc aller tester…

Tu auras remarqué que l’éditeur de bloc ne te permet pas de visualiser exactement à quoi ta page web finale va ressembler : pour visualiser, il te faut cliquer sur le bouton « Prévisualiser » dans le menu en haut à droite.

Quand tu prévisualises, dans wordpress.com, cela ouvre une fenêtre par-dessus – selon ton hébergeur il se peut que ce soit dans un onglet à côté par exemple
En scrollant un peu la prévisualisation

À ton tour d’aller jouer avec les options possibles pour trouver les formats de blocs qui te conviennent et enregistrer en bloc réutilisable ceux dont tu vas te servir souvent !

Et après ?

Tu l’auras compris, WordPress est un « gros » tutoriel, que nous avons préféré scinder en plusieurs parties pour te permettre de t’approprier l’outil au fur et à mesure.

La semaine prochaine, tu apprendras comment créer du contenu complètement accessible.

La semaine suivante, tu découvriras les meilleures extensions à installer sur ton WordPress pour vraiment tirer parti au maximum de ce CMS phare.

Comme ça, tu auras tout l’été pour préparer le super site que tu nous présenteras à la rentrée !


[1] https://w3techs.com/

Photo by Launchpresso on Unsplash

Laura Bokobza

@lbokobza

Executive VP / DG / DGA – Transfo Digitale, Excellence commerciale, Business Development, Marketing & Comms, Open Innovation.

Curieuse invétérée. Ancienne CDO/CMO passée du côté obscur de la force, à présent free-lance.

Comité édito #deLaRoom #BonjourPPC

Mon Linktree

Podcast : Revues et Corrigées

Proposé par
Laura Bokobza

Executive VP / DG / DGA – Transfo Digitale, Excellence commerciale, Business Development, Marketing & Comms, Open Innovation.

Curieuse invétérée. Ancienne CDO/CMO passée du côté obscur de la force, à présent free-lance.

Comité édito #deLaRoom #BonjourPPC

https://linktr.ee/laurabokobza

Podcast Revues et Corrigées : https://link.chtbl.com/35g4DeeI

Joindre la discussion
1 commentaire

A lire dans cette thématique

La Playlist du DJ

La newsletter