Samhandler med WordPress Theme Customizer

  1. 1. Introduksjon til WordPress Theme Customizer
  2. 2. Leser for øyeblikket: Samhandler med WordPress Theme Customizer
  3. 3. WordPress Theme Customizer Kjeleplate
  4. 4. Utvide WordPress Theme Customizer Boilerplate
  5. 5. Theme Customizer Kjeleplate – Betingede alternativer, temaer og plugins for barn

I del 1 av WordPress Theme Customizer-serien nevnte jeg at du må laste for å kunne samhandle med Theme Customizer $ wp_customize objekt, som er et eksempel på WP_Customize_Manager klasse. For å gjøre det, må du bruke customize_register actionkrok:


add_action ('customize_register', 'my_theme_customize_register');
funksjon my_theme_customize_register ($ wp_customize) {

// Samhandle med $ wp_customize objekt

}

Du kan plassere denne koden i temaets funksjoner.php eller en fil som er inkludert fra den.

Legge til eller fjerne Theme Customizer-elementer (seksjoner, innstillinger og kontroller)

Når du har lastet $ wp_customize objekt du kan bruke hvilken som helst av metodene for å legge til, få eller fjerne innstillinger, kontroller og seksjoner i det (add_setting, get_setting, remove_setting, add_control … du får poenget).

Så hvis du vil eller ta vekk en seksjon, kontroll eller innstilling, alt du trenger er IDen. Denne linjen vil fjerne fargeseksjonen (plasser den i funksjonen my_theme_customize_register fra første kodebit):

$ wp_customize-> remove_section ('farger');

Å legge til en seksjon, kontroll eller innstilling er litt annerledes fordi det krever noen flere parametere. Jeg vil ikke gå gjennom dem alle her av to grunner:

  1. Det er egentlig ikke det som er hensikten med denne serien, vi lager en Theme Customizer-kjeleplate som du bare kan slippe inn i temaet ditt i stedet
  2. Alex Mansfield dekket det allerede i sitt 6000 ord monster av a Opplæring av tematilpasning som alle WordPress-temautviklere må lese og deretter tweete om (seriøst, hvis du ikke allerede har gjort det, gå og lest det nå).

La oss likevel se på hvordan du kan legge til dine egne innstillinger med en kontroll i en ny Theme Customizer-seksjon, samt noen av argumentene. Siden det er mye enklere å jobbe med virkelige eksempler, er det dette vi går etter:

  • En ny seksjon, merket “Layout”
  • En ny innstilling som lagrer temaets oppsett
  • En ny radiokontroll med to alternativer – sidefelt til venstre og sidefelt til høyre

Den første tingen å legge til Theme Customizer er “Layout” -delen:

$ Wp_customize-> add_section (
// ID
'Layout_section',
// Argumentasjonsarray
array (
'title' => __ ('Layout', 'my_theme'),
'capability' => 'edit_theme_options',
'description' => __ ('Lar deg redigere temaets oppsett.', 'my_theme')
)
);

Ikke prøv å se det i tilpasning ennå, en seksjon vil ikke vises med mindre den har en innstilling og en kontroll lagt til den. Så la oss legge til begge deler:

$ Wp_customize-> add_setting (
// ID
'My_theme_settings [layout_setting]',
// Argumentasjonsarray
array (
'default' => 'høyre sidefelt',
'type' => 'alternativ'
)
);
$ Wp_customize-> add_control (
// ID
'Layout_control',
// Argumentasjonsarray
array (
'type' => 'radio',
'label' => __ ('Temaoppsett', 'my_theme'),
'seksjon' => 'layout_seksjon',
'valg' => matrise (
'left-sidebar' => __ ('Left sidebar', 'my_theme'),
'right-sidebar' => __ ('Right sidebar', 'my_theme')
),
// Denne siste må samsvare med innstillings-ID ovenfra
'settings' => 'my_theme_settings [layout_setting]'
)
);

Forutsatt at du har lest Alexs opplærings- og / eller Codex-sider, er det bare en parameter i add_setting argumenter-array – ‘type’ – som jeg vil fokusere på. Du har to muligheter her, ‘alternativ’ og ‘tema_mod’, og du kan hente dem ved å bruke get_option og get_theme_mod, henholdsvis. Jeg bruker alltid ‘alternativet’ ganske enkelt fordi det lar deg serialisere verdiene for temainnstillinger ved å gi dem IDer som my_theme_settings [setting_1], my_theme_settings [setting_2] osv. På den måten blir alle verdier lagret som en databaseoppføring i wp_options-tabellen.

Og til slutt, etter at du har lagt de to kodebitene til funksjonen du koblet deg til customize_register actionkrok (første kodebit i dette innlegget), Theme Customizer er blitt tilpasset:

Ny seksjon lagt til Theme Customizer

Ny seksjon lagt til Theme Customizer

Bruke innstillinger for Theme Customizer-innstillinger i ditt tema

Etter at du har gitt brukerne dine muligheten til å lagre denne innstillingen, kan du hente verdien av den, koble deg til body_class filterkrok og legg den til i en rekke eksisterende kroppsklasser:

add_filter ('body_class', 'my_theme_body_classes');
funksjon my_theme_body_classes ($ klasser) {

/ *
* Siden vi brukte 'alternativ' i add_setting argumenter array
* vi henter verdien ved å bruke get_option-funksjonen
* /
$ my_theme_settings = get_option ('my_theme_settings');

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

returner $ klasser;

}

Dette vil legge til enten-venstre sidefelt eller. Høyre-sidefelt til en rekke kroppsklasser i temaet ditt. Ved å bruke disse to klassene i temaets stil.css-fil vil du kunne lage to forskjellige oppsett. For eksempel:

/ * Sidefelt til høyre er standardoppsett * /
#innhold {
flyte: venstre;
bredde: 60%;
}
#sidebar {
flyte: høyre;
bredde: 30%;
}

/ * Bruke klassen med venstre sidefelt for å overstyre standardoppsettet * /
.venstre sidelinje #innhold {
flyte: høyre;
}
.venstre sidelinje # sidelinje {
flyte: venstre;
}

Det beste av alt, takket være WordPress Theme Customizer, kan brukere forhåndsvise begge oppsettene før de lagrer noe. Ta det, temainnstillingssider!

Sammendrag og videre lesing

TL; DR-versjonen av dette innlegget vil gå slik: Du kan få $ wp_customize-objekt og deretter enten legge til noe (seksjon, innstilling eller kontroll) til eller fjerne fra det. Alt annet koker ned til innstillingsparametere.

Del tre er der denne serien blir interessant da vi begynner å automatisere hele prosessen og jobbe med Theme Customizer Boilerplate som du kan slippe inn i temaet ditt og begynne å bruke med en gang. Følg med!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map