Les secrets de Jetpack — WordCamp Paris

Pour ma première participation à WordCamp Paris, j’ai décidé de parler d’un sujet qui me tient à coeur : Jetpack !

Voici donc ma présentation : en attendant que la vidéo soit mise en ligne, vous pouvez parcourir mes notes ci-dessous, jeter un coup d’oeil à mon diaporama, tout en écoutant mes commentaires dans la vidéo au bas de cet article.

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 éxécuté sur votre site. Attention cependant : votre client, s’il est admin sur le site, pourra 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.

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.

Site Logo

WordPress nous permet déjà de définir une image d’en-tête et un favicon, mais souvent ni l’un ni l’autre ne sont un vrai logo : l’image d’en-tête est souvent utilisée pour une image de fond apparaissant dans l’en-tête, tandis que le favicon… est juste un favicon ?

Jetpack vous permet de définir un logo, que vous pourrez utiliser en plus de l’image d’en-tête et que votre client pourra mettre à jour via le customizer.

Un autre avantage, si vous utilisez les tags Open Graph de Jetpack, est que ce logo pourra être utilisé comme image par défaut.

Pour gérer le support du logo dans votre thème, vous allez encore une fois utiliser add_theme_support(). Vous pouvez passer des paramètres comme la taille.

function jeherve_ajouter_site_logo() {
	add_theme_support( 'site-logo', array(
		'size' => 'full',
	) );
}

Il ne restera ensuite qu’à insérer le logo dans votre thème, sûrement dans header.php.

if ( function_exists( 'jetpack_the_site_logo' ) ) {
	jetpack_the_site_logo();
}

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.

Et le tout en vidéo !

C’est donc tout !

Voici ci-dessous une vidéo de ma présentation, en attendant que la vidéo officielle soit disponible sur WordPress.tv. Si vous n’avez pas eu la patience de lire ce pavé, la vidéo sera peut être plus intéressante ! ?

Des questions ? Des remarques ? Dites-moi tout dans les commentaires !