Comment embellir le thème de votre WordPress avec CSS ?

Tout est dans le titre. Ce petit tuto sera très, mais alors là très technique, voir indigeste. Mais le jeu en vaut peut être la chandelle si vous souhaitez une présentation aux petits oignons.

Lorsque l’on se lance dans la conception d ‘un site auteur, d’un blog de chroniques, il faut passer par 4 étapes (oui peut être plus, mais restons simples).

  • Le choix du support,
  • L’apparence du site,
  • Le contenu du site,
  • Le référencement du site.

Et on n’est pas sorti de l’auberge avec ces quatre-là !

Le choix du support

J’entends par là, où l’on va héberger son site mais également de quoi il sera fait (parfois, c’est du 2 en 1).

WordPress ? Blogger ? Joomla ? Wix ? Weebly ? Ils ont tous leurs qualités et leurs défauts. Et hélas, ce n’est pas le but de cet article d’en faire la comparaison (oh la vilaine !). De plus, si ce qui va suivre fonctionne avec toutes les plateformes (à condition qu’elles permettent ce genre de modifications), nous nous axerons sur WordPress.

L’apparence du site

C’est le but de l’article. J’y reviendrai donc plus loin. Le thème, le template, le design. Les polices, couleurs, images, l’agencement. Nous vivons dans un monde ou le visuel est important, soigner l’apparence de son site fait tout de suite pro, passionné, sérieux. Couplé avec une bonne organisation, il fait plaisir à l’un des cinq sens : la vue.

A l’époque où je jouais sur des forums roleplay, le design était devenu quasi primordial dans le choix d’un forum pour pas mal de nouveaux joueurs. Oui, c’est bête, ce devait être l’ambiance entre membres, les animations et, bien entendu, l’univers dans lequel se déroule le jeu. Mais l’aspect avait grande importance aussi. Parfois trop sophistiqué, l’on pouvait s’y perdre ou se retrouver avec des bugs selon le navigateur utilisé. Voilà pourquoi je conseille toujours la simplicité à défaut de connaissances techniques.

Sinon, les plus téméraires touchaient au code source du forum pour créer de véritables petits bijoux, et ce code source, c’est le CSS (et l’HTML).

Le contenu du site

Que je passerai outre également. Il dépend de ce que l’on souhaite y voir apparaitre. Le tout est de construire un menu bien organisé et hiérarchisé.

Le référencement

Bon, je crois que j’ai assez saoulé la terre entière avec ça. Visitez mon blog 😀

Qu’est-ce que le CSS ?

Acronyme de Cascading Style Sheets, le CSS est une suite de paramètres destinés à définir l’aspect de certains éléments de votre site.

Par exemple, vous voulez que vos titres soient en police Garamond, taille 14, gras, italique, souligné en pointillés d’une épaisseur de 1 pixel. Votre texte justifié en Arial 12 et dont chaque première ligne de paragraphe soit en retrait. Ceci est un exemple succinct de ce que vous pouvez faire en CSS.

Vous pouvez y ajouter de la couleur, des ombres, des effets (quoique ‘tention avec les effets, d’un navigateur à l’autre, cela peut être différent), des marges, des tailles… enfin bref, tout ce que vous avez déjà vu sur un site quoi.

Et cela ne marche pas que sur le texte, sur les images aussi. Sur tout le site.

C’est clair qu’un site complet requiert un code CSS assez conséquent et compliqué à force. Il faut alors tout définir, les marges, la taille et l’emplacement de chaque partie du site, et que ce soit Responsive (= pas tout pété sur téléphone et sur tablette) par-dessus le marché.

Mais pour WordPress, vous n’aurez besoin que de l’essentiel : les paramètres (et la syntaxe… oui elle est partout celle-là ! Dans les romans puis même dans le code source de mon blog !).

Le HTML, qu’est-ce que c’est ?

C’est, en gros, le squelette du site. Autrefois (aux temps paléolithiques du net), les sites web n’étaient codés qu’en HTML. Ce langage est une série de balises destinées à afficher ceci ici, cela là-bas, etc.  Facile à reconnaitre, elles s’écrivent entre crochets <>. Certaines seules, la plupart accompagnées de paramètres.

Il a évolué au fil du temps, il s’est fait accompagner d’autres langages (comme le PHP, Javascript) qui le rend dynamique et interactif : c’est le Web 2.0.

