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

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 projets. 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 !

Afficher facilement vos agendas Openagenda.com sur votre site WordPress avec OpenAgenda pour WordPress

— Edit du 23/02/2020 —
Vu le trop peu de vente de cette extension rapporté au temps de développement de celle ci, j’ai décidé de ne plus proposer de version premium.
La version gratuite disponible sur le répertoire des extensions WordPress a été mise en ajour en version 2.0.0 avec les anciennes fonctionnalités payante.
Le support se fait désormais sur le forum officiel WordPress.

Openagenda.com est un service en ligne d’agendas. Son intérêt principal  est de se comporter comme un réseau social d’évènements. Vous pouvez facilement partager un évènement ou un agenda complet sur votre propre agenda en agrégeant les flux automatiquement.

Openagenda propose un systeme assez complet d’intégration de ses agendas dans vos sites internets mais l’inconvénient se trouve dans le fait que le CSS est à appliquer sur le site d’OpenAgenda et donc de dupliquer votre style avec toute la maintenance que cela entraîne. Si vous modifiez le style sur votre site, vous devez le modifier dans les réglages de votre openagenda.

Ensuite, manipuler du code HTML à coller dans votre éditeur WordPress… ce n’est pas forcément idéal… des règles de sécurité peuvent vous en empêcher par exemple.

Intégrer facilement WordPress et OpenAgenda

Mon but était donc de trouver une solution simple pour des non développeurs d’intégrer un agenda Openagenda dans leur site internet WordPress.

J’ai donc créé une extension WordPress dédiée qui propose un code-court et un widget permettant d’afficher ou bon vous semble vos agendas.

Il est prévu dans un futur (proche) de créer un block Gutenberg ainsi que des éléments pour les principaux constructeurs de page (Visual Composer, Elementor, Beaver builder…).

Voir la Démo de l’extension OpenAgenda pour WordPress

Je suis bien sur à votre écoute au niveau des idées d’amélioration à apporter via le forum de support dédié

OpenAgenda pour WordPress

OpenAgenda pour WordPress

Affichez facilement un évènement hébergé sur openagenda.com sur votre site WordPress.

Sébastien Serre

Une version Pro avec plus de fonctionnalité!

En plus de la version gratuite disponible sur le dépôt officiel WordPress, j’ai développé une version Pro payante apportant un certains nombre de fonctionnalités supplémentaires.

Des blocks et des Code courts

Afficher facilement vos éléments d’agenda en liste ou en carrousel grâce à un shortcode ou un block pour le nouvel éditeur.

Il est également possible d’intégrer via un shortcode ou un block, les widgets natif d’OpenAgenda (ceux que vous retrouvez dans les réglages d’OpenAgenda.com)

Gérer ses évènements directement sur le backoffice WP.

Fini la création des évènements sur OpenAgenda pour les afficher sur votre site WordPress. Dorénavant, vous créez vos évènements directement dans le backoffice WordPress, comme n’importe quel autre contenu.

OpenAgenda et The Event Calendar

Depuis la version 1.8.0, OpenAgenda pour WordPress est interfacé avec l’extension WordPress populaire The Event Calendar (TEC).

The Events Calendar

The Events Calendar

The Events Calendar est une extension modulable qui vous permet de partager facilement vos évènements.…

Modern Tribe, Inc.

Avec 700000 installations active et de multiples add-ons, TEC est l’outils idéal sous WordPress pour gérer ses évènement.

Continuez de gérer vos évènements sur TEC, ils seront publié automatiquement sur votre agenda OpenAgenda.com. Régulièrement, ceux créés sur OpenAgenda.com seront intégrés à TEC.

Un shortcode pour The Event Calendar

Afficher facilement vos évènements grace à un code court !

Et tu nous montre un exemple concret ?

Bien sur!

Le site de la commune de Thiverval-Grignon utilise cette extension dans sa forme connecteur The Event Calendar.

En accueil, vous avez les prochains évènements affichés avec le code court OpenAgenda The Event Calendar.

Les évènements sont créés en back office dans The Event Calendar et transmis à OpenAgenda. L’agenda sur OA est lui syndiqué notament dans l’agenda de la région Ile de France… ce qui démultiplie la visibilité des évènements qui auront lieu sur le petit village des Yvelines.

[freemius_checkout plugin_id=”2279″ plan_id=”3475″ pricing_id=”4790″ public_key=”pk_ab0021b682585d81e582568095957″ button=”Achetez Maintenant 1 site à partir de 39.99€” ]

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.

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 😉

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épot 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épots 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épot ou une branche d’un dépot (pull / push…)

C’est là que ca devient interessant!

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

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

Merci 10Up !

10Up est l’une des grosses agence WordPress dans le monde et ils viennent de publier 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épot WordPress afin de publier la nouvelle version de votre travail.

On fait comment?

Je ne sais pas si c’ets la maniere de faire dans les règles de l’art comme on dit… mais c’ets 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`:

Plain Text
main.yml

Committez, puis pushez ce fichier.

Paramétrage coté Github

Rendez vous sur votre dépot Github, dans l’onglet “Actions” vous devriez retrouver l’action créé plus tot.

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”

Github Actions Settings

Cliquez sur “Add a new secret”

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épot 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:

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

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:

PHP

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!

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:

Plain Text

ou

Plain Text

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:

Plain Text

ou

Plain Text
Bonne nouvelle! Vous avez installé les PHPCS et WPCS sur votre ordinateur!

Je vous rassure, le plus dur est fait…

Paramétrer PHPStorm

Rendez vous dans “File | Settings | Languages & Frameworks | PHP | Quality Tools”

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.

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

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…

BRAVO! vous êtes prêt a développer pour WordPress en respectant les règles mise au point par la communauté et utilisé dans le cœur de votre CMS préféré.