Catégorie : Tutoriels

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' => ''
),

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

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!

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 »

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

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…

Il existe beaucoup de solutions pour intégrer une carte Google dans vos contenus WordPress. Aujourd’hui nous allons voir une solution basée sur un champs Gmap d’Advanced Custom Field (ACF). Cet article est une traduction du tutoriel d’Alicia Ramirez.

Ce tutoriel est basé sur l’utilisation de l’excellentissime extension Advanced Custom Field car elle est utilisée sur la totalité de mes développement et très simple à mettre en oeuvre.

Étape 0: Obtenir une clé API Google Map.

Avant de pouvoir utiliser Google Maps, il va falloir obtenir une clé API Google Map. Vous pouvez  utiliser l’API Standard qui autorise 25000 affichage de carte par jour) ou si vous avez beaucoup de trafic, vous devrez opter pour un plan Premium.

Étape 1: Ajouter du CSS

Coller ce code dans votre feuille de style (style.css) ou ailleurs si vous le pensez plus approprié.

Étape 2: Création d’un script Javascript initialisant la carte.

Copiez / collez ce code dans un fichier gmap.js que vous pourrez stocker dans un dossier de votre thème. Pour l’exemple nous prendrons library/js.

Étape 3: Chargement des scripts par WordPress

Maintenant, il vous faut charger les scripts précédemment créé lors du chargement de WordPress. Vous pourriez coller les liens dans le header.php de votre thème… mais ce n’est vraiment pas une bonne pratique WordPress. Nous allons utiliser la fonction dédiée de WordPress : wp_enqueue_script()

Dans votre functions.php de votre thème, ajoutez le code suivant:

Aux lignes 2 et 10, remplacez « XXXX » par votre clé API Google Map.

À la ligne 3, assurez vous d’avoir saisi le chemin vers le script JS  créé à l’étape 2.

Étape 3 – Bonus

Si vous ne voulez charger votre carte que sur certaines page, par exemple la page « Contact », vous pouvez modifier le code comme ceci:

Étape 4: Affichage de la carte

Dans votre template de page, là ou vous désirez voir la carte, insérez ce code dans la Boucle:

Assurez vous de bien modifier le nom du champs ACF Google Map. Ici on a utilisé « location » dans get_field('location');.

Conclusion:

Vous venez d’ajouter une carte Gmap dans votre thème WordPress sans utiliser aucune extension. Notez que vous pouvez vous passer d’ACF si vous désirez saisir « en dur » les coordonnées GPS d’un lieu. Il vous suffira d’adapter les valeurs de data-lat et data-lng

Gravity Form est une extension WordPress Premium (entendre payante) offrant la possibilité de construire des formulaires de toutes sortes assez poussés.

Sur un projet, j’ai récemment eu besoin d’alimenter de façon automatique des champs d’un formulaire et je me suis dis que j’e pouvais aussi vous en faire profiter…

Récupérer des informations via les paramètres d’une URL

Si vous êtes développeur, ceci ne devrait pas éveiller de questions, si ce n’est pas le cas vous vous demandez sûrement ce que sont ces paramètres d’URL… vous en avez pourtant déjà tous croisé!

Imaginons une URL du type: https://thivinfo.com/blog/tutoriels/pre-remplir-un-formulaire-gravity-form-avec-des-parametres-durl/ … rien de transcendant hein … maintenant en ajoutant les paramètres:

?checkbox=1&texte=mon%20test

on va se retrouver se retrouver avec cette URL https://thivinfo.com/formulaire-pour-tutoriel-gf-et-parametre/?checkbox=1&texte=mon%20test

Et là avouez que le résultat est sympa et que dans bien des cas, ca pourrait être très pratique!

Comment faire ?

Tout d’abord, il va vous falloir acheter Gravity Form puis créer un formulaire.

Pour un champs simple type « texte »

Prenons exemple de mon champ texte, en back-office vous devrez obtenir ceci:

Dans l’onglet « Avancé », cochez « Remplir dynamiquement les champs ». Ceci fera apparaître un champs ou vous pourrez nommez votre paramètre. Ici dans un élan d’inspiration je l’ai nommé « Texte » ce qui me permettra d’avoir le paramètre

texte=

Pour un champs avancés de type « checkbox »

Pour ce type de champs, c’est un peu plus compliqué car il ne s’agit pas de simplement remplir un champs de type Input, il faut définir quelle choix cocher…

Pour ce faire, nous allons dans l’onglet « Général » cocher la case « afficher les valeurs » ce qui aura pour effet d’ajouter un champs par choix afin de pouvoir sélectionner facilement l’une ou l’autre des possibilités du champs « Checkbox ».

Il faut bien entendu définir un paramètre « checkbox » dans l’onglet avancé de la boite de Dialogue Gravity Form pour réaliser l’exemple d’URL cité en début d’article.

Précision pour les non-développeu⋅r⋅se⋅s

Il n’y a pas d’ordre à respecter dans les paramètres à mettre dans l’URL. Le 1er paramètre est toujours un ? et les suivants sont séparés par des esperluettes (&).

Et sinon?

Et sinon… vous n’êtes pas obligé de passer les paramètres dans un lien… vous pouvez aussi les placer dans le code-court (shortcode) de Gravity Form à la manière de

                

                        

                            
Contact
                            

                        

                        
Information Importante
Aucune réponse ne sera apportée a des demandes de support pour l'une ou l'autre de mes extensions via le formulaire de contact
Merci d'utiliser le forum WordPress Support en lien avec chacune de mes extensions
Présentez vous*

                            
                            
                                                    
                                                    Prénom
                                                
                            
                            
                                                    
                                                    Nom
                                                
                            
                        
Email*

                                
                                    
                                    Saisissez un e-mail
                                
                                
                                    
                                    Confirmez l’e-mail
                                
                                

                            
Téléphone
Message*
RGPD
 J’accepte la politique de confidentialité.
Name
Ce champ n’est utilisé qu’à des fins de validation et devrait rester inchangé.
        
  
            
            
            
            
            
            
            
            
            
        
                        
                        

Précision pour les développeu⋅r⋅se⋅s

Cette technique est très pratique si vous la couplez à la fonction WordPress add_query_arg() qui vous permettra de construire dynamiquement des URL contenant des paramètres. Si vous désirez en savoir plus sur cette fonction, je vous invite à lire l’article très complet de Maxime Culea