WPtech: L'API Customizer pour les plugins

3 057 vues

Publié le

Comment utiliser l'API customizer pour les plugins ? Suivez le guide !

Publié dans : Internet
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
3 057
Sur SlideShare
0
Issues des intégrations
0
Intégrations
1 305
Actions
Partages
0
Téléchargements
15
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

WPtech: L'API Customizer pour les plugins

  1. 1. L'API CUSTOMIZER POUR LES PLUGINS © REMI CORSON 2015 - WPtech Nantes 5 Déc. 2015
  2. 2. REMICORSONAUTOMATTIC / WOOTHEMES / WOOCOMMERCE @REMICORSON - REMICORSON.COM © REMI CORSON 2015 - WPtech Nantes 5 Déc. 2015
  3. 3. © REMI CORSON 2015 - WPtech Nantes 5 Déc. 2015
  4. 4. L'EMETTEUR EST TOUJOURS RESPONSABLE DE L'IMCOMPREHENSION DE SON MESSAGE© REMI CORSON 2015 - WPtech Nantes 5 Déc. 2015
  5. 5. EXEMPLES © REMI CORSON 2015 - WPtech Nantes 5 Déc. 2015
  6. 6. © REMI CORSON 2015 - WPtech Nantes 5 Déc. 2015
  7. 7. © REMI CORSON 2015 - WPtech Nantes 5 Déc. 2015
  8. 8. © REMI CORSON 2015 - WPtech Nantes 5 Déc. 2015
  9. 9. PENDANT CE TEMPS... © REMI CORSON 2015 - WPtech Nantes 5 Déc. 2015
  10. 10. © REMI CORSON 2015 - WPtech Nantes 5 Déc. 2015
  11. 11. ET POUR LES PLUGINS ? © REMI CORSON 2015 - WPtech Nantes 5 Déc. 2015
  12. 12. © REMI CORSON 2015 - WPtech Nantes 5 Déc. 2015
  13. 13. 3 POSSIBILITÉS © REMI CORSON 2015 - WPtech Nantes 5 Déc. 2015
  14. 14. > Hooker les options du thème > Hooker Les options de votre plugin > Hooker les options d'un autre plugin © REMI CORSON 2015 - WPtech Nantes 5 Déc. 2015
  15. 15. DEMO© REMI CORSON 2015 - WPtech Nantes 5 Déc. 2015
  16. 16. © REMI CORSON 2015 - WPtech Nantes 5 Déc. 2015
  17. 17. 8 ETAPES © REMI CORSON 2015 - WPtech Nantes 5 Déc. 2015
  18. 18. 1 - AJOUTER UN BOUTON © REMI CORSON 2015 - WPtech Nantes 5 Déc. 2015
  19. 19. © REMI CORSON 2015 - WPtech Nantes 5 Déc. 2015
  20. 20. // Ajout d'options aux paramètres existants add_action( 'woocommerce_products_general_settings', array( $this, 'product_settings' ) ); © REMI CORSON 2015 - WPtech Nantes 5 Déc. 2015
  21. 21. public function product_settings( $settings ) { // Configuration du bouton $customizer_settings[] = array( 'title' => __( 'WooCommerce Customizer', '' ), 'type' => 'title', 'id' => 'product_customizer', ); $customizer_settings[] = array( 'title' => __( 'Pimp my shop!', '' ), 'desc' => __( 'Customize WooCommerce', '' ), 'type' => 'wc_product_customize_button', 'id' => 'product_customizer_button', 'link' => $this->customizer_url, // Attention ! ); $customizer_settings[] = array( 'type' => 'sectionend', 'id' => 'product_customizer_sectionend', ); $settings = array_merge( $customizer_settings, $settings ); return $settings; } © REMI CORSON 2015 - WPtech Nantes 5 Déc. 2015
  22. 22. // Ajout d'une action pour notre bouton add_action( 'woocommerce_admin_field_wc_product_customize_button', array( $this, 'customize_button' ) ); © REMI CORSON 2015 - WPtech Nantes 5 Déc. 2015
  23. 23. // Création du rendu du bouton public function customize_button( $settings ) { ?> <tr valign="top"> <th scope="row" class="titledesc"><?php echo $settings['desc'];?></th> <td class="forminp forminp-<?php echo sanitize_title( $settings['type'] ) ?>"> <a href="<?php echo $settings['link']; ?>"> <button name="<?php echo esc_attr( $settings['id'] ); ?>" id="<?php echo esc_attr( $settings['id'] ); ?>" style="<?php echo esc_attr( $settings['css'] ); ?>" class="button-secondary <?php echo esc_attr( $settings['class'] ); ?>" type="button"> <?php echo $settings['title']; ?> </button> </a> </td> </tr> <?php return true; } © REMI CORSON 2015 - WPtech Nantes 5 Déc. 2015
  24. 24. 2 - DÉTERMINER L'URL DU CUSTOMIZER © REMI CORSON 2015 - WPtech Nantes 5 Déc. 2015
  25. 25. /** * Constructeur */ public function __construct() { self::$_this = $this; $this->_set_customizer_url(); //... } © REMI CORSON 2015 - WPtech Nantes 5 Déc. 2015
  26. 26. // Définition de l'URL du Customizer private function _set_customizer_url() { $url = admin_url( 'customize.php' ); $url = add_query_arg( 'wc-product-customizer', 'true', $url ); $url = add_query_arg( 'url', wp_nonce_url( site_url() . '/?wc-product-customizer=true', 'preview-shop' ), $url ); // Passage d'un marqueur d'URL $url = add_query_arg( 'return', urlencode( add_query_arg( array( 'page' => 'wc-settings', 'tab' => 'products' ), admin_url( 'admin.php' ) ) ), $url ); // URL de retour $this->customizer_url = esc_url_raw( $url ); return true; } © REMI CORSON 2015 - WPtech Nantes 5 Déc. 2015
  27. 27. © REMI CORSON 2015 - WPtech Nantes 5 Déc. 2015
  28. 28. 3 - CRÉER LES OPTIONS DU CUSTOMIZER © REMI CORSON 2015 - WPtech Nantes 5 Déc. 2015
  29. 29. add_filter( 'customize_register', array( $this, 'customizer_sections' ), 40 ); add_filter( 'customize_register', array( $this, 'customizer_settings' ) ); add_filter( 'customize_register', array( $this, 'customizer_controls' ), 50 ); © REMI CORSON 2015 - WPtech Nantes 5 Déc. 2015
  30. 30. // Ajout de section $wp_customize->add_section( 'wc_product_colors', array ( 'title' => __( 'WooCommerce', '' ), 'capability' => 'edit_theme_options', 'priority' => 10, ) ); © REMI CORSON 2015 - WPtech Nantes 5 Déc. 2015
  31. 31. $wp_customize->add_setting( 'woocommerce_buttons_background_color', array( 'type' => 'option', // Attention ! 'default' => '#f5f5f5', 'transport' => 'postMessage', ) ); © REMI CORSON 2015 - WPtech Nantes 5 Déc. 2015
  32. 32. $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'wc_product_bg_color_control', array( 'label' => __( 'Button Background Color', '' ), 'priority' => 10, 'section' => 'wc_product_colors', 'settings' => 'woocommerce_buttons_background_color', ) ) ); © REMI CORSON 2015 - WPtech Nantes 5 Déc. 2015
  33. 33. 4 - CHARGER LA PAGE CONCERNÉE © REMI CORSON 2015 - WPtech Nantes 5 Déc. 2015
  34. 34. // Redirection du customizer sur la page boutique add_action( 'template_redirect', array( $this, 'load_shop_page' ) ); © REMI CORSON 2015 - WPtech Nantes 5 Déc. 2015
  35. 35. public function load_shop_page( $wp_query ) { // chargement conditionnel basé sur get_query_var if ( get_query_var( $this->_trigger ) ) { wp_redirect( get_permalink( get_option( 'woocommerce_shop_page_id' ) ) ); exit; } return $wp_query; } © REMI CORSON 2015 - WPtech Nantes 5 Déc. 2015
  36. 36. PETITE PAUSE © REMI CORSON 2015 - WPtech Nantes 5 Déc. 2015
  37. 37. © REMI CORSON 2015 - WPtech Nantes 5 Déc. 2015
  38. 38. © REMI CORSON 2015 - WPtech Nantes 5 Déc. 2015
  39. 39. © REMI CORSON 2015 - WPtech Nantes 5 Déc. 2015
  40. 40. © REMI CORSON 2015 - WPtech Nantes 5 Déc. 2015
  41. 41. © REMI CORSON 2015 - WPtech Nantes 5 Déc. 2015
  42. 42. 5 - AJOUTER UN MARQUEUR © REMI CORSON 2015 - WPtech Nantes 5 Déc. 2015
  43. 43. public function __construct() { self::$_this = $this; // Définition d'un marqueur d'URL $this->_trigger = 'wc-product-customizer'; } © REMI CORSON 2015 - WPtech Nantes 5 Déc. 2015
  44. 44. // Ajout du marqueur dans l'URL add_filter( 'query_vars', array( $this, 'add_query_vars' ) ); © REMI CORSON 2015 - WPtech Nantes 5 Déc. 2015
  45. 45. public function add_query_vars( $vars ) { $vars[] = $this->_trigger; return $vars; } © REMI CORSON 2015 - WPtech Nantes 5 Déc. 2015
  46. 46. 6 - FAIRE UN NETTOYAGE DE PRINTEMPS © REMI CORSON 2015 - WPtech Nantes 5 Déc. 2015
  47. 47. if ( isset( $_GET[ $this->customizer_trigger ] ) ) { //... } © REMI CORSON 2015 - WPtech Nantes 5 Déc. 2015
  48. 48. // Suppression des options du thème add_filter( 'customize_register', array( $this, 'remove_sections' ), 40 ); © REMI CORSON 2015 - WPtech Nantes 5 Déc. 2015
  49. 49. public function remove_sections( $wp_customize ) { global $wp_customize; $wp_customize->remove_section( 'themes' ); return true; } © REMI CORSON 2015 - WPtech Nantes 5 Déc. 2015
  50. 50. // Supprime les panels non désirés public function remove_panels( $wp_customize ) { global $wp_customize; // crée une erreur de type 'undefined object notice' // bug WordPress core //$wp_customize->remove_panel( 'nav_menus' ); // Astuce $wp_customize->get_panel( 'nav_menus' )->active_callback = '__return_false'; return true; } © REMI CORSON 2015 - WPtech Nantes 5 Déc. 2015
  51. 51. © REMI CORSON 2015 - WPtech Nantes 5 Déc. 2015
  52. 52. 7 - AJOUT DE CSS & JS © REMI CORSON 2015 - WPtech Nantes 5 Déc. 2015
  53. 53. ( function( $ ) { 'use strict'; wp.customize( 'woocommerce_buttons_background_color', function( value ) { value.bind( function( newval ) { $( '.button' ).css( 'background-color', newval ); } ); } ); } )( jQuery ); © REMI CORSON 2015 - WPtech Nantes 5 Déc. 2015
  54. 54. public function enqueue_customizer_script() { wp_enqueue_script( 'woocommerce-product-customizer-live-preview', WC_PRODUCT_CUSTOMIZER_PLUGIN_URL . '/assets/js/customizer.js', array( 'jquery', 'customize-preview' ), WC_PRODUCT_CUSTOMIZER_VERSION, true ); return true; } © REMI CORSON 2015 - WPtech Nantes 5 Déc. 2015
  55. 55. add_filter( 'wp_footer', array( $this, 'add_styles' ) ); © REMI CORSON 2015 - WPtech Nantes 5 Déc. 2015
  56. 56. public function add_styles() { $styles = "n<style type='text/css' media='screen'>n"; $bg_color = '.woocommerce a.button { background-color: '; $bg_color .= get_option( 'woocommerce_buttons_background_color', '#f5f5f5' ) $bg_color .= '; }'; $styles .= $bg_color; $styles .= "n</style>n"; echo $styles; } © REMI CORSON 2015 - WPtech Nantes 5 Déc. 2015
  57. 57. 8 - LUSTRER LA BÊTE... © REMI CORSON 2015 - WPtech Nantes 5 Déc. 2015
  58. 58. © REMI CORSON 2015 - WPtech Nantes 5 Déc. 2015
  59. 59. © REMI CORSON 2015 - WPtech Nantes 5 Déc. 2015
  60. 60. // Afficher uniquement nos options if ( isset( $_GET[ $this->customizer_trigger ] ) ) { add_filter( 'customize_control_active', array( $this, 'control_filter' ), 10, 2 ); } © REMI CORSON 2015 - WPtech Nantes 5 Déc. 2015
  61. 61. public function control_filter( $active, $control ) { if ( in_array( $control->section, array( 'wc_product_colors' ) ) ) { return true; } return false; } © REMI CORSON 2015 - WPtech Nantes 5 Déc. 2015
  62. 62. QUESTIONS ? © REMI CORSON 2015 - WPtech Nantes 5 Déc. 2015
  63. 63. RDV À 14H00AVEC JULIEN OGER & PIERRE DARGHAM " PENSEZ WEB-PERFORMANCE AVEC WORDPRESS " © REMI CORSON 2015 - WPtech Nantes 5 Déc. 2015

×