Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Découvrez les secrets de Jetpack !

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.

Jeremy Herve

February 06, 2016
Tweet

More Decks by Jeremy Herve

Other Decks in Technology

Transcript

  1. Les secrets de Jetpack
    Gagnez du temps dans vos projets !

    View full-size slide

  2. Secrets de Jetpack — #wcparis — 2016
    • jetpack.me
    • Plus d’un million de sites actifs
    • 36 modules
    • et quelques secrets…
    2

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  6. Secrets de Jetpack — #wcparis — 2016
    Faisons du tri
    6

    View full-size slide

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

    View full-size slide

  8. Secrets de Jetpack — #wcparis — 2016
    Site Logo
    8

    View full-size slide

  9. 9
    Secrets de Jetpack — #wcparis — 2015
    function jeherve_ajouter_site_logo() {
    add_theme_support( 'site-logo', array(
    'size' => 'full',
    ) );
    }

    View full-size slide

  10. 10
    Secrets de Jetpack — #wcparis — 2015
    if ( function_exists( 'jetpack_the_site_logo' ) ) {
    jetpack_the_site_logo();
    }

    View full-size slide

  11. Secrets de Jetpack — #wcparis — 2016
    Responsive Videos
    11

    View full-size slide

  12. 12
    Secrets de Jetpack — #wcparis — 2015
    function jeherve_ajouter_responsive_videos() {
    add_theme_support( ‘jetpack-responsive-videos’ );
    }

    View full-size slide

  13. Secrets de Jetpack — #wcparis — 2016
    Fil d’Ariane
    13

    View full-size slide

  14. 14
    Secrets de Jetpack — #wcparis — 2015
    if ( function_exists( 'jetpack_breadcrumbs' ) ) : ?>




    View full-size slide

  15. Secrets de Jetpack — #wcparis — 2016
    Markdown
    15

    View full-size slide

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

    View full-size slide

  17. Secrets de Jetpack — #wcparis — 2016
    Photon
    17

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  21. Secrets de Jetpack — #wcparis — 2016
    SSO
    21

    View full-size slide

  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

    View full-size slide

  23. Secrets de Jetpack — #wcparis — 2016
    Tonesque
    23

    View full-size slide

  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

    View full-size slide

  25. 25
    Secrets de Jetpack — #wcparis — 2015
    function jeherve_ajouter_tonesque() {
    add_theme_support( ‘tonesque’ );
    }

    View full-size slide

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

    View full-size slide

  27. 27
    Secrets de Jetpack — #wcparis — 2015

    View full-size slide

  28. Secrets de Jetpack — #wcparis — 2016
    Processeurs
    de CSS
    28

    View full-size slide

  29. 29
    Secrets de Jetpack — #wcparis — 2015

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  33. 33
    Secrets de Jetpack — #wcparis — 2015

    View full-size slide

  34. Questions?
    jeremy.hu/wcparis
    @jeherve
    jetpack.me/support

    View full-size slide