WPtech: L'API Customizer pour les plugins

L'API CUSTOMIZERPOUR LES PLUGINS

© REMI CORSON 2015 - WPtech Nantes 5 Déc. 2015

http://remicorson.com

REMICORSON

AUTOMATTIC / WOOTHEMES / WOOCOMMERCE

@REMICORSON - REMICORSON.COM




L'EMETTEUR ESTTOUJOURS RESPONSABLEDE L'IMCOMPREHENSION

DE SON MESSAGE© REMI CORSON 2015 - WPtech Nantes 5 Déc. 2015


EXEMPLES© REMI CORSON 2015 - WPtech Nantes 5 Déc. 2015


PENDANT CE TEMPS...



ET POUR LES PLUGINS ?



3 POSSIBILITÉS© REMI CORSON 2015 - WPtech Nantes 5 Déc. 2015


> Hooker les options du thème> Hooker Les options de votre plugin

> Hooker les options d'un autre plugin



DEMO© REMI CORSON 2015 - WPtech Nantes 5 Déc. 2015


8 ETAPES© REMI CORSON 2015 - WPtech Nantes 5 Déc. 2015


1 - AJOUTER UN BOUTON



// Ajout d'options aux paramètres existantsadd_action( 'woocommerce_products_general_settings', array( $this, 'product_settings' ) );



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



// Ajout d'une action pour notre boutonadd_action( 'woocommerce_admin_field_wc_product_customize_button', array( $this, 'customize_button' ) );



// Création du rendu du boutonpublic 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;}



2 - DÉTERMINER L'URL DU CUSTOMIZER



/** * Constructeur */public function __construct() { self::$_this = $this;

$this->_set_customizer_url();

//...}



// Définition de l'URL du Customizerprivate 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;}



3 - CRÉER LES OPTIONS DU CUSTOMIZER



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



// Ajout de section$wp_customize->add_section( 'wc_product_colors', array ( 'title' => __( 'WooCommerce', '' ), 'capability' => 'edit_theme_options', 'priority' => 10,) );



$wp_customize->add_setting( 'woocommerce_buttons_background_color', array( 'type' => 'option', // Attention ! 'default' => '#f5f5f5', 'transport' => 'postMessage',) );



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



4 - CHARGER LA PAGE CONCERNÉE



// Redirection du customizer sur la page boutiqueadd_action( 'template_redirect', array( $this, 'load_shop_page' ) );



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



PETITE PAUSE© REMI CORSON 2015 - WPtech Nantes 5 Déc. 2015


5 - AJOUTER UN MARQUEUR



public function __construct() { self::$_this = $this;

// Définition d'un marqueur d'URL $this->_trigger = 'wc-product-customizer';}



// Ajout du marqueur dans l'URLadd_filter( 'query_vars', array( $this, 'add_query_vars' ) );



public function add_query_vars( $vars ) { $vars[] = $this->_trigger;

return $vars;}



6 - FAIRE UN NETTOYAGE DE PRINTEMPS



if ( isset( $_GET[ $this->customizer_trigger ] ) ) {

//...

}



// Suppression des options du thèmeadd_filter( 'customize_register', array( $this, 'remove_sections' ), 40 );



public function remove_sections( $wp_customize ) { global $wp_customize;

$wp_customize->remove_section( 'themes' );

return true;}



// Supprime les panels non désiréspublic 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;}



7 - AJOUT DE CSS & JS



( function( $ ) { 'use strict';

wp.customize( 'woocommerce_buttons_background_color', function( value ) { value.bind( function( newval ) { $( '.button' ).css( 'background-color', newval ); } ); } );

} )( jQuery );



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



add_filter( 'wp_footer', array( $this, 'add_styles' ) );



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



8 - LUSTRER LA BÊTE...



// Afficher uniquement nos optionsif ( isset( $_GET[ $this->customizer_trigger ] ) ) { add_filter( 'customize_control_active', array( $this, 'control_filter' ), 10, 2 );}



public function control_filter( $active, $control ) { if ( in_array( $control->section, array( 'wc_product_colors' ) ) ) {

return true; }

return false;}



RDV À 14H00AVEC JULIEN OGER & PIERRE DARGHAM

" PENSEZ WEB-PERFORMANCE AVEC WORDPRESS "



WPtech: L'API Customizer pour les plugins

Internet

Transcript of WPtech: L'API Customizer pour les plugins