Nous n’irons pas plus loin sur cette explication. Juste que vous avez le HTML qui est la charpente, les murs, les portes et les fenêtres de votre site et le CSS la décoration (et même un peu plus). Grosso modo.

Si je voulais en venir là, c’est que de l’HTML, vous allez en croiser. Autant savoir que ça existe.

Que modifier en CSS sur mon blog ?

Cela dépend de ce que vous voulez. Si tout vous convient, ne changez rien. Si un élément vous arrache les yeux et que le thème ne permet aucune modification via le panneau d’administration à ce niveau-là, ce guide est fait pour vous.

Par exemple, mon thème permet l’affichage automatisé de mes articles, titres, dates, résumés à la suite, mais l’aspect de ces éléments ne me plait pas. Le titre est énorme, la date est illisible car trop petite au contraire, et je voudrais que le résumé soit en italique. Et pas moyen de changer ça simplement dans le panel administration (ça arrive).

C’est ça que vous allez pouvoir changer.

Modifier concrètement le CSS de mon WordPress

Avant tout, il faut savoir comment se rédige le CSS. Vous allez voir, c’est comme une potion magique. Il faut respecter les ingrédients, les dosages, faire quelques tests (et risquer l’explosion) et tout ira bien. Rien n’est irréversible avec cette méthode. Cela ne vous plait toujours pas, vous modifiez. Vous en avez marre, vous enlevez vos modifications et, au pire, votre site redeviendra comme avant.

Voilà la bête (appréciez) :

.titre_article
{
font-size: 24px;
color: white;
font-family: 'Bree Serif', serif;
text-shadow: 2px 2px 3px #000;
}

Cela vous parle un peu ?

Cela concerne un bidule (en fait on appelle ça un sélecteur) nommé Titre_article. Il aurait pu se nommer Tartempion, le principal est de toujours l’écrire de la même façon dans le CCS et l’HTML (et qu’il évoque ce qu’il représente pour ne pas se perdre).

Ensuite, toujours placer les paramètres que l’on souhaite attribuer à notre Titre_article entre accolades. On appelle ça, un bloc. Là, pas de mystère, ces paramètres sont les mêmes pour tout le monde (vous en aurez une liste plus loin).

Ici, nous avons :

      • Font-size : la taille de la police, 24 pixels.
      • Color : la couleur du texte. Définie à White (blanc).
      • Font-family : vous avez deviné, la police de caractères.
      • Et enfin, un effet (tout simple), Text-shadow, une petite ombre portée pour faire joli.

Et on ferme bien l’accolade sinon ça va foirer.

Autre chose d’importance. Vous voyez, il y a un point devant Titre_article. C’est parce qu’il existe des sélecteurs ayant le même nom qu’une balise HTML. Modifier un sélecteur de balise HTML, c’est avoir un impact sur toutes ces balises et non élément par élément. 

C’est pratique si vous souhaitez uniformiser votre site (chaque image ayant une bordure bleue de 5 pixels, par exemple). Mais toutes les images seront touchées ! Y compris celle que vous souhaitiez peut-être sans bordure. Donc mieux vaut opter pour un sélecteur placé sur les images que vous souhaitez modifier uniquement. Et comme votre site est dynamique, une seule modification suffira pour que toutes les images concernées par ce sélecteur soient touchées.

Bref, un sélecteur de balises HTML s’écrit sans le point, un sélecteur personnalisé, avec le point. Mais ce point n’apparaît que dans le CSS pas l’HTML.

Mais avant, il faut savoir quel sélecteur modifier ! Comment se nomme-t-il ce petit coquin ?

Comment trouver le sélecteur CSS qui m’intéresse ?

Retroussez vos manches, on va mettre nos mains dans le bloc moteur de la bête.

Ouvrez votre blog/site via votre navigateur et dénichez ce que vous souhaitez modifier. Vous l’avez, votre titre trop gros ? Bien.

Selon votre navigateur, entrez en mode Inspection.

      • Sous Chrome : appuyez sur la touche F12 (et ne fuyez pas !).
      • Sous Firefox : appuyez sur les touches Ctrl+Maj+C (en même temps). Et ne fuyez pas non plus !

Faites la même combinaison de touches pour revenir en arrière.

C’est ici que cela se complique car vous allez devoir chercher dans le code source un peu sans trop savoir à quoi ressemble le sélecteur. Et justement, c’est le but, savoir quel nom lui a été attribué.

Ainsi, grâce à lui, vous ajouterez ou modifierez des paramètres.

Passez lentement votre curseur de souris sur les différentes lignes de codes de la fenêtre principale qui vient de s’afficher. Bougez un peu. Vous voyez ? Les éléments de votre site sont colorés. Cela signifie que vous passez sur le bout de code qui correspond à cet élément.

Je vous montre :

Pour affiner votre recherche et arriver au vilain titre mal fichu, déployez le code en cliquant sur la petite flèche de chaque balise div entre crochets (c’est souvent des balises div), poursuivez jusqu’à tomber sur la portion la plus exacte, le titre et rien que le titre.

Ici, je suis tombée sur un sélecteur du nom de bdp-post-title.

Ce que vous devez viser pour connaitre le sélecteur, c’est ce qui se trouve entre les parenthèses de class = «  » . Class définit toujours le sélecteur de l’élément, de la balise.

Bon, nous avons notre sélecteur, allons le modifier.

La syntaxe CSS (petit topo rapide)

Il y a des règles à respecter pour écrire du code CSS sinon ça plante et c’est tout moche (ou alors rien ne change). Certaines ne vous servirons pas, mais vous serez au courant.

Majuscules ou minuscules ?

Premièrement, houra, majuscule ou minuscule, le CSS s‘en fiche. On se sert souvent des Majuscules pour délimiter clairement deux mots comme TitresArticles plutôt que d’employer un underscore.

Syntaxe du sélecteur

Les sélecteurs s’écrivent uniquement avec des signes alphanumériques (lettres et chiffres) ainsi que le tiret et le tiret de soulignement (underscore). Et bien entendu, le point avant le sélecteur personnalisé, mais seulement avant, pas dedans ni derrière. Et pas d’espace dedans non plus, jamais !

Il existe des paramètres qui s’inscrivent avec deux points, mais ne compliquons pas les choses.

Vous pouvez tout écrire sur une même ligne pour gagner de la place.

Les accolades { }

Elles enferment vos paramètres tel un bloc destiné à votre sélecteur. Bon nombre d’erreurs viennent d’une accolade oubliée.

Le point-virgule ;

Le point-virgule à la fin de chaque paramètre. C’est comme le point de votre phrase, mais les informaticiens lui ont préféré le point-virgule. Il ferme le paramètre afin de passer au suivant sans encombre. Une erreur classique à traquer quand rien ne va.

Le paramètre !IMPORTANT

Oui il est important mais surtout il s‘écrit tel quel, avec le point d’exclamation collé devant. Si en modifiant votre sélecteur, rien ne se passe, que vous n’avez pas omis le point-virgule, ni l’accolade et écrit correctement vos paramètres, il se peut que le thème prenne la main sur votre modification. Ajouter !IMPORTANT en fin de paramètre, juste avant le point-virgule permet d’imposer vôtre modification.

Exemple : 

.bdp-post-content {text-align:justify !IMPORTANT;}

Ou modifier le CSS ?

Rendez-vous dans votre panneau administrateur de WordPress (connectez-vous, tout ça, au besoin).

Puis Apparence > Personnaliser > CSS additionnel

Selon le thème utilisé, cela peut varier, cherchez la case de CSS à personnaliser dans tous les cas.

Vous entrerez votre CSS dans cette grande case.

Comment modifier le CSS ?

Un exemple concret  :

Je voudrais que mon titre d’article de blog soit d’une taille de 16 pixels, de couleur jaune (beurk ! Mais c’est pour l’exemple) et centré (il sera centré par rapport au bloc qui le contient).

.bdp-post-title 
{
font-size : 16px;
color : yellow;
text-align : center;
}

Je vous ai décomposé tout ça, mais en une ligne ça marche aussi.

.bdp-post-title{font-size:16px;color:yellow;text-align:center;}

Voilà ! Vous avez modifié ce satané titre ! Alors ? Heureux ? 😀

Et c’est comme ça pour le texte, la date, l’image aussi. Enfin tout quoi.

Annexe 1 : Les paramètres et leurs effets

