WPtech: L'API Customizer pour les plugins

L'API CUSTOMIZER
POUR LES PLUGINS
© REMI CORSON 2015 - WPtech Nantes 5 Déc. 2015

REMICORSONAUTOMATTIC / WOOTHEMES / WOOCOMMERCE
@REMICORSON - REMICORSON.COM

L'EMETTEUR EST
TOUJOURS RESPONSABLE
DE L'IMCOMPREHENSION
DE SON MESSAGE© REMI CORSON 2015 - WPtech Nantes 5 Déc. 2015

EXEMPLES

PENDANT CE TEMPS...

ET POUR LES PLUGINS ?

3 POSSIBILITÉS

> 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

1 - AJOUTER UN BOUTON

// Ajout d'options aux paramètres existants
add_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',
);
'title' => __( 'Pimp my shop!', '' ),
'desc' => __( 'Customize WooCommerce', '' ),
'type' => 'wc_product_customize_button',
'id' => 'product_customizer_button',
'link' => $this->customizer_url, // Attention !
);
'type' => 'sectionend',
'id' => 'product_customizer_sectionend',
);
$settings = array_merge( $customizer_settings, $settings );
return $settings;
}

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

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

2 - DÉTERMINER L'URL DU CUSTOMIZER

/**
* Constructeur
*/
public function __construct() {
self::$_this = $this;
$this->_set_customizer_url();
//...
}

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

3 - CRÉER LES OPTIONS DU CUSTOMIZER

add_filter( 'customize_register', array(
$this,
'customizer_sections'
),
40
);
$this,
'customizer_settings'
)
);
$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 boutique
add_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

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'URL
add_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ème
$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é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;
}

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 options
if ( 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;
}

QUESTIONS ?

RDV À 14H00AVEC JULIEN OGER & PIERRE DARGHAM
" PENSEZ WEB-PERFORMANCE AVEC WORDPRESS "

WPtech: L'API Customizer pour les plugins

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (20)

Similaire à WPtech: L'API Customizer pour les plugins

Similaire à WPtech: L'API Customizer pour les plugins (20)

Plus de corsonr

Plus de corsonr (6)

Dernier

Dernier (17)

WPtech: L'API Customizer pour les plugins