Corriger l’erreur Gravity Form « Call to a member function can_be_used() on bool »

Cet article est plus là pour mon moi du futur, mais ça peut en aider d’autres.

Suite à la mise à jour vers Gravity Form 2.6.2, je me suis retrouvé sur plusieurs sites dont j’ai la maintenance avec une erreur fatale ressemblant à:

[06-May-2022 20:30:52 UTC] PHP Fatal error:  Uncaught Error: Call to a member function can_be_used() on bool in /var/www/my-great-website/wp-content/plugins/gravityforms/common.php:2813
Stack trace:

Je n’ai pas trop creusé pour en connaitre la cause… je ferais ca un peu plus tard… quand un site client est en rade… on corrige vite 😉

Pour corriger cette erreur il m’a suffit d’ajouter

define( 'GF_CACHE_DEBUG', true );

dans le `wp-config.php` puis d’aller resauver les réglages des formulaires (sans rien changer)

Cette erreur arrive lorsque la vérification de licence échoue. Les développeurs de Gravity Forms sont en train d’étudier la question et vont publier prochainement une nouvelle version.

La constante ajoutée permet de valider la licence sans prendre en compte les données en cache.

Dites-moi en commentaire si vous avez eu cette erreur et que cette astuce vous a aidée!

Affichez facilement le fil de votre page Facebook.

J’ai eu un besoin simple ces derniers jours… afficher le fil d’une page Facebook sur un site client. J’ai bien sûr regardé du côté des extensions existantes ce qui était proposé et… il faut bien avouer qu’il y en a une tonne !

Une tonne, c’est bien… mais rien ne correspondait vraiment à mon besoin, car était trop complexe à mettre en place, nécessitait un compte Facebook pour créer une application. Bref ce dont j’avais besoin, c’était simplement ce que propose Facebook sur sa « plugin page ».

Alors bien sûr… j’aurais pu coder mon truc dans mon coin… et je me suis dit… si j’ai le besoin, alors surement que d’autres aussi… fais en donc une extension mon brave Séb !

Une nouvelle extension signée thivinfo.com

C’est une extension très simple, il y a un shortcode code court et un bloc pour le nouvel éditeur (merci à Marie Comet).
Le code court [\simple_wall] attends au moins un paramètre slug qui attend le slug de votre page Facebook…

Exemple : le code court [\simple_wall slug="MotoGP"] (sans le slash qui a été ajouté pour que WP ne l’interprète pas) devrait afficher le fil de la page Facebook dédié à ce sport dont nous sommes champion du monde (comment ça je m’éloigne ?).

Le voici en action :
[simple_wall slug=’MotoGP’]

Le bloc Gutenberg « Simple Wall » lui est disponible dans la liste des blocs et attends également le slug de la page à afficher.

Les 2 autres paramètres optionnels sont la largeur et la hauteur d’affichage.

Les évolutions prévues…

J’utilise plus Twitter (ce qui est assez simple puisque je n’ai pas de compte FB) et je me demande si je ne pourrais pas faire évoluer l’extension pour afficher le fil Twitter également… dites-moi en commentaire si cela vous intéresserait.

Déployez votre site Web grâce aux Github Actions

Je vous ai déjà parlé des Github Actions dans un article précédent afin de publier facilement votre extension WordPress sur le dépôt officiel des extensions.

Aujourd’hui, l’idée, c’est de déployer automatiquement vos développements quand vous poussez vos modifications sur GitHub

État des lieux

Actuellement, je publie mes modifications sur les sites WordPress de mes clients grâce au DeployHQ.com. C’est un service très simple à mettre en place:

  • On lie DeployHQ à notre profil Github
  • On sélectionne le dépôt GH à déployer
  • On paramètre la connexion SFTP sur notre hébergement

A ce moment la, DeployHQ ajoute un webhook qui sera déclenché à chaque push sur une branche définie de notre repo Github qui lancera le déploiement.

Quelques secondes plus tard (ou ça se compte en seconde), vos modifications sont en ligne.

DeployHQ fonctionne bien… alors pourquoi changer ?

Ben oui pourquoi ?

Au-delà de cette raison tout à fait louable, il se trouve j’avais envie de tester une alternative !

Principe des Github Actions

En simple, Github Actions permets d’automatiser des taches selon des évènements se produisant sur le dépôt sur lequel il est actif.

Des taches, il peut y en avoir des centaines, voir des milliers et afin d’aider les développeurs, Github a mis en place une place de marché ou chacun peu publier son Action afin de la partager.

Le principe:

  • On crée un fichier de configuration au format yml.
  • Ce fichier est stocké dans votre dépôt GitHub
  • Lorsque l’action définie dans le fichier de configuration est exécutée, GitHub Actions entre en jeu et exécute alors les tâches qu’on lui a demandées.

Passons à la pratique

Dans le paragraphe précédent, je vous ai parlé d’une place de marché. Sur cette place de marché, je suis tombé sur https://github.com/marketplace/actions/ssh-deploy qui selon la description, fait exactement ce dont j’ai envie.

En pratique, il faut créer dans votre projet un dossier .github qui contiendra lui-même un dossier workflows. À l’intérieur de ce dossier vous ajouterez un fichier qui portera le nom que vous voudrez, mais qui sera au format yml. Par exemple deploy.yml.

GitHub actions

Dans ce fichier deploy.yml on ajoutera ce code:

name: Deploy

on:
  push:
    branches:
      - master

jobs:
  build:

    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v1
      - name: Install Node.js
        uses: actions/setup-node@v1
        with:
          node-version: '10.x'
      - name: Install npm dependencies
        run: npm install
      - name: npm init
        run: npm init -y
      - name: Run build task
        run: npm run build --if-present
      - name: Deploy to Server
        uses: easingthemes/ssh-deploy@v2.1.7
        env:
          SSH_PRIVATE_KEY: ${{ secrets.SERVER_SSH_KEY }}
          ARGS: "-avz --delete"
          REMOTE_HOST: ${{ secrets.REMOTE_HOST }}
          REMOTE_PORT: ${{ secrets.REMOTE_PORT }}
          REMOTE_USER: ${{ secrets.REMOTE_USER }}
          TARGET: ${{ secrets.REMOTE_TARGET }}
          EXCLUDE: "/.git, /.github, /dist/, /node_modules/"

Et qu’est ce ca veut dire ?

name: Deploy

Est simplement le nom de cette action, car bien sur, vous pouvez avoir autant d’action que vous le désirez.

on:
push:
branches:
- master

Quand est ce qu’on jour cette action ? facile ! « sur » le « push » de la « branche » « master ».

Ainsi on peut imaginer avoir une autre action avec :

on:
  push:
    branches:
      - staging

Le bloc qui nous intéressera ensuite est:

        env:
SSH_PRIVATE_KEY: ${{ secrets.SERVER_SSH_KEY }}
ARGS: "-avz --delete"
REMOTE_HOST: ${{ secrets.REMOTE_HOST }}
REMOTE_PORT: ${{ secrets.REMOTE_PORT }}
REMOTE_USER: ${{ secrets.REMOTE_USER }}
TARGET: ${{ secrets.REMOTE_TARGET }}
EXCLUDE: "/.git, /.github, /dist/, /node_modules/"

Car il définit les informations liées à Rsync

SSH_PRIVATE_KEY

La clé SSH privée servant au déploiement. Selon la doc de l’Action, vous pouvez en créer une avec la commande:

ssh-keygen -m PEM -t rsa -b 4096

Cette commande va créer une clée privée, a garder secrete et une clé publique.

La clé publique est à ajouter dans le fichier /home/user/.ssh/authorized_key de votre serveur / Hébergement. Le chemin sera à adapter selon que vous êtes sur un hébergement mutualisé autorisant SSH ou sur un serveur dédié ou autre cas.

La clé privée doit quant à elle être stockée sur votre compte Github dans les réglages du dépôt que vous voulez déployer. Le principe sera le même pour chacune des instructions qui suivront.

github actions secrets

En cliquant sur « New repository secret » vous aurez 2 champs.

  • Le champ « Name » prendra la partie en majuscule de vos réglages soit par exemple SERVER_SSH_KEY
  • Le champ « Value » prendra quant à lui la valeur à envoyer lors du transfert (ici la valeur de la clé privée)
ARGS: "-avz --delete"

Les arguments de RSYNC à retrouver dans sa doc

Je vous invite à regarder la doc très simple et claire de l’Action pour les autres paramètres.

Tadam!

Normalement… si tout s’est bien passé, vos modifications sont téléversées automatiquement lorsque vous les poussez sur votre branche principale (ou sur la branche que vous avez choisie)

Conclusion

Vous savez maintenant utiliser les Github Actions pour déployer vos sites, il ne reste plus qu’à faire de jolis site web 😉

Si comme moi vous êtes développeur WordPress mais que vous hébergez vos sites chez WPEngine, sachez qu’il existe une action qui permet de déployer directement chez WPEngine !

Je débute avec cet outil… si vous avez des questions… c’est pas gagné, mais tentez quand même en laissant un commentaire.

Il faut sauver le soldat Mozilla!

Aujourd’hui, je prends le clavier pour vous parler de tout autre chose que WordPress. Mozilla, l’entité qui développe l’excellent navigateur internet Firefox a annoncer supprimer encore 1/4 de ses effectifs.

Les suppressions d’emploi ne sont pas le principal problème…

Dérrière l’annonce de Mozilla se cache quelque chose de bien plus grave à mon sens… puisque la disparition de Firefox entrainerait un afflux vers son concurrent Google Chrome et donnerait encore plus de poids a ce géant qui a fait du monopole sont cheval de bataille.

Ouais mais moi j’aime bien Google Chrome!

Oui et personne ne t’empêche de t’en servir mais afin de garder un semblant de liberté dans ce monde, ce serait bien d’utiliser aussi Mozilla Firefox afin de lui faire prendre des parts de marché et donner foi à ses développeurs.

Le but n’est pas de voir Firefox avec 90% de part de marché comme l’explique très bien Nicolas Hoffman dans son tweet :

Le but c’est de garder le choix d’utiliser Firefox, Chrome, Edge ou tout autre navigateur web afin qu’aucun n’ai un monopole et dicte ses règles et nous prive de nos libertés de choix et accessoirement revende nos données personnelles.

Ajouter des icônes personnalisées à vos projets avec ACF et ACF: FontAwesome Field

Si vous avez l’habitude de créer votre propres icônes web, vous devez connaître Icomoon. Pour un projet client utilisant déjà FontAwesome, j’ai eu besoin d’ajouter 2 icônes personnalisées provenant en utilisant le service Icomoon.

Pour cet article, j’ai utilisé Icomoon mais vous devriez pouvoir adapter, vous inspirer de cet article pour insérer n’importe quel icône personnalisé.

Les icônes FontAwesome étaient utilisées sur des éléments de menu grâce à Advanced Custom Fields et Advanced Custom Fields: Font Awesome Field. le but est donc d’ajouter à la liste des icônes FontAwesome, mes 2 ou 3 icônes customs d’icomoon.

Afficher les icones Icomoon dans le champs ACF FontAwesome

Advanced Custom Fields: Font Awesome Field que je nommerai dorénavant ACFFA propose un filtre permettant de venir modifier la liste des icônes:

ACFFA_get_icons
add_filter( 'ACFFA_get_icons', 'cot_test' );
function cot_test( $icons ) {
$icomoon = array(
'cierge' => array(
'name' => 'cierge',
'hex' => '\e90e',
'unicode' => ''
),
'calice' => array(
'name' => 'calice',
'hex' => '\e90f',
'unicode' => ''
),
);
foreach ( $icomoon as $ico ) {
$icons['list']['far'][ 'far ' . $ico['name'] ] = '<i class="icon-' . $ico['name'] . '"></i> ' . ucfirst(
$ico['name'] );
$icons['details']['far']['far ' . $ico['name']]['hex'] = $ico['hex'];
$icons['details']['far']['far ' . $ico['name']]['unicode'] = $ico['unicode'];
}

return $icons;
}

Ici nous filtrons la liste existantes des icônes FA pour y ajouter nos icônes personnalisées. Malheureusement, l’extension de Matt Keys étant développées pour FA, seules les catégories FontAwesome sont disponible à savoir Brand (fab), Regular (far), Style (fas). J’ai décidé d’ajouter mes icônes dans les Regular soit Far. Ceci est purement arbitraire.

Décortiquons le code ci-dessus

array(
'cierge' => array(
'name' => 'cierge',
'hex' => '\e90e',
'unicode' => '&#xe90e;'
),

Ici je déclare les icônes Icomoon que je vais vouloir utiliser:

  • name: le nom de l’icône dans la liste
  • hex: le code hexadécimal fourni par Icomoon
  • unicode: l’unicode de l’icône Icomoon

Ensuite, avec une boucle foreach, je vais alimenter le tableau $icons contenant les icônes FontAwesome

Exemple d&#039;icône personalisé dans le champs ACF

Afficher les icônes en back-office

Pour afficher les icônes en back-office, il va falloir que la feuille CSS Icomoon avec toutes les icônes soient chargées coté back-end.

Pour ça, nous allons ajouter ce code:

add_action( 'admin_print_styles', 'cot_load_icomoon_css' );

Si vous êtes habitués a développer vos thèmes vous connaissez le hook d’action WordPress wp_enqueue_scripts qui permet de charger des feuilles de styles et des scripts en front-end. Sachez qu’il existe aussi un équivalent pour le back-office et il se nomme admin_print_styles.

add_action( 'admin_print_styles', 'cot_load_icomoon_css' );
add_action( 'wp_enqueue_scripts', 'cot_load_icomoon_css', 9, 1 );
function cot_load_icomoon_css(){
wp_enqueue_style( 'font-icomoon', get_template_directory_uri() . '/css/iconmoon.css');
}

Ici je charge donc la feuille CSS en front et en back-office.

J’ai mis une priorité 9 au chargement front afin de passer juste avant le chargement de la feuille de style du thème et de pouvoir par la suite les utiliser dans mon thème. Par défaut un add_action() à une priorité de 10.

Afficher les icônes en front office

En front-office, l’extension ACF FontAwesome retourne un balisage HTML formaté pour FA (normal!). Nous, on veut que dans certains cas, celui de notre icône personnalisée on aille charger une autre police (celle générée par Icomoon).

Icomoon m’a fourni 4 fichiers de polices de caractères ( .eot, .svg, .ttf et .woff) que j’ai placé dans mon projet. Le fichier icomoon.css fait un @font-face afin que les polices soient chargées

Le problème réside dans le fait que l’extension de Matt Keys génère un markup HTML FA et qu’il va falloir « ruser » pour détourner le fonctionnement seulement pour les icônes Icomoon. Et oui, on veut pouvoir continuer à utiliser normalement FontAwesome!

<i class="far cierge" aria-hidden="true"></i>

On retrouve la class far de FA qui va charger la police FontAwesome puis la class cierge générée à partir du nom données dans la liste des extension a insérer.

Pour que le site charge ma police au lieu de celle de FontAwesome, j’ai créé une feuille CSS modifiant le style des ces classes:

.far.cierge:before {
font-family: "ma-police-icomoon";
content: "\e90e";
}

Pour chaque icône personnalisée je demande à WordPress de charger ma-police-icomoon et d’utiliser le contenu ayant le code hex corespondant à mon icône.

Kawi : le thème qui vous veut du bien !

Je vous propose aujourd’hui un article un peu différent puisque que je vais vous présenter un thème… ne vous attendez pas à une review de 4000 lignes… je n’ai pas les talents d’écriture de la marmite!

Dis c’est quoi ton thème ?

Le thème dont je voulais vous parlez n’est autre que celui que vous voyez habiller thivinfo.com: Kawi de Vincent Dubroeucq

Pourquoi Kawi ?

C’est assez simple, je ne suis pas développeur front, je ne voulais pas développer un thème de A à Z sachant que des collègues de la communauté francophone WordPress en avaient déjà développés des bons…

Mon amie Marie Comet m’a simplement fait découvrir le thème de Vincent en me disant:

  • Il est léger
  • respectueux des bonnes pratiques de développement WordPress et de l’accessilbilité (a11y)
  • facile à customiser

Bingo! je pars la dessus.

Un thème enfant ou un starter thème ?

Je me suis alors posé la question, est ce que tu vas t’en servir comme un starter thème ou bien plus classiquement en créant un thème enfant?

Outre la version du répertoire officiel des thèmes WordPress, Vincent propose également son thème sur Github. L’avantage de cette version étant de proposer les sources SASS qui compose la feuille de style. Il s’agit donc d’une version plus orientée pour les développeurs qui voudraient s’en servir de base de travail…

Ok, mais ai je envie de me couper des améliorations que Vincent pourrait apporter a son thème? pas vraiment, j’ai donc opté pour la création d’un thème enfant afin de garder les possibles futures évolutions du thème.

La  version que vous voyez est donc la version enfant du thème disponible gratuite sur le repertoire WordPress.

Pourquoi changer de thème ?

Et pourquoi pas d’ailleurs?!

En premier lieu car le précédent basé sur le thème Humescores de Morten Rand-Hendriksen avait pris de l’embonpoint au fil des ans. Au bout de 4 ans environs, à force de tests, de modifications graphiques, fonctionnelles… le thème était devenu lourd à gérer et à charger.

Et puis l’envie de changer un peu également!

Quelles modifications ont été apportés ?

Finalement très peu car en tant que grand artiste devant l’éternel, j’ai repris quasiment le même style et la même disposition de la page d’accueil!

La différence se trouve plutot sous le capot car le CSS de mon thème enfant est créé grâce à SASS ce qui ma permis de découvrir l’excellent outils Prepros m’évitant une installation d’un outils supplémentaire comme Gulp et ses multiples dépendances jamais a jour quand je veux l’utiliser. A propos de Sass, si vous désirez comprendre rapidement le principe, je vous conseille la vidéo de l’atelier animé par Thierry Pigot de WP Paris

Résultats

Le résultat se résume donc à un site plus rapide a s’afficher, plus accessible aux personnes en situation de handicap ou utilisant du matériel adapté. Pour moi, il s’agit d’un thème plus léger a maintenir et prêt a évoluer selon mes futures idées…

3, 2, 1 Traduisez!

Le 17 avril 2020 aurait du y avoir lieu un WordCamp à Paris. Compte tenu de la situation dû au COVID19, celui ici comme tant d’autres a été annulé.

L’idée d’organiser une journée de rencontre virtuelle à donc germée dans la tête de plusieurs membres de la communauté WordPress Francophone !

On organise donc une demie journée de contribution au projet WordPress ouverte à tous que vous soyez contributeur aguerri ou néophyte.

Participer

Pour participer rien de plus simple, inscrivez vous pour participer à la visioconférence Zoom. La coordination se fera également via le Slack de la communauté francophone et plus particulièrement sur la chaine #wptranslationday, pour obtenir une invitation, c’est par ici

Lire l’annonce officielle

A vendredi !

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 🙂

Créer vos blocs Gutenberg facilement avec Carbon Fields

Présentation de Carbon Fields

Carbon Fields est une solution concurrente du célèbre Advanced Custom Field (ACF) mais qui a la particularité de pouvoir être embarqué dans vos thèmes et extensions maison.

En effet, vous ne pouvez pas utiliser ACF Pro dans vos extensions gratuites a destination par exemple du dépôt WordPress.

Comme ACF, Carbon Fields propose une solution entièrement en PHP pour créer des blocs compatibles avec le nouvel éditeur de WordPress: Gutenberg!

Les blocs Gutenberg ont fait leur apparition dans Carbon Fields 3.0.

Installer Carbon Fields

Attention, la version disponible sur le dépôt WordPress est loin d’être à jour.

Installer Carbon Fields avec Composer

Cette méthode a une approche plus orientée « développeur », c’est celle qui est mise en avant dans la documentation de Carbon Fields.

Bien sur, votre système doit disposer de Composer mais si vous suivez cette section, je suppose que vous connaissez, l’avez déjà installé sinon je vous invite à suivre la seconde méthode, sans Composer ou bien à installer Composer.

Rendez vous dans le répertoire de l’extension ou du thème dans lequel vous voulez ajouter votre bloc Gutenberg.

Pour la suite du tutoriel, je partirais du principe que nous sommes dans une extension mais dans le cas d’un thème, vous initialiserez Carbon Fields dans votre functions.php.

La commande :

composer require htmlburger/carbon-fields

va installer carbon-fields dans le dossier vendor de votre projet. Si celui-ci n’existe pas, alors il sera créé.

Ensuite dans le fichier principal de votre extension, ajoutez le code suivant:

Installer Carbon Fields sans Composer

Sans Composer, vous devrez télécharger Carbon Fields, le décompresser et l’ajouter a votre projet.

Ensuite il conviendra d’adapter la fonction de chargement:

Création d’un Bloc Gutenberg en PHP

Comme je le disais en introduction, Carbon Fields est un produit similaire à ACF à ceci près qu’il ne dispose pas d’une interface graphique pour la création des champs personnalisé.

C’est un paragraphe dédié à la création de bloc Gutenberg et il nous cause de champs personnalisé… il a craqué!

mes gentils lecteurs 🙂

Effectivement, si je vous parle de champs personnalisé ici c’est que, comme ACF, ils vont être la matière première pour créer notre bloc.

Tous les types de champs que vous retrouverez dans la documentation sont utilisable pour ajouter des réglages a notre bloc Gutenberg.

En route pour la création!

Première étape, créer un fichier PHP qui accueillera vos déclarations de fonctions qui créeront le bloc.

Ici c’est selon vos habitudes, en procédural ou en POO, un simple fichier PHP ou bien une classe.

Je vais pour ce tutoriel l’écrire en PHP procédural afin qu’il soit le plus accessible possible. Ceux ayant l’habitude de développer en Orienté Objet, n’auront aucun mal à adapter leur code.Créer un fichier mon-block.php

Une fois créé, nous allons déclarer le bloc:

Expliquons ce que fais ce code:

use Carbon_Fields\Block;

va simplement dire a notre fichier PHP qu’il faut utiliser Carbon_Fields et notament la sections dédié aux Blocks.

Block::make( __( 'My Shiny Gutenberg Block' ) )

va déclarer le bloc auprès de WordPress. Il aura ici le nom de « My Shiny Gutenberg Block ». Notez que le nom du block est déclaré dans une function d’internationalisation (i18n) qui va permettre de traduire votre bloc.

Il serait d’ailleurs judicieux d’y ajouter votre text-domain ce qui donnerait:

Block::make( __( 'My Shiny Gutenberg Block', 'mon-text-domain ) )

Ensuite vient la déclaration des paramètres de votre bloc Gutenberg qui se fait via la méthode add_fields( )

Ici nous ajoutons 3 réglages:

  • un champ de texte simple
  • un champ de sélection d’image
  • un champs de texte riche.

Les champs sont tous créé sur le même modèle:

Field::make( 'type de champs', 'identifiant unique', 'libellé du champs')

Enfin, la méthode set_render_callback() va elle générer l’affichage front ainsi que la prévisualisation de votre bloc Gutenberg.

Dans les faits, écrivez une fonction qui va retourner un html valide et appelez-la dans set_render_callback( )

Dans cette fonction, vous passerez en paramètre $block qui sera un array regroupant les paramètres de votre block. Les clés de ce tableau étant les identifiants unique de votre bloc Gutenberg.

https://youtu.be/_sp4uIwvRKg
Votre Block en action!

Aller plus loin avec Carbon Fields

Je ne peux pas terminer ce tutoriel sans vous présenter un peu mieux Carbon Fields car tant qu’a l’embarquer dans vos projets pour créer facilement des blocs Gutenberg, autant en tirer tout son potentiel.

Vous pourrez donc avec Carbon Fields créer des champs personnalisés pour tout les types de publications présents sur votre site mais également créer des pages d’options pour votre thème ou vos extensions.

Si vous voulez voir ce que ca donne en live, je vous invite a installer et regarder mon extension WP GestSup Connector qui embarque Carbon Fields et avec lequel j’ai créé un block Gutenberg mais également la page d’option de l’extension.

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!

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.

https://wp-cli.org

Je veux le super script de Séb!

Oui ben il est dispo sur Github 😉

Publier son extension sur le dépot WordPress grâce aux GitHub Actions!

Cet article parlera surement aux développeurs et développeuses d’extension WordPress qui publient sur le dépôt WordPress… et ceux qui n’y publient pas pour ne pas avoir à utiliser SVN.

En effet SVN est en quelque sorte l’ancêtre de GIT et de nos jours rare sont les développeurs qui ne sont pas passer à Git.

GitHub est un service hébergeant des dépôts GIT que les dev affectionnent particulièrement et très utilisé dans le monde Open-Source.

Il y a quelques semaines, GitHub a rendu public les Github actions.

OK mais qu’est ce que c’est Github actions?

En simple, c’est une solution permettant d’automatiser des taches lorsqu’une action intervient sur un dépôt ou une branche d’un dépôt (pull / push…)

C’est là que ça devient intéressant !

Auparavant, pour mon exemple personnel, je versionnais mon code sur GitHub puis je transférais a la main mes fichiers constituant mon extension WordPress sur le SVN de WordPress.org.

Ça fonctionne… mais c’est long et rébarbatif!

Merci Pierre Lannoye !

Pierre est un développeur WordPress français publiant une extension WordPress par jour… ou presque.

Il a créé une action permettant de publier sur le repo WordPress lorsque l’on push sur une branche d’un repo Git, un Tag particulier.

Ce tag sera repris sur le dépôt WordPress afin de publier la nouvelle version de votre travail.

On fait comment?

Je ne sais pas si c’est la manière de faire dans les règles de l’art comme on dit… mais c’est la manière que j’utilise… ce sera surement amélioré avec le temps, l’expérience, toussa toussa.

Dans mon projet, je crée un dossier .github notez le point devant puis un sous-dossier workflows.

Créé dans ce dernier dossier un fichier nommé `main.yml`:

name: Deploy SimpleWall to WordPress.org
on:
  push:
    tags:
      - "*"
jobs:
  tag:
    name: New Release
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@master
      - name: WordPress Plugin Deploy
        uses: Pierre-Lannoy/wordpress-actions/dotorg-plugin-deploy@master
        env:
          GITHUB_TOKEN: ${{ secrets.TOKEN_GH }}
          SLUG: simple-wall
          SVN_PASSWORD: ${{ secrets.SVN_PASSWORD }}
          SVN_USERNAME: ${{ secrets.SVN_USERNAME }}

Committez, puis pushez ce fichier.

Paramétrage coté Github

Rendez-vous sur votre dépôt Github, dans l’onglet « Actions » vous devriez retrouver l’action créée plus tôt.

Marque
Github Actions

Nous avions utilisé une variable SVN_PASSWORD et une SVN_USERNAME correspondant aux identifiant SVN nécessaire pour publier sur le repo WordPress. Il va falloir les transmettre a Github pour qu’il puisse se connecter de façon sécurisée.

Rendez vous dans l’onglet « Settings »

page Web
Github Actions Settings

Cliquez sur « Add a new secret »

Capture d&#039;écran
Github Actions Secret

Dans l’input « Name », saisissez le 1er nom de variable soit « SVN_PASSWORD » et le saisissez le mot de passe de votre compte wp.org dans le textarea « Value ».

Répétez en adaptant pour la variable correspondant à votre mot de passe.

Testez!

Si tout s’est bien passé, la prochaine fois que vous créerez et pusherez un tag Git, votre extension sera automatiquement publiée sur le dépôt Officiel WordPress.

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:

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é.

Géocoder une adresse sans utiliser Google Maps

On a été longtemps habitué a utiliser les outils et services de Google pour faire tout un tas de chose… seulement les bonne choses ont une fin et certains de ces services ferment ou deviennent payant.

Dans le cadre du développement de mon extension OpenAgenda pour WordPress, j’ai besoin de trouver la longitude et la latitude d’une adresse d’un évènement.

OpenStreetMap à la rescousse

Il existe heureusement beaucoup de services permettant de remplacer ceux de Google. Parmi eux OpenStreetMap (OSM) pour tout ce qui tourne autour des cartes et la géolocalisation.

Nominatim pour la conversion d’adresse en donnée de localisation.

J’ai donc découvert le service Nominatim.

C’est bien gentils, mais je veux du code!

Si comme moi, vous avez besoin de récupérer la latitude et la longitude d’un point géographique en PHP… pour WordPress, voici ce que je fais:

function get_lat_lng( $address ) {
	$address = rawurlencode( $address );
	$coord   = get_transient( 'geocode_' . $address );
	if ( empty( $coord ) ) {
		$url = 'http://nominatim.openstreetmap.org/?format=json&addressdetails=1&q=' . $address . '&format=json&limit=1';
		$json = wp_remote_get( $url );
        if( 200 === (int) wp_remote_retrieve_response_code( $json ) ){
            $body = wp_remote_retrieve_body( $json );
            $json = json_decode( $body, true );
        }
        $coord['lat'] = $json[0]['lat'];
        $coord['long'] = $json[0]['lon'];
        set_transient( 'geocode_' . $address, $coord, DAY_IN_SECONDS * 90 );
    }

	return $coord;
}

Un peu d’explications:

Ligne 1: on déclare une fonction dans laquelle je passe en parametre une adresse (rue code postal ville).

Ligne 2: j’encode cette adresse pour qu’elle soit intégrable dans une URL.

Ligne 3: je vérifie si un transient avec les coordonnées existe. Nominatim limite l’accès a son PAI… le transient permets donc de stocker les infos en locale et de ne pas faire une requete a chaque affichage… surtout que les coordonnées géographique d’un point ne devrait pas changer trop souvent…

Ligne 14: je crée le transient qui sera valable 90 jours. En gros, votre WordPress ne demandera la géolocalisation qu’une fois tous les 90 jours pour une même adresse.

Entre 2 : si l’adresse n’a jamais été géocodée alors je fais la demande a l’API de Nominatim

Des idées ou amélioration a apporter ? Laissez moi un commentaire!

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…

Thivinfo présente un nouveau service: paroisse-catholique.fr

Aujourd’hui, je souhaite partager un nouveau projet qui pourra rendre de nombreux services je l’espère à certains d’entre vous.

Il était une fois 5p2p

J’ai travaillé un peu plus de 2 ans pour l’association 5 Pains et 2 Poissons qui avait pour but de faciliter le numérique auprès des associations ecclésiastiques.

En tant que développeur WordPress, je produisais des sites web pour des institutions et congrégations religieuses. Cette expérience m’a permis de découvrir un monde qui a besoin de communiquer et de façon efficace… mais qui n’en a pas les moyens.

WordPress au service de l’Église Catholique!

A la fin de cette expérience, l’idée m’est venu de créer un service permettant aux paroisses n’ayant pas trop de revenu d’accéder à un service web de qualité répondant aux standards du web d’aujourd’hui.

Et c’est ainsi qu’est né paroisse-catholique.fr !

Que propose Paroisse-catholique.fr?

Paroisse-catholique.fr propose une solution clé en main qui vous permettra de créer vous même sans connaissance technique le site qui ressemble à votre paroisse.

  • Publiez facilement de l’actualité a destination de vos paroissiens
  • Programmez vos évènements paroissiaux et locaux
  • libérez vous des contraintes, ne gérez que la communication de votre paroisses facilement.
  • Permettez a vos paroissiens de vous contacter facilement
  • Mettez facilement en place des campagnes de dons (denier du culte, donations…)

Quels sont les domaines disponible?

Pour le moment vous pourrez obtenir dans le cadre de votre abonnement un sous-domaine de l’un des domaines suivant:

  • paroisse-catholique.fr
  • paroisse-catholique.org
  • paroisse-catholique.net
  • paroisse-catholique.info
  • paroissial.fr
  • ma-paroisse.org
  • ma-paroisse.fr
  • votre domaine personnalisé…

Installer les WordPress Coding Standards sur PHPStorm facilement

WordPress, comme tous les framework de développement dispose de ses propres règles à suivre pour que chacun des développeurs puissent lire et comprendre facilement le code d’un confrère.

C’est ce qu’on appelle les « Codings Standards » soit en français les standards de codage. Pour WordPress, nous avons les WordPress Codings Standards plus connu sous le joli nom de WPCS!

Ces règles de développement sont lisible ici: Découvrir les WordPress Codings Standards

OK, on a ouate mille page de docs… mais je vais pas lire toutes ces docs tout en développant… t’as pas plus simple?

Et ben vous avez de la chance puisque nous pouvons intégrer ces règles directement dans nos IDE ou éditeurs de texte! Ainsi votre code sera vérifié automatiquement lors de vos développement.

J’utilise quotidiennement PHPStorm de Jetbrains mais sachez que ces règles sont utilisable sur quasiment tous les éditeurs de codes.

Ou trouver les WPCS?

Les WPCS sont disponible sur Github. Je vais vous détailler comment moi je fais, mais vous pouvez lire en anglais qu’il y a plusieurs méthodes. Faites votre choix!

La méthode de Séb pour installer les WPCS

Alors ce n’est pas à proprement dit ma méthode… dans le sens ce n’est pas moi qui l’est mis au point… mais c’est celle que j’utilise et que je vais détailler!

Avant d’installer les WPCS, il faut un installer les PHPCS… et oui, WordPress est développé en PHP et pour faire simple, WPCS rajoute des règles ou modifie un peu les règles des PHP Codings Standards.

Retenez que, comme dans tous l’écosystème WordPress, le but est de rendre accessible et faciliter l’accès au développement.

Installer les PHPCS

 

Personnellement, j’ai une partition sur mon Ubuntu Linux dédiée à mes projets et a coté des projets, j’ai un dossier avec les WPCS et un avec les PHPCS

Les PHPCS sont également disponible sur Github

Cloner le dépôt Github des PHPCS

Rendez vous a l’endroit où vous voulez télécharger les règles puis:

ou

Si vous n’avez pas renseigné de clé SSH sur votre compte GitHub.

Vous devriez normalement avoir maintenant un dossier nommé phpcs.

Cloner le dépôt Github des WPCS

On va réaliser quasiment la meme commande pour cloner le dépot des WPCS cette fois ci:

ou

Je vous rassure, le plus dur est fait…

Paramétrer PHPStorm

Rendez vous dans « File | Settings | Languages & Frameworks | PHP | Quality Tools »

Programme d&#039;ordinateur
Panneau de réglages PHPStorm

En cliquant sur les 3 point à droite de Configuration vous pourrez spécifier le chemin vers les PHPCS. Il faudra naviguer et sélectionner le fichier « phpcs » présent dans le répertoire « phpcs/bin » obtenu grace au clonage précédant.

Capture d&#039;écran

Si tout est OK, en bas de la fenêtre affichera la version de Code Sniffer installée.

Passons à WPCS, car après tout… ce sont pour eux qu’on en est là !

Le chemin vers les réglages est File | Settings | Editor | Inspections

Logiciel
J’aime les flèches!

le but ici est d’arriver au menu « PHP Code Sniffer Validation » afin de cocher « Installed Standard Paths » et de chercher après avoir cliqué sur le dossier à droite le répertoire récédement cloner avec les WPCS.

Si tout se passe bien…en cliquant sur les 2 flèches circulaires, vous devriez avoir le choix de plusieurs WPCS… personnellement, je choisis WordPress-Extra. puis on valide en cliquant sur OK…

Contribuer au Projet WordPress quand on est pas développeur: c’est possible!

Contribuer au projet WordPress? moi? mais je ne suis pas développeur!

Cette phrase nous l’avons tous entendu… et c’est elle qui m’a donné envie de donner cette conférence au WordCamp Bordeaux 2019.

Des développeurs qui contribuent… l’écosystème WordPress en regorge… par contre des utilisateurs finaux, non développeurs, qui contribuent… alors là il y en a beaucoup moins.

Le but de cette conférence est de faire un tour d’horizon des divers univers de contribution possible lorsque nous ne sommes pas développeur.

  • Accessibilité
  • Core
  • Polyglotte
  • Support
  • wp.tv

Sont quelques uns des univers qu’on évoquera!

Les Slides

Voir la vidéo

En Mars, Direction le WordCamp Bordeaux

Il y a des étapes comme celle-ci qu’il ne faut pas rater! Il s’agit du WordCamp Bordeaux qui aura lieu le 23 mars 2019.

Qu’est ce qu’un WordCamp ?

Un WordCamp est une manifestation réunissant des utilisateurs de WordPress.
Ces utilisateurs peuvent aussi bien être utilisateurs, développeurs, intégrateurs, designer, marketeurs ou tout autre métier ayant un rôle dans WordPress.

On y fait quoi?

Un WordCamp est une journée de conférences dédiées à WordPress articulée autour d’une After Party!

Sébastien Serre

Ca, c’est le résumé 😉

Pour le WordCamp Bordeaux millésime 2019, ce seront pas moins de 16 conférences réparties sur 2 salles auxquelles vous pourrez assister.

Regardez plutôt le programme!

Mettez vous au vert, venez au WordCamp Bordeaux!

2 Raisons:

  • Il reste des places! dépêchez vous de prendre votre billet pour nous rejoindre.
  • L’équipe du WordCamp Bordeaux organise un évènement éco-responsable… c’est la première fois pour un WordCamp français!

Pour en savoir plus je vous invite à lire l’article d’Aurélien Denis, co-organisateur de cet évènement:

J’y serais pour parler de contribution!

Comme au dernier WordCamp Nice je serais présent au WordCamp Bordeaux en tant qu’orateur afin de partager mon expérience de contributeur au projet WordPress.

Logo

Comme au dernier WordCamp Nice je serais présent au WordCamp Bordeaux en tant qu’orateur afin de partager mon expérience de contributeur au projet WordPress.

Souvent l’excuse (à 2 balles) pour ne pas contribuer c’est : Je ne suis pas développeur! Je ne peux pas contribuer… c’est faux!

Ma bafouille tentera de faire sauter le pas de la contribution aux non développeurs… en évoquant les divers univers où il est possible pour eux de contribuer.

RDV le 23 Mars 2019 à 7h45 à la cité Mondiale de Bordeaux !

Migrer un site d’un multisite vers une installation classique

Présentation du multisite WordPress.

La technique du Multisite permet de faire fonctionner plusieurs site WordPress ensemble au sein d’une seule et même installation.

Cette technique permet de mutualiser le Coeur de WordPress, les thèmes ainsi que les extensions.

En résulte un gain de temps non négligeable lors de la maintenance de vos sites puisque vous ne mettez à jour qu’une seule fois.

En savoir plus:

Extraire un site d’un multisite étape par étape.

Tout d’abord, ce tutoriel ne se veut pas LA méthode mais une méthode qui fonctionne et que j’ai mis en action aujourd’hui dans le cadre de mon poste de développeur WordPress.

Étape -1 – Sauvegarde

Saaaaauuuuuvvvvvveeeeegggggaaaaaarrrrrrdddddeeeeee

Sauvegardez vos fichiers (WP, extensions, thèmes, mu-plugins et base de données Mysql)

Étape 0 – Installation en local

Avoir le multisite en local, ce sera bien plus simple à gérer et en cas d’accident, ca ne génera que vous!

Étape 1 – Mises à jour

La première étape va consister a mettre votre multisite à jour:

  • WordPress
  • Thèmes
  • Extensions
  • Langues

Si cette étape n’est pas fondamentale, je me dis que:

  1. ça ne peut pas faire de mal
  2. ça peut éviter les conflits et les soucis par la suite quand vous importerez thèmes et extension dans votre site WordPress « Classique ».

Étape 2 – Installer WordPress

Installer un WordPress tout beau tout neuf… Pour cela je vous propose de le faire en 3 minutes grâce au script wp-cli que j’ai créé pour vous…

OK j’avoue, je l’ai créé pour moi… et je me suis dit que ça pourrait vous intéresser!

Étape 3 – Transférer les fichiers

Alors maintenant, va commencer un transfert de fichiers. Voilà pourquoi je vous ai demandé en étape 0 de travailler en local. e sera bien plus facile de déplacer des fichiers dans l’explorateur de votre machine qu’à distance via un sFTP ou autre.

Pensez à transférer:

  • Les thèmes (parent et enfants)
  • Les extensions
  • Les « mu-plugins »
  • le dossier « uploads »… mais lui je lui réserve l’étape 4!

Bien sur, sur le multisite peut être que toutes les extensions ou tous les thèmes n’étaient pas utiles pour le site que vous êtes en train d’extraire.

Ne transférez que ce dont vous avez besoin et n’activez rien

Étape 4 – le dossier « Uploads »

Le dossier Upload situé dans `wp-content` contient tous les médias téléversés sur votre site et disponible dans la médiathèque.

Avouez que ce serait ballot de ne pas les retrouver dans votre nouvelle installation.

Le dossier Upload est un peu différent à transférer puisque son architecture de dossiers et de sous-dossier est différent d’une installation classique.

Architecture du dossier Uploads en Multitisite
Architecture du dossier Uploads en Multitisite

Remarquez la différence avec une architecture classique. Dans « uploads », nous avons un dossier « sites » qui n’existe pas dans une installation classique de WordPress.

A l’intérieur de ce dossier « sites » nous avons un dossier nommé par l’id du site dans l’infrastructure multisite.

Ensuite, nous retrouvons le classement classique des médias par WordPress avec un dossier année et un dossier mois.

Retrouvez l’ID du site a extraire du multisite

J’estime que si vous faites cette manipulation alors vous avez les privilèges de super-administrateur.

Cette étape est assez simple, il faut se rendre dans l’administration réseau de votre multisite puis dans le sous-menu « Sites » au bout de la ligne concernant le site à migrer vous trouverez l’ID de celui-ci.

Trouvez l'ID du site à migrer
Trouvez l’ID du site à migrer

L’identifiant récupéré vous pouvez déplacer tout le contenu du dossier ayant l’id comme nom dans wp-content/uploads afin de retrouver l’arborescence classique d’un WP.

Étape 5 – exporter puis importer la base de données

C’est bien beau mais pour le moment, vous avez tout sauf votre contenu…. et dans un site, c’est bien le plus important la base de données.

Pour ce tutoriel, je vais estimer que vous avez le préfixe par défaut « wp_ ».

A l’image des médias, WordPress multisite ajoute l’id du site sur certaines tables.

Il va donc falloir exporter toutes les tables ayant l’ID ainsi que les tables wp_user et wp_usermeta qui elles n’ont pas d’id car dans un multisite, les utilisateurs sont commun à tous les sites.

Personnellement je le fais avec PHPmyAdmin si les tables ne sont pas trop volumineuses… on sélectionne les tables voulues (exemple: celle du site « 4 » wp_4_ ainsi que les 2 tables d’utilisateurs).

Avant d’importer, supprimez les tables wp_user et `wp_usermeta` de l’installation classique afin d’éviter les conflits avec les tables que vous allez importer.

Pour l’import dans le WP classique, utilisez également l’outils dont vous avez l’habitude.

Vous allez vous retrouver avec des tables en doublons: Celles de votre installation classique et celle que vous venez d’importer qui ont le préfixe `wp_4_`. Supprimez les tables en doublons de l’installation classique.

Importez vos tables « multisites »

A cette étape, si vous regardez votre base de données dans PHPmyadmin ou autres, vous devez remarquer des tables en wp_ et d’autres en wp_4_

Dans PhpMyadmin, cochez toutes les tables en `wp_4_` puis en bas de la page dans le menu déroulant sélectionnez « Remplacez le préfixe de table »

Si vous décidez de modifier le préfixe de table, n’oubliez pas de corriger le `wp-config.php` en conséquence.

Document

On y est presque!

Étape 6 – Remplacer les URLs des médias en Base de données.

Pour cela j’utilise le script SRDB d’Interconnectit. Vous trouverez un guide de ce script chez mon ami Grégoire Noyelle.

Ici nous allons modifier les urls vers les medias et donc faire un recherche et remplace qui ressemblerait à ça:

Search: https://example.com/wp-content/uploads/site/4/2019/02/mon-image.jpg

Replace: https://example.com/wp-content/uploads/2019/02/mon-image.jpg

Étape 7 – la base utilisateur

Lors de l’import de la base de données, nous avons importé tous les utilisateurs du multisite… or, il y en a qui n’ont aucun rapport avec le site que vous venez d’extraire.

Je n’ai malheureusement pas encore trouvé une requête sql qui va bien … si vous avez une idée, soumettez la moi en commentaire, c’est avec joie que j’améliorerais ce tutoriel.

Étape 8 – Vérifications

Normalement, votre site classique est une copie exacte de votre site lorsqu’il était dans le multisite.

Selon vos installations, il peut y avoir 2/3 choses à régulariser. Exemple, remplacer des urls vers des images écrites en dur dans des fichiers css créé parle constructeur de page Elementor…

Vous avez peut être transférer des extensions qui n’ont un intérêt que dans le cadre d’un multisite…

Étape 10 – Se reposer!

Ouais y’a pas d’étape 9 car ça fait bien de s’arrêter sur un chiffre rond! une dizaine tout ça!

Normalement vous venez d’extraire sans encombre un site d’un multisite vers un site classique WordPress… vous avez bien mérité une petite mousse, un café ou n’importe qu’elle autre chose qui vous fera plaisir!

Et sinon, il y a la méthode simple! (ajout du 20 avril 2019)

Si comme moi vous êtes adepte de WP-CLI alors ce script vous permettra d’extraire un site du multisite en quelques secondes…

trepmal/blog-extractor

WP-CLI command. Extract single blog from multisite – trepmal/blog-extractor

https://github.com/trepmal/blog-extractor