Ces paramètres sont trouvables sur le net. Et il en existe bien plus que ceux-ci. Tous ne seront pas utiles pour votre blog cependant.

Les termes en italique sont ceux à employer (au choix) et écrire sans faute. Les paramètres none ou normal sont par ceux pas défaut. Inutile de définir none ou normal donc, sauf si vous voulez forcer l’aspect par défaut.

Propriétés sur le texte :

      • font-family : insérer la police ici, comme expliqué juste en dessus.
      • font-size : taille de la police. S’exprime en px (pixels) mais également en % ou en em.
      • font-weight : la « graisse » de la police. On la définit en bold (gras) ou normal.
      • font-style : le style de police, défini en italic, oblique ou normal.
      • text-decoration : autres formes de style. On l’emploie avec underline (souligné), overline (souligné dessus), line-through (barré), blink (clignotant, ne fonctionne pas avec tous les navigateurs) ou none (rien).
      • font-variant : défini si la police est en petites capitales (small-caps) ou non (normal).
      • text-transform : la façon d’écrire le texte. Choisissez entre capitalize (les premières lettres de chaque mot en majuscule), lowercase (tout en minuscule) ou uppercase (tout en majuscules).
      • text-align : alignement sur la gauche (left), centré (center), à droite (right) ou justifié (justify).
      • line-height : hauteur de ligne (interligne) : se définit en pixel, % ou normal.
      • text-indent : indentation du texte sur la première ligne du paragraphe, comme dans un roman. Se définit en pixels.
      • white-space : gestion des « blancs » dans le texte. Vous avez pre (tout est conservé tel quel, pratique pour écrire du code source sans retour à la ligne ni chichi), nowrap (élimine les espaces superflus et le retour à la ligne) ou normal.
      • word-wrap : césure forcée avec break-word sinon normal.

Les couleurs :

Voir les façons de coder une couleur en Annexe 3.

      • color : couleur des caractères du texte. 
      • background-color : couleur de fond des caractères (comme un surlignage).
      • text-shadow : ombre portée. Se défini au moyen de valeurs en pixels plus la couleur entre parenthèses. Ce qui donne texte-shadow (horizontal,vertical, fondu, couleur) ; Exemple : text-shadow (5px 5px 2px blue);

Les bordures (peut être utilisées comme soulignement) :

Les bordures peuvent être définies pour les quatre cotés (et former une boite fermée autour de votre texte ou image), mais vous pouvez également définir chaque côté individuellement. Pour cela les valeurs sont énumérées dans cet ordre : bordure haute, droite, bas puis gauche.

      • border : définir une bordure en une ligne. S’écrit entre parenthèses, la taille, le style, la couleur.
      • border-up, border-right, border-down, border-left : la même mais pour l’un des côtés.
      • border-color : couleur de la bordure.
      • border-width : épaisseur de la bordure, s’exprime en pixels.
      • border-style : style de la bordure, se défini en solid (solide), dotted (série de points), dashed (pointillés), double (double ligne), groove (rainure), ridge (en relief), inset (relief intérieur), outset (relief extérieur).

Pour faire un soulignement, par exemple :

border-down(1px, solid,black);

En cadeau-bonus, insérer une lettrine :

C’est d’un niveau un peu au-dessus (quand je vous parlais des deux points, voici un exemple), mais copiez ceci en changeant juste les valeurs au besoin). Ici, le sélecteur c’est texte (donc modifiez selon votre sélecteur à vous).

.texte:first-of-type:first-letter 
{
   float:left;
   font-size: 20px;
   padding: 2px 2px 0 0;
}

Annexe 2 : Les polices de caractères extérieures

Vous pouvez utiliser des polices classiques disponibles dans WordPress ou employer des polices extérieures. A utilisez avec parcimonie car plus vous chargerez de polices extérieures, plus vous allongez le temps de chargement de votre page (et ce temps est important pour être bien référencé).

Je dirais que trois polices bien choisies pour un blog, c’est un bon compromis. Une pour les titres, une pour les textes, une troisième éventuelle pour les citations, un titre spécial ou mettre une portion de texte en évidence.

J’utilise surtout Google fonts (je suis très Google, la petite faiblesse qui me perdra) car je sais qu’elles sont libres de droit et le site permet de les intégrer facilement. Mais vous pourrez voir le principe sur vos faites votre marché sur d’autres sites.

