WordPress Nice : Quelques petits secrets de Jetpack

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 le compte-rendu de ma présentation.

https://jeremy.hu/talks/wpnice-jetpack/

Transcript

1. Les secrets de Jetpack Gagnez du temps dans vos projets !
2. Secrets de Jetpack — WordPress Nice— 2016 • jetpack.com • Plus d’un million de sites actifs • 36 modules • et quelques secrets… 2
3. Secrets de Jetpack — WordPress Nice— 2016 Jeremy Herve • Mécano Jetpack chez Automattic • jeremy.hu • @jeherve 3
4. Secrets de Jetpack — WordPress Nice— 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 — WordPress Nice— 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 — WordPress Nice— 2016 Faisons du tri 6
7. 7 Secrets de Jetpack — WordPress Nice — 2016 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. 8 Secrets de Jetpack — WordPress Nice — 2016 // 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' );
9. 9 Secrets de Jetpack — WordPress Nice — 2016 // 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' );
10. Secrets de Jetpack — WordPress Nice— 2016 Types de Contenu Personnalisés (CPT) 10
11. Secrets de Jetpack — WordPress Nice— 2016 Types de Contenu Personnalisés (CPT) • Jetpack inclut 4 types de CPT : • Témoignages • Portfolios • Menus • BDs 11
12. 12 Secrets de Jetpack — WordPress Nice — 2016 function jeherve_ajouter_portfolios() { add_theme_support( ‘jetpack-portfolio’ ); }
13. Secrets de Jetpack — WordPress Nice— 2016 Responsive Videos 13
14. 14 Secrets de Jetpack — WordPress Nice — 2016 function jeherve_ajouter_responsive_videos() { add_theme_support( ‘jetpack-responsive-videos’ ); }
15. Secrets de Jetpack — WordPress Nice— 2016 Fil d’Ariane 15
16. 16 Secrets de Jetpack — WordPress Nice — 2016 if ( function_exists( 'jetpack_breadcrumbs' ) ) : ?> <div class="fil-ariane"> <?php jetpack_breadcrumbs(); ?> </div><!-- .fil-ariane --> <?php endif; ?>
17. Secrets de Jetpack — WordPress Nice— 2016 Markdown 17
18. 18 Secrets de Jetpack — WordPress Nice — 2016 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, ) ); }
19. Secrets de Jetpack — WordPress Nice— 2016 Photon 19
20. Secrets de Jetpack — WordPress Nice— 2016 Photon • CDN gratuit • Fonctionne sans aucun réglage • Une API vous permet de manipuler les images • https://developer.wordpress.com/docs/photon/ 20
21. 21 Secrets de Jetpack — WordPress Nice — 2016 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' );
22. 22 Secrets de Jetpack — WordPress Nice — 2016 if ( function_exists( 'jetpack_photon_url' ) ) { $args = array( 'crop' => '45,45,250px,250px', ); echo jetpack_photon_url( esc_url( $image_url ), $args ); }
23. Secrets de Jetpack — WordPress Nice— 2016 SSO 23
24. 24 Secrets de Jetpack — WordPress Nice — 2016 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
25. Secrets de Jetpack — WordPress Nice— 2016 Tonesque 25
26. Secrets de Jetpack — WordPress Nice— 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 26
27. 27 Secrets de Jetpack — WordPress Nice — 2016 function jeherve_ajouter_tonesque() { add_theme_support( ‘tonesque’ ); }
28. 28 Secrets de Jetpack — WordPress Nice — 2016 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(), ); }
29. 29 Secrets de Jetpack — WordPress Nice — 2016
30. Secrets de Jetpack — WordPress Nice— 2016 Processeurs de CSS 30
31. 31 Secrets de Jetpack — #wcparis — 2015
32. Secrets de Jetpack — WordPress Nice— 2016 Processeurs de CSS • Processeur Sass, Less, et minification du résultat • https://wordpress.org/themes/umbra/ 32
33. 33 Secrets de Jetpack — WordPress Nice — 2016 /* 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 */
34. 34 Secrets de Jetpack — WordPress Nice — 2016 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' ); }
35. 35 Secrets de Jetpack — #wcparis — 2015
36. Secrets de Jetpack — WordPress Nice— 2016 Monitor, vous connaissez ? • Visite votre site toutes les 5 minutes. • Vous envoie un e-mail si votre site est inaccessible pendant plus de 3 minutes d’affilée. 36
37. Secrets de Jetpack — WordPress Nice— 2016 L’API JSON, pour quoi faire ? • Permet d’interagir avec votre site depuis d’autres logiciels et applications. • StackEdit : éditeur Markdown en ligne, avec outils de collaboration à la Google Docs. • iAWriter : logiciel de rédaction pour Mac, iOS, et Android. • WordPress.com : site et logiciel pour Mac, Windows, et Linux 37
38. 38 Secrets de Jetpack — #wcparis — 2015
39. 39 Secrets de Jetpack — #wcparis — 2015
40. Secrets de Jetpack — WordPress Nice— 2016 Un dernier petit secret… 40
41. Questions? jeremy.hu/talks/wpnice-jetpack @jeherve jetpack.com/support