Slide 1
Slide 1 text
Les secrets de Jetpack
Gagnez du temps dans vos projets !
Slide 2
Slide 2 text
Secrets de Jetpack — #wcparis — 2016
• jetpack.me
• Plus d’un million de sites actifs
• 36 modules
• et quelques secrets…
2
Slide 3
Slide 3 text
Secrets de Jetpack — #wcparis — 2016
Jeremy Herve
• Mécano Jetpack chez Automattic
• jeremy.hu
• @jeherve
3
Slide 4
Slide 4 text
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
Slide 5
Slide 5 text
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
Slide 6
Slide 6 text
Secrets de Jetpack — #wcparis — 2016
Faisons du tri
6
Slide 7
Slide 7 text
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 );
Slide 8
Slide 8 text
Secrets de Jetpack — #wcparis — 2016
Site Logo
8
Slide 9
Slide 9 text
9
Secrets de Jetpack — #wcparis — 2015
function jeherve_ajouter_site_logo() {
add_theme_support( 'site-logo', array(
'size' => 'full',
) );
}
Slide 10
Slide 10 text
10
Secrets de Jetpack — #wcparis — 2015
if ( function_exists( 'jetpack_the_site_logo' ) ) {
jetpack_the_site_logo();
}
Slide 11
Slide 11 text
Secrets de Jetpack — #wcparis — 2016
Responsive Videos
11
Slide 12
Slide 12 text
12
Secrets de Jetpack — #wcparis — 2015
function jeherve_ajouter_responsive_videos() {
add_theme_support( ‘jetpack-responsive-videos’ );
}
Slide 13
Slide 13 text
Secrets de Jetpack — #wcparis — 2016
Fil d’Ariane
13
Slide 14
Slide 14 text
14
Secrets de Jetpack — #wcparis — 2015
if ( function_exists( 'jetpack_breadcrumbs' ) ) : ?>
Slide 15
Slide 15 text
Secrets de Jetpack — #wcparis — 2016
Markdown
15
Slide 16
Slide 16 text
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,
)
);
}
Slide 17
Slide 17 text
Secrets de Jetpack — #wcparis — 2016
Photon
17
Slide 18
Slide 18 text
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
Slide 19
Slide 19 text
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' );
Slide 20
Slide 20 text
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
);
}
Slide 21
Slide 21 text
Secrets de Jetpack — #wcparis — 2016
SSO
21
Slide 22
Slide 22 text
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
Slide 23
Slide 23 text
Secrets de Jetpack — #wcparis — 2016
Tonesque
23
Slide 24
Slide 24 text
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
Slide 25
Slide 25 text
25
Secrets de Jetpack — #wcparis — 2015
function jeherve_ajouter_tonesque() {
add_theme_support( ‘tonesque’ );
}
Slide 26
Slide 26 text
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(),
);
}
Slide 27
Slide 27 text
27
Secrets de Jetpack — #wcparis — 2015
Slide 28
Slide 28 text
Secrets de Jetpack — #wcparis — 2016
Processeurs
de CSS
28
Slide 29
Slide 29 text
29
Secrets de Jetpack — #wcparis — 2015
Slide 30
Slide 30 text
Secrets de Jetpack — #wcparis — 2016
Processeurs de CSS
• Processeur Sass, Less, et minification du résultat
• https://wordpress.org/themes/umbra/
30
Slide 31
Slide 31 text
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
*/
Slide 32
Slide 32 text
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' );
}
Slide 33
Slide 33 text
33
Secrets de Jetpack — #wcparis — 2015
Slide 34
Slide 34 text
Questions?
jeremy.hu/wcparis
@jeherve
jetpack.me/support