Vuorovaikutus WordPress Theme Customizer -sovelluksen kanssa

  1. 1. Johdanto WordPress-teeman mukauttajaan
  2. 2. Luettu tällä hetkellä: Vuorovaikutus WordPress Theme Customizer -sovelluksen kanssa
  3. 3. WordPress Theme Customizer -kattilalevy
  4. 4. WordPress-teeman räätälöintilaitteiston laajentaminen
  5. 5. Teeman mukauttajan kattilalevy – ehdolliset vaihtoehdot, lapsiteemat ja laajennukset

WordPress Theme Customizer -sarjan osassa 1 mainitsin, että sinun on ladattava, jotta voit olla vuorovaikutuksessa Theme Customizerin kanssa $ wp_customize objekti, joka on esimerkki WP_Customize_Manager luokka. Sinun on käytettävä tätä customize_register toimintakoukku:


add_action ('räätälöi_rekisteri', 'minun_teemani_ räätälöi_rekisteri');
toiminto my_theme_customize_register ($ wp_customize) {

// Vuorovaikutus kohteen $ wp_customize objektin kanssa

}

Voit sijoittaa tämän koodin teeman funktioihin.php tai siihen sisältyvään tiedostoon.

Teeman mukauttajan elementtien (osiot, asetukset ja säätimet) lisääminen tai poistaminen

Kun olet ladannut $ wp_customize objekti, jolla voit käyttää mitä tahansa sen menetelmää, lisätä, hakea tai poistaa asetuksia, säätimiä ja osia siihen (add_setting, get_setting, remove_setting, add_control … saat pisteen).

Joten jos haluat saada tai Poista osa, ohjaus tai asetus, tarvitset vain sen tunnuksen. Tämä rivi poistaa Värit-osion (sijoita se my_theme_customize_register-toiminnon sisään ensimmäisestä koodinpätkästä):

$ wp_customize-> remove_section ('värit');

Osan, säätimen tai asetuksen lisääminen on hiukan erilainen, koska se vaatii lisää parametreja. En käy läpi kaikkia niitä täällä kahdesta syystä:

  1. Sillä ei oikeastaan ​​ole tämän sarjan tarkoitus, luomme Teeman mukauttamisen kattilalevyn, jonka voit vain pudottaa teemaasi
  2. Alex Mansfield peitti sen jo 6000 sanaa olevassa hirviössä Teeman mukauttamisen opas jokaisen WordPress-teemakehittäjän on luettava ja jaettava sitten twiitti (vakavasti, jos et vielä ole, mene lukemaan se nyt).

Katsotaan silti, miten voit lisätä omia asetuksiasi säätimellä uuteen Teeman muokkaaminen -osaan, samoin kuin joitain argumentteja. Koska on paljon helpompaa työskennellä todellisten esimerkkien kanssa, jatkamme seuraavaa:

  • Uusi osio, jonka otsikko on ”Layout”
  • Uusi asetus, joka tallentaa teeman asettelun
  • Uusi radiosäädin kahdella vaihtoehdolla – sivupalkki vasemmalla ja sivupalkki oikealla

Ensimmäinen asia, joka lisätään Teeman mukauttajaan, on ”Asettelu” -osa:

$ Wp_customize-> add_section (
// tunnus
'Layout_section',
// Argumenttiryhmä
array (
'title' => __ ('Asettelu', 'my_theme'),
'capability' => 'edit_theme_options',
'description' => __ ('Antaa sinun muokata teeman asettelua.', 'my_theme')
)
);

Älä yritä vielä nähdä sitä räätälöinnissä, osaa ei näytetä, ellei siihen ole lisätty asetusta ja hallintalaitetta. Joten lisätään molemmat:

$ Wp_customize-> add_setting (
// tunnus
"My_theme_settings [layout_setting],
// Argumenttiryhmä
array (
'oletus' => 'oikea sivupalkki',
'type' => 'option'
)
);
$ Wp_customize-> add_control (
// tunnus
'Layout_control',
// Argumenttiryhmä
array (
'type' => 'radio',
'label' => __ ('teemaasettelu', 'minun_teema'),
'section' => 'layout_section',
'valinnat' => taulukko (
'vasen sivupalkki' => __ ('Vasen sivupalkki', 'my_theme'),
'oikea sivupalkki' => __ ('oikea sivupalkki', 'my_theme')
),
// Tämän viimeisen on vastattava asetustunnusta ylhäältä
'settings' => 'my_theme_settings [layout_setting]'
)
);

Olettaen, että luet Alexin opetusohjelman ja / tai Codex-sivuja, add_setting-argumenttiryhmässä on vain yksi parametri – “tyyppi”, johon haluaisin keskittyä. Tässä on kaksi vaihtoehtoa, vaihtoehto ja teema_mod, ja voit hakea ne käyttämällä get_option ja get_theme_mod, vastaavasti. Käytän aina vaihtoehtoa yksinkertaisesti siksi, että sen avulla voit järjestää teema-asetusten arvot antamalla niille tunnukset my_theme_settings [setting_1], my_theme_settings [setting_2] jne. Tällä tavalla kaikki arvot tallennetaan yhtenä tietokantamerkintänä wp_options-taulukossa.

Ja lopuksi, kun olet lisännyt nämä kaksi koodinpätkää toimimaan, olet koukussa customize_register toimintakoukku (tämän postin ensimmäinen koodinpätkä), Teeman mukauttaja on räätälöity:

Uusi osio lisättiin Teeman mukauttaja -sovellukseen

Uusi osio lisättiin Teeman mukauttaja -sovellukseen

Teeman mukauttajan asetusarvojen käyttäminen teemassa

Kun olet antanut käyttäjille mahdollisuuden tallentaa tämä asetus, voit napauttaa sen arvon ja kiinnittää sen body_class suodata koukku ja lisää se olemassa olevien keholuokkien joukkoon:

add_filter ('body_class', 'my_theme_body_classes');
toiminto my_theme_body_classes ($ luokat) {

/ *
* Koska olemme käyttäneet vaihtoehtoa add_setting argumenttiryhmässä
* haemme arvon käyttämällä get_option-toimintoa
* /
$ my_theme_settings = get_option ('my_theme_settings');

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

palauta $ luokat;

}

Tämä lisää joko vasemman tai oikean sivupalkin teeman keholuokkiin. Käyttämällä näitä kahta luokkaa teeman style.css-tiedostossa voit luoda kaksi erilaista asettelua. Esimerkiksi:

/ * Sivupalkki oikealla on oletusasettelu * /
#sisältö {
kellua: vasen;
leveys: 60%;
}
# sivupalkki {
kellua: oikea;
leveys: 30%;
}

/ * Käyttämällä .left-sidebar luokkaa oletusasettelun ohittamiseen * /
.vasen sivupalkki # sisältö {
kellua: oikea;
}
.vasen sivupalkki # sivupalkki {
kellua: vasen;
}

Mikä parasta, WordPress Theme Customizer -sovelluksen ansiosta käyttäjät voivat esikatsella molemmat asettelut ennen tallennusta. Ota se, teemaasetussivut!

Yhteenveto ja lisälukema

Tämän viestin TL; DR-versio menisi noin: Voit saada $ wp_customize -objektin ja joko lisätä jotain (osa, asetus tai hallinta) tai poistaa siitä. Kaikki muu laskee asetusparametreihin.

Kolmas osa on se, missä tämä sarja tulee mielenkiintoiseksi, kun alamme automatisoida koko prosessia ja työskennellä Teeman mukauttamisen kattilalevyn kanssa, jonka voit pudottaa teemaasi ja aloittaa käytön heti. Pysy kanavalla!

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