WP Grid Builder pour créer facilement un système de recherche à facettes avec WordPress

Aujourd’hui je vais vous présenter une solution française pour créer une système de recherche à facette !

Qu’est ce qu’une recherche à facette ?

Une recherche à facette est une technique permettant de resserrer les résultats au fur et à mesure que l’on sélectionne des critères de recherches.

Mais si vous savez, vous arrivez sur une page avec 200 T-shirt. Vous sélectionnez votre taille, il reste 128 choix, puis la couleur il reste 50 possibilité, puis le prix et vous obtenez le seul modèle que vous pouvez vous offrir!

Jusqu’il n’y a pas si longtemps, il fallait, sur WordPress, utiliser l’extension FacetWP mais depuis peu, une nouvelle extension développée dans le sud de la France à fait son apparition: WP Grid Builder

Si FacetWP se limite à proposer un outils orienté développeurs pour créer des facettes, WP Grid Builder est lui orienté grand public et ne se content pas de proposer des facettes.

Des facettes et des grilles de contenus

En effet, il propose aussi l’affichage de grille (Grid) et de templates, le tout facilement administrable dans le backoffice de votre WordPress.
Ainsi les non développeurs pourront sans une ligne de code créer une page comportant une zone de recherche a facettes et afficher la résultats sous forme de grille.

WP Grid Builder pour les développeurs.

Vous êtes développeur alors bénéficiez de toute la puissance de WP Grid Builder en créant vos facettes et vos templates directement dans vos projets.

WP Grid Builder a été pensé pour que les développeurs de site web WordPress puissent aisément réaliser toutes sorte de projets. Ainsi ils retrouveront des fonctions et hooks PHP et JS.

Bien sur, une documentation détaillée des fonctions est disponible sur son site internet

WP Grid Builder pour les nons développeurs.

Vous n’êtes pas développeurs ?

Rien de grave, Loïc a pensé a tout. Ainsi vous pourrez créer vos facettes, vos grilles et vos cartes directement dans le back-office et afficher vos créations via des codes courts ou bien des blocks Gutenberg pour le nouvel éditeur.

Allo Docteur? J’ai un problème!

Qui ne s’est jamais retrouvé devant son site internet ou celui d’un client équi ne fait pas ce qu’on veut” ? C’est à ce moment là que le support des extensions payante entre en jeu… et avec WP Grid Builder, en tant que francophone nous sommes gâté puisque Loïc vit dans le sud de la France.

Il réponds donc en français sur notre fuseau horaire… ce qui apporte une réactivité qui est toujours appréciée!

Rien ne vaut des exemples!

Comme on dit: Une image vaut 1000 mots. je viens de remplacer FacetWP sur Thivinfo.com par WP Grid Builder.

Voyez plutôt le résultat:

Amusez vous bien 🙂

Installer WordPress en 3 minutes !

On lit partout qu’il faut 5 minutes pour installer WordPress… et c’est FAUX ! On nous a menti! On peut l’installer beaucoup plus rapidement que ca…

La preuve en vidéo!

https://youtu.be/aEQY9mwhGrg
Installer WordPress multisite en 3 minutes

Ceux d’entre vous ayant déjà installé un multisite savent qu’après avoir installé WordPress, il faut rentrer des constantes dans le wp-config.php pour activer ce mode, se rendre dans le Back-Office, paramétrer le reseau et revenir dans le wp-config.php pour y coller un pavé de constantes ainsi que dans le .htaccess… bref largement plus qu’avec le script que je vous ai concocté!

Comment ca marche?

J’ai créé un script bash qui, lorsque vous le lancer vous pose quelques questions.

Rien de méchant, ce sont les informations que vous rentreriez lors de la routine d’installation d’un WordPress via votre navigateur préféré.

Une fois que les réponses sont enregistrées, le script lance l’installation et le multisite est prêt … en 3 minutes!

Bien sur ce script, pour fonctionner aura besoin de wp-cli.

Command line interface for WordPress | WP-CLI

Command line interface for WordPress | WP-CLI

WP-CLI is the command-line interface for WordPress. You can update plugins, configure multisite installs and much more, without using a web browser.

https://wp-cli.org

Je veux le super script de Séb!

Oui ben il est dispo sur Github 😉

Utiliser Lando pour développer ses projets WordPress en local

Je vous ai déjà parlé rapidement de Lando il y a quelques temps…. c’était plus un cri du coeur d’avoir trouvé une solution simple pour utiliser la technologie Docker.

Qu’est ce que Lando ?

Comme je vous expliquais dans mon article précédent, Lando est une sur-couche permettant d’utiliser facilement la technologie Docker.

Pour faire simple, il faut voir Docker comme un outils modulaire ou chaque brique est le composant de votre serveur Web.
Vous aurez donc besoin par exemple, pour faire tourner un WordPress en local d’une brique Apache, d’une brique PHP et d’une brique Mariadb ou Mysql.
Parmi ces différentes briques, il y a des versions différentes. Par exemple PHP7.0 / PHP7.3 .
Pour développer sainement et éviter les mauvaises surprises lors d’une mise en production, il peut être intéressant d’utiliser lors de nos développements les mêmes versions logiciels que celles utilisées par le serveur qui hébergera le site Web au final. Ainsi on réduit les risques de conflits et erreurs.

Le but de Docker est donc de fournir ces différentes briques et de les faire travailler ensemble… sauf que…

Sauf que, comme je le disais dans mon précédent article, il faut paramétrer tout ca… et avoir des connaissances sysadmin que nous n’avons pas tous… heureusement Lando est arrivé

Installer Lando

Le plus dur dans l’installation de Lando est en fait l’installation de Docker qui est assez simple si vous êtes libre comme moi, c’est à dire sur une distribution Linux. C’est un peu plus compliqué si vous êtes prisonnier d’un système privateur tel Windows ou Mac OS. (Pour une fois qu’on a un truc plus simple sous Ubuntu Linux… )

Bref, Docker tourne nativement sous Linux, il faudra ajouter une machine virtuelle pour installer Docker sur Windows ou Mac OS.

Une fois Docker installé, rendez vous sur le site de Lando pour installer la sur-couche qui va mettre en musique tout ça.

Configurer Lando

Je vous disais plus haut que Lando faisait abstraction de la complexité de paramétrage de Docker.

Toute la configuration de votre serveur de développement va tenir en un fichier texte.

Imaginons que nous voulions créer un site WordPress avec pour url https://mon-super-site.lndo.site.

Il suffit de créer un dossier sur votre machine ou vous avez les droits d’écriture et que vous nommeriez du nom que vous voulez: mon-super-site

Dans ce dossier on va ajouter un fichier .lando.yml qui va contenir toute la configuration du serveur de notre site:

Plain Text
.lando.yml

C’est tout! Lando est prêt à fonctionner! et vous prêt à développer!

Décorticons le .lando.yml:

  • Ligne 1: un nom pour votre environnement de développement. Ce nom va servir notament à la construction de l’url de votre projet.
  • Ligne 2: “Recipe” signifie recette en anglais. Lando a mis au point des préconfiguration selon ce que vous aller faire avec. Ici c’est une recette WordPress, elle installera notament wp-cli. Il en existe pour Pantheon, Drupal et bien plus => Lando Recipe
  • Ligne 3: un block config ou vous pouvez spécifiez vos versions logiciel
  • Ligne 7: un block Service ou l’on va lister les services que l’on veut voir fonctionner. ici PhpMyadmin et Mailhog
  • Ligne 16: Composer c’est quand meme pratique quand on travaille dans l’univers PHP.
  • Ligne 19: ce block est facultatif si vous travailler sur un domaine simple. Il peut se révéler très pratique dans le cadre d’un WordPress Multisite en sous-domaine par exemple.
  • Ligne 22: peut etre la partie la plus sympa… effectuer des taches juste après l’import d’une base de donnée… ici on effectue via wp-cli un search & replace pour adapter les url et on désactive l’excellente extension WordPress WP-Rocket car le cache en dev… comment dire 😉

Ce .lando.yml est assez simple et il existe une multitude d’autre configuration et possibilité pour coller au mieux a vos besoin.

Notez que Lando est orienté pour le développement et fortement déconseillé par ses développeur pour une production

Pour lancer une première fois Lando, il convient de faire un `lando rebuild –y`.

A ce moment, il va créer et télécharger ce dont il a besoin. Cette étape peut être longue selon votre connexion web mais elle ne se fera qu’une fois…

Ensuite pour les prochains lancements un `lando start` dans votre terminal positionné dans votre dossier de travail suffira.

Attention la recette WordPress prépare lando techniquement a recevoir WordPress mais n’installe pas WordPress. Vous effectuerez cette étape d’installation comme vous en avez l’habitude ou bien en utilisant ma méthode wp-cli.

J’utilise Local By Flywheel… ca fait pareil!

Hummm chaque solution à ses avantages et ses inconvénients. Lorsque j’ai décidé de tester et finalement d’adopter Lando, Local By Flywheel n’était pas disponible sous Linux. Ce n’est plus le cas depuis l’été 2019.

J’ai testé (trop) rapidement Local By Flywheel et je n’ai pas réussi a faire fonctionner un WP :-/ (notez le trop).

La seule chose que Flywheel apporte pour mon cas est une GUI (Graphical User Interface) alors que Lando… c’est en ligne de commande… mais sincèrement pour faire lando start ou `lando rebuild –y` ? installer une interface qui va forcément utiliser des ressources machine… je n’en ai pas vu l’utilité.

Lutter contre les GAFAM… c’est pas facile

État des lieux

Jusqu’à peu de temps, j’étais ce qu’on peut appeler un pur produit Google… visitant les sites web avec Google Chrome, disposant de plusieurs compte Gmail personnel et un GSuite pour mon mail pro. J’avais également des Drive synchronisés… et un mobile Android ! Bref… il savait tout et je m’en souciais guère… vous savez “J’ai rien à cacher…”

Il faut que ça cesse !

Cet été 2019 a marqué le pas d’un changement d’idées! y’a que les imbéciles… tout ça vous voyez…

  1. J’ai commencé à boycotter Amazon… au profit de sites européens ou français de e-commerce… quand le géant américain a décidé de reporter la taxe sur les commerçants français utilisant la plateforme…
  2. je voulais diminuer l’utilisation de produits Google à commencer par mes mails persos et pro afin de remplacer les @gmail.com par des domaines personnalisés…

Faisons confiance au produits et startup françaises!

Cocorico!!! la France dispose d’une startup qui fait de la dégooglisation son cheval de bataille, j’ai nommé mailo.com.

Sur Twitter, @hellomailo est très actif sur le mal que représente Google… j’ai cédé aux sirènes… d’autant qu’ils ont une offre famille plutot sympa (sur le papier en tout cas).

En quoi consiste l’offre Famille de mailo?

En gros, ils proposent de sécuriser les compte mails de vos enfants en filtrant les correspondants via une approbation de l’adresse par le ou les parents…

Concrètement, si un correspondant ne figure pas dans le carnet d’adresse de votre enfant, le mail est dirigé dans vos Spams (deja ça commence a craindre) pour une validation… si vous validez… votre enfant reçoit le mail… ( mais l’adresse ne s’ajoute pas au carnet d’adresse => pas très logique selon moi )

Si votre enfant ajoute un contact dans son carnet d’adresse, il ne pourra lui envoyer un mail que lorsque vous aurez validé le contact (ça c’est bien… il faut le dire aussi!)

Bref, tout n’est pas au point mais l’offre est jeune et sera donc (j’espère) améliorée.

Alors? qu’est ce qui ne te va pas?

Ben ce qui ne me va pas, c’est que certes l’offre est jeune mais un support client (car j’ai payé un abonnement) correcte devrait suivre… et ce n’est pas le cas.

Mes enfants synchronisent leur mail sur Thunderbird. Comme les contacts doivent être validés par moi même, qu’ils sont alors ajouté sur le carnet d’adresse en ligne… ils devraient être synchronisable via Carddav comme mon compte adulte… ce qui n’est pas le cas… ou bien j’ai pas compris…

Si t’as pas compris… c’est pas la faute de Mailo!

C’est vrai… mais si moi, professionnel du web, je n’ai pas compris… quid de Mme Michu ?

Et quand bien même… j’envoie des mails sur plusieurs adresses trouvées sur leur site… pas de réponses. Je manque pas une occasion de les interpeller sur Twitter ou ils sont actif… et je n’ai pas de retour…

Et ton mail pro, t’en es ou ?

Pour gérer les mails @thivinfo.com, j’étais chez G Suite (vous avez noté le temps employé?) et je ne suis pas chez Mailo… voyant le peu de réaction sur la partie privée, je me suis dit que ce n’étais pas une bonne idée de leur confier un des moyens de communication les plus utilisés dans le monde professionnel…

Pour mes mail Pro, j’ai fais confiance à l’hébergeur suisse Infomaniak et son offre d’hébergement mail pour 1.5€/mois. Et je dois dire que je suis plutot satisfait.

  • le service fonctionne correctement (Mail /contact / calendrier synchronisé sur Thunderbird et smartphone Android).
  • le support en cas de question est très réactif, joignable par mail, téléphone et discussion instantanée selon l’heure et le jour…

Courage… fuyons

Vous l’aurez compris, je ne vais pas faire de vieux os chez Mailo.com et certainement migrer tout le monde chez Infomaniak.

Seul bémol, Infomaniak ne propose pas de solution de filtrage comme le propose Mailo pour les enfants…

Créer son dépot Composer pour gérer ses extensions premiums

Avouez le, si vous avez plusieurs sites a maintenir et que vous ne voulez pas passer par le bouton “mettre a jour”pour des raisons pratiques et de rapidité, les extensions premiums sont assez chia… casse-pieds à gérer.

Quelles solutions pour mettre ses extensions premiums WordPress à jour?

Vous avez plusieurs solutions:

  • Se rendre sur le site de l’éditeur de l’extension, sur son profil, récupérer le .zip de la mise a jour et la transférer via FTP ou via Git selon les habitudes de chacun. Cette opération sera a réitérer  sur chacun de vos sites…
  • Avoir une copie de “dev” de ses sites en local avec les clés API renseignées et cliquer sur le bouton qui va bien…
  • Avoir un dépôt Composer avec les dernières version de ses extensions premiums WordPress disponible.

Et c’est bien cette dernière solution que je compte vous présenter dans ces quelques lignes!

Composer est un gestionnaire de dépendance pour PHP mais ce tutoriel n’a pas pour but de vous expliquer le fonctionnement de ce logiciel. Etant très répandu, d’autres vous expliquerons tout ca bien mieux que moi.

L’idée est donc de créer son propre dépôt Composer sur lequel nous pourrons téléverser les différentes extensions dans leurs dernières versions ensuite il suffira de lancer une mise a jour via Composer sur nos différents projets! Et c’est justement ce que propose Release Belt de Rarst.

Découvrons Release belt

Release Belt est un projet de logiciel libre développé par Andrey Savchenko.

L’installation est assez simple puisqu’il vous suffit de cloner un dépot Git sur votre hébergement Web. Personnellement j’ai créé un sous domaine composer.thivinfo.com sur lequel j’ai installé Release Belt.

Le Readme est assez clair et en 3 commandes votre dépôt composer sera créé:

  • git clone https://github.com/Rarst/release-belt
  • cd release-belt
  • composer belt-update

A ce stade, votre dépot composer privé est installé, il ne reste plus qu’a téléverser les zip de vos extensions sur ce dépôt.

Pour cela il faut créer dans le répertoire releases un dossier “type” puis dans ce dossier type, créer un dossier avec le nom de l’extension et a l’intérieur de celui téléverser le zip… quoi c’est pas clair ?!

Le dossier “Type” peut être un dossier nommé par un nom natif de composer ou dans le cas qui nous interesse: “wordpress-plugin” mais ces possibilités existent:

  • wordpress-plugin
  • wordpress-theme
  • wordpress-muplugin
  • wordpress-dropin

Potentiellement, vous pourriez gérer tout autres projets autre que WordPress en utilisant ces types.

Chez moi le chemin vers les versions de SeoPress Pro ressemblera donc à /public_html/prod/composer/release-belt/releases/wordpress-plugin/wp-seopress-pro

  •  /public_html/prod/composer/ corresponds à la racine de mon installation Release Belt
  • /releases/wordpress-plugin/ le répertoire contenant la liste de mes extensions hébergées

Afin que seul vous ou les utilisateurs autorisés puissent accéder à votre dépôt Composer, je vous conseille fortement de le protéger via un système d’authentification. Les développeurs d’extensions ou de thème premium pourraient ne pas aimer que vous partagiez gratuitement leur travail.

Utiliser son dépôt Composer personnalisé dans un projet WordPress. 

Toutes les informations utiles se trouve sur la page d’accueil de votre dépot Composer. Chez moi c’est donc composer.thivinfo.com.

Si vous êtes un habitué de composer, vous saurez analyser les informations fournies par cette page auto-générée par Release-Belt.

Sinon il faut déclarer le dépôt dans votre composer.json:

"repositories": {
        "composer.thivinfo.com": {
            "type": "composer",
            "url": "https://composer.thivinfo.com/"
        }
    }

Puis dans la partie listant les extensions WordPress du projet vous copierez / collerez les lignes concernant l’extension voulue. 

Par exemple pour ajouter WP Rocket à mon projet, j’ajouterai les lignes suivantes à mon composer.json à la racine de celui-ci:

"wp-rocket/wp-rocket": "^3.2.2"

Facile!

Comment je suis passé à Lando pour développer en utilisant Docker !

Il y a quelques mois j’avais testé Docker pour gérer mes environnements de développement. L’avantage majeur de Docker est de pouvoir développer en local sur les meme bases techniques  du serveur. Avouez que c’est tentant quand on a des sites hébergés chez des prestataires différents ( Même si la plupart pour mon cas sont chez O2Switch ) avec des versions logicielle des PHP, Mysql, Mariadb différentes. L’inconvénient majeur de Docker, a mon humble avis, réside dans la complexité de configuration! Je n’avais jamais réussi a faire fonctionner plusieurs vhost  en meme temps!

Avec Lando, c’est simple!

En discutant avec un collègue sur le Slack WordPress francophone, j’ai découvert Lando. Pour utiliser Lando, il vous faut tout d’abord installer Docker, puis Lando  vient en surcouche. Il va vous faciliter grandement la configuration des différentes images Docker à utiliser pour faire tourner votre environnement.

Des Recettes WordPress!

Lando propose des “Recipe”, littéralement des recettes pour les principaux CMS et Frameworks du marché dont bien sur WordPress. Avec la recette WordPress, Lando va créer un envirronement comprenant PHP, et Mariadb pour faire tourner votre site mais également wp-cli ! Bref, en quelques secondes de lancement, vous voilà pret a développer sur votre CMS préféré.

Une configuration simplifiée pour Docker!

Voici un exemple du fichier de configuration .lando.yml que vous devrez avoir a la racine de votre projet pour lancer votre instance Lando!
name: test
recipe: wordpress
config:
  webroot: .
  php: '7.0'
  xdebug: true
  database: mariadb
services:
  pma:
    type: phpmyadmin
    hosts:
      - database
      - old-test
  mailhog:
    type: mailhog
    hogfrom:
    - appserver
  old-test:
    type: mariadb
    portforward: true
    creds:
      user: wordpress
      password: wordpress
      database: old-test
tooling:
  composer:
    service: appserver
Il s’agit d’un simple fichier texte au format .yml qui sera lu par Lando pour qu’il puisse créer votre environnement. Noter un “name”, celui ci sera utilisé pour créer vos url locales de développement! ainsi que les services que vous désirez créer et dans quelle version! Ici j’ai choisi un PHP en version 7.0, Mariadb dans sa version stable courante, Phpmyadmin, Mailhog pour “attraper les mails” sortant sans avoir de serveur mail à configurer. On trouve aussi la configuration d’un second serveur de base de données ‘old-test’, l’activation de Xdebug et de Composer! Lando sur Github