Matt Biscay: développeur WordPress et WooCommerce pour SkyMinds
Nouveau logo pour SkyMinds (version 2018) photo

Nouveau logo pour SkyMinds (version 2018)

Aujourd’hui, le logo de SkyMinds fait peau neuve ! Plus discret, plus moderne aussi. J’en ai profité pour mettre en place toute une liste de modifications cosmétiques que j’ai trop longtemps repoussées.

Nouveau logo pour SkyMinds (version 2018) photo
Nouveau logo !

Mise à jour des templates du thème enfant

L’avantage d’un thème enfant sous WordPress, c’est que l’on ne perd pas ses modifications lorsque le thème parent se met à jour. Le thème enfant, c’est tout simplement la base, l’étape qui vient juste après l’installation d’un nouveau thème.

Or, au fil des mois ans, il se trouve que le thème parent évolue et que les fichiers du thème enfant (modifiés) ne sont plus exactement à jour. J’en ai donc profité pour reprendre les nouveaux fichiers et y apporter mes modifications.

Concaténation des appels des fichiers de police

En analysant les fichiers du thème, je me suis rendu compte qu’on pouvait gagner pas mal de temps de chargement grâce à une épuration du nombre de polices utilisées sur le site. Au lieu d’en avoir deux (Open Sans et Droid Sans), il n’y en aura plus qu’une : Open Sans. Elle est légère, classique et facile à lire.

Le problème, c’est que Divi charge pas mal de versions de cette police par défaut : 300, 400, 700… en normal, italic et gras et avec des subsets exotiques comme le cyrillique, le grec ou le vietnamien. Clairement, on doit pouvoir mieux faire !

Divi : suppression des subsets Google Fonts

On commence par virer les subsets exotiques. Rendez-vous dans Divi > Theme options > General > désactivez Google Fonts subsets. Vous venez d’économisez 400KB.

Divi : suppression de toutes les Google Fonts et chargement de l’unique nécessaire

C’est pénible d’avoir tous les grammages d’une police chargés pour rien. Voici ce que j’utilise pour tout virer dans un premier temps, puis ajouter uniquement ce dont j’ai réellement besoin:

/*
|-----------------------------------------------------------------------
| Plugin Name: Sky Remove DIVI Google Fonts and add what we need
| Plugin URI:  https://www.skyminds.net/?p=29578
| Author:  Matt Biscay
| Author URI:  https://www.skyminds.net/
|-----------------------------------------------------------------------
*/

// remove all Divi fonts, we'll just load what we need
// @return: array
function et_builder_get_google_fonts() { return array(); }
function et_get_google_fonts() { return array(); }

// add fonts : logo (Comfortaa:700) and site (Open+Sans:400,700). No subsets.
add_action( 'wp_enqueue_scripts', 'sky_logo_add_google_fonts' );
function sky_logo_add_google_fonts() {
	wp_enqueue_style( 'sky-logo-google-fonts', 'https://fonts.googleapis.com/css?family=Comfortaa:700|Open+Sans:400,700', false ); 
}

Kaboom! On vient de se retirer une sacrée épine du pied. Il faudra juste relire la feuille de style pour être sûr que l’on utilise bien soit du font-weight 400 (regular), soit du 700 (bold). Pensez également à vérifier votre critical CSS.

Amélioration de la section Auteur

A la fin de chaque article se trouve la section de l’auteur, qui comprend une courte description ainsi que des liens vers ses profils sociaux. J’ai profité de la police du thème pour remplacer les noms des réseaux par des icônes. C’est purement cosmétique mais je trouve cela plus joli.

Cela m’a permis de me rendre compte que le site n’utilise absolument pas Font Awesome – ce que je trouve totalement fou. J’aime tellement cette police que j’ai acheté la version professionnelle pour mes développements… et ne l’utilise pas moi-même !

J’ai troqué le bleu clair pour un beige. A voir sur la durée.

Nouveau logo

Et enfin, last but not least, j’ai troqué mon logo image contre un logo font. Cela faisait pas mal de temps qu’il me trottait dans la tête l’idée de le changer. J’ai d’abord commencé, comme d’habitude, par tenter de créer des logos images avant de changer mon fusil d’épaule et considérer la possibilité d’utiliser une Google Font pour le générer à la volée.

Après quelques recherches, j’ai finalement opté pour la police Comfortaa en 700. C’est plutôt moderne par rapport au logo précédent qui avait la particularité d’être un dégradé de plusieurs couleurs (rose, violet, bleu, vert), avec des ligatures à certaines lettres.

Celui-ci sera donc beaucoup plus clean et professionnel. Je pense d’ailleurs le réutiliser sur d’autres supports de personal branding.

Lire la suite

CSS : remplir le contenu d'une div de manière fluide photo

CSS : remplir le contenu d’une div de manière fluide

J’ai récemment été confonté à un problème lors de la réécriture du code CSS d’un formulaire Gravity Form : on voulait que le contenu remplisse la div, sans sauter de ligne lorsqu’il n’y en avait pas besoin.

Je pensais naïvement qu’un simple float:none et une largeur à 100% suffiraient :

.gfield_label {
   float: none !important;
   width: 100% !important;
}

Mais cela a fini par chambouler tous les champs de formulaires : labels et champs n’étaient plus sur la même ligne.

La solution est toute simple mais cela m’a pris un temps fou à la trouver – il suffit d’ajouter un clear:both au bloc parent qui contient l’élément que l’on veut fluidifier, comme ceci :

/* Make it flow */
li#field_11_10 { clear: both !important; }

En espérant que cela puisse vous faire gagner du temps !

HTML5 : corriger l'erreur

HTML5 : corriger l’erreur “The frameborder attribute on the iframe element is obsolete. Use CSS instead.”

Le problème : l’attribut HTML frameborder

HTML5-logo

Si vous obtenez l’erreur :
“The frameborder attribute on the iframe element is obsolete. Use CSS instead.”

sur le validateur HTML5 du W3C, c’est que le code de votre page HTML5 contient un élément <iframe> avec un attribut frameborder comme dans l’exemple suivant :

<iframe frameborder="0" />

Solution CSS: la propriété border

Comme l’attribut frameborder n’est plus présent dans HTML5, il faut utiliser la propriété CSS border en CSS à la place de l’attribut HTML frameborder:

<iframe style="border: 0;" />

Solution HTML : l’attribut seamless

Avec HTML5, il est possible de résoudre le problème en ajoutant l’attribut seamless à l’iframe:

<iframe seamless />

L’apparence du texte et des éléments de présentation de la page doivent être gérés par CSS et non par le code HTML, c’est plus propre et surtout plus simple à gérer.

HTML5 : corriger l'erreur

HTML5 : corriger l’erreur “The scrolling attribute on the iframe element is obsolete. Use CSS instead.”

Le problème : l’attribut HTML scrolling

HTML5-logo

Si, au détour d’une validation du code HTML5 de votre page, vous obtenez l’erreur suivante:

“The scrolling attribute on the iframe element is obsolete. Use CSS instead”

… c’est que le code de votre page HTML5 contient un élément <iframe> avec un attribut scrolling comme dans le code suivant :

<iframe scrolling="no" />

La solution CSS : la propriété overflow

Comme l’attribut scrolling ne fait plus partie des spécifications HTML5, il faut utiliser CSS à la place et utiliser la propriété overflow:

<iframe style="overflow: hidden;" />

L’apparence du texte et des éléments de présentation de la page doivent être gérés par CSS et non par le code HTML.

jQuery : sélectionner un élément dont l'ID ou la classe commence ou finit par une chaîne photo 1

jQuery : script toggle pour afficher et cacher de multiples blocs HTML

jquery

J’ai écrit il y a quelques temps un script jQuery utilisant la fonction toggle pour afficher/cacher un seul bloc HTML mais pas mal de gens m’ont demandé comment faire pour afficher plusieurs blocs HTML .

Voici comment s’y prendre, en utilisant les fonctions jQuery .slideup(), .slidedown() et .closest().

Démo


Article A

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam

Article B

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam

Article C
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam

Le script

1. Ajoutez jQuery dans l’entête de votre page (head), comme ceci :

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>

Lire la suite

Mise à jour du site du Centre de Kriya Yoga France : v4.0 photo

Mise à jour du site du Centre de Kriya Yoga France : v4.0

Il y a quelques mois de cela, le site du Centre de Kriya Yoga France a eu droit à un léger rafraichissement de son style : un peu plus de lisibilité, moins de fonds colorés, un peu plus de finesse dans les traits.

C’était juste un petit coup de plumeau mais comme j’ai oublié de vous en parler, voici une petite capture d’écran :

kriyafrance-2014

Mais cette semaine, j’ai retroussé mes manches et suis totalement passé à l’offensive :

Note pour plus tard : si, lors de la prévisualisation d’un thème WordPress, rien ne s’affiche ou si la personnalisation (customizer) ne répond pas, c’est qu’un plugin met la zone au niveau du javascript. Dans mon cas, c’était pdf-js.

Without further ado, je suis assez content de vous présenter la version 4.0 :

kriyafrance-2015

Pas mal de changements mais je pense que cela en vaut vraiment le coup. Le site devenait vieillissant et n’était plus adapté aux smartphones et tablettes, et l’ancienne boutique (Cubecart) était une horreur à gérer.

Tout est beaucoup plus simple maintenant, avec de jolis graphiques pour les commandes, la gestion du stock… bref, c’est bien mieux pour moi à gérer et plus simple pour le CKYF.

Qu’en pensez-vous ?

Améliorer ses graphiques avec le minimalisme photo

Améliorer ses graphiques avec le minimalisme

Aujourd’hui, j’ai trouvé cette petite animation qui explique comment créer des graphiques plus attirants et plus lisibles :

graphiques-plus-lisibles

Il est donc utile de retirer le fond, les étiquettes et légendes redondantes, les bordures, le nombre de couleurs, les effets spéciaux et la mise en gras.

Il faut adoucir les étiquettes en mettant du gris au lieu du noir et adoucir voire supprimer les lignes.

Et enfin, ne garder que les étiquettes ou titres qui ont le plus d’impact pour la compréhension du graphique. Tout ce qui est superflu doit disparaître pour plus de lisibilité et de compréhension.

Bienvenue dans l’ère du minimalisme !

Lire la suite

WordPress : récupérer la liste emails des membres et commentateurs photo

WordPress : retourner et exécuter un shortcode dans une fonction

Wordpress icon

Pour les besoins du Centre de Kriya Yoga France, j’ai écrit une fonction qui doit afficher une vidéo automatiquement.

Or je voulais juste renvoyer un shortcode vidéo qui prendrait en charge toute la partie code du lecteur vidéo.

On ne peut pas juste renvoyer la valeur, il faut utiliser la fonction do_shortcode() de WordPress.

Cas 1 : exécuter un shortcode dans une fonction

La solution réside dans l’utilisation de la fonction do_shortcode(). Voici un petit exemple :

<?php
/*
|-----------------------------------------------------------------------
| Sky Show Video by Matt - www.skyminds.net
|-----------------------------------------------------------------------
|
| Returns shortcode to be executed in WordPress.
|
*/
function sky_show_video($content) {
   // do stuff
   // return video
   return do_shortcode("[video src='$vid_url' width='600' height='480' type='video/mp4' preload='true']");
}

Cet exemple exécute le shortcode [video].

Lire la suite

Encoder une vidéo H.264 : utiliser qt-faststart pour la lecture progressive photo

Encoder une vidéo H.264 : utiliser qt-faststart pour la lecture progressive

Dernièrement, j’ai eu l’occasion de jouer avec l’intégration d’un lecteur vidéo en HTML5 pour jouer des vidéos encodées en H.264 (format .MP4) pour un client.

Il se trouve qu’aucune vidéo ne se lançait directement : le lecteur chargeait le fichier entièrement (plus de 60 Mo) avant de daigner jouer la vidéo.

h264-logo

La solution est toute simple : de la même manière que l’on peut créer un fichier JPG progressif (qui se charge de haut en bas, sans attendre le chargement total du fichier), il est possible de commencer à lire une vidéo sans que cette dernière soit totalement chargée, grâce à qt-faststart.

qt-faststart

qt-faststart  est un outil inclus avec FFmpeg qui ré-arrange un fichier H.264 de manière à ce que le “moov atom” soit devant les données, ce qui facilite la lecture sans attendre le chargement complet.

Si votre fichier MP4 est déjà créé, lancez la commande ainsi :

qt-faststart source_file.mp4 destination_file.mp4

Si vous souhaitez créer un fichier avec l’option faststart nativement, lancez l’encodage FFmpeg avec l’option :

-movflags +faststart 

Et voilà! Les vidéos streament proprement, avec une lecture progressive, sans attendre que le fichier complet soit téléchargé.

PHP : résoudre l'erreur

PHP : résoudre l’erreur “Creating default object from empty value”

php-logo

Suite à la mise à jour de PHP, mon fichier d’erreurs du site a commencé à afficher le message suivant :

PHP Warning: Creating default object from empty value in /wp-content/themes/skyminds/functions.php on line 1213

La ligne en question correspond à :

$posts[0]->comment_status = 'closed';

Le problème réside dans le fait que $posts n’est pas explicitement défini et comme les versions récentes de PHP tournent maintenant avec le mode E-STRICT par défaut, on obtient une erreur. Il existe deux solutions – soit mettre :

$posts = new stdClass();

s’il sagit d’un objet, soit mettre :

$posts = array();

s’il s’agit d’une associative array, juste avant la ligne de code incriminée. Dans mon cas, l’array() est la bonne solution.

pagespeed-99-201301

Performance du site : PageSpeed à 99%

Ah, ce moment magique durant lequel tu constates que ta note PageSpeed monte à 99%, via GTmetrix :

pagespeed-99-201301

C’est beau, sachant qu’au niveau CSS, c’est la barre WordPress du haut qui génère l’overhead.

Prochaine étape : mettre les fichiers statiques sur un sous-domaine cookieless.

jQuery : sélectionner un élément dont l'ID ou la classe commence ou finit par une chaîne photo 1

jQuery : script utilisant la fonction toggle pour afficher ou cacher un bloc HTML

jquery

Il y a quelques mois, je me suis amusé à transformer mon script javascript maison qui me permet d’afficher certaines zones de textes sur le site, notamment dans les articles de la catégorie Music/Séries.

Étant donné que jQuery est présent sur toutes les pages du site, j’ai adapté le script pour qu’il utilise jQuery. Cela fera aussi une librairie maison de moins à maintenir (et à charger).

Important : si vous voulez gérer plusieurs blocs, utilisez le script JQuery toggle pour afficher et cacher de multiples blocs HTML

Un script Javascript répondant à des besoins précis

J’écris pas mal de code afin de répondre à mes besoins sur le site, le but étant de me simplifier la vie au maximum.

Dans certains articles, il existe des zones de textes qui ne sont pas tout public et qui nécessitent une authentification préalable à leur lecture. La zone de texte doit apparaître lorsque l’on clique sur un des liens présents dans l’article.

Démo

Pour voir ce script en action, il suffit de cliquer sur ce lien.

Ce texte apparaît et disparaît grâce à un script javascript
écrit pour jQuery et qui utilise la fonction toggle().

Lire la suite