1. 1. Introducere în personalizatorul de temă WordPress
  2. 2. Acum citesc: Interacționând cu personalizatorul de temă WordPress
  3. 3. 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

În prima parte a seriei Customizer pentru tema WordPress am menționat că pentru a interacționa cu Tema Customizer trebuie să încărcați $ wp_customize obiect, care este o instanță a WP_Customize_Manager clasă. Pentru a face acest lucru, trebuie să utilizați customize_register cârlig de acțiune:


add_action ('personalize_register', 'my_theme_customize_register');
function my_theme_customize_register ($ wp_customize) {

// Interacționând cu obiectul $ wp_customize

}

Puteți plasa acest cod în funcțiile temei.php sau într-un fișier inclus din acesta.

Adăugarea sau eliminarea elementelor de personalizare a temei (secțiuni, setări și controale)

Odată ce ai încărcat $ wp_customize obiect pe care îl puteți utiliza oricare dintre metodele sale pentru a adăuga, obține sau elimina setări, controale și secțiuni din acesta (add_setting, get_setting, remove_setting, add_control … obțineți punctul).

Deci, dacă vrei obține sau elimina o secțiune, control sau setare, tot ce ai nevoie este ID-ul său. Această linie va elimina secțiunea Culori (o așezați în funcția my_theme_customize_register de la primul fragment de cod):

$ wp_customize-> remove_section ('culori');

Adăugarea unei secțiuni, control sau setare este ușor diferită, deoarece necesită alți parametri. Nu le voi parcurge pe toate aici din două motive:

  1. Acesta nu este cu adevărat ce scop al acestei serii, vom crea o placă de cazane cu tema personalizatoare pe care o puteți arunca în temă
  2. Alex Mansfield l-a acoperit deja în monstrul său de 6000 de cuvinte Tutorial personalizator de temă despre care fiecare dezvoltator de teme WordPress trebuie să citească și apoi să îi trimită un tweet (serios, dacă nu ați făcut-o deja, accesați-l acum).

Dar totuși, să aruncăm o privire asupra modului în care puteți adăuga setarea dvs. cu un control într-o nouă secțiune Customizer pentru teme, precum și câteva dintre argumente. Deoarece este mult mai ușor să lucrăm cu exemple reale, iată ce urmăm:

  • O nouă secțiune, etichetată „Layout”
  • O nouă setare care stochează aspectul temei
  • Un nou control radio cu două opțiuni – bara laterală din stânga și bara laterală din dreapta

Primul lucru pe care trebuie să îl adăugați la Tema Personalizator este secțiunea „Aspect”:

$ Wp_customize-> add_section (
// ID
'Layout_section',
// Matricea de argumente
array (
'title' => __ ('Layout', 'my_theme'),
'capability' => 'edit_theme_options',
'description' => __ ('Vă permite să modificați aspectul temei.', 'my_theme')
)
);

Nu încercați să o vedeți încă în personalizator, o secțiune nu va fi afișată decât dacă are o setare și un control adăugat la ea. Să adăugăm atât:

$ Wp_customize-> add_setting (
// ID
'My_theme_settings [layout_setting]',
// Matricea de argumente
array (
'default' => 'Bara din partea dreaptă',
'type' => 'opțiune'
)
);
$ Wp_customize-> add_control (
// ID
'Layout_control',
// Matricea de argumente
array (
'type' => 'radio',
'label' => __ ('Aspectul temei', 'my_theme'),
'section' => 'layout_section',
'options' => array (
'left-sidebar' => __ ('Bara laterală stângă', 'my_theme'),
'right-sidebar' => __ ('Bara laterală dreaptă', 'my_theme')
),
// Acesta din urmă trebuie să se potrivească cu ID-ul setării de sus
'settings' => 'my_theme_settings [layout_setting]'
)
);

Presupunând că ați citit paginile de tutorial și / sau Codex ale lui Alex, există un singur parametru în tabelul de argumente add_setting – „tip” – pe care aș dori să mă concentrez. Aveți aici două posibilități, „opțiune” și „temă_mod” și le puteți regăsi folosind get_option și get_theme_mod, respectiv. Folosesc întotdeauna „opțiunea” pur și simplu pentru că vă permite să serializați valorile setărilor dvs. de temă, oferindu-le ID-uri de genul my_theme_settings [setting_1], my_theme_settings [setting_2] În acest fel, toate valorile vor fi stocate ca o singură intrare a bazei de date în tabelul wp_options.

Și în final, după ce ați adăugat acele două fragmente de cod pentru a funcționa în care v-ați conectat customize_register cârlig de acțiune (primul fragment de cod din această postare), Personalizatorul Tema a fost personalizat:

Nouă secțiune adăugată la Tema Personalizator

Nouă secțiune adăugată la Tema Personalizator

Utilizarea valorilor setărilor personalizatorului temei din tema dvs.

După ce le-ați oferit utilizatorilor capacitatea de a stoca această setare, puteți prelua valoarea acesteia, conectați-vă body_class filtrul cârlig și adăugați-l la o serie de clase de corpuri existente:

add_filter ('body_class', 'my_theme_body_classes');
function my_theme_body_classes ($ clase) {

/ *
* Întrucât am folosit „opțiunea” în tabloul de argumente add_setting
* preluăm valoarea folosind funcția get_option
* /
$ my_theme_settings = get_option ('my_theme_settings');

$ classes [] = $ my_theme_settings ['layout_setting'];

returnare clase $;

}

Aceasta va adăuga fie .left-sidebar sau .right-sidebar la o serie de clase de corpuri din tema dvs. Utilizând aceste două clase în fișierul style.css al temei dvs., veți putea crea două machete diferite. De exemplu:

/ * Bara laterală din dreapta este aspectul implicit * /
#content {
plutește la stânga;
latime: 60%;
}
#sidebar {
float: dreapta;
latime: 30%;
}

/ * Folosind .left-sidebar side pentru a înlocui aspectul implicit * /
.bara din stânga #content {
float: dreapta;
}
.bară din stânga #sidebar {
plutește la stânga;
}

Cel mai bine, mulțumită personalizatorului cu tema WordPress, utilizatorii pot previzualiza ambele machete înainte de a salva ceva. Luați asta, pagini cu setări tematice!

Rezumat și lectură ulterioară

Versiunea TL; DR a acestei postări ar merge astfel: Puteți obține $ wp_customize obiect și apoi puteți adăuga ceva (secțiune, setare sau control) sau elimina din acesta. Orice altceva se reduce la parametrii setărilor.

Partea a treia este locul în care această serie devine interesantă, deoarece vom începe să automatizăm întregul proces și să lucrăm la Tema Customizer Boilerplate pe care o puteți arunca în tema dvs. și să începeți să o utilizați imediat. Rămâneți aproape!

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