Interagerer med WordPress Theme Customizer

  1. 1. Introduktion til WordPress Theme Customizer
  2. 2. I øjeblikket læser: Interagerer med WordPress Theme Customizer
  3. 3. WordPress Theme Customizer Kedelplade
  4. 4. Udvidelse af WordPress Theme Customizer-kedelplade
  5. 5. Tema Customizer Kedelplade – Betingede muligheder, Børnetemaer og plugins

I del 1 af WordPress Theme Customizer-serien nævnte jeg, at du skal indlæse for at interagere med Theme Customizer $ wp_customize objekt, som er et eksempel på WP_Customize_Manager klasse. For at gøre det skal du bruge customize_register handlingskrog:


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

// Interaktion med $ wp_customize-objekt

}

Du kan placere denne kode i dit temas funktioner.php eller en fil, der er inkluderet fra det.

Tilføjelse eller fjernelse af Theme Customizer-elementer (sektioner, indstillinger og kontroller)

Når du har indlæst $ wp_customize objekt, du kan bruge en af ​​dens metoder til at tilføje, hente eller fjerne indstillinger, kontroller og sektioner i det (add_setting, get_setting, remove_setting, add_control … du får point).

Så hvis du vil eller fjerne et afsnit, kontrol eller indstilling, alt hvad du behøver er dets ID. Denne linje fjerner farvesektionen (placer den i my_theme_customize_register-funktionen fra det første kodestykket):

$ wp_customize-> remove_section ('farver');

Tilføjelse af et afsnit, kontrol eller indstilling er lidt anderledes, fordi det kræver nogle flere parametre. Jeg vil ikke gennemgå dem alle her af to grunde:

  1. Det er ikke rigtigt, hvad formålet med denne serie er, vi opretter en Theme Customizer-kedelplade, som du bare kan falde ind i dit tema i stedet
  2. Alex Mansfield dækkede allerede det i sit 6000 ord monster af a Vejledning til tematilpasning at enhver WordPress-temaudvikler skal læse og derefter tweete om (seriøst, hvis du ikke allerede har gjort det, skal du læse det nu).

Men alligevel, lad os se på, hvordan du kan tilføje din egen indstilling med en kontrol i et nyt Theme Customizer-afsnit samt nogle af argumenterne. Da det er meget lettere at arbejde med rigtige eksempler, er det her, vi går efter:

  • Et nyt afsnit mærket “Layout”
  • En ny indstilling, der gemmer dit temas layout
  • En ny radiostyring med to muligheder – sidefelt til venstre og sidefelt til højre

Den første ting, du tilføjer til Theme Customizer, er afsnittet “Layout”:

$ Wp_customize-> add_section (
// ID
'Layout_section',
// Argumenter array
array (
'title' => __ ('Layout', 'my_theme'),
'capability' => 'edit_theme_options',
'description' => __ ('Giver dig mulighed for at redigere dit temas layout.', 'my_theme')
)
);

Forsøg ikke at se det i brugerdefineret endnu, et afsnit vises ikke, medmindre det er tilføjet en indstilling og en kontrol. Så lad os tilføje begge:

$ Wp_customize-> add_setting (
// ID
'My_theme_settings [layout_setting]',
// Argumenter array
array (
'default' => 'højre sidebjælke',
'type' => 'mulighed'
)
);
$ Wp_customize-> add_control (
// ID
'Layout_control',
// Argumenter array
array (
'type' => 'radio',
'label' => __ ('Temalayout', 'my_theme'),
'sektion' => 'layout_sektion',
'valg' => matrix (
'left-sidebar' => __ ('Left sidebar', 'my_theme'),
'right-sidebar' => __ ('Right sidebar', 'my_theme')
),
// Denne sidste skal matche indstillings-ID ovenfra
'settings' => 'my_theme_settings [layout_setting]'
)
);

Forudsat at du læser Alex ‘s tutorial- og / eller Codex-sider, er der kun en parameter i add_setting-argumenter -‘ type ‘- som jeg gerne vil fokusere på. Du har to muligheder her, ‘mulighed’ og ‘tema_mod’, og du kan hente dem ved hjælp af get_option og get_theme_mod, henholdsvis. Jeg bruger altid ‘option’ simpelthen fordi det giver dig mulighed for at serialisere dine temaindstillingsværdier ved at give dem ID’er som my_theme_settings [setting_1], my_theme_settings [setting_2] osv. På den måde gemmes alle værdier som en databaseindgang i din wp_options-tabel.

Og til sidst, efter at du har tilføjet disse to kodestykker til funktionen, blev du tilsluttet customize_register actionkrog (første kodestykket i dette indlæg), Theme Customizer er blevet tilpasset:

Nyt afsnit tilføjet til Theme Customizer

Nyt afsnit tilføjet til Theme Customizer

Brug af Tema Customizer indstillinger værdier i dit tema

Når du har givet dine brugere mulighed for at gemme denne indstilling, kan du få fat i dens værdi og koble til body_class filterkrok og tilføj den til en række eksisterende kropsklasser:

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

/ *
* Da vi brugte 'option' i add_setting argumenter array
* vi henter værdien ved hjælp af get_option funktion
* /
$ my_theme_settings = get_option ('my_theme_settings');

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

returner $ klasser;

}

Dette tilføjer enten .venstre-sidebjælke eller .højre-sidefelt til en række kropsklasser i dit tema. Ved at bruge disse to klasser i dit temas stil.css-fil kan du oprette to forskellige layout. For eksempel:

/ * Sidepanel til højre er standardlayout * /
#indhold {
flyde: venstre;
bredde: 60%;
}
#sidebar {
float: højre;
bredde: 30%;
}

/ * Brug af.-Sidebar-klassen til at tilsidesætte standardlayout * /
.venstre sidebjælke #indhold {
float: højre;
}
.venstre sidebjælke # sidebjælke {
flyde: venstre;
}

Bedst af alt, takket være WordPress Theme Customizer, kan brugerne forhåndsvise begge layout for at gemme noget. Tag det, temaindstillinger sider!

Resumé og videre læsning

TL; DR-version af dette indlæg ville gå sådan her: Du kan få $ wp_customize-objekt og derefter enten tilføje noget (sektion, indstilling eller kontrol) til eller fjerne fra det. Alt andet koges ned på indstillingsparametre.

Del tre er hvor denne serie bliver interessant, da vi vil begynde at automatisere hele processen og arbejde på Theme Customizer Boilerplate, som du kan falde ind i dit tema og begynde at bruge med det samme. Bliv hængende!

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