Kölcsönhatás a WordPress Theme Customizer segítségével

  1. 1. Bevezetés a WordPress Theme Customizer-be
  2. 2. Jelenleg olvas: Kölcsönhatás a WordPress Theme Customizer segítségével
  3. 3. WordPress Theme Customizer kazánlap
  4. 4. A WordPress Theme Customizer kazánlap kiterjesztése
  5. 5. Téma testreszabási kazánlap – Feltételes beállítások, Gyerek témák és plug-inek

A WordPress Theme Customizer sorozat 1. részében megemlítettem, hogy a Theme Customizerrel való interakcióhoz be kell töltenie $ wp_customize objektum, amely egy példánya WP_Customize_Manager osztály. Ehhez használnia kell customize_register akcióhorog:


add_action ('testreszabási regisztráció', 'my_theme_customize_register');
funkció my_theme_customize_register ($ wp_customize) {

// Interakció a $ wp_customize objektummal

}

Ezt a kódot elhelyezheti a téma function.php fájljában vagy a benne szereplő fájlban.

A téma testreszabási elemek hozzáadása vagy eltávolítása (szakaszok, beállítások és kezelőszervek)

Miután betöltötte $ wp_customize objektum bármelyik módszerével felveheti, megszerezheti vagy eltávolíthatja a benne található beállításokat, vezérlőelemeket és szakaszokat (add_setting, get_setting, remove_setting, add_control … megkapod a pontot).

Tehát, ha akarod kap vagy eltávolítás szakasz, vezérlés vagy beállítás, amire szükséged van, az azonosítója. Ez a sor eltávolítja a Színek részt (helyezze be a my_theme_customize_register funkcióba az első kódrészletből):

$ wp_customize-> remove_section ('színek');

Egy szakasz, vezérlés vagy beállítás hozzáadása kissé eltér, mivel ehhez további paraméterekre van szükség. Két okból nem megyek át itt:

  1. Valójában nem ez a sorozat célja, létre fogunk hozni egy Theme Customizer kazánlapot, amelyet ehelyett a témájába ejthetünk.
  2. Alex Mansfield már lefedte a 6000-es szörnyetegében Theme Customizer bemutató amit minden WordPress témafejlesztőnek el kell olvasnia, majd tweetelt (komolyan, ha még nem tette meg, akkor olvassa el most).

Viszont nézzük meg, hogyan adhat hozzá saját beállítást egy vezérlőelemmel az új téma-testreszabási szakaszhoz, valamint néhány érvet. Mivel sokkal könnyebb dolgozni a valódi példákkal, az alábbiak szerint járunk el:

  • Egy új szakasz, „Elrendezés” felirattal
  • Egy új beállítás, amely tárolja a téma elrendezését
  • Új rádióvezérlő két lehetőséggel – oldalsáv a bal oldalon és oldalsáv a jobb oldalon

A Theme Customizerhez elsőként hozzá kell adni a „Layout” részt:

$ Wp_customize-> add_section (
// ID
'Layout_section',
// Argumentumok tömbje
sor(
'title' => __ ('Elrendezés', 'my_theme'),
'képesség' => 'edit_theme_options',
'description' => __ ('Lehetővé teszi a téma elrendezésének szerkesztését.', 'my_theme')
)
);

Még nem próbálhatja meg látni a testreszabóban, egy szakasz csak akkor jelenik meg, ha hozzá van adva egy beállítás és egy vezérlő. Tegyük fel mindkettőt:

$ Wp_customize-> add_setting (
// ID
'My_theme_settings [layout_setting]',
// Argumentumok tömbje
sor(
'alapértelmezett' => 'jobb oldali sáv',
'type' => 'option'
)
);
$ Wp_customize-> add_control (
// ID
'Layout_control',
// Argumentumok tömbje
sor(
'type' => 'radio',
'label' => __ ('téma elrendezése', 'my_theme'),
'section' => 'layout_section',
'választások' => tömb (
'bal oldali sáv' => __ ('bal oldali sáv', 'my_theme'),
'jobb oldalsáv' => __ ('jobb oldalsáv', 'my_theme')
),
// Ennek az utolsónak meg kell egyeznie a beállítási azonosítóval felülről
'beállítások' => 'my_theme_settings [layout_setting]'
)
);

Feltételezve, hogy elolvassa Alex oktató- és / vagy Codex oldalait, az add_setting argumentum tömbben csak egy paraméter található – „type” -, amelyre szeretnék összpontosítani. Itt két lehetőség van, az „opció” és a „téma_mod”, és ezeket felhasználhatja get_option és get_theme_mod, illetőleg. Mindig az „opciót” használom egyszerűen azért, mert lehetővé teszi a témabeállítások értékeinek sorba rendezését azáltal, hogy azonosítókat ad meg nekik my_theme_settings [setting_1], my_theme_settings [setting_2] Ilyen módon minden érték egyetlen adatbázis-bejegyzésként kerül tárolásra a wp_options táblában.

És végül, miután hozzáadta ezt a két kódrészletet, hogy működhessen customize_register akcióhorog (az első kódrészlet ebben a bejegyzésben), a Theme Customizer testreszabva:

Új szakasz került a téma testreszabáshoz

Új szakasz került a téma testreszabáshoz

A téma-testreszabási beállítások értékeinek használata a témában

Miután megadta a felhasználók számára a lehetőséget a beállítás tárolására, megragadhatja annak értékét, és bekapcsolhatja body_class szűrje meg a horgot, és adja hozzá a létező karosszériaosztályok tömbjéhez:

add_filter ('body_class', 'my_theme_body_classes');
funkció my_theme_body_classes ($ osztályok) {

/ *
* Mivel az „opciót” használtuk az add_setting argumentum tömbben
* az értéket a get_option függvény segítségével kapjuk meg
* /
$ my_theme_settings = get_option ('my_theme_settings');

$ osztályok [] = $ my_theme_settings ['layout_setting'];

visszatér $ osztályok;

}

Ez hozzáadja a .left-sidebar vagy .right-sidebar-t a témához tartozó testosztályok tömbjéhez. Ha ezt a két osztályt használja a téma stílus.css fájljában, akkor két különböző elrendezést hozhat létre. Például:

/ * A jobb oldali oldalsáv alapértelmezett elrendezése * /
#tartalom {
balra lebeg;
szélesség: 60%;
}
#oldalsáv {
úszó: jobb;
szélesség: 30%;
}

/ * A .left-sidebar osztály használata az alapértelmezett elrendezés felülbírálásához * /
.bal oldali sáv # tartalom {
úszó: jobb;
}
.bal oldali sáv # oldalsáv {
balra lebeg;
}

A legjobban, a WordPress Theme Customizernek köszönhetően a felhasználók mindkét elrendezést megtekintették, mielőtt bármit elmentnének. Vegyük ezt a témabeállítás-oldalakat!

Összegzés és további olvasat

A bejegyzés TL; DR változata így lenne: Kaphat $ wp_customize objektumot, majd hozzáadhat valamit (szakasz, beállítás vagy vezérlés), vagy eltávolíthat belőle. Minden más a beállítási paraméterekre utal.

A harmadik részben ez a sorozat érdekessé válik, amikor elkezdjük az egész folyamat automatizálását, és a téma testreszabási kazánlapján dolgozunk, amelyet belemeríthetünk a témába, és azonnal felhasználhatjuk. Maradjon velünk!

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