» » » API pentru personalizare teme WordPress – Previzualizarea

API pentru personalizare teme WordPress – Previzualizarea

postat în: Știri | 0

personalizare teme WordPress

Acest pas este opțional, dar poate îmbunătăți în mod dramatic experiența utilizatorului. Această tehnică foloseste puțin JavaScript personalizat în combinație cu setările pentru o personalizare a temei mai rapidă, mai interactivă. Dacă acest lucru nu este folosit, atunci actualizările sunt prestate de reîncărcarea întregii ferestre de previzualizare.

Pentru a crea acest sistem JavaScript, trebuie să faceți următoarele:

1 – Asigurați-vă că setările sunt toate configurate pentru previzualizare live (‘transport’=>’postMessage’)

2 – Creați un nou fișier JavaScript (de exemplu, theme-customize.js) care să se ocupe de schimbările în direct

3 – Crearea unui cârlig pentru ‘customize_preview_init‘, care pune în coadă fișierul js

Vom trece prin toate 3 etape în detaliu …

Pasul 1: Actualizați setările

În primul rând, asigurați-vă că toate setările personalizate pe care le-ați creat au setat ‘transport’=>’postMessage’. Aceasta va dezactiva comportamentul automat de reîmprospătare atunci când schimbați această setare, permițându-vă să definiți orice manipulator personalizat de JavaScript.

Rețineți că toate setările de personalizare a temei WordPress folosește ‘transport’=>’refresh’ în mod implicit, deci, dacă doriți să faceți opțiunile implicite încorporate în personalizarea temei sî profite de asemenea de acest lucru, puteți actualiza cu ușurință metoda de transport în  funcția cârlig ‘customize_register‘ asrfel:

$wp_customize->get_setting( ‘blogname’ )->transport = ‘postMessage’;
$wp_customize->get_setting( ‘blogdescription’ )->transport = ‘postMessage’;
$wp_customize->get_setting( ‘header_textcolor’ )->transport = ‘postMessage’;
$wp_customize->get_setting( ‘background_color’ )->transport = ‘postMessage’;

Pasul 2: Creați un fișier JavaScript

Apoi, aveți nevoie să creați un nou fișier JavaScript pentru toate manipulările personalizate. În general, ați apela această theme-customizer.js și ați plasa în temă folderul ‘js/, dar îl puteți apela oricând doriți sau să îl puneți oriunde doriți.

Conținutul fișierului theme-customizer.js ar putea arăta astfel:

/**
* Acest fișier adaugă LIVE la previzualizarea live a personalizării temei. Pentru a realiza
* acest lucru, setați setările personalizate pentru „postMessage” și apoi adăugați manipulartorul
* aici. JavaScript trebuie să preia setările de la controalele personalizării, și
* apoi să facă orice modificări necesare la pagină folosind jQuery.
*/
( function( $ ) {

// Actualizați titlul site-ului în timp real …
wp.customize( ‘blogname’, function( value ) {
value.bind( function( newval ) {
$( ‘#site-title a’ ).html( newval );
} );
} );

// Actualizați descrierea site-ului în timp real …
wp.customize( ‘blogdescription’, function( value ) {
value.bind( function( newval ) {
$( ‘.site-description’ ).html( newval );
} );
} );

// Actualiza culoarea titlului site-ului în timp real …
wp.customize( ‘header_textcolor’, function( value ) {
value.bind( function( newval ) {
$(‘#site-title a’).css(‘color’, newval );
} );
} );

// Actualiza culoarea de fundal a site-ului…
wp.customize( ‘background_color’, function( value ) {
value.bind( function( newval ) {
$(‘body’).css(‘background-color’, newval );
} );
} );

//Actualiza culoarea link-urilor site-ului în timp real…
wp.customize( ‘link_textcolor’, function( value ) {
value.bind( function( newval ) {
$(‘a’).css(‘color’, newval );
} );
} );

} )( jQuery );

După cum puteți vedea din exemplul de mai sus, un singur manipulator de bază arată astfel:

wp.customize( ‘YOUR_SETTING_ID’, function( value ) {
value.bind( function( newval ) {
// Face diverse (variabila newval conține „noile” date ale setării)
} );
} );

Pasul 3: Puneți în coadă JavaScript

În cele din urmă, trebuie pur și simplu să vă asigurați cp JavaScript este pus în coadă.

Pentru a se asigura că fișierul este încărcat numai pe ecranul de administrare a personalizării temei (și nu direct pe site), ar trebui să utilizați cârligul customize_preview_init.

De exemplu…

/**
* Folosit de cârligul: ‘customize_preview_init’
*
* @see add_action(‘customize_preview_init’,$func)
*/
public static function mytheme_customizer_live_preview()
{
wp_enqueue_script(
‘mytheme-themecustomizer’, //Dă scriptului un ID
get_template_directory_uri().’/assets/js/theme-customizer.js’,//Direcționează către fișier
array( ‘jquery’,’customize-preview’ ), //Definește dependenșele
”, //Definește o versiune (opțional)
true //Pune scriptul în subsol?
);
}
add_action( ‘customize_preview_init’, ‘mytheme_customizer_live_preview’ );

Exemplu de clasă pentru personalizarea temei

Acest eșantion prezintă o posibila implementare a unei clase de bază pentru personalizarea temei care poate fi ușor încorporată în orice temă existentă. Acest exemplu de clasă face uz chiar de metoda de transport postMessage pentru previzualizarea live cu JavaScript a personalizării temei.

Rețineți că această clasă ar trebui să fie utilizată în asociere cu fișierul theme-customize.js exemplificat mai devreme în acest articol.

<?php
/**
* Conține metode pentru personalizarea ecranului de personalizare a temei.
*
* @link http://codex.wordpress.org/Theme_Customization_API
* @since MyTheme 1.0
*/
class MyTheme_Customize {
/**
* Aceasta se agață în „customize_register” (disponibil începând cu WP 3.4) și vă permite
* să adăugați noi secțiuni și controale la ecranul de personalizare a temei.
*
* Notă: Pentru a activa previzualizarea instant, trebuie să scriem de fapt un mic cod personalizat
* javascript.
*
* @see add_action(‘customize_register’,$func)
* @param WP_Customize_Manager $wp_customize
* @link http://ottopress.com/2012/how-to-leverage-the-theme-customizer-in-your-own-themes/
* @since MyTheme 1.0
*/
public static function register ( $wp_customize ) {
//1. Definiți o nouă secțiune (dacă se dorește) la personalizarea temei
$wp_customize->add_section( ‘mytheme_options’,
array(
‘title’ => __( ‘Opțiunile temei mele’, ‘mytheme’ ), //Titlu vizibil al secțiunii
‘priority’ => 35, //Determină ordinea în care va apare
‘capability’ => ‘edit_theme_options’, //Capabilitatea necesară pentru optimizare
‘description’ => __(‘Permite personalizarea unor setări de exemple pentru MyTheme.’, ‘mytheme’), //Tooltip descriptiv
)
);

//2. Înregistrează noi setări în baza de date WP…
$wp_customize->add_setting( ‘link_textcolor’, //Nu este nevoie să se folosească un nume SERIALIZAT, întrucât setările `theme_mod` sunt deja live într-o înregistrare a bazei de date
array(
‘default’ => ‘#2BA6CB’, //Setare/valoare implicită de salvat
‘type’ => ‘theme_mod’, //Este aceasta o ‘option’ sau o ‘theme_mod’?
‘capability’ => ‘edit_theme_options’, //Opțional. Permisii speciale pentru accesarea acestei setări.
‘transport’ => ‘postMessage’, //Ce a inițiat o reîmprospătare a setării? ‘refresh’ sau ‘postMessage’ (instant)?
)
);

//3. În final, definim controlul însuși (care leagă o setare de o secțiune și redă controalele HTML)…
$wp_customize->add_control( new WP_Customize_Color_Control( //Stabilește clasa de control a culorii
$wp_customize, //Trece obiectul $wp_customize (necesar)
‘mytheme_link_textcolor’, //Stabilește un ID unic pentru control
array(
‘label’ => __( ‘Link Color’, ‘mytheme’ ), //Numele controlului vizibil de admin
‘section’ => ‘colors’, //ID-ul secțiunii pe care acest control trebuie să îl redea (poate fi unul de-al dvs., sau o secșiune implicită WordPress)
‘settings’ => ‘link_textcolor’, //Ce setare se încarcă sau este manipulată (serializată este în regulă)
‘priority’ => 10, //Determină ordinea în care acest control apare pentru secțiunea specificată
)
) );

//4. Putem schimba setările interne prin modificarea proprietăților. De exemplu, să facem uz de previzualizarea live JS…
$wp_customize->get_setting( ‘blogname’ )->transport = ‘postMessage’;
$wp_customize->get_setting( ‘blogdescription’ )->transport = ‘postMessage’;
$wp_customize->get_setting( ‘header_textcolor’ )->transport = ‘postMessage’;
$wp_customize->get_setting( ‘background_color’ )->transport = ‘postMessage’;
}

/**
* Acest lucru va obține setările WordPress personalizate pentru antetul WP al temei.
*
* Folosit de cârligul: ‘wp_head’
*
* @see add_action(‘wp_head’,$func)
* @since MyTheme 1.0
*/
public static function header_output() {
?>
<!–Customizer CSS–>
<style type=”text/css”>
<?php self::generate_css(‘#site-title a’, ‘color’, ‘header_textcolor’, ‘#’); ?>
<?php self::generate_css(‘body’, ‘background-color’, ‘background_color’, ‘#’); ?>
<?php self::generate_css(‘a’, ‘color’, ‘link_textcolor’); ?>
</style>
<!–/Customizer CSS–>
<?php
}

/**
* Aceasta va obține javascript necesar pentru automatizarea previzualizării live a setărilor.
* De asemenea de reținut că această funcție nu este necesară dacă setările dvs.
* nu folosesc ‘transport’=>’postMessage’ în loc de ‘transport’ implicit
* => ‘refresh’
*
* Folosit de cârligul: ‘customize_preview_init’
*
* @see add_action(‘customize_preview_init’,$func)
* @since MyTheme 1.0
*/
public static function live_preview() {
wp_enqueue_script(
‘mytheme-themecustomizer’, // Dă scriptului un ID unic
get_template_directory_uri() . ‘/assets/js/theme-customizer.js’, // Definește calea către fișierul JS
array(  ‘jquery’, ‘customize-preview’ ), // Definește dependențele
”, // Definește o versiune (opțional)
true // Specifică dacă să se pună în subsol (lăsați adevărat)
);
}

/**
* Acest lucru va genera o linie de CSS pentru a fi utilizată în obținerea antetului. Dacă setarea
* ($mod_name) nu are nicio valoare definită, CSS nu va fi obținut.
*
* @uses get_theme_mod()
* @param string $selector Selector CSS
* @param string $style Numele *proprietății* CSS de modificat
* @param string $mod_name Numele opțiunii ‘theme_mod’ de preluat
* @param string $prefix Opțional. Orice care trebuie să fie obținut înainte de proprietatea CSS
* @param string $postfix Opțional. Orice care trebuie să fie obținut după proprietatea CSS
* @param bool $echo Opțional. Dacă va fi listat direct pe pagină (implicit: adevărat).
* @return string Returnează o singură- linie de CSS cu selectoare și o proprietate.
* @since MyTheme 1.0
*/
public static function generate_css( $selector, $style, $mod_name, $prefix=”, $postfix=”, $echo=true ) {
$return = ”;
$mod = get_theme_mod($mod_name);
if ( ! empty( $mod ) ) {
$return = sprintf(‘%s { %s:%s; }’,
$selector,
$style,
$prefix.$mod.$postfix
);
if ( $echo ) {
echo $return;
}
}
return $return;
}
}

// Configureazaă setările și controalele personalizării temei…
add_action( ‘customize_register’ , array( ‘MyTheme_Customize’ , ‘register’ ) );

// Obține CSS personalizat pentru site-ul live
add_action( ‘wp_head’ , array( ‘MyTheme_Customize’ , ‘header_output’ ) );

// Pune în coadă javascript pentru previzualizare live în ecranul de administrare a personalizării temei
add_action( ‘customize_preview_init’ , array( ‘MyTheme_Customize’ , ‘live_preview’ ) );

Traducere din wordpress.org

Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *