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 !
   

   View Slide

2. Secrets de Jetpack — WordPress Nice— 2016
   • jetpack.com
   • Plus d’un million de sites actifs
   • 36 modules
   • et quelques secrets…
   2
   

   View Slide

3. Secrets de Jetpack — WordPress Nice— 2016
   Jeremy Herve
   • Mécano Jetpack chez Automattic
   • jeremy.hu
   • @jeherve
   3
   

   View Slide

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
   

   View Slide

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
   

   View Slide

6. Secrets de Jetpack — WordPress Nice— 2016
   Faisons du tri
   6
   

   View Slide

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 );
   

   View Slide

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' );
   

   View Slide

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' );
   

   View Slide

10. Secrets de Jetpack — WordPress Nice— 2016
    Types de Contenu
    Personnalisés (CPT)
    10
    

    View Slide

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
    

    View Slide

12. 12
    Secrets de Jetpack — WordPress Nice — 2016
    function jeherve_ajouter_portfolios() {
    add_theme_support( ‘jetpack-portfolio’ );
    }
    

    View Slide

13. Secrets de Jetpack — WordPress Nice— 2016
    Responsive Videos
    13
    

    View Slide

14. 14
    Secrets de Jetpack — WordPress Nice — 2016
    function jeherve_ajouter_responsive_videos() {
    add_theme_support( ‘jetpack-responsive-videos’ );
    }
    

    View Slide

15. Secrets de Jetpack — WordPress Nice— 2016
    Fil d’Ariane
    15
    

    View Slide

16. 16
    Secrets de Jetpack — WordPress Nice — 2016
    if ( function_exists( 'jetpack_breadcrumbs' ) ) : ?>
    
    
    
    
    

    View Slide

17. Secrets de Jetpack — WordPress Nice— 2016
    Markdown
    17
    

    View Slide

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,
    )
    );
    }
    

    View Slide

19. Secrets de Jetpack — WordPress Nice— 2016
    Photon
    19
    

    View Slide

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
    

    View Slide

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' );
    

    View Slide

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
    );
    }
    

    View Slide

23. Secrets de Jetpack — WordPress Nice— 2016
    SSO
    23
    

    View Slide

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
    

    View Slide

25. Secrets de Jetpack — WordPress Nice— 2016
    Tonesque
    25
    

    View Slide

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
    

    View Slide

27. 27
    Secrets de Jetpack — WordPress Nice — 2016
    function jeherve_ajouter_tonesque() {
    add_theme_support( ‘tonesque’ );
    }
    

    View Slide

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(),
    );
    }
    

    View Slide

29. 29
    Secrets de Jetpack — WordPress Nice — 2016
    

    View Slide

30. Secrets de Jetpack — WordPress Nice— 2016
    Processeurs
    de CSS
    30
    

    View Slide

31. 31
    Secrets de Jetpack — #wcparis — 2015
    

    View Slide

32. Secrets de Jetpack — WordPress Nice— 2016
    Processeurs de CSS
    • Processeur Sass, Less, et minification du résultat
    • https://wordpress.org/themes/umbra/
    32
    

    View Slide

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
    */
    

    View Slide

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' );
    }
    

    View Slide

35. 35
    Secrets de Jetpack — #wcparis — 2015
    

    View Slide

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
    

    View Slide

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
    

    View Slide

38. 38
    Secrets de Jetpack — #wcparis — 2015
    

    View Slide

39. 39
    Secrets de Jetpack — #wcparis — 2015
    

    View Slide

40. Secrets de Jetpack — WordPress Nice— 2016
    Un dernier
    petit secret…
    40
    

    View Slide

41. Questions?
    jeremy.hu/talks/wpnice-jetpack
    @jeherve
    jetpack.com/support
    

    View Slide