 Bonjour tout le monde, bon plus qu'une petite demi-heure, dernière ni à droite, un peu de courage. On va donc parler aujourd'hui de Jetpack. Jetpack vous connaissez déjà sûrement. J'espère que vous connaissez parce que je ne vais pas vous parler de ces 36 modules. Je ne vais pas vous parler de comment c'est une extension qui est très populaire et installée sur plus d'un million de sites. Moi je vais vous parler de quelques petits secrets, des petites choses que vous connaissez peut-être pas parce qu'elles ne sont pas dans l'interface de base de Jetpack. Mais ces petites choses peuvent vous permettre de gagner un temps fou, elles peuvent être d'éviter de réinventer la roue si vous avez besoin de développer des sites soit pour vous-même ou soit pour des clients. Avant de commencer, pourquoi Jetpack ? En fait j'y passe mes journées, je bidouille avec Jetpack, c'est mon boulot. Je travaille pour Automatique, donc l'entreprise derrière WordPress.com qui se mette gravataire et Jetpack. Et donc chez Automatique je suis en charge du support et donc du développement du plugin. Donc il y a des chances que si un jour vous envoyez un email à Jetpack pour poser une question ou vous postiez un nouveau sujet sur les forums d'entraîne sur WordPress.org, ce sera sûrement moi qui vous répondrai. Alors avant de commencer, une petite question que tout le monde se pose peut-être déjà, c'est pourquoi utiliser Jetpack et pourquoi pas d'autres plugins, pourquoi pas autre chose. Alors une chose à laquelle on pense pas forcément souvent c'est que Jetpack, votre client, il connaît déjà peut-être. Peut-être qu'il a déjà utilisé sur un site perso, sur peut-être un blog sur WordPress.com, peut-être sur un autre site à eux. Donc c'est une interface qu'ils vont peut-être connaître. Si votre client il connaît pas, vous vous connaissez. Vous savez que c'est une extension qui est populaire. Vous savez que c'est une extension qui est mise à jour régulièrement, qui est développée en public sur GitHub. Donc si vous avez des questions, si vous voulez reporter un bug, si vous voulez contribuer, améliorer les choses, vous pouvez le faire, on est là. Et si votre client connaît pas, et si vous, vous connaissez pas non plus, vous savez que puisque c'est une extension qui est populaire et qui est installée, comme je disais tout à l'heure, sur plus d'un million de sites, il y a d'autres développeurs, il y a d'autres personnes qui sont passées avant vous. Et donc avec une simple recherche Google, vous allez sûrement trouver quelque chose, la chose que vous cherchez. Une autre raison d'utiliser ZJPAC, c'est que vous avez donc une équipe de soutien qui est à votre disposition toute l'année, gratuitement, avec des francophones. Ça compte. Et puis c'est gratuit. Ça aussi, ça compte. Alors, avant de, donc je vais vous présenter quelques exemples, quelques petits bouts de code pour ajouter quelques fonctionnalités à votre site. Avant qu'on commence, je vais juste mettre tout une chose de clair. Je trouve que c'est super important que si dans un an, dans deux ans, votre client décide de désactiver ZJPAC pour n'importe quelle raison, vous voulez pas que le site il casse. Vous voulez pas que cette fonction, cette fonctionnalité que vous avez ajoutée, elle cause de gros problèmes juste parce que le plugin ZJPAC n'existe plus. Donc on va utiliser un function exist pour vous assurer que la fonction existe avant l'utiliser. Et une fonction de WordPress qui s'appelle Asim Support, qui en fait gère ce genre de choses. Donc vous allez pouvoir appeler une fonctionnalité de ZJPAC. Et si cette fonctionnalité n'est pas là, parce que ZJPAC n'est pas activée, ça ne posera pas de problème sur le site. Une autre chose dont vous aurez sûrement besoin, c'est le mode développeur qui vous permettra d'utiliser ZJPAC sur votre ordinateur en local pendant que vous développez avant donc que le site soit live sur le site de votre client. Et enfin, peut-être que vous aurez besoin de regarder le code de temps en temps. Alors évidemment, vous pouvez le télécharger, mais vous pouvez aussi aller sur github.com slash automatic slash jetpack pour jeter un coup d'œil à comment les choses marchent. Alors un premier petit exemple, on va commencer par faire un peu de tri. Alors je vous disais tout à l'heure, ZJPAC c'est 36 modules. Alors c'est super, il y a sûrement des modules que vous aimez, que vous utilisez peut-être pour tous vos projets, et il y en a sûrement d'autres que vous n'utilisez jamais, soit parce que vous utilisez un autre plugin pour faire cette fonctionnalité-là ou parce que cette fonctionnalité vous n'intéresse pas et est une utile pour vous. Alors il y a une interface dans le menu de ZJPAC qui permet d'activer et de désactiver ce dont vous avez besoin, mais par exemple si vous avez un client, peut-être que vous voulez que le client n'aie même pas l'option d'activer ce module, parce que vous savez peut-être que ça cause un conflit avec une autre fonctionnalité sur votre site. Donc ce qu'on va faire ici, c'est qu'on va passer dans notre liste de 36 modules, à une liste de 6 modules qu'on va pouvoir activer et désactiver, et le reste votre client va même pas être capable d'y toucher, donc il ne va rien casser sur le site. Pour ça, on va utiliser un filtre qui s'appelle Jetpack Get Available Made Use, et donc on va donc lui passer un arrêt de tous les modules dont on a besoin. Donc là j'ai listé cette module un peu au hasard, peu importe. C'est quelque chose que vous pouvez aussi utiliser si vous commencez à utiliser Jetpack sur tous les sites de vos clients, comme une base pour vos projets, vous pourriez très bien, par exemple, avoir une extension de fonctionnalité avec juste ce code, avec les modules que vous utilisez, et donc vous allez pouvoir pré-configurer Jetpack avant même de l'installer sur le site, et donc le moment où vous allez l'activer, il sera déjà installé avec les modules que vous utilisez, ils seront déjà activés et le reste on n'en parle pas. C'est un bon moyen de gagner du temps si vous utilisez les mêmes modules régulièrement pour chaque site. Alors un deuxième exemple, c'est une fonctionnalité qui s'appelle Site Logo. Alors vous êtes sûrement familier avec des fonctionnalités de Core, un site Wordpress qui sont l'image en tête, l'image de fond, le favicon, qui sont des choses que vous pouvez ajouter à un site Wordpress via le Customizer, donc dans le menu Apparence. Ce qu'on s'est rendu compte en développant des thèmes pour Wordpress.com, c'est que l'image de fond et l'image d'en tête c'est des choses qui sont très utiles, mais parfois on a besoin d'un élément en plus, qui est par exemple le logo de l'entreprise du site, qui viendrait s'afficher au-dessus de l'image d'en tête. On a donc créé un outil qui s'appelle Site Logo et qui vous permet, via le Customizer, d'ajouter non seulement l'image d'en tête, non seulement l'image de fond, mais aussi un logo pour le site de votre client par exemple. Et votre client par la suite dans un an, dans deux ans, quand il rafraîchit son logo, pourra simplement, sans toucher au code, changer le logo. Pour ça, on va utiliser la fonction dont je parlais tout à l'heure, Add Theme Support, tout simplement, dans notre thème et on va lui dire j'ai besoin du site Logo de Jetpack et je le veux dans tel taille par exemple. Et ensuite, dans votre thème vous allez via une seule fonction vous assurer par exemple dans le fichier adder.php que le logo est affiché là où vous le voulez. C'est tout simple, vous n'avez pas besoin de gérer justement tout cet ajout du menu au Customizer etc. Jetpack s'en occupe pour vous. Autre petit exemple, si vous créez des sites pour des clients, vous savez que le mobile est plus en plus important et si votre client il intègre des vidéos sur le site, il y a de fortes chances pour que vous ayez déjà entendu parler de libre comme par exemple FeedVids qui vont s'assurer que si vous regardez une vidéo sur un mobile cette vidéo elle soit bien proportionnée peu importe la taille de l'écran que soit sur tablette sur mobile etc. Dans Jetpack on a créé quelque chose très similaire à FeedVids qui est juste un petit peu plus léger et un peu plus adapté à WordPress et au type de contenu vidéo qu'on peut ajouter à un site WordPress. Et pour ça, encore une fois, on va simplement utiliser Add Theme Support et c'est tout. Vous ajoutez une ligne à votre thème et Jetpack va s'occuper d'ajouter ce fichier si nécessaire si il y a des vidéos qui sont insérées sur le site. Donc vous avez plus besoin d'intégrer FeedVids un fichier JS à votre thème Jetpack va s'occuper de ça pour vous. Une autre petite fonctionnalité de base que vous intégrer sûrement sur plein de sites peut-être via une extension séparée peut-être que vous avez votre petit bout de code que vous aurez utilisé régulièrement vous avez fait ça vous-même, ça vous convient très bien Si vous n'avez pas envie de réinventer la roue encore une fois, vous laissez Jetpack faire le travail une fonction très simple et ensuite à vous de styliser l'aspect du fil d'Ariane c'est d'abord à votre thème c'est Jetpack Breadcrumbs Comme je disais tout à l'heure on va s'assurer quand même que la fonction existe avant d'utiliser pour être sûr que si Jetpack un jour est désactivé le thème ne casse pas Un autre petit outil, peut-être un peu plus geek si vous développez des sites pour des clients peut-être que vous leur fournissez aussi un guide d'une dizaine de pages qui c'est pour leur apprendre comment utiliser le site comment ajouter des photos etc et peut-être que pour écrire ces 10 pages vous n'avez pas envie d'utiliser du HTML vous n'avez pas envie d'utiliser Word vous voulez l'écrire dans le langage que vous préférez qui est Markdown qui a plus d'une dizaine d'années qui est très pratique quand on écrit beaucoup de contenu et qu'on veut le formater Ce qu'on va faire ici c'est qu'on va utiliser non pas le module Markdown qui est disponible dans Jetpack mais la fonction qui est utilisée par le module qui s'appelle WPcom Markdown et en fait on va transformer notre guide de 10 pages en Markdown on va le transformer en HTML via cette fonction-là et ensuite on pourra, j'imagine par exemple vous pourriez ajouter une nouvelle page dans le table de bord de votre client avec le rendu en HTML de ces 10 pages de guide que vous avez créées pour votre client c'est peut-être moi qui touche en fait c'est pas grave donc c'est une fonction qui existe de base en Jetpack qu'on peut donc utiliser en dehors de ce pourquoi il a été créé au départ une autre petite fonctionnalité intéressante, quelque chose que peut-être vous connaissez déjà si vous êtes familiar avec Jetpack c'est Photon Photon c'est un cdn pour vos images donc toutes les images que vous insérez dans vos articles elles vont être optimisées, cachées et elles vont être servies depuis le cdn de WordPress.com donc depuis une location la plus proche de chez vous peu importe vous vous viez dans le monde alors vous allez me dire ouais mais moi mes lecteurs ils sont tous en France mon serveur il est en France j'ai un serveur qui est déjà très performant et peut-être que mes images sont déjà toutes optimisées au départ moi j'ai pas besoin d'un cdn vous avez raison là où les choses changent c'est que Photon est un petit peu plus qu'un cdn Photon intègre aussi une API qui va vous permettre de manipuler toutes ces images via Photon donc je vais vous donner quelques exemples il y a en fait une petite vingtaine de paramètres qui vont vous permettre de modifier une image l'image que vous avez insérée dans votre article sur WordPress vous allez pouvoir la modifier avec plein de manière différente alors ici j'ai l'image du résultat avec le chien j'ai appliqué à cette image trois filtres trois paramètres différents le premier paramètre c'est Quality alors qualité par défaut le cdn va optimiser vos images le plus possible mais sans compromettre la qualité donc on essaye que l'aspect de l'image finale soit le même que l'image originale après si comme moi vous n'êtes pas photograph les images vous les prenez avec votre téléphone mobile et puis la qualité c'est peut-être pas aussi important pour vous que pour d'autres personnes peut-être que vous êtes satisfait avec une image qui est 80% de la qualité de l'original qui est donc un peu plus légère qui est peut-être quand on zoom vraiment très près qui est peut-être un peu plus pixelisé mais vous pouvez vous permettre comme ça par exemple j'imagine moi ce que je fais personnellement sur mon site perso c'est que toutes les images elles sont 80% la qualité de l'original donc elles sont un peu plus légères et elles sont un peu plus rapides à charger et pour ça j'ai donc eu à utiliser simplement un paramètre d'en fotant le deuxième paramètre il s'appelle strip il vous permet en fait de supprimer toutes les métadonnées qui sont attachées à vos images alors par métadonnées j'entends des choses comme par exemple les appareils photos et votre éditeur d'image on tendance à les ajouter c'est le modèle de votre appareil photo la date à laquelle la photo a été prise la géolocation dans certains cas peut-être votre nom c'est très bien c'est des paramètres qui peuvent être utiles mais c'est aussi des paramètres qui vont allourdir vos images alors dans certains cas vous pouvez vous permettre de dire c'est de métadonnées j'en ai pas besoin je vais les supprimer de mon image grâce à photos et je vais donc avoir des images un peu plus lesures alors dans ce cas là juste une petite note certains appareils photos vont ajouter un profil de couleur bien spécifique à vos images parmi les métadonnées regardez pas et donc ils vont donc ajouter un profil de couleur bien spécifique et si vous enlevez les métadonnées il y a de la chance que l'aspect de votre photo change un petit peu donc attester et le troisième paramètre ici peut-être un peu gadget dans certains cas mais je vais vous donner un petit exemple imaginez que vous souhaitiez que tous les articles qui soient dans la catégorie noir et blanc toutes les photos qui sont dans ces articles là elles soient automatiquement transformées en noir et blanc même si vous les avez uploadées dans la librairie de WordPress en couleur pour ça on va utiliser le paramètre filter et on va donc lui passer l'option grayscale qui tient pour le noir et blanc il y a d'autres options genre cpia par exemple alors vous pourriez imaginer tous vos articles qui sont avec le tag vintage vont avoir vont être en cpia par exemple alors il y a des tonnes d'autres options comme ça donc j'ai posté l'url tout à l'heure avec tous ces paramètres je vous laisse y regarder je vais juste en rajouter un dernier qui peut être utile si par exemple vous développez un thème avec sur votre page d'accueil peut-être des petites miniatures de votre image à la une ces miniatures là WordPress peut s'occuper de les redimensionner pour vous Photon peut le faire aussi et Photon peut le faire d'une manière un peu plus avancée vous allez par exemple lui dire mon image je veux commencer à la redimensionner à partir de 45% du gauche de l'image de la gauche de l'image et 45% du bas de l'image vous avez donc le redimensionnement il va commencer il va pas être centré mais un peu plus sur le côté et vous allez dire à Photon je veux que mon image elle soit 250 par 250 pixels et Photon va donc s'occuper de ça pour vous et va générer une image de la taille qu'il vous faut et bien avec qui soit forcément un peu plus légère un autre petit exemple qui va sûrement intéresser selon entre vous qui regardent un petit peu les logs de tous ces hackers qui essayent de se connecter à votre formulaire de connexion WordPress tous les jours c'est quelque chose que si vous développez des sites pour des clients vous devez sûrement prendre en compte alors vous utilisez peut-être déjà un plugin pour vous occuper de ça vous avez peut-être une liste d'adresses IP que vous bloquez qui peuvent même pas se connecter c'est important ici vous pouvez en fait utiliser une fonctionnalité de base de Jetpack qui est SSO single sign-on par défaut cette fonctionnalité elle ajoute simplement un petit bouton en-dessous de votre formulaire de connexion qui va se connecter via WordPress.com alors c'est bien mais ici en fait ce qu'on va faire c'est qu'on va utiliser plusieurs filtres des filtres de Jetpack et des filtres de WordPress pour supprimer complètement le formulaire de connexion de votre site donc les hackers peuvent rechercher il y en a plus chez vous des utilisateurs qui essaient de se connecter vers le formulaire de connexion de WordPress.com donc vous laissez donc WordPress.com s'occuper de ces hackers s'occuper de blacklist les adresses IP qui essaient de se connecter chez vous et vos utilisateurs ils ont simplement un formulaire de connexion auquel ils se peuvent connecter pour accéder à votre site il y a pas mal de filtres ici je vous invite plutôt à regarder le lien il y a une extension qui est disponible qui peut s'occuper de ça pour vous un autre petit exemple un peu plus avancé c'est Tonesque Tonesque c'est une bibliothèque qui est livrée avec Jetpack c'est une bibliothèque de gestion d'image vous lui donnez une image Tonesque il va sélectionner 5 points dans l'image et à partir de 5 points il va générer une couleur moyenne et à côté de cette couleur moyenne il va générer ce qu'on appelle une couleur de contraste par exemple votre couleur moyenne elle est plutôt foncée la couleur de contraste sera du blanc et on peut très bien imaginer utiliser cette librairie donc encore une fois avec AddSim Support pour faire quelque chose comme ça donc ça c'est mon blog perso vous avez par exemple l'image ici en haut à droite où j'ai une image qui est plus ou moins rouge, noir, marron Tonesque va générer une couleur moyenne en bordot que je peux par exemple utiliser après comme couleur de fond sur cet article en haut à gauche j'avais donc une image de base qui était plus ou moins verte la couleur moyenne est verte la couleur de contraste est donc blanc parce que c'était un verre assez foncé et donc j'ai changé la couleur de mon texte pour être blanc pour que ce soit toujours lisible même avec un fond qui est foncé pour ça on va donc simplement faire notre image et on va ensuite la passer dans Tonesque et Tonesque va nous renvoyer 2 couleurs une couleur moyenne et une couleur de contraste alors ici en fait en haut vous voyez que j'ai utilisé un autre petit secret de Jetpack pour sélectionner mon image par défaut vous pouvez imaginer pour mon exemple je vais prendre toutes mes images à la une et je vais sélectionner je vais définir une couleur moyenne à partir de ces images à la une c'est très bien donc au lieu d'utiliser du code pour aller chercher une image dans l'article vous allez pouvoir utiliser une classe de Jetpack qui s'appelle Jetpack Post Images et qui va faire tout le boulot pour vous qui va donc aller chercher dans l'article une image à la une, il n'y en a pas, c'est pas grave on va regarder si vous avez mis des galeries dans l'article il n'y en a pas, c'est pas grave on va regarder si vous avez attaché des images à l'article que vous en avez inséré dans l'article ou que même vous avez été copiés et que vous n'avez pas pu faire des images à l'article ou que même vous avez été copiés de Google qui sont pas hébergés chez vous mais qui sont quand même hébergés dans l'article et on va donc vous renvoyer une image que vous allez pouvoir utiliser avec Tonesk donc je pars d'une image et je me retrouve avec deux couleurs que je peux utiliser dans mon thème alors vous allez me dire, deux couleurs c'est un peu difficile de créer un thème entier avec simplement deux couleurs on va donc aller un petit peu plus loin dans Tonesk et on va utiliser les fonctions derrière un autre module de Jetpack qui est le module d'édition de CSS ce qu'on va faire donc c'est qu'on va prendre on a notre image de base qu'on a récupéré avec Jetpack on va la passer dans Tonesk pour avoir une couleur moyenne et une couleur de contraste et ce qu'on va faire après ça c'est qu'on va utiliser SAS pour gérer un schéma de couleur donc on va avoir peut-être une dizaine ou une quinzaine de couleurs qui sont en relation avec notre couleur de base avec un petit peu plus de contraste avec un petit peu plus de luminosité et ensuite on va générer une feuille de style SAS avec toutes ces couleurs de schéma on va transformer le SAS en CSS avec le processeur qui est intégré dans Jetpack et on va ajouter ce CSS grâce à l'éditeur de Jetpack et on va ajouter cette feuille de style CSS minifiée et on va donc se retrouver avec cet exemple là qui est en fait un thème qui est disponible sur WordPress.org et donc comme vous avez vu tout de suite qui non seulement change la couleur de la barre latérale mais va changer aussi le titre du site, les couleurs des menus etc alors pour ça donc là j'ai mon fichier SAS comme je disais tout à l'heure ici j'ai utilisé 2 fonctions de base de SAS qui sont en Q et HSL c'est donc teint de saturation et luminosité en français donc j'ai ma base color que j'ai obtenue de Tonesk et donc à partir de cette couleur de base j'ai créé un schéma de couleur entier en changeant simplement un petit peu la luminosité un petit peu la saturation et à partir de ça je crée une feuille de style SAS entière avec je vais changer par exemple le fond de mon body ou je vais changer la couleur de mon texte si vous êtes pas si SAS c'est un peu nouveau si vous êtes pas forcément familiar avec toutes ces fonctions vous inquiétez pas, Google est là pour vous aider j'ai même fait un petit peu le boulot pour vous il y a deux articles qui sont intéressants ici le premier va vous expliquer toutes les fonctions de SAS qui vous permettent de modifier une couleur et le deuxième va vous expliquer un peu plus en détail comment générer un schéma de couleur qui soit crédible parce que changer la luminosité vous-même c'est joli mais si vous êtes pas designer le résultat n'est pas forcément super joli je vais le faire pour vous donc j'ai mon fichier SAS j'y ajoute la couleur que j'ai obtenue de Tonnesk donc ces couleurs ici et après je la passe dans la fonction de l'éditeur de CSS de Jetpack je la transforme en CSS je la minifie donc Jetpack fait tout ça pour moi et ensuite j'ai plus qu'à l'ajouter à mon thème et j'ai donc un résultat où à partir d'une simple image je vais laisser Jetpack faire tout le bol pour moi et complètement changer l'aspect de mon thème ou de ma page bien sûr c'est qu'un seul exemple il y en a d'autres c'est aussi le dernier exemple que j'ai il y a d'autres fonctions cachées dans Jetpack je vais vous laisser les découvrir si vous avez des questions n'hésitez pas si la planification de WordPress a bien marché mon article qui est sûrement déjà en ligne avec les slides avec une petite vidéo un exemple de code que j'ai mentionné ici et si vous avez d'autres questions à propos de Jetpack n'hésitez jamais à nous contacter comme je disais tout à l'heure on a une équipe de soutien qui est là pour vous aider en français donc contactez-nous merci merci cherémy on n'a pas énormément de temps on va faire 5 minutes de questions exceptionnellement profitez-en allez-y bonjour c'est une question bête c'est où on met le code dans Jetpack c'est pas une question bête en fait vous allez je dirais ne modifier jamais les fichiers d'une extension que vous installez sur votre site ce code que j'ai présenté vous allez devoir décider est-ce que c'est un code qui est en relation avec mon contenu ou est-ce que c'est un code qui est en relation avec le design de mon thème si il est en relation avec votre thème vous allez devoir le mettre dans le fichier functions.php pas en relation avec votre thème vous allez pouvoir créer votre propre petite extension donc on appelle ça en général une extension de fonctionnalité ou vous allez poser tout ce code-là exemple pour Photon que tu as présenté tout à l'heure comme ça modifie le contenu de tes articles moi je conseillerais de le mettre dans une extension de fonctionnalité donc si tu es pas forcément confortable pour créer ton propre petit plugin ou ton propre petit extension il y a des extensions sur WordPress.org qui sont là pour t'aider je conseillerais de chercher une extension qui s'appelle code snippets et qui va en fait te permettre d'ajouter autant de petits bout de code que tu veux que tu veux aller trouver dans mon article ou ailleurs en fait ça fait suite à la question de la jeune fille juste pour le fil d'Ariane je le mets dans page single ça dépend où vous voulez que le fil d'Ariane soit affiché moi je l'imagine très bien si vous voulez qu'il soit juste sur les articles en eux-mêmes vous pouvez le mettre dans le fichier single.php ou autrement vous pouvez le mettre dans le fichier index.php suivant votre thème si vous voulez qu'il soit affiché sur toutes les pages par exemple merci Jeremy