Rendez-vous sur https://fonts.google.com/

Faites votre choix en cliquant sur le plus en rouge pour les glisser dans votre liste de sélection.

Quand vous avez terminé, ouvrez cette liste qui s’affiche en bas de votre écran.

J’en ai choisi deux. Cliquez sur l’onglet @IMPORT pour afficher les mêmes infos que moi.

Copiez la ligne :

@import url('https://fonts.googleapis.com/css?family=Alegreya|Alegreya+Sans');

Laissez tomber les balises style et copiez dans la case de CSS personnalisé (tout en haut, avant les autres paramètres).

Ensuite, définissez le nom de votre police employée comme indiqué dans la fenêtre dessous.

font-family: 'Alegreya', serif;

La règle : une font-family par sélecteur, sinon c’est la dernière mentionnée (et disponible) qui sera utilisée.

Annexe 3 : les codes couleur

Vous pouvez définir votre couleur de trois façons.

Via son nom (unique par couleur), son code hexadécimal (un truc du genre #FFFFFF, hashtag suivit de 6 symboles correspondant au Rouge, Vert puis Bleu) ou via son code RGB (Red, Green, Blue) qui est le mélange des trois couleurs primaires (aussi).

Ce qui donnera des propriétés telles que :

color : #FF0000;
background-color : yellow ;
border-color : rgb(255, 192, 203) ;

Pas de panique, il existe des listes de couleurs sur le net, des nuanciers, bref, tout ce qu’il faut. En voici un parmi d ‘autres :

https://htmlcolorcodes.com/fr/noms-de-couleur/

Annexe 4 : Des générateurs pour faire joli

A utiliser avec parcimonie également, tout en sachant que ce ne sera pas forcément reproduit de la même manière sur tous les navigateurs. C’est sans doute un (gros) niveau au-dessus, donc tatillonnez doucement si vous débutez. Faites des tests.

Piochez :

https://www.megaptery.com/2012/05/21-outils-generateurs-css-developpeurs-web.html

Voilà, nous sommes au bout de ce « petit » tuto sur comment bidouiller le design de son WordPress via le CSS. J’espère que je ne vous ai pas donné trop mal à la tête.

Mon blog sous WordPress : check !

Voilà, j’ai sauté le pas. Je suis sous WordPress.

Pourquoi ?

Parce que je souhaitais bénéficier d’un bon référencement et que mon site fait main ne me le permettait pas. Il aurait pu, mais il m’aurait fallu passer des heures à en comprendre les subtilités de façon technique afin de programmer tout ça.

Bref, je suis sous WordPress.

Fort heureusement, il fut un temps où j’employais d’autres CMS (Content Management System) comme Joomla, donc les concepts de FTP, tout ça je connais. Ça m’a aidé. Mais bon Dieu c’est quoi ce commerce de fou qui gravite autour de WordPress !

WordPress est gratuit. Ouf ! Mais rien d’autre ne l’est. En tout cas, jamais en version complète. Et les prix… misère ! Rien que cela, on aura compris a quel point WordPress est populaire. Des thèmes à 50 voir 100 dollars. Des extensions qui se paient au mois ou à l’année (de véritables abonnements). Moi qui préfère ne parler de choses gratuites ou abordables dans mon blog, ça va être compliqué.

Comment passer sous WordPress ?

Vous avez deux solutions.

Et à tous ceux pour qui les termes client FTP et hébergement web glacent les sangs ou vous fait mine d’inconnus au bataillon, choisissez la première 🙂

  1. S’inscrire sur https://fr.wordpress.com/ et créer directement un blog chez eux. Il y sera hébergé, pas besoin de vous prendre la tête avec ça.
  2. Téléchargez les fichiers sur https://wordpress.org/, souscrivez à un hébergement fiable (pas OVH sauf si vous avez une chance de trèfle à quatre feuilles et qu’il ne vous arrive jamais aucun pépin), envoyez vos fichiers sur cet hébergement et suivez les indications.

Pour l’installation version 2, munissez-vous des informations envoyées par votre hébergeur concernant l’accès à votre base de données, vous en aurez besoin pour la créer. À ce propos d’ailleurs, il vous faut un hébergement gérant le PHP/MySQL. Visez bien ces deux termes lorsque vous choisirez (demandez autour de vous ou contactez-moi au pire si vous hésitez). Il est rare de nos jours de trouver un hébergeur qui n’en propose pas, mais sait-on jamais.

Pour faire pro, il vous faudra également un nom de domaine. C’est l’adresse, l’URL de votre blog tout simplement, le http:// votrenom point bidule.

Vous n’êtes pas obligé, mais à plus ou moins long terme, si vous vous lancez sérieusement, cela va vous titiller, je vous assure. Les noms de domaine ne sont pas très chers et se paient à l’année (genre moins de 10 euros par an pour certains).

Dans mon cas, je paie l’hébergement à 3,59 € par mois + le domaine à 6,99 € par an pour mon point fr. Cela vous donne une idée des frais.

Et puis c’est tout (sauf si vous voulez acheter plus d’options, d’extensions ou autre), mais avec plus ou moins ce genre de budget, vous êtes bon pour démarrer.

En optant pour le site hébergé (installation version 1), comptez uniquement les frais en nom de domaine. Et encore, c’est à votre convenance, car vous bénéficierez d’une adresse à la votrenom.wordpress.com, vous ne serez pas sans rien non plus 🙂

Le thème

Le thème c’est l’habillage de votre blog. Ça n’a l’air de rien, mais c’est important. Il doit être en rapport avec ce que vous écrivez, être fiable, propre et surtout, vous plaire.

Allez, on parie que vous allez en changer plus d’une fois avant de vous décider ? Pas de souci, c’est normal. Pour ma part, j’ai eu du mal a trouver un thème qui affiche les articles comme je le souhaitais, à savoir l’illustration sur la gauche de l’article et non par-dessus. Toutes mes images étaient dans un format pour ce genre d’affichage, je me voyais mal tout refaire (et puis je préférais cette disposition, question de goûts personnels).

Actuellement, j’ai craqué pour le thème Clean Journal de Catch themes https://catchthemes.com/ en version gratuite. Ils ont de très jolis thèmes et sans bugs (oui, certains en ont). Je bave également sur leur thème Lucida (comme quoi ^^).

Les extensions

Il n’y a ni secret ni miracle, il faut chercher, tester et ne garder que le principal (sinon ça alourdit le blog). C’est selon les besoins de chacun. Mais voici les principaux plug-ins sur lesquels je me suis arrêté pour mon site auteur. Si cela peut aider ou inspirer.

Akismet Anti-Spam

Il est installé de base et permet de gérer les spams. Vous savez, ces cohortes de publicités folles bourrées de liens qui envahissent les commentaires, etc. Toujours bon à prendre.

Download monitor

Permets de gérer des fichiers en téléchargement. J’en avais besoin surtout pour les ebooks offerts lors de l’abonnement. Il a de pratique que l’on peut insérer le lien dans n’importe quel article ou page et connaître le nombre de téléchargements. Pas indispensable si vous ne comptez rien mettre en téléchargement ou utiliser un hébergeur de fichier externe.

Elementor

Il m’a sauvé la vie vu que la plupart des thèmes sont en version allégée lorsqu’ils sont gratuits. Il permet une mise en page plus musclée à l’aide de blocs et de modèles préétablis. Il possède également une partie payante, mais le contenu gratuit est très suffisant. Et puis, le cas échéant, rien ne vous empêche de vous inspirer et de tenter de les reproduire à votre sauce.

Si vous voulez de jolies pages propres, je vous le conseille.

À ce propos, WordPress annonce que son éditeur changera lors d’une prochaine version vers un certain Guntenberg. Lui aussi utilise le principe de construction par blocs, mais m’a semblé moins puissant (et encore tout buggé pour le moment, difficile de le tester sur un site en production, j’ai tenté et abandonné plus d’une fois, j’attendrai qu’il soit plus fiable).

Email Subscribers & Newsletters

Il s’agit de l’extension gérant la lettre de diffusion (newsletter). Même si vous optez pour une autre extension du genre, il vous en faudra une. Cela permet de garder le contact avec vos abonnés et de les informer de vos nouveautés. Sans les spammer hein ^^

Jetpack

Alors lui, c’est un couteau suisse. Il offre plusieurs services comme le module Twitter, etc. Mais surtout il m’a littéralement sauvé la vie pour mes fictions. Il propose un portefolio que j’ai utilisé à cet effet, séparant ainsi les articles/pages de mes chapitres. Et je peux les trier ! Ce stupide tri m’a donné des cheveux blancs, car impossible de base de demander à WordPress de trier l’affichage. Et aucune extension testée n’a voulu le faire simplement.

De plus, il affiche des statistiques de fréquentation du site. Jetpack, c’est ton pote !

Loco translate

Pour le cas ou vous seriez perfectionniste et que vos extensions se sont pas toutes traduites dans la langue de Molière. On retrousse ses manches et on y va ! Vous l’avez compris, cela permet de traduire ce qui ne l’est aps encore dans le thème choisi ou les plugins.

WP Google Fonts

Pour choisir de nouvelles polices de caractères, il est top. Il suffit parfois d’un rien pour faire toute la différence niveau design. Un thème simple peut paraitre tout à fait différent selon les polices que vous employez. Vous vous rendez sur https://fonts.google.com/ afin de passer en revue les polices et les indiquez dans le plug-in.

UpdraftPlus

Un utilitaire permettant de sauvegarder l’ensemble du site (base de données comprise), et ce dans un cloud de votre choix ou en vous l’envoyant par mail. Dois-je préciser que cela peut sauver des heures de boulot perdues un truc pareil ? 😮

Yoast SEO

Ah ! C’est pour lui que je me suis décarcassée, le SEO, le référencement. Cela ne parle peut-être pas à tous, mais de nos jours, si vous voulez que votre blog ne demeure pas un pur inconnu, il est indispensable de bien gérer son référencement. Apparaitre dans les pages de recherches de Google si vous préférez et ainsi être découvert autrement que pas les liens que vous postez à gauche et à droite, mais par des internautes cherchant sur des thèmes en rapport avec vos articles ou vos textes.

Et j’ai déjà remarqué une différence !

J’avais depuis longtemps programmé une surveillance sur mon nom d’auteur, mais je n’obtenais jamais de retours. Désormais, dès qu’un article point son nez, Google le détecte et l’indexe.

Les inconvénients

Parce qu’il est hors de question que j’encense WordPress alors que je peste dessus au moins une fois par jour.

En premier lieu, c’est lourd. Normal, c’est un CMS, il doit s’adapter (et encore, malgré ses efforts il en est loin) à tous les besoins. De ce fait, son code doit être en surpoids, je n’ai jamais autant ramé pour charger mon site.

En second, il « tombe en panne » au moins une fois par jour. Là aussi, c’est nouveau. Sans compter qu’il faut faire gaffe avec les plug-ins que l’on installe, des fois qu’ils causeraient des bugs. Je n’ai installé que ce dont j’avais réellement besoin et pourtant…

Cela peut provenir de mon hébergement, je ne le nie pas. Mais avant (avec mon site fait main), c’était franchement moins fréquent.

En troisième lieu, des détails, mais de taille vu mon utilisation, des fonctions basiques qui n’existent tout simplement pas. Obligée de bidouiller voir de laisser tomber le côté automatique et de faire à la main pour la présentation de mes fictions (d’où le fait que cette partie soit encore en construction, je cherche encore). Comme tout connement, afficher les articles dans l’ordre inverse. Si cela existe de base, dites-le-moi par pitié.

Quatrièmement, les thèmes. Et je vais me répéter. Il y a de beaux thèmes certes, mais aucun qui reflète ce que je veux vraiment, donc on fait avec (ou alors tout buggé, pas de bol). Mais je songe sérieusement à soit créer mon propre thème de A à Z, soit d’utiliser un theme builder (un thème ou plug-in qui permet de construire son thème sans connaissance en programmation). Soit redécouper mes illustrations :/

En résumé, WordPress c’est bien. C’est bourré de modules intéressants, mais il faut lever le pied pour ne pas faire pire que mieux à force de trop en mettre et il est difficile de trouver forcément ce que l’on souhaitait pour son site, il faut parfois (souvent) s’adapter. Mais mis à part qu’il tombe en rade régulièrement, j’l’aime bien J

Si vous aussi êtes auteur (ou proche), utilisez WordPress et voulez en toucher un mot, profitez, il dispose de commentaires ! De même si vous connaissez des plug-ins intéressants, n’hésitez pas.