Le groupe de WordPress In Nice m’a récemment invité à parler un petit peu de Jetpack lors de l’un de leurs meetups. Voici donc le compte-rendu de ma présentation.
Les secrets de Jetpack — Gagnez du temps dans vos projets
Jetpack, vous connaissez ?
Puisque cette extension n’est plus toute récente (elle aura 5 ans dans un mois !), vous connaissez déjà sûrement la plupart des modules, ceux qui vous sont utiles, et ceux que vous utilisez un peu moins.
Mais saviez-vous que Jetpack a aussi ses petits secrets ? Au-delà des modules les plus populaires, l’extension regorge d’outils qui peuvent vous faciliter la vie lorsque vous travaillez sur un nouveau site pour un client. Plus besoin de réinventer la roue, Jetpack est là pour vous avec des outils robustes que nous allons découvrir ensemble.
Avant de commencer
Pourquoi Jetpack ? Je passe en fait toutes mes journées à le bidouiller. Je travaille en effet chez Automattic, l’entreprise derrière WordPress.com, Akismet, Woocommerce, Gravatar, ou encore VaultPress. Je suis l’une des personnes en charge du soutien des utilisateurs de Jetpack, ainsi que de la maintenance et du développement de l’extension.
Vous pouvez me retrouver sur ce site, sur Twitter, sur les forums d’entraide de Jetpack, ou sur notre GitHub !
Pourquoi utiliser Jetpack ?
Jetpack est un outil qui propose une multitude de fonctionnalités (36 pour le moment). Ces fonctionnalités sont la base de beaucoup de sites.
C’est aussi un outil que vos clients connaissent peut être déjà : ils ont pu se familiariser avec les modules sur un blog perso, sur WordPress.com ou sur WordPress.org. C’est aussi un outil qu’ils ont rencontré, ou rencontreront s’ils veulent utiliser l’une des applications mobiles, ou le logiciel WordPress.com pour Windows, Mac, ou Linux.
Vos clients le connaissent donc peut être, et vous le connaissez aussi sûrement : vous savez que c’est une extension qui est régulièrement mise à jour. Ce que vous ne saviez peut être pas, c’est que le développement a lieu en public, sur GitHub : vous pouvez donc proposer des améliorations, reporter des problèmes, suivre les nouvelles fonctionnalités, tout ça depuis GitHub.com.
Puisque c’est une extension populaire, d’autres développeurs l’utilisent aussi : une simple recherche Google vous donnera beaucoup de solutions, ou d’exemples d’autres thèmes et extensions construits autour de Jetpack.
A côté de ça, vous avez aussi l’option de contacter une équipe de soutien qui est à votre disposition toute l’année, gratuitement, en français, soit en public via les forums d’entraide, ou par e-mail.
Et puis bon… C’est gratuit ! ?
Avant de mettre les mains dans le cambouis…
Bien que ce soit intéressant de tirer avantage d’une extension lorsque vous développez un nouveau site, vous voulez être sûr de ne rien casser si votre client décide un jour de désinstaller l’extension.
Nous utiliserons donc function_exists() dans tous les exemples qui vont suivre, ainsi que add_theme_support() (#). add_theme_support() est intéressant car il ne crééra pas d’erreurs si la fonctionnalité que vous essayez d’intégrer n’est pas présente.
Vous aurez aussi besoin de quelques ressources additionnelles :
– Mode Développeurs : Une bonne façon de travailler avec Jetpack sur votre machine.
– Le code, sur GitHub.
– Si vous créez un thème, ce script de gestion des dépendances de Jetpack peut vous être utile.
En pratique
- Faites bien le tri entre les fonctionnalités qui sont liées à votre thème, et celles qui doivent être ajoutées à une extension comme celle-ci.
- Créez un compte pour vous, et un pour votre client. Vous pourrez transférer la gestion de Jetpack à votre client facilement quand le site sera prêt.
Un peu de tri pour commencer ?
Jetpack, c’est 36 modules. Il y a certains modules que vous aimez, d’autres que vous n’utilisez pas, et d’autres que vous n’utiliserez jamais car vous avez mis en place cette fonctionnalité via une autre extension.
Jetpack offre une interface simple d’utilisation, ou vous pouvez désactiver ce dont vous n’avez pas besoin. Une fois que c’est désactivé, vous n’avez plus besoin de vous en occuper car le code n’est plus éxecuté sur votre site.
Attention cependant : votre client, s’il est admin sur le site, pourra lui-aussi activer des modules par la suite. S’il y a des extensions que vous ne voulez jamais voir activées sur le site, ne prenez aucun risque, retirez-les, comme ceci :
/**
* N'activons que 7 modules. Le reste sera caché et ne pourra pas être activé.
*/
function jeherve_juste_sept_modules( $modules, $min_version, $max_version ) {
$my_modules = array(
'stats',
'photon',
'related-posts',
'markdown',
'sso',
'custom-content-types',
'custom-css',
);
return array_intersect_key( $modules, array_flip( $my_modules ) );
}
add_filter( 'jetpack_get_available_modules', 'jeherve_juste_sept_modules', 20, 3 );
C’est aussi un bon moyen pour vous de gagner du temps en pré-configurant Jetpack avant même de l’avoir installé. Pour en savoir plus, vous pouvez consulter cet article.
Parmi les 36 modules, vous trouverez aussi deux modules qui peuvent vous intéresser. Le premier est un module de widgets, qui ajoute toute une liste de widgets que vous pouvez utiliser pour ajouter une Like Box de Facebook, un flux Twitter, … Si certains de ces widgets ne vous intéressent pas, vous pouvez les retirer de votre tableau de bord avec le filtre jetpack_widgets_to_include. Dans l’exemple ci-dessous, nous allons retirer le widget Google+ :
// Chercher le Widget Google+.
function jeherve_googleplus_badge_search( $widget ) {
return strpos( $widget, 'googleplus-badge' ) === false;
}
// Et le retirer de la liste des widgets mis a disposition par le module de Jetpack.
function jeherve_remove_googleplus_widget( $widgets ) {
$widgets = array_filter( $widgets, 'jeherve_googleplus_badge_search' );
return $widgets;
}
add_filter( 'jetpack_widgets_to_include', 'jeherve_remove_googleplus_widget' );
Un deuxième module contenant une multitude de fonctionnalités est le module de shortcodes. Il vous permet d’insérer des vidéos, des cartes Google, des bouts de code de Gist ou Codepen, et bien d’autres choses. Mais si vous ne souhaitez pas du tout utiliser certains de ces shortcodes, vous pouvez utiliser le filtre jetpack_shortcodes_to_include pour en retirer quelques uns. Dans l’exemple ci-dessous, nous allons retirer le shortcode de création de diaporamas, slideshow:
// Retirer le shortcode "slideshow"
function jeherve_remove_jp_shortcode( $shortcodes ) {
$jetpack_shortcodes_dir = WP_CONTENT_DIR . '/plugins/jetpack/modules/shortcodes/';
$shortcodes_to_unload = array( 'slideshow.php' );
foreach ( $shortcodes_to_unload as $shortcode ) {
if ( $key = array_search( $jetpack_shortcodes_dir . $shortcode, $shortcodes ) ) {
unset( $shortcodes[$key] );
}
}
return $shortcodes;
}
add_filter( 'jetpack_shortcodes_to_include', 'jeherve_remove_jp_shortcode' );
Custom Content Types
Vous le savez tous, les CPT, Custom Post Types, Types de Contenu Personnalisés, peuvent être très utiles mais n’ont pas leur place dans votre thème. Ils doivent êtres ajoutés via une extension, au cas où vous souhaiteriez un jour changer de thème.
En utilisant les CPTs de Jetpack (lorsque vos besoins semblent proches des fonctionnalités offertes dans Jetpack), vous avez donc la possibilité d’utiliser le travail partagé par d’autres développeurs.
Jetpack inclut 4 types de CPTs : Témoignages, Portfolios, Menus, BDs.
Vous pouvez utiliser add_theme_support() dans votre thème pour activer automatiquement le CPT de Jetpack dont vous avez besoin :
function jeherve_ajouter_portfolio() {
add_theme_support( 'jetpack-portfolio' );
}
add_action( 'after_setup_theme', 'jeherve_ajouter_portfolio' );
Vous pouvez ensuite créer des templates dédiés dans votre thème, pour chaque vue du CPT, ou utiliser les shortcodes qui sont livrés avec Jetpack pour afficher les CPTs dans une page classique.
Responsive Videos
Si vous développez des sites qui intègrent des videos, vous connaissez sûrement FitVids, un petit plugin jQuery que vous pouvez ajouter à votre thème pour vous assurer que toutes les vidéos s’adaptent à la taille de votre navigateur. C’est pratique sur mobile !
Et maintenant, vous n’avez plus besoin d’intégrer FitVids à votre thème : toujours grâce à add_theme_support(), vous allez utiliser une librairie similaire, mais plus adaptée à WordPress et intégrée à Jetpack.
function jeherve_ajouter_responsive_videos() {
add_theme_support( 'jetpack-responsive-videos' );
}
Fil d’Ariane
Pas grand chose à ajouter je pense. C’est relativement simple à mettre en place, et l’effet final est relativement simple. Ce sera à vous de donner du style à ce Fil d’Ariane, bien entendu.
if ( function_exists( 'jetpack_breadcrumbs' ) ) : ?> <div class="fil-ariane"> <?php jetpack_breadcrumbs(); ?> </div><!-- .fil-ariane --> <?php endif; ?>
Markdown
Markdown est sympa pour ceux qui rédigent beaucoup de texte. Ce n’est pas pour tout le monde, mais si vous l’utilisez, vous pouvez l’utiliser dans vos projets ! Jetpack intègre en effet une librairie qui va faire la transformation Markdown -> HTML pour vous.
Si vous avez par exemple de la documentation que vous affichez à vos clients, mais voulez rédiger cette doc en Markdown, vous pouvez ensuite utiliser la librairie Markdown de Jetpack pour transformer votre Markdown en HTML et afficher votre documentation dans une page du tableau de bord de votre client.
if (
class_exists( 'Jetpack' ) &&
Jetpack::is_module_active( 'markdown' )
) {
jetpack_require_lib( 'markdown' );
$texte_md = WPCom_Markdown::get_instance()->transform(
$text_original,
array(
'id' => false,
'unslash' => false,
)
);
}
Photon
Photon est un CDN gratuit, intégré à Jetpack. Vous me direz, si vos lecteurs ne sont qu’en France, et si votre serveur est en France et rapide, ce n’est pas forcément intéressant. Au contraire ! Photon est en fait un peu plus qu’un simple CDN:
– Il optimise et cache multiple versions de vos images, une pour chaque dimension utilisée dans votre thème.
– Il sert des image optimisées pour votre navigateur. Par exemple, si vous utilisez Chrome, Photon utilisera le format WebP, qui est environ 25% plus petit que jpg, sans perte de qualité.
– Et enfin, ce qui nous intéresse aujourd’hui : Photon intègre une API et des filtres qui vont vous permettre de générer des images adaptées à vos besoins.
Rien de tel qu’un exemple pour vous aider à comprendre. Dans l’exemple suivant nous allons utiliser l’un des filtres de Jetpack, jetpack_photon_pre_args, pour changer les paramètres de toutes les images de notre site en une seule fonction :
– Nous allons changer la compression de 100% à 80%. Certes on va perdre un peu de qualité d’image, mais si vous n’êtes pas photographe, c’est acceptable :)
– Nous allons retirer toutes les métadonnées (EXIF) attachées à nos images. Cela va permettre de les alléger. Attention cependant, suivant votre éditeur d’images, ces métadonnées peuvent contenir un profil de couleur spécial qui va changer l’aspect de vos images.
– Nous allons passer toutes nos images en noir et blanc. Evidemment c’est un peu extreme, mais vous pourriez par exemple faire quelque chose du genre “Si j’utilise le tag “vintage” dans un article, les images seront en noir en blanc”.
function jeherve_custom_photon( $args ) {
$args['quality'] = 80;
$args['strip'] = 'all';
$args['filter'] = 'grayscale';
return $args;
}
add_filter( 'jetpack_photon_pre_args', 'jeherve_custom_photon' );
Un autre exemple pourrait être de générer des images avec des dimensions spécifiques, comme sur cet exemple :
if ( function_exists( 'jetpack_photon_url' ) ) {
$args = array(
'crop' => '45,45,250px,250px',
);
echo jetpack_photon_url(
esc_url( $image_url ),
$args
);
}
Dans cet exemple, les deux premiers paramètres décident de l’emplacement de la redimension (45% du haut et de la gauche de l’image), et le deux suivants décident de la taille.
Cette fonction, jetpack_photon_url(), peut donc être très utile dans votre thème.
SSO
La sécurité d’un site WordPress n’est pas quelque chose que vous pouvez ignorer. Dès lors que votre site utilise WordPress, votre formulaire de connexion sera bombardé par des hackers. Non seulement c’est embêtant s’ils arrivent à se connecter, mais ça peut aussi devenir une charge non négligeable sur votre serveur.
Heureusement, il y a des extensions qui peuvent vous aider. Jetpack et son module Protect est l’une de ces solutions. Mais j’ai une autre alternative : pourquoi ne pas laisser WordPress.com s’occuper des hackers à votre place ?
Vous avez en effet l’option de retirer le formulaire de connexion de votre site, et rediriger tout le monde vers WordPress.com. On s’occupera de la charge sur nos serveurs ! :)
Pour mettre ça en place, vous allez avoir besoin de plusieurs filtres :
add_filter( 'jetpack_remove_login_form', '__return_true', 9999 );
add_filter( 'jetpack_sso_bypass_login_forward_wpcom', '__return_true', 9999 );
add_filter( 'jetpack_sso_display_disclaimer', '__return_false', 9999 );
add_filter( 'wp_authenticate_user', function() {
return new WP_Error( 'wpcom-required', “Pas de connection ici.” );
}, 9999 );
add_filter( 'allow_password_reset', '__return_false' );
// Forcer l'authentification à deux-facteurs
add_filter( 'jetpack_sso_require_two_step', '__return_true' );
Vous pouvez en savoir plus sur ce système ici.
Tonesque
Tonesque est une librairie intégrée à Jetpack, qui vous permet de générer 2 couleurs (une couleur moyenne et une couleur de contraste, noir ou blanc) à partir d’une image. L’outil prélève 5 points dans l’image, et fait une moyenne. Si la couleur obtenue est plutôt foncée, la couleur de contraste sera le blanc. Si la couleur obtenue est plutôt claire, la couleur de contraste sera le noir.
C’est un outil utile pour par exemple adapter certains éléments de votre thème à l’image à la Une. Vous pouvez en savoir plus et découvrir un exemple d’application ici. Ce site utilise d’ailleurs Tonesque pour générer la couleur de fond de chaque article !
Pour utiliser cette fonctionnalité, nous allons encore une fois utiliser add_theme_support():
function jeherve_ajouter_tonesque() {
add_theme_support( 'tonesque' );
}
On peut ensuite obtenir une image, et laisser Tonesque générer nos deux couleurs.
if ( class_exists( 'Jetpack_PostImages' ) ) {
$image = Jetpack_PostImages::get_image( $post_id );
if ( ! empty( $image['src'] ) ) {
$image = $image['src'];
} else {
$image = 'une_image_defaut.jpg';
}
$tonesque = new Tonesque( $image );
$tonesque = array(
'couleur' => $tonesque->color(),
'contraste' => $tonesque->contrast(),
);
}
Dans l’exemple ci-dessous, j’ai utilisé un autre petit secret de Jetpack : la classe Jetpack_PostImages, qui me permet d’obtenir une image pour un spécifique article. Cette classe passe en revue toutes les options possible pour ajouter une image à un article (image à la Une, diaporama, galerie, image attachée à l’article, images copiées depuis un autre site), et renvoie une image que vous pourrez utiliser.
Bon, vous allez me dire, deux couleurs, c’est un peu limité pour un thème. Et vous n’avez pas tort. Heureusement, avec un peu d’imagination et Jetpack, tout est possible ! ? ?
Création de schémas de couleur via le module de CSS
Jetpack intègre un module de CSS qui est pratique : il vous permet d’ajouter un peu de CSS à votre site directement depuis votre tableau de board. Vous pouvez utiliser du CSS, mais aussi Sass et Less. Mais passons; ce qui nous intéresse ici, ce sont les libraries qui sont inclues dans le module. Nous allons les utiliser en combinaison avec Tonesque que nous avons découvert un peu plus tôt.
A partir de notre couleur de base, nous allons utiliser Sass pour créer une teinte de base. Nous modifierons ensuite la saturation et la luminosité pour créer plusieurs variantes de notre couleur.
On crééra ensuite une feuille de style Sass avec toutes ces couleurs, et on utilisera Jetpack pour générer le CSS à partir du Sass, puis minifier cette feuille de style.
Voici donc notre feuille de style Sass, se basant sur $base-color, notre couleur de base:
/* Teinte de notre couleur de base */
$base-hue: hue( $base-color );
/* hsl: Teinte, Saturation, Luminosité */
$body-background: hsl( $base-hue, 0, 97% );
$text-color: hsl( $base-hue, 4%, 26% );
body {
background: $body-background;
color: $text-color;
}
Et dans le code ci-dessous, on ajoute cette couleur de base à la feuille de style Sass, et on minifie le tout.
if ( class_exists( 'Jetpack_Custom_CSS' ) ) {
$base_sass = file_get_contents( 'couleurs.scss' );
$sass = '$base-color: #' . $couleur . '; ' . $base_sass;
$css = Jetpack_Custom_CSS::minify( $sass, 'sass' );
}
Il ne nous reste ensuite plus qu’à l’ajouter à notre thème ! A partir d’une image, nous avons utilisé Tonesque pour nous donner une couleur de base, et à partir de celle-ci, nous avons créé un schéma de couleur qu’on peut utiliser pour styler tout notre thème !
Pour en apprendre plus sur les différentes fonctions de Sass qui vous permettront de modifier une couleur, vous pouvez consulter ces deux articles :
– Controlling color with Sass color functions
– 3 raisons d’utiliser HSL pour vos couleurs
Pour voir une démonstration de cette technique, vous pouvez installer le thème Umbra, disponible sur WordPress.org.
Nous en avons maintenant fini avec le code. J’espère que ces quelques astuces pourront vous être utiles dans certains de vos projets.
Extras
Je vais finir par deux petits modules que vous connaissez peut être pas encore, qui ne demandent pas de code, mais qui peuvent être intéressants, même si ce sont des modules que les gens connaissent en général un peu moins.
Monitor est simple d’utilisation, et est une bonne alternative à des services bien souvent payants, ou moins avancés. Monitor visite votre site toutes les 5 minutes. Si votre site met plus de 10 secondes à charger, Monitor essaie d’y accéder une nouvelle fois, une minute plus tard, et une autre fois une minute plus tard. Si après ces 3 minutes, votre site est toujours inaccessible, Monitor essaie d’y accéder à nouveau, mais depuis deux autres serveurs ailleurs dans le monde. Cela nous permet de vérifier que votre site n’est pas simplement bloqué dans un pays ou une région en particulier. Enfin, si votre site n’est toujours pas accessible depuis ces deux autres serveurs, nous vous enverrons un e-mail.
Et si les e-mails ne sont pas suffisants, vous pouvez utiliser un service comme IFTTT pour vous envoyer un texto dès que Jetpack considère votre site comme inaccessible : Send an SMS when an email is received with a specific subject.
Un effet secondaire assez intéressant de Monitor : puisqu’il accède à votre site toutes les 5 minutes, cela lancera WP Cron, le gestionnaire de planification de WordPress, même si votre site n’a reçu aucun vraie visite pendant ces 5 minutes. Finis les articles planifiés qui ne sont pas publiés comme il faut ! :)
Jetpack intègre aussi une API qui vous permet d’interagir avec votre site depuis d’autres logiciels et applications. Voici quelques exemples:
- StackEdit est un éditeur Markdown en ligne, avec des outils de collaboration à la Google Docs. Vous pouvez travailler à plusieurs sur un document, et le publier directement sur votre site WordPress une fois que vous avez terminé.
- iAWriter est un logiciel de rédaction pour Mac, iOS, et Android. Vous pouvez l’utiliser pour rédiger des articles en dehors de votre tableau de bord WordPress, et vous pouvez utiliser publier vers WordPress en un clic.
- WordPress.com propose des applications pour Mac, Windows, et Linux, qui vont vous permettre de gérer votre contenu, vos réglages, vos extensions, les options de votre thème, le tout depuis une app ou depuis WordPress.com, grâce à l’API.
Et voilà ! Des questions ? Des remarques ? Dites-moi tout dans les commentaires ! Vous pouvez aussi utiliser le nouveau Codex de Jetpack, developer.jetpack.com!