Slide 1
Slide 1 text
Les secrets de Jetpack
Gagnez du temps dans vos projets !
Slide 2
Slide 2 text
Secrets de Jetpack — WordPress Nice— 2016
• jetpack.com
• Plus d’un million de sites actifs
• 36 modules
• et quelques secrets…
2
Slide 3
Slide 3 text
Secrets de Jetpack — WordPress Nice— 2016
Jeremy Herve
• Mécano Jetpack chez Automattic
• jeremy.hu
• @jeherve
3
Slide 4
Slide 4 text
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
Slide 5
Slide 5 text
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
Slide 6
Slide 6 text
Secrets de Jetpack — WordPress Nice— 2016
Faisons du tri
6
Slide 7
Slide 7 text
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 );
Slide 8
Slide 8 text
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' );
Slide 9
Slide 9 text
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' );
Slide 10
Slide 10 text
Secrets de Jetpack — WordPress Nice— 2016
Types de Contenu
Personnalisés (CPT)
10
Slide 11
Slide 11 text
Secrets de Jetpack — WordPress Nice— 2016
Types de Contenu Personnalisés (CPT)
• Jetpack inclut 4 types de CPT :
• Témoignages
• Portfolios
• Menus
• BDs
11
Slide 12
Slide 12 text
12
Secrets de Jetpack — WordPress Nice — 2016
function jeherve_ajouter_portfolios() {
add_theme_support( ‘jetpack-portfolio’ );
}
Slide 13
Slide 13 text
Secrets de Jetpack — WordPress Nice— 2016
Responsive Videos
13
Slide 14
Slide 14 text
14
Secrets de Jetpack — WordPress Nice — 2016
function jeherve_ajouter_responsive_videos() {
add_theme_support( ‘jetpack-responsive-videos’ );
}
Slide 15
Slide 15 text
Secrets de Jetpack — WordPress Nice— 2016
Fil d’Ariane
15
Slide 16
Slide 16 text
16
Secrets de Jetpack — WordPress Nice — 2016
if ( function_exists( 'jetpack_breadcrumbs' ) ) : ?>
Slide 17
Slide 17 text
Secrets de Jetpack — WordPress Nice— 2016
Markdown
17
Slide 18
Slide 18 text
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,
)
);
}
Slide 19
Slide 19 text
Secrets de Jetpack — WordPress Nice— 2016
Photon
19
Slide 20
Slide 20 text
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
Slide 21
Slide 21 text
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' );
Slide 22
Slide 22 text
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
);
}
Slide 23
Slide 23 text
Secrets de Jetpack — WordPress Nice— 2016
SSO
23
Slide 24
Slide 24 text
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
Slide 25
Slide 25 text
Secrets de Jetpack — WordPress Nice— 2016
Tonesque
25
Slide 26
Slide 26 text
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
Slide 27
Slide 27 text
27
Secrets de Jetpack — WordPress Nice — 2016
function jeherve_ajouter_tonesque() {
add_theme_support( ‘tonesque’ );
}
Slide 28
Slide 28 text
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(),
);
}
Slide 29
Slide 29 text
29
Secrets de Jetpack — WordPress Nice — 2016
Slide 30
Slide 30 text
Secrets de Jetpack — WordPress Nice— 2016
Processeurs
de CSS
30
Slide 31
Slide 31 text
31
Secrets de Jetpack — #wcparis — 2015
Slide 32
Slide 32 text
Secrets de Jetpack — WordPress Nice— 2016
Processeurs de CSS
• Processeur Sass, Less, et minification du résultat
• https://wordpress.org/themes/umbra/
32
Slide 33
Slide 33 text
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
*/
Slide 34
Slide 34 text
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' );
}
Slide 35
Slide 35 text
35
Secrets de Jetpack — #wcparis — 2015
Slide 36
Slide 36 text
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
Slide 37
Slide 37 text
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
Slide 38
Slide 38 text
38
Secrets de Jetpack — #wcparis — 2015
Slide 39
Slide 39 text
39
Secrets de Jetpack — #wcparis — 2015
Slide 40
Slide 40 text
Secrets de Jetpack — WordPress Nice— 2016
Un dernier
petit secret…
40
Slide 41
Slide 41 text
Questions?
jeremy.hu/talks/wpnice-jetpack
@jeherve
jetpack.com/support