Cet article est le 6e de la série de 9 articles portant sur la reconception de StevePavlina.com.
La page principale du blog StevePavlina.com
Pour la page principale du blog, je cherchais quelque chose de plus simple et plus visuellement attrayant que la page par défaut de WordPress. En règle générale, je donne à chaque article un titre raisonnablement clair, de sorte que les gens peuvent savoir sur quoi porte un article simplement en voyant le titre dans la plupart des cas, ce qui rend inutiles les extraits supplémentaires de texte. J’ai choisi de lister 12 articles par page dans une belle disposition 3×4 qui s’adapte automatiquement aux appareils plus petits.
Beaver Builder dispose d’un module intégré pour afficher les publications sous forme de grille, mais je n’aimais pas l’aspect irrégulier des carreaux, car les blocs étaient de tailles différentes. J’ai pensé que cela serait plus beau avec une mise en page plus symétrique, alors j’ai ajouté quelques codes CSS pour le faire. Cela permet de parcourir les titres plus rapidement.
Les archives
En ce qui concerne les archives du blog, je n’ai jamais compris pourquoi WordPress ne dispose pas par défaut d’une page d’archives complète et correcte. J’ai essayé quelques plug-ins différents pour cela, et j’ai opté pour Simple Yearly Archive.
SYA (Simple Yearly Archive) a fait du bon travail depuis le début, mais j’ai estimé que sa mise en page par défaut était plus complexe sur le plan visuel que nécessaire, même après avoir personnalisé ses paramètres.
J’ai donc ajouté quelques codes CSS supplémentaires pour supprimer les puces (fioritures inutiles) afin d’utiliser une police de caractère à espacement fixe (Droid Sans Mono) pour les dates (afin que les dates et les titres soient bien alignés) et pour ajuster le formatage de chaque ligne. Cela a grandement amélioré la simplicité visuelle de chaque page.
Étant donné que j’utilise seulement une police de caractère à espacement fixe sur cette page, j’ai également inséré quelques codes pour ne charger cette police que sur la page archives et non sur l’ensemble du site StevePavlina.com.
Pendant que je travaillais sur la page des archives, j’ai aussi pensé que je devais effacer quelques-unes des anciennes publications. Les archives étaient jonchées de publications portant sur des sujets depuis longtemps obsolètes, comme des rappels d’inscription aux ateliers et des évènements uniques gratuits en ligne.
Il y avait aussi des centaines de liens rompus dans ces vieilles publications parce que la plupart des sites Web vers lesquels ils redirigeaient à l’époque avaient soit changé de domaine soit disparus.
plug-in Broken Link Checker
Pour réparer les liens cassés, j’ai utilisé un plug-in appelé Broken Link Checker. Ce plug-in a mis beaucoup de temps à tourner, mais il a fini par identifier plus de 500 liens rompus sur mon site StevePavlina.com. Je les ai parcourus un à un et je les ai tous réparés ou supprimés, ce qui a pris de nombreuses heures.
C’est un travail vraiment fastidieux, alors je me met au travail et j’ai pris beaucoup de pauses pour éviter de devenir fou. BLC est un plug-in gourmand en ressources, je ne voudrais donc pas le faire tourner sur mon site tout le temps, mais il est bien de l’installer et de l’exécuter occasionnellement (par exemple une fois par an) pour trouver et réparer des liens qui pourraient avoir mal fonctionné.
Finalement, j’ai décidé de passer en revue toutes les anciennes publications du site (environ 1300) pour supprimer celles qui étaient obsolètes et inutiles, pour corriger le formatage des publications qui ne semblaient pas conformes à mes nouveaux idéaux et, quelquefois pour mettre également le contenu à jour.
J’ai fini par supprimer environ 130 anciennes publications, ce qui a rendu les archives beaucoup plus propres et plus utiles. Ce travail de nettoyage a duré plus d’une semaine, et ce fut aussi pour moi une extraordinaire expérience de croissance, comme je l’ai déjà dit dans l’article 11 années de croissance.
La page d’accueil de StevePavlina.com
La page d’accueil a été la page la plus difficile à concevoir. Je ne savais pas exactement quoi faire à ce niveau.
La plupart des lecteurs de longue date ne prennent pas la peine de visiter la page d’accueil étant donné qu’ils viennent ici pour lire les articles. Et je dirige la plupart des nouveaux visiteurs directement vers un article spécifique à partir des moteurs de recherche ou des liens publiés sur d’autres sites. La page d’accueil n’est donc pas la page sur laquelle les gens atterrissent généralement en premier.
L’ancienne page d’accueil était un mur de texte qui expliquait aux gens de quoi le site traitait et qui leur fournissait beaucoup de liens à explorer. Pour la nouvelle page d’accueil, je voulais faire quelque chose de plus simple, avec un meilleur rendu visuel et moins encombré.
Je m’y suis lancé en créant un brouillon de la page d’accueil ; un brouillon qui contenait les éléments, qui à mon avis, devraient être incorporés à la page d’accueil. Mon plan initial prévoyait l’ajout d’une page « Commencer ici », où je pourrais guider les nouveaux visiteurs. Finalement, j’ai laissé tomber cette idée, car la page en question me semblait inutile.
Texte de la page d’accueil concis et léger
J’ai décidé de rendre le texte de la page d’accueil concis et léger — une brève introduction au site pour dire aux gens de quoi il s’agit, et c’est à peu près tout. Plus de mur de texte sur StevePavlina.com.
Ensuite, j’ai décidé d’ajouter les 7 principes de mon livre, intitulé Le développement personnel pour les gens intelligents, à la page d’accueil. Ces principes sont le fondement de ma philosophie de croissance personnelle, et ils reviennent sans cesse dans mon travail, même lorsque je ne les mentionne pas de façon explicite. Il me semble approprié de les mettre directement sur la page d’accueil ainsi les gens vont savoir quels types de valeurs sont en exergue ici.
J’ai ajouté des icônes à chaque principe pour rendre la page plus attrayante. Ces icônes proviennent de la collection Font Awesome qui est intégrée à Beaver Builder. Rachelle a trouvé les couleurs pour cette section.
Je voulais que la page d’accueil invite les gens à accéder directement au contenu gratuit, alors j’y ai aussi inclus les récentes publications du blog.
Le formulaire de contact de StevePavlina.com
Le formulaire de contact de mon ancien site était un amas de codes PHP personnalisés que j’ai écrits il y a de nombreuses années. Ces codes comprenaient ma propre version d’un captcha pour éviter le spamming des bots.
Pour le formulaire de contact du nouveau site StevePavlina.com, je m’étais penché sur deux plug-ins populaires : Gravity Forms et Ninja Forms. J’ai examiné les deux de façon assez approfondie, et il était clair que l’un ou l’autre serait excellent. Toutefois, j’avais aussi des codes personnalisés qui m’aident à filtrer mes courriels, et je voulais pouvoir les utiliser, peu importe le plug-in que je choisissais.
J’ai donc envoyé un courriel aux développeurs de ces deux plug-ins pour leur demander comment se connecter à leur code pour faire ce filtrage supplémentaire. Les développeurs de Ninja Forms m’ont répondu plus rapidement et avec un ton amical, et ils m’ont dit comment accomplir ce que je voulais faire.
Par contre, ceux de Gravity Forms ont répondu plus tardivement, avec un ton un peu plus formel et leur réponse ne m’a pas donné satisfaction. J’ai donc choisi Ninja Forms. Un bon service après-vente est important pour moi.
En utilisant Ninja Forms pour mon formulaire de contact, j’ai pu éliminer complètement le captcha et cela en évitant toujours les bots. Cela a été possible parce que Ninja Forms utilise des techniques astucieuses pour tromper les bots, de sorte que leurs spams ne parviennent jamais à passer.
Si vous accédez à mon formulaire de contact, vous remarquerez peut-être que le bouton « Envoyer » incorpore un compte à rebours qui se lance lorsque la page se charge pour la première fois.
Etre humain vs bot
Un être humain prendra surement au moins 10 secondes pour entrer son nom, son adresse électronique et un message. Le compte à rebours n’importunera donc pas du tout un être humain. En revanche, un bot remplira ces champs instantanément et tentera d’envoyer son message immédiatement, ce qui échouera pendant que le compte à rebours est toujours en cours. Cool, n’est-ce pas ?
Ninja Forms inclut également un champ caché que les humains ne verront pas, mais un bot traitera ce champ comme n’importe quel autre champ et essaiera d’y coller quelque chose, et quand il le fera, il se dévoilera lui-même comme étant non-humain et une fois de plus, le message sera bloqué.
Je préfère ces méthodes de blocage de bots, car contrairement au captcha, elles n’importunent pas les utilisateurs humains. Et je n’ai pas reçu un seul message d’un bot depuis que j’ai lancé le nouveau site StevePavlina.com. Sans aucune sorte de protection anti-bots, je recevrais tous les jours des spams de bots via mon formulaire de contact.
De plus, j’avais acheté une extension supplémentaire de Ninja Forms qui m’a permis d’inclure une case à cocher pour s’inscrire à la newsletter au bas de la page du formulaire. De cette façon, les gens peuvent facilement choisir de s’inscrire à ma newsletter lorsqu’ils me contactent s’ils le désirent.
Jusqu’à présent, environ la moitié des personnes qui utilisent le formulaire de contact s’inscrivent également à la newsletter, alors je suis heureux d’avoir ajouté cette fonction supplémentaire.
Faire un filtrage
Étant donné la quantité de courriels que je recevrais autrement, ce n’est toujours pas suffisant. J’ai besoin de faire un filtrage supplémentaire pour maintenir mon volume de courrier électronique dans une limite raisonnable.
Beaucoup de gens à ma place embaucheraient un assistant pour traiter préalablement leurs courriels. Pour moi, cependant, il est plus logique de résoudre ce problème plus en amont, en commençant depuis le point où les messages sont envoyés.
Quelques codes peuvent résoudre ce problème en filtrant les messages entrants : sélectionner les messages que j’aimerais recevoir et bloquer le reste. Par conséquent, au lieu de recevoir 100 messages par jour, dont 90 de la part de spécialistes du marketing ou de spammeurs, je préférerais recevoir seulement les 10 messages restants qui proviennent de vrais lecteurs.
Beaucoup de gens essaient de m’envoyer chaque jour des messages que je préfèrerais ne pas recevoir, comme des communiqués de presse, des requêtes pour publier des articles invités, des demandes de critiques sur des produits, des annonces de lancement de livre, des offres SEO ainsi que d’autres demandes marketing et commerciales.
En réalité, ces gens ne lisent pas le contenu de mon site Web, même s’ils prétendent le contraire. Parfois, le nom ou l’URL de mon site (StevePavlina.com) sont mal indiqués dans leurs courriels. Ils font le tour, spammant des blogueurs pour des raisons promotionnelles, et mon site n’est que l’un des nombreux sites qu’ils ciblent. Si je ne filtrais pas ce genre de messages, j’en recevrais chaque jour des dizaines.
Sur mon ancien site, j’avais écrit un script PHP personnalisé pour filtrer tous ces messages. Pour le nouveau site StevePavlina.com, j’ai décidé d’écrire mon propre plug-in WordPress pour intégrer cette fonctionnalité. Cela faciliterait l’entretien.
Ecrit son plug-in sur StevePavlina.com
Je n’avais jamais écrit de plug-in auparavant, alors j’ai fait des recherches pour savoir comment le faire, et cela s’est révélé assez facile. Mon code initial était en PHP, et les plug-ins WordPress utilisent aussi PHP, mon code n’avait donc même pas besoin d’être traduit. Je m’en suis occupé pendant une partie de l’après-midi. C’était amusant d’écrire mon propre plug-in et de le voir apparaitre sur la liste des plug-ins dans ma zone d’administration WordPress après l’avoir activé. Je venais ainsi d’ajouter une nouvelle compétence à mon répertoire.
Ce plug-in a un mode de fonctionnement assez basique. Il vérifie principalement certains mots-clés et des phrases que les courriels indésirables contiennent généralement, mais que les courriels de mes véritables lecteurs seraient très peu susceptibles d’inclure. Cela fait des années que je mets à jour cette liste de mots-clés. Chaque fois qu’un message indésirable arrive à contourner mes filtres, je consulte le texte et j’ajoute de nouveaux mots-clés au filtre. Maintenant mon filtre prend en compte des centaines de mots-clés différents.
J’estime que cela réduit le volume de courriels que je reçois via le formulaire de contact d’au moins 90%. Les commentaires normaux me parviennent toujours sans problème, mais la grande majorité des sollicitations non désirées est bloquée. La plupart du temps, seulement un ou deux courriels indésirables arrivent à contourner mes protocoles, et ils m’aident simplement à améliorer mon filtre.
Ce filtrage n’importune que les gens qui essaient de m’importuner. Les véritables lecteurs de mon site StevePavlina.com qui me considèrent comme un vrai être humain ne remarqueront même pas cela car leurs messages me parviendront sans problème.
Infographique
Si vous voulez voir ce qui se passe lorsque vous essayez de m’envoyer via le formulaire de contact un message que je préfère ne pas recevoir, essayez simplement d’y inclure le mot infographique (il s’agit d’un mot uniquement utilisé à des fins publicitaires par des polluposteurs qui me demandent de faire la promotion de leurs créations infographiques que je trouve nulles). Lorsque vous essayez d’envoyer le texte, vous verrez apparaitre un message vous indiquant que je préfère ne pas recevoir de tels courriels. Je ne verrai jamais le message parce qu’il sera bloqué avant même qu’il d’être envoyé. Cette approche fonctionne bien depuis de nombreuses années.
Améliorer le plug-in
Pendant un moment, j’ai réfléchi à la question de savoir si je devais améliorer le plug-in et le rendre public afin que d’autres personnes puissent l’utiliser. J’ai renoncé à cette idée étant donné que j’ai déjà assez de choses à faire et que je ne veux pas vraiment ajouter la promotion et le support de plug-ins à ma charge de travail. Je crains également que si plus de gens utilisent ce plug-in, cela mène à une guerre armée avec des spécialistes du marketing et des polluposteurs qui essaieraient de déjouer le filtrage, tout comme nous l’avons vu avec le spamming régulier par courriel qui s’est répandu, malgré les dispositions que les gens prenaient pour en finir. Ce n’est pas non plus le genre de plug-in dont la plupart des gens auraient besoin. De toute façon, il ne s’agit pas d’un plug-in si difficile à coder.
Ces améliorations du backend m’ont permis de simplifier la conception de la page de mon formulaire de contact. Avant, j’avais l’habitude de faire précéder le formulaire d’une liste des choses à faire et à ne pas faire pour demander aux gens de ne pas m’envoyer des communiqués de presse, des demandes de critiques pour des produits ou autres… Bien sûr, les Crétois ignoraient cette demande et me spammaient quand même. Maintenant, il n’y a plus d’encombrement sur le formulaire de contact pour les lecteurs qui veulent simplement m’envoyer un message, et la plupart des spécialistes du marketing et des spammeurs sont poliment recalés.
Les cyberprédateurs sur StevePavlina.com
De temps en temps, je dois faire face à des cyberprédateurs. Cela va de pair avec le fait d’avoir un blog populaire. Je sais que d’autres personnes en souffrent beaucoup plus que moi, surtout les femmes qui ont été la cible du fiasco de la Gamergate. Cela dit, je préfère ne pas recevoir régulièrement des messages d’inconnus qui me menacent de mort parce que j’ai écrit une chose qui leur déplait.
J’ai vu des gens faire face au cyber harcèlement de diverses façons. Certains font recours à la justice et aux forces de l’ordre. D’autres s’attaquent directement aux personnes qui les harcèlent. D’autres encore ont la peau très épaisse et ignorent simplement ces personnes. Il y a même des gens qui ont complètement arrêté de bloguer ou d’utiliser les réseaux sociaux pour ne plus avoir à gérer ce genre de problème.
Depuis que je ne suis plus actif sur les réseaux sociaux, la principale forme de cyber harcèlement dont je suis victime provient de personnes mentalement instables qui tentent de m’envoyer un grand nombre de messages insensés ou menaçants. C’est rare, mais cela se produit quand même de temps en temps.
Tout comme je l’ai fait avec les autres courriels indésirables, j’ai opté pour une solution technique en ajoutant un code de défense contre le cyber harcèlement à mon plug-in. Ce code permet d’identifier les cyberprédateurs, et les empêche de m’envoyer des messages. Plus ils essaient de m’envoyer des messages, plus il leur devient difficile de contourner ces blocages.
Le système confond les cyber harceleurs
Le système est également conçu pour les confondre, de sorte qu’ils ne peuvent même pas savoir si je reçois leurs messages ou non. Les harceleurs ont généralement un besoin malsain de savoir leurs messages lus. Par conséquent, même si l’un de leurs messages arrivait à contourner le système, je l’utilise juste pour améliorer le code. Finalement, le cyber harceleur renonce, ou bien il continue simplement d’envoyer des messages qui ne me parviendront jamais. Dans la pratique, cette solution fonctionne très bien et semble plus efficace que d’essayer d’impliquer la justice et les forces de l’ordre.
Je sais que si ont menace certaines personnes par un harceleur, elles préfèrent recevoir les messages de menace. En preuve d’exemple pour être averties d’un danger imminent ou pour transmettre les messages aux autorités policières si nécessaire. Pour ma part, je préfère ne pas du tout recevoir de folles diatribes. Je n’ai pas besoin de sujet de distraction ou d’un élément qui pourrait entamer l’ambiance qui prévaut chez moi.
Dans mon cas, ces harceleurs sont des gens que je n’ai jamais rencontré ou à qui je n’ai jamais parlé. Par conséquent, je ne crois pas courir un danger physique imminent. Si les choses venaient à changer ou si le harceleur est une personne que je connais, je me tournerais probablement alors vers les forces de l’ordre. Toutefois, en général, je préfère contourner le problème plutôt que de l’aggraver.
La section Actualités sur StevePavlina.com
Après avoir mis de l’ordre dans les archives, la dernière chose que je voulais faire, c’était de les encombrer à nouveau avec des dizaines d’annonces limitées dans le temps et qui seraient obsolètes par la suite. Je cherchais un moyen de maintenir le blog bien rangé, en mettant l’accent sur le contenu intemporel.
J’ai ouvert un dialogue avec mes lecteurs à ce sujet, et ils ont dit qu’ils voulaient toujours que je les informe de la tenue d’évènements gratuits en ligne. Ils souhaitaient aussi continuer de recevoir des rappels opportuns. Toutefois, ils avaient également approuvé l’idée qu’il serait bon que ces informations n’encombrent pas les archives du blog.
Au cours de l’une des réunions du groupe de rencontre WordPress, j’ai entendu parler des types de messages personnalisés. J’ai réalisé que si je créais un type de message personnalisé pour les actualités et les mises à jour ponctuelles, je pourrais le garder dans une section séparée de mon site Web StevePavlina.com. Cette section pouvait aussi avoir ses propres archives, ainsi elle n’encombrerait pas les archives du blog. Ce serait un peu comme avoir deux blogs sur le même site : l’un pour les articles intemporels et l’autre pour les actualités et les mises à jour ponctuelles. Cela me paraissait être une bonne solution.
Mon messages personnalisés
J’ai donc écrit un autre plug-in pour ajouter des types de messages personnalisés appelé Actualités, et j’ai ajouté une section Actualités pour les afficher. Pour la plupart du temps les articles d’information sont généralement beaucoup plus courts que les articles de mon blog. Pour cette raison j’ai configuré la page Actualités de façon à ce qu’elle affiche le texte intégral de ces articles sur la première page. Cela évite aux lecteurs de devoir cliquer dessus pour les lire.
Je suis très content de la section Actualités, car je peux y publier de courtes mises à jour. Ces mises a jour sont ceux pour lesquelles il n’aurait pas été opportun de consacrer tout un billet de blog, comme des vidéos inspirantes que j’aime, de nouvelles fonctionnalités ajoutées au site, des rappels sur des évènements à venir, etc.
Les publications de la section Actualités ainsi que celles du Blog sont toutes incluses dans le flux RSS. Ceci est fait de sorte que les abonnés RSS les reçoivent toutes automatiquement. Si les gens ne veulent recevoir que les publications de la section Actualités et/ou celles de la section Blog, cela ne pose aucun problème. Ils peuvent utiliser différents flux selon leurs préférences :
Actualités et Blog : https://www.stevepavlina.com/feed/
Actualités uniquement : https://www.stevepavlina.com/news/feed/
Blog uniquement : https://www.stevepavlina.com/feed/?post_type=post
Le gestionnaire de médias sur StevePavlina.com
WordPress n’intégrait pas un gestionnaire de médias lorsque j’ai commencé à bloguer en 2004. Par conséquent, la plupart des images disponibles sur mon site n’étaient pas incluses dans le gestionnaire de médias. Elles étaient plutôt disponibles dans un répertoire d’images séparé. Au cours du projet de reconception, j’ai intégré toutes les images du site dans le gestionnaire de médias. Suite a cela j’ai mis à jour tous les liens des anciennes images. Heureusement, mon site n’utilise pas beaucoup d’images. Cela n’a donc pas été trop difficile.
La mise à jour Beaver Builder
Je venais d’apprendre que Beaver Builder est désormais utilisé sur plus de 100 000 sites Web ; Or il y a deux ans que c’est lancé. Les développeurs de ce merveilleux thème et plug-in ont déjà atteint leur premier million de dollars de ventes. Je pense qu’ils atteindront leur deuxième million beaucoup plus vite. C’est génial de les voir si bien s’en sortir. Soit en passant, si vous lisez toute cette série, n’hésitez pas à me faire part de vos commentaires à ce sujet. Qu’en pensez-vous de toutes les nouveautés apportées jusqu’à présent ? Y a-t-il autre chose que vous aimeriez que j’inclue ?
Continuez avec la partie 7 de cette série portant sur la reconception de StevePavlina.com.
Article original écrit par Steve Pavlina.
Pour finir, voici une vidéo complémentaire dans laquelle je partage avec vous des astuces sur « WordPress : comment créer un blog facilement et gratuitement »
