Boilerplate de personalizare a temei WordPress
  1. 1. Introducere în personalizatorul de temă WordPress
  2. 2. Interacționând cu personalizatorul de temă WordPress
  3. 3. Acum citesc: Boilerplate de personalizare a temei WordPress
  4. 4. Extinderea boilerplatei cu tema WordPress
  5. 5. Tema Customizer Boilerplate – Opțiuni condiționale, Teme pentru copii și plugin-uri

Actualizare: Acest articol a fost editat pe 19 februarie 2013, pentru a reflecta modificările aduse Tema Customizer Boilerplate.


Sperăm că ați citit și v-ați bucurat primele două postări ale seriei Customizer de temă – Introducere în personalizarea temelor WordPress și interacțiunea cu personalizatorul temelor. Acum este timpul să treceți la cursul principal și să începeți să asamblați placa de cazane cu tema personalizatoare pe care le veți putea folosi în temele dvs. Această postare conține câteva blocuri lungi de cod, așa că fiți atenți la comentariile inline.

Notă: Dacă mai degrabă utilizați imediat placa de cazane, o puteți descărca de la Github și puteți schimba câmpurile din tabloul de opțiuni $ conectând la cârligul de filtru „thsp_cbp_options_array”..

Ce creăm

Tema Customizer Boilerplate structura directorului

Tema Customizer Boilerplate structura directorului

  • customizer.php – Acesta este principalul fișier de tip boilerplan Customizer, cel care adaugă secțiuni, setări și controale folosind date din tabloul de opțiuni
  • custom-controls.php – clase de controale personalizate și un cârlig de acțiune care vă permite să adăugați propriile controale personalizate
  • helpers.php – Funcții Helper, utilizate pentru a prelua opțiuni tematice, setări implicite etc..
  • options.php – Opțiuni de exemplu și un cârlig de filtru care vă permite să editați matricea de opțiuni și să folosiți propriile câmpuri
  • -controls.css de personalizare – CSS de bază pentru controlul personalizat al radioului înlocuit de imagine

Întreaga idee este să puteți copia aceste fișiere într-un subdirector din directorul dvs. tematic, includeți fișierul customizer.php din funcțiile voastre.php și puteți schimba orice vă place, incluzând și mai ales tabloul de opțiuni, folosind cârlige cu tema Boilerplate de temă (explicat în partea a 4-a). Actualizați: Anterior, ați editat doar options.php, dar folosirea cârligelor face lucrurile mult mai curate.

Acum să folosim un exemplu real – vom adăuga un control text la o nouă secțiune de personalizare a temelor. Matricea este plasată într-o funcție de ajutor și are un filtru aplicat atunci când este returnat. În acest fel puteți adăuga mai multe opțiuni de la o temă sau un plugin pentru copii. Aici este:

/ **
* Funcția de ajutor care conține o serie de opțiuni tematice.
*
* @return array $ opțiuni Array of options options
* @uses thsp_get_theme_customizer_fields () definite în personalizator / helpers.php
* /
function thsp_get_theme_customizer_fields () {

/ *
* Utilizarea funcției helper pentru a obține capacitatea implicită necesară
* /
$ necesar_capabilitate = thsp_settings_page_capability ();

$ options = array (


// ID secțiune
'new_customizer_section' => tablou (

/ *
* Verificăm dacă aceasta este o secțiune existentă
* sau una nouă care trebuie înregistrată
* /
'eżistenti_section' => false,
/ *
* Argumente legate de secțiune
* Codex - http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_section
* /
'args' => array (
'title' => __ ('Titlul secțiunii noi', 'my_theme_textdomain'),
'description' => __ ('Noua descriere a secțiunii', 'my_theme_textdomain'),
'prioritate' => 10
),

/ *
* matricea „câmpuri” conține toate câmpurile care trebuie să fie
* adăugat la această secțiune
* /
'fields' => array (

/ *
* ==========
* ==========
* Câmp text
* ==========
* ==========
* /
// ID camp
'new_text_field' => tablou (
/ *
* Setarea argumentelor conexe
* Codex - http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_setting
* /
'setting_args' => tablou (
'default' => __ ('Valoarea textului implicit', 'my_theme_textdomain'),
'type' => 'opțiune',
'capability' => $ necesar_capabilitate,
'transport' => 'reîmprospătare',
'sanitize_callback' => 'thsp_sanitize_cb',
),
/ *
* Controlează argumentele legate
* Codex - http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_control
* /
'control_args' => tablou (
'label' => __ ('Etichetă de control text nou', 'my_theme_textdomain'),
'type' => 'text', // Control câmp text
'prioritate' => 1
)
)

)

),

);

/ *
* Cârligul de filtru „thsp_customizer_options” vă va permite
* adăugați / eliminați unele dintre aceste opțiuni dintr-o temă pentru copii
* /
return aplicați_filtre ('thsp_customizer_options', $ opțiuni);

}

Actualizați: Matricea rămâne aceeași, dar acum puteți trece și matricea de opțiuni la un cârlig de filtru, consultați Partea 4 pentru mai multe detalii.

Arată complicat la prima vedere, știu, dar permiteți-mi să explic.

opţiuni de $ matricea este formată dintr-o secțiune (o singură situație în acest caz – new_customizer_section), fiecare secțiune are argumentele, câmpurile și o valoare booleană (existente_section) pentru a indica dacă este o secțiune nouă, sau doar adăugăm câteva câmpuri la un deja existent unu. Matricea de argumente este identică cu cea pe care o treci $ Wp_customize-> add_section metodă. Matricea de câmpuri este puțin mai complexă.

Actualizați: array array în argumentele de control este acum un tablou multi-dimensional.

Fiecare câmp constă dintr-o setare Customizer și un control Customizer. Acesta este motivul pentru care avem array_args și array_args array. Acestea sunt aproape exact aceleași ca și tablourile cu argumente pe care le-ați transmis $ Wp_customize-> add_setting și $ Wp_customize-> add_control metode. Singura diferență este matricea „alegeri” în argumentele de control, $ wp_customize-> add_control necesită ca acesta să fie o cheie simplă => tablou de perechi de valori și folosim în schimb un tablou multidimensional..

În acest fel este posibil să transmiți mai multe date fiecăreia dintre opțiuni, astfel încât dacă, de exemplu, încărcați fonturi Google în tema dvs., veți putea avea șiruri care vă permit să încărcați fontul corect în tabloul de alegeri. . Puteți vedea un exemplu în acest sens tema care utilizează Customizer Boilerplate.

Deci, dacă știți deja aceste trei metode, este foarte familiar.

Adăugarea unui control pentru caseta de selectare este aproape aceeași, trebuie doar să schimbați „tipul” în „caseta de selectare” din tabloul „control_args”:

/ *
* ===============
* Câmpul casetei
* ===============
* /
'new_checkbox_field' => tablou (
'setting_args' => tablou (
'default' => true,
'type' => 'opțiune',
'capability' => $ necesar_capabilitate,
'transport' => 'reîmprospătare',
'sanitize_callback' => 'thsp_sanitize_cb',
),
'control_args' => tablou (
'label' => __ ('Noua etichetă de control radio', 'my_theme_textdomain'),
'type' => 'caseta de selectare', // Control câmp checkbox
'prioritate' => 2
)
),

Controalele radio și selecte sunt aproape aceleași, trebuie doar să specificați alegerile date:

/ *
* ===========
* ===========
* Câmp radio
* ===========
* ===========
* /
'new_radio_field' => array (
'setting_args' => tablou (
'default' => 'opțiunea-2',
'type' => 'opțiune',
'capability' => $ thsp_cbp_capability,
'transport' => 'reîmprospătare',
),
'control_args' => tablou (
'label' => __ ('Noua etichetă de control radio', 'my_theme_textdomain'),
'type' => 'radio', // Control radio
'options' => array (
'option-1' => array (
'label' => __ ('Opțiunea 1', 'my_theme_textdomain')
),
'option-2' => array (
'label' => __ ('Opțiunea 2', 'my_theme_textdomain')
),
'option-3' => array (
'label' => __ ('Opțiunea 3', 'my_theme_textdomain')
)
),
'prioritate' => 3
)
),

/ *
* ============
* ============
* Selectați câmpul
* ============
* ============
* /
'new_select_field' => tablou (
'setting_args' => tablou (
'default' => 'opțiunea-3',
'type' => 'opțiune',
'capability' => $ thsp_cbp_capability,
'transport' => 'reîmprospătare',
),
'control_args' => tablou (
'label' => __ ('Etichetă de câmp nou selectată', 'my_theme_textdomain'),
'type' => 'select', // Selectați control
'options' => array (
'option-1' => array (
'label' => __ ('Opțiunea 1', 'my_theme_textdomain')
),
'option-2' => array (
'label' => __ ('Opțiunea 2', 'my_theme_textdomain')
),
'option-3' => array (
'label' => __ ('Opțiunea 3', 'my_theme_textdomain')
)
),
'prioritate' => 4
)
)

Și în final, două tipuri de control complexe care sunt încorporate în WordPress – încărcarea fișierului și încărcarea imaginii:

/ *
* ===========
* ===========
* Fișier încărcat
* ===========
* ===========
* /
'new_file_upload_field' => array (
'setting_args' => tablou (
'default' => '',
'type' => 'opțiune',
'capability' => $ thsp_cbp_capability,
'transport' => 'reîmprospătare',
),
'control_args' => tablou (
'label' => __ ('Încărcare fișier', 'my_theme_textdomain'),
'type' => 'upload', // Control câmp de încărcare fișiere
'prioritate' => 5
)
),

/ *
* ============
* ============
* Încărcare imagine
* ============
* ============
* /
'new_image_upload_field' => tablou (
'setting_args' => tablou (
'default' => '',
'type' => 'opțiune',
'capability' => $ thsp_cbp_capability,
'transport' => 'reîmprospătare',
),
'control_args' => tablou (
'label' => __ ('Încărcare de imagini', 'my_theme_textdomain'),
'type' => 'imagine', // Controlul câmpului de încărcare a imaginilor
'prioritate' => 6
)
)

Rețineți că am folosit “Type” => “opțiune” în stabilirea argumentelor pentru toate aceste câmpuri. Acest lucru va permite stocarea tuturor valorilor ca o singură valoare în baza de date. Alternativa este ‘Type’ => ‘theme_mod’ dar deocamdată rămânem cu „opțiunea”.

Utilizarea opțiunii Array pentru a adăuga secțiuni de personalizare, setări și controale

Dacă nu sunteți sigur cum să interacționați cu personalizatorul de temă WordPress, mergeți și verificați, pentru că asta vom face acum. Singura diferență este că, în loc să adăugăm secțiuni, setări și controale pe rând, vom automatiza procesul folosind tabloul serializat pe care l-am creat. Haideți să sărim în ea:

function thsp_cbp_customize_register ($ wp_customize) {

/ **
* Controale personalizate
* /
require (dirname (__ FILE__). '/custom-controls.php');


/ *
* Obțineți toate câmpurile folosind o funcție de ajutor
* /
$ thsp_sections = thsp_cbp_get_fields ();


/ *
* Obțineți numele intrării DB sub care opțiuni vor fi stocate
* /
$ thsp_cbp_option = thsp_cbp_option ();


/ **
* Buclați-vă prin tabel și adăugați secțiuni Customizer
* /
foreach ($ thsp_sections ca $ thsp_section_key => $ thsp_section_value) {

/ **
* Adaugă secțiunea Customizer, dacă este nevoie
* /
if (! $ thsp_section_value ['existente_section']) {

$ thsp_section_args = $ thsp_section_value ['args'];

// Adaugă secțiune
$ Wp_customize-> add_section (
$ thsp_section_key,
$ thsp_section_args
);

} // end if

/ *
* Buclați-vă prin matricea „câmpurilor” din fiecare secțiune
* și adăugați setări și controale
* /
$ thsp_section_fields = $ thsp_section_value ['câmpuri'];
foreach ($ thsp_section_fields ca $ thsp_field_key => $ thsp_field_value) {

/ *
* Verificați dacă „opțiunea” sau „tema_mod” este folosită pentru a stoca opțiunea
*
* Dacă nu este setat nimic, metoda $ wp_customize-> add_setting va fi implicită la „theme_mod”
* Dacă „opțiunea” este utilizată ca tip de setare, valoarea sa va fi stocată într-o intrare în
* {prefix} _options table. Numele opțiunii este definit de funcția thsp_cbp_option ()
* /
if (isset ($ thsp_field_value ['setting_args'] ['type']) && 'option' == $ thsp_field_value ['setting_args'] ['type']) {
$ setting_control_id = $ thsp_cbp_option. '['. $ thsp_field_key. ']';
} altfel {
$ setting_control_id = $ thsp_field_key;
}

/ *
* Adăugați funcția de apelare implicită, dacă nu este definită niciuna
* /
if (! isset ($ thsp_field_value ['setting_args'] ['sanitize_cb'])) {
$ thsp_field_value ['setting_args'] ['sanitize_cb'] = 'thsp_cbp_sanitize_cb';
}

/ **
* Adăuga setările personalizatorului
* /
$ Wp_customize-> add_setting (
$ setting_control_id,
$ Thsp_field_value [ 'setting_args']
);

/ **
* Adăugă controlul personalizatorului
*
* Valoarea „secțiunii” trebuie adăugată la tabloul „control_args”
* deci controlul poate fi adăugat la secțiunea curentă
* /
$ thsp_field_value ['control_args'] ['section'] = $ thsp_section_key;

/ *
* $ wp_customize-> add_control metoda necesită ca „alegeri” să fie o simplă cheie => pereche de valori
* /
if (isset ($ thsp_field_value ['control_args'] ['alegeri'])) {
$ thsp_cbp_choices = array ();
foreach ($ thsp_field_value ['control_args'] ['alegeri'] ca $ thsp_cbp_choice_key => $ thsp_cbp_choice_value) {
$ thsp_cbp_choices [$ thsp_cbp_choice_key] = $ thsp_cbp_choice_value ['etichetă'];
}
$ thsp_field_value ['control_args'] ['options'] = $ thsp_cbp_choices;
}


// Verificați tipul de control
if ('color' == $ thsp_field_value ['control_args'] ['type']) {
$ Wp_customize-> add_control (
WP_Customize_Color_Control nou (
$ wp_customize,
$ setting_control_id,
$ Thsp_field_value [ 'control_args']
)
);
} elseif ('image' == $ thsp_field_value ['control_args'] ['type']) {
$ Wp_customize-> add_control (
WP_Customize_Image_Control nou (
$ wp_customize,
$ setting_control_id,
$ Thsp_field_value [ 'control_args']
)
);
} elseif ('upload' == $ thsp_field_value ['control_args'] ['type']) {
$ Wp_customize-> add_control (
WP_Customize_Upload_Control nou (
$ wp_customize,
$ setting_control_id,
$ Thsp_field_value [ 'control_args']
)
);
} altfel {
$ Wp_customize-> add_control (
$ setting_control_id,
$ Thsp_field_value [ 'control_args']
);
}

} // final predach

} // final predach

}
add_action ('personalize_register', 'thsp_cbp_customize_register');

Parcurgând toate secțiunile, adăugând cele care nu există deja, apoi parcurgeți toate câmpurile din fiecare secțiune, adăugând o setare și un control pentru fiecare. Tot ce se întâmplă aici.

Vă amintiți că am folosit „tip” => „opțiune” pentru toată setarea? De aceea avem acum „My_theme_options [$ thsp_field_key]“ atât pentru setări cât și pentru secțiuni. Aceasta va stoca toate valorile sub forma unui tablou serializat pe care îl puteți prelua utilizând get_option („my_theme_options”). Sau puteți utiliza doar funcții de ajutor definite în helpers.php pentru a prelua atât valorile curente, cât și valorile implicite pentru toate câmpurile:

/ **
* Obțineți valori opționale
*
* Array care conține toate valorile opțiunilor
* Valoarea implicită a opțiunii este utilizată dacă utilizatorul nu a specificat o valoare
*
* @uses thsp_get_theme_customizer_defaults () definite în /customizer/options.php
* @return array Valori curente pentru toate opțiunile
* @since Theme_Customizer_Boilerplate 1.0
* /
function thsp_cbp_get_options_values ​​() {

// Obțineți setările implicite ale opțiunii
$ option_defaults = thsp_cbp_get_options_defaults ();

// Analizați opțiunile stocate cu valorile implicite
$ thsp_cbp_options = wp_parse_args (get_option (thsp_cbp_option (), array ()), $ option_defaults);

// Întoarceți tabloul analizat
returna $ thsp_cbp_options;

}


/ **
* Obțineți opțiuni implicite
*
* Returnează un tablou care conține valori implicite pentru toate opțiunile
*
* @uses thsp_get_theme_customizer_fields () definite în /customizer/options.php
* @return array $ thsp_option_defaults Valori implicite pentru toate opțiunile
* @since Theme_Customizer_Boilerplate 1.0
* /
function thsp_cbp_get_options_defaults () {

// Obțineți tabloul care conține toate câmpurile de opțiuni tematice
$ thsp_sections = thsp_cbp_get_fields ();

// Inițializați tabloul pentru a păstra valorile implicite pentru toate opțiunile temei
$ thsp_option_defaults = array ();

// Buclați-vă prin tabloul de parametri al opțiunii
foreach ($ thsp_sections ca $ thsp_section) {

$ thsp_section_fields = $ thsp_section ['câmpuri'];

foreach ($ thsp_section_fields ca $ thsp_field_key => $ thsp_field_value) {

// Adăugați o cheie de tip asociativ la tabloul prestabilit pentru fiecare opțiune din tabloul de parametri
if (isset ($ thsp_field_value ['setting_args'] ['implicit'])) {
$ thsp_option_defaults [$ thsp_field_key] = $ thsp_field_value ['setting_args'] ['implicit'];
} altfel {
$ thsp_option_defaults [$ thsp_field_key] = false;
}

}

}

// Întoarceți matricea prestabilită
returna $ thsp_option_defaults;

}

Mai trebuie să menționez un alt lucru – funcția de retur de igienizare pe care am specificat-o în tabloul „setting_args”. Funcția este definită în extension.php și pur și simplu rulează datele wp_kses_post funcţie:

/ **
* Funcția de apelare a sistemului de igienizare a personalizatorului
* /
function thsp_sanitize_cb ($ input) {

returnare wp_kses_post (intrare $);

}

De unde de aici?

Deocamdată, puteți utiliza această boilerplate cu tema personalizată în temele dvs., tot ce trebuie să faceți este să o descărcați din Github, să copiați în directorul temei dvs. și să includeți fișierul principal din funcții.php, care este 100% funcțional și suficient de bun pentru majoritatea tematică.

Întrucât tema dvs. nu este „ca majoritatea temelor”, săptămâna viitoare vom vedea cum să extindeți placa de cazan folosind filtrul și cârligele de acțiune.

Mi-ar plăcea să aud cum crezi că această placă de cazan ar putea fi îmbunătățită sau extinsă, așa că te rog să dai foc în comentarii.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me