Découvrez les secrets de Jetpack !

080b72863363c81d51727237b29439eb?s=47 Jeremy Herve
February 06, 2016

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.

080b72863363c81d51727237b29439eb?s=128

Jeremy Herve

February 06, 2016
Tweet

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