S’il n’est pas le plus utilisé, WordPress est parmi les CMS ou SGC le plus utilisé sur la toile. Grâce à son extensibilité, plusieurs plugins, extensions ou addons peuvent être ajoutés à une installation WordPress pour ajouter des fonctionnalités.

Vu que le nombre des extensions ajoutées dans une installation WordPress influence sa performance, avec autant des plugins gratuits ou payants que regorge WordPress plugin, on ne peut malheureusement pas tous les installer. Et c’est tout à fait naturel de se sentir perdu quant au choix des plugins à utiliser pour son projet WordPress. Quel est le meilleur plugin WordPress, Quel plugin indispensable pour son blog ? Combien de plugins utilisés pour un site ?

Bref, sur base de mon expérience, je vous liste les meilleurs plugins WordPress que quasi tout le monde installent dans son blog WordPress. Ces plugins sont ceux que j’installe dans quasi toutes mes installations WordPress peu importe le type du site.

JetPack

Jetpack, un all in on, est un plugin qui regroupe plusieurs plugins en lui seul, et permet d’intégrer plusieurs fonctionnalités rapidement. Parmi ses fonctionnalités, on cite notamment :

  • Stats: une fonctionnalité qui vous permet d’afficher la statistique de votre site, le nombre de visiteurs journalier, hebdomadaire, mensuel et annuel
  • Abonnement : une newsletter, qui permet à vos fans de s’abonner à votre site et d’être notifié des nouvelles de votre blog
  • Bouton partage : Une fonctionnalité qui permet d’ajouter les boutons de partages dans les réseaux sociaux.
  • Photon : Un outil qui accélère considérablement votre site en chargeant les images depuis wordpress.com
  • Articles similaires : Une fonctionnalité qui permet d’afficher les articles similaire d’un blog
Jetpack by WordPress.com
Jetpack by WordPress.com
Développeur: Automattic
Prix: Gratuit
  • Jetpack by WordPress.com Capture d'écran
  • Jetpack by WordPress.com Capture d'écran
  • Jetpack by WordPress.com Capture d'écran
  • Jetpack by WordPress.com Capture d'écran
  • Jetpack by WordPress.com Capture d'écran
  • Jetpack by WordPress.com Capture d'écran
  • Jetpack by WordPress.com Capture d'écran
  • Jetpack by WordPress.com Capture d'écran

Wordfence security

D’abord la sécurité de son blog est primordiale avant quoi que ce soit, Wordfence rend le succès des attaque par force brute difficile si pas impossible avec un système de blacklistage d’adresse IP. Très pratique même s’il a une réputation d’être difficile à configurer.

Akismet

La plus part du temps, les sites WordPress acceptent l’interactivité de ses utilisateurs. Les spammeurs adorent ce genre d’opportunité. Si vous ne voulez pas voir du chinois dans vos commentaires, pensez à Akismet. Il est d’ailleurs déjà intégré par défaut dans toutes les installations WordPress, qui cependant n’est pas activé.

Akismet Anti-Spam
Akismet Anti-Spam
Développeur: Automattic
Prix: Gratuit

W3 Total Cache

Optimise et accélère les chargements de votre site WordPress, il compresse votre site, mets un système de cache et dispose d’une manière intelligente de minifier le code source de votre site pour un chargement plus rapide.

W3 Total Cache
W3 Total Cache
Développeur: Frederick Townes
Prix: Gratuit

Yoas SEO (WordPress SEO by Yoast)

Parmi les étapes de créations d’un site web, le référencement (SEO) de son site est une étape non négligeable si pas indispensable. La plus part de thème WordPress intègre déjà les balises d’optimisation pour les moteurs de recherches mais ne sont généralement pas suffisant. Ce plugin ajoute plusieurs éléments non négligeables pour le référencement naturel dont :

  • Le fichier sitemap qui liste automatiquement toutes les pages du site, à soumettre à Google
  • Défini les balises métas open graph pour les réseaux sociaux
  • Génère un fichier robots.txt
  • Permet l’édition des balises title et metas des pages, des catégories et des articles

Et ce n’est pas tout, il met à votre disposition un indicateur qui sur base de plusieurs critères du mot clé principal (sa densité, sa position, etc.) vous indique le niveau d’une page optimisée.

Yoast SEO
Yoast SEO
Développeur: Team Yoast
Prix: Gratuit
  • Yoast SEO Capture d'écran
  • Yoast SEO Capture d'écran
  • Yoast SEO Capture d'écran
  • Yoast SEO Capture d'écran
  • Yoast SEO Capture d'écran
  • Yoast SEO Capture d'écran

Broken Link Checker

Ce plugin vous alerte via email ou le tableau de bord WordPress sur les liens externes morts. Des liens qu’il faut à tout prix éviter pour la réputation de votre site tant pour vos visiteurs que pour les moteurs de recherches. N’est-ce-pas que c’est chiant d’être dans un site où les liens externes vous redirigent dans des belles pages d’erreurs 404 ?

Broken Link Checker
Broken Link Checker
Développeur:
Prix: Gratuit

Google analytics for WordPress

Vous voulez intégrer Google analytic pour surveiller l’audience de votre site, ce plugin permet rapidement et facilement d’intégrer Google analytic.

Advanced ads

Advanced ads est un plugin qui vous permet aisément d’intégrer les blocs d’annonces dans votre site ou blog. Plusieurs régies publicitaires sont supportés dont Adsense aussi, Il se différence des autres extensions du genre surtout par sa possibilité de gérer un espace de publicité avec l’alternance.

Inline Related posts

Un plugin très pratique qui affiche automatiquement les articles ou posts similaires au sein d’un article. Cela permet de booster les pages vues d’un site web et enfin de mieux optimiser les liens internes du site.

Inline Related Posts
Inline Related Posts
Développeur: IntellyWP
Prix: Gratuit
  • Inline Related Posts Capture d'écran
  • Inline Related Posts Capture d'écran
  • Inline Related Posts Capture d'écran
  • Inline Related Posts Capture d'écran
  • Inline Related Posts Capture d'écran
  • Inline Related Posts Capture d'écran
  • Inline Related Posts Capture d'écran
  • Inline Related Posts Capture d'écran
  • Inline Related Posts Capture d'écran
  • Inline Related Posts Capture d'écran
  • Inline Related Posts Capture d'écran

Q2W3 Fixed Widget

Quickfixed widget est une extension qui permet de mettre vos widgets en position fixed lors du scrolling ! Très pratique dans les pages très longues où on n’aimerait pas qu’une information affichée en haut de la page ne soit pas invisible aux yeux d’un visiteur quand il scroll !

Q2W3 Fixed Widget
Q2W3 Fixed Widget
Développeur: Max Bond
Prix: Gratuit

Enfin, vous savez mes outils ! Et vous, quel plugin trouvez-vous intéressant ou indispensable dans un projet WordPress ?

Jetbrains PHPStorm est un environnement de développement intégré spécialisé pour le développement Web. Initialement conçu pour le développement PHP avec tout le support de Webstorm, grâce à son extensibilité, plusieurs plugins existent pour étendre ses fonctionnalités. Il supporte nativement les langages PHP, HTML, CSS et JavaScript.

AVANTAGES ET FONCTIONNALITES

Si plusieurs développeurs Web se penchent vers cet IDE, c’est grâce aux nombreux avantages et fonctionnalités que possède PHPStorm qui rendent vraiment facile la vie des développeurs en occurrence :

  1. Le support de la coloration syntaxique
  2. Un générateur de code
  3. L’auto complétion intelligent du code
  4. Une documentation du langage PHP intégré
  5. La factorisation du code
  6. File watcher, un outil qui fait la surveillance des fichiers surtout pour la transpilation des codes pour ceux qui utilisent des préprocesseurs comme SASS ou Webpack
  7. Un support de gestion de version (GIT, SVN) intégré
  8. Les supports des framework (Symfony) PHP intégré
  9. Les supports des moteurs de templates comme blade, twig intégré.

Et on est loin d’atteindre la moitié des fonctionnalités qu’offre cet IDE nativement… Il est quasi entièrement customisable et est très extensibles grâce aux nombreux plugins disponibles sur le web.

INCONVENANTS

Et que pensez-vous ? Que dans toutes ces features, il ne manquera pas de point faible ? Détrompez-vous ! PhpStorm est génial avec ces fonctionnalités mais cela lui rend gourmand en ressource mémoire. Il peut consommer jusqu’à 700Mo de mémoire vive.

Télécharger PhpStorm

PhpStorm n’est malheureusement pas gratuit, mais ils sont une version d’essaye d’une durée de 30 jours à voir dans le site officiel

SI vous avez commencé le développement web avec notepad++ comme c’est le cas de la plus part, c’est le moment de voir un peu plus grand et professionnel en migrant vers PHPStorm. Si vous ne voulez pas PhpStorm en raison de sa gourmandise, pensez à SublimText.

La librairie CSS d’animation animate.css est une excellente solution quant aux animations courantes. Tout un tas d’animations prédéfinies existent mais le problème avec est que les animations avec cette librairie sont un peu incontrôlable.

Généralement, on peut avoir besoin d’exécuter une animation selon une condition donnée. Par exemple, lors d’un clic, d’un scrolling, etc… Découvrons WOW.js, une librairie JQuery qui en mélangeant avec animate.css, déclenche les animations au scroll de la page.

WOW.Js est une librairie JavasScript qui permet de déclencher les animations lors d’un scroll. L’animation est lancée seulement après que l’élément HTML apparaisse à l’écran, et avec l’avantage que tout cela soit configurable. Il est par défaut configurer pour être utilisé avec animate.css, mais vous pouvez utiliser une autre librairie d’animation qu’animate.css.

Installation

  1. Télécharger animate.css
  2. Télécharger WOW.js
  3. Incluez animate.css dans l’entête du document
  4. Incluez WOW.js (avant la fermeture de la balise body est l’une de meilleurs habitudes
  5. Instancier WOW.js (après avoir inclus WOW.js

Utilisation

Quelques classes suffisent pour animer un élément quand il se voie à l’écran

  • wow : Signale qu’il faut animer cet élément lors d’un scroll
  • bounce : Le nom de l’animation (toutes les animations ici)

Exemple complet

Configuration de WOW.js

WOW.js comme dit dans le début est entièrement configurable. Voyons en détail quelques configurations essentielles.

Et puis il y a les attributs data-wow-* qui permettent de configurer aux plus fines les détails des animations de chaque animation.

  • data-wow-duration : La durée de l’animation. L’équivalent de animation-duration en CSS
  • data-wow-iteration : Le nombre de fois que l’animation va se répéter. L’équivalent de animation-iteration-count en CSS
  • data-wow-offset : La distance entre le bas de la page et l’élément lui seul, avant le lancement de l’animation.
  • data-wow-delay : Le temps avant que l’animation soit lancée. L’équivalent de animation-delay en CSS

Exemple

Pour plus d’informations, allez sur WOW.JS , Animate.css et dans l’utilisation de Animate.css

Au moins une fois dans votre parcourt de programmation web, vous avez eu à faire face à cette balise; la balise meta qui sans doute semble être différent de la plus part d’autres balises. Certains se posent même des questions sur son importance. découvrons le ensemble dans la suite de ce tuto.

C’est quoi la balise meta

Une balise meta est une balise orpheline qui se place dans la partie head (entre <head> et </head>) du document HTML. La balise meta comme toutes les autres balises d’entête (head), permet de fournir les informations concernant le document HTML. Ces informations sont celles qu’on appelle les métadonnées d’où le nom de la balise meta.

Quelle est son utilité ?

Les métadonnées sont destinées à des outils comme le moteur de recherche, le navigateur, etc… Ce qui veut dire qu’il n’est vraiment utile qu’à l’outil qui l’exploite et le comprenne. L’outil qui n’a pas été fait pour une métadonnées quelconque ne fait que l’ignorer.

Exemple :

Dit au navigateur d’utiliser l’encodage UTF-8 qui en HTML5 est simplifié par l’utilisation de l’attribut charset.

Dit aux moteurs de recherches de ne pas indexer ce document HTML.

Pour vous donner vraiment son utilité, prenez cet exemple :

Vous utilisez notepad++, devinez alors que les concepteurs du logiciel notepad++ aimeraient savoir le nombre de site en ligne créés en utilisant notepad++. Il peuvent simplement créer un bot qui aura comme mission de parcourir tous le web à la recherche des sites dont par exemple cette métadonnée existe.

Du coup, si vous mettez cela dans votre site, les concepteurs du logiciel sauront que vous avez utilisé notepad++ comme éditeur texte pour créer le site.

Utilisation de la balise meta

La balise meta se défini comme suit :

  1. Il doit avoir au moins un de ses attributs name, http-equiv ou charset
  2. S’il a l’attribut name ou http-equiv, il doit aussi avoir l’attribut content

Vous connaissez sans doute déjà son utilisation avec l’attribut charset concentrons plutôt sur son utilisation avec name ou http-equiv

L’attribut name ou http-equiv fourni le l’intitulé de l’information et content fourni l’information elle même.

Exemple :

La balise meta ci-dessous fournie l’information que l’auteur (author) du site est Mbungu Ngoma

Information au navigateur

Les informations données au navigateur utilisent toutes l’attribut http-equiv. Exemple :

Qui dit au navigateur qu’après 10 seconde, de rediriger l’utilisateur sur informagenie.com

Vous pouvez retrouver les informations concernant d’autres http-equiv sur Internet.

Information sur la page

Les balises metas fournissent les informations sur le document HTML vis-à-vis des moteurs de recherches, des robots de reconnaissances vocales, etc… voici ses utilisations courantes

Fournie cette description dans les moteurs de recherches notamment dans Google

meta description

Voici une liste non exhaustive des utilisations possibles

  • author : Définie l’auteur de la page
  • keywords: Mettre les mots clés de la page
  • robots : Donnes les instructions aux moteurs de recherches vis-à-vis de la page. index pour permettre d’indexer la page, nonindex pour le contraire (Plus d’infos)
  • application-name : Donner le nom de l’application

Pour plus d’information, allez dans la spécs W3

Open Graph

Open graph est un protocole utilisé par Facebook pour permettre à n’importe quelle page web de devenir un objet social riche. cela étant dit, Facebook à travers open graph arrive par exemple à représenter un lien comme suit au sein de sa plateforme :

open-graph meta

Exemple d’utilisation :

Comme vous pouvez bien le deviner, c’est le titre dans l’objet social.

Voici quelques autres éléments :

  • og:description : PLa description de la page. (“Qu’est ce que c’est agaçant, acheter…“)
  • og:url : L’URL de la page
  • og:type : Le type de l’objet. par ex:  article
  • og:image : L’image de l’url

Pour plus d’informations

 

Les animations en CSS semblent être un peu hors du cadre pour les débutants en CSS. La philosophie, la syntaxe, c’est complètement différent du CSS de propriété et valeur qu’on connait tous.

Animation en CSS3

Avec les animations en CSS, il faut commencer d’abord par définir les règles Keyframes, qui sont autrement dit, les phases de transitions que votre animation va devoir passer

Et c’est après la définition du keyframes que l’habitude du CSS ordinaire se reprenne. Les propriétés et valeurs.

Tester ce code

Se répéter dans le but d’apprentissage n’est pas mauvais mais dans un cadre professionnel n’est vraiment pas évident si ce n’est nécessaire.

Animate.css

Découvrez avec moi dans cet article animate.css, une petite librairie CSS qui regroupe plusieurs animations utilisable facilement avec l’appelle des classes CSS prédéfinies !

Installation

Tous ce que vous avez à faire c’est d’inclure le fichier animate.css dans le head de votre document HTML et le tour est joué.

Utilisation

L’utilisation est simple. Tous vos éléments ou balises HTML à animer doivent avoir deux classes.

  1. animated
  2. Le nom de l’animation que vous voulez utiliser, à retrouver dans ce lien

Exemple

Tester ce code

Listes de nom des animations