Découvrez les secrets de Jetpack !

https://jeremy.hu/wcparis/

Jetpack est une extension utilisée sur un très grand nombre de sites
WordPress, mais saviez-vous que Jetpack peut aussi rendre votre vie de
développeur un peu plus simple lors de la réalisation de projets ?

Je vous ferai découvrir quelques fonctionnalités cachées de Jetpack,
et vous expliquerai comment les utiliser dans votre code pour gagner
du temps lors de la création d’un nouveau site.

Transcript

1. Les secrets de Jetpack Gagnez du temps dans vos projets !
2. Secrets de Jetpack — #wcparis — 2016 • jetpack.me • Plus d’un million de sites actifs • 36 modules • et quelques secrets… 2
3. Secrets de Jetpack — #wcparis — 2016 Jeremy Herve • Mécano Jetpack chez Automattic • jeremy.hu • @jeherve 3
4. Secrets de Jetpack — #wcparis — 2016 Pourquoi utiliser Jetpack ? • Votre client connait peut être déjà • Mises à jour régulières • Une équipe de soutien juste pour vous • C’est gratuit ! 4
5. Secrets de Jetpack — #wcparis — 2016 Avant de commencer… • Rien ne doit casser sans Jetpack • Toujours vérifier que function_exists() • Utiliser add_theme_support() • Mode Développeurs : define( ‘JETPACK_DEV_DEBUG’, true ); • GitHub : Automattic/jetpack 5
6. Secrets de Jetpack — #wcparis — 2016 Faisons du tri 6
7. 7 Secrets de Jetpack — #wcparis — 2015 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 );
8. Secrets de Jetpack — #wcparis — 2016 Site Logo 8
9. 9 Secrets de Jetpack — #wcparis — 2015 function jeherve_ajouter_site_logo() { add_theme_support( 'site-logo', array( 'size' => 'full', ) ); }
10. 10 Secrets de Jetpack — #wcparis — 2015 if ( function_exists( 'jetpack_the_site_logo' ) ) { jetpack_the_site_logo(); }
11. Secrets de Jetpack — #wcparis — 2016 Responsive Videos 11
12. 12 Secrets de Jetpack — #wcparis — 2015 function jeherve_ajouter_responsive_videos() { add_theme_support( ‘jetpack-responsive-videos’ ); }
13. Secrets de Jetpack — #wcparis — 2016 Fil d’Ariane 13
14. 14 Secrets de Jetpack — #wcparis — 2015 if ( function_exists( 'jetpack_breadcrumbs' ) ) : ?> <div class="fil-ariane"> <?php jetpack_breadcrumbs(); ?> </div><!-- .fil-ariane --> <?php endif; ?>
15. Secrets de Jetpack — #wcparis — 2016 Markdown 15
16. 16 Secrets de Jetpack — #wcparis — 2015 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, ) ); }
17. Secrets de Jetpack — #wcparis — 2016 Photon 17
18. Secrets de Jetpack — #wcparis — 2016 Photon • CDN gratuit • Fonctionne sans aucun réglage • Une API vous permet de manipuler les images • https://developer.wordpress.com/docs/photon/ 18
19. 19 Secrets de Jetpack — #wcparis — 2015 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' );
20. 20 Secrets de Jetpack — #wcparis — 2015 if ( function_exists( 'jetpack_photon_url' ) ) { $args = array( 'crop' => '45,45,250px,250px', ); echo jetpack_photon_url( esc_url( $image_url ), $args ); }
21. Secrets de Jetpack — #wcparis — 2016 SSO 21
22. 22 Secrets de Jetpack — #wcparis — 2015 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' ); Plus encore sur wpne.ws/jp2fa
23. Secrets de Jetpack — #wcparis — 2016 Tonesque 23
24. Secrets de Jetpack — #wcparis — 2016 Tonesque • Sélectionne 5 points dans une image et créé une couleur moyenne • Créé aussi une couleur de contraste (noir ou blanc) • http://wpne.ws/tonesque 24
25. 25 Secrets de Jetpack — #wcparis — 2015 function jeherve_ajouter_tonesque() { add_theme_support( ‘tonesque’ ); }
26. 26 Secrets de Jetpack — #wcparis — 2015 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(), ); }
27. 27 Secrets de Jetpack — #wcparis — 2015
28. Secrets de Jetpack — #wcparis — 2016 Processeurs de CSS 28
29. 29 Secrets de Jetpack — #wcparis — 2015
30. Secrets de Jetpack — #wcparis — 2016 Processeurs de CSS • Processeur Sass, Less, et minification du résultat • https://wordpress.org/themes/umbra/ 30
31. 31 Secrets de Jetpack — #wcparis — 2015 /* 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; } /* * Modifier 1 couleur avec Sass wpne.ws/colorsass * Utiliser HSL pour vos couleurs wpne.ws/hslcouleur */
32. 32 Secrets de Jetpack — #wcparis — 2015 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' ); }
33. 33 Secrets de Jetpack — #wcparis — 2015
34. Questions? jeremy.hu/wcparis @jeherve jetpack.me/support