WordPress Theme Customizer kazánlap

WordPress Theme Customizer kazánlap
  1. 1. Bevezetés a WordPress Theme Customizer-be
  2. 2. Kölcsönhatás a WordPress Theme Customizer segítségével
  3. 3. Jelenleg olvas: 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

Frissítés: Ezt a cikket 2013. február 19-én szerkesztették, hogy tükrözze a Téma testreszabási kazánlapján végrehajtott változtatásokat.


Remélhetőleg elolvasta és élvezte a Theme Customizer sorozat első két üzenetét – a WordPress Theme Customizer bevezetése és a Theme Customizer együttműködése. Itt az ideje, hogy elmozduljon a főételre, és kezdje el összeállítani a Theme Customizer kazánlapját, amelyet felhasználhat a témáiban. Ez a bejegyzés néhány hosszú kódblokkot tartalmaz, ezért ügyeljen a beépített megjegyzésekre.

Jegyzet: Ha inkább csak a kazánlemezt használja, akkor töltse le a Githubból, és módosítsa a mezőket az $ options tömbben, a ‘thsp_cbp_options_array’ szűrőhorogba beakasztva..

Mit készítünk

Téma testreszabás Boilerplate könyvtár felépítése

Téma testreszabás Boilerplate könyvtár felépítése

  • customizer.php – Ez a fő téma-testreszabási kazánlap fájl, amely az opciótömb adataival egészíti ki a szakaszokat, beállításokat és vezérlőket
  • Egyedi controls.php – Egyéni vezérlőelemek és egy akcióhorog, amely lehetővé teszi a saját egyéni vezérlők hozzáadását
  • helpers.php – Segédfunkciók, a témaopciók, az alapértelmezett beállítások stb. Letöltésére.
  • options.php – Mintaopciók és egy szűrőhorog, amely lehetővé teszi az opciótömb szerkesztését és a saját mezők használatát
  • testreszabót-controls.css – Alapvető CSS a kép helyett a rádió egyedi vezérlése

Az egész ötlet az, hogy ezeket a fájlokat átmásolhassuk a témakönyvtár alkönyvtárába, beépítsük a customizer.php fájlt a function.php fájlba, és bármilyen tetszőleges fájlt megváltoztassunk, beleértve és különösen az opciótömböt, a Theme Customizer kazánlemez horgai segítségével (magyarázat a 4. részben). frissítés: Korábban csak az options.php-et szerkesztette, de a horgok használata sokkal tisztábbá teszi a dolgokat.

Most használjunk egy valódi példát – hozzáadunk egy szövegvezérlőt az új téma-testreszabási szakaszhoz. A tömböt segítő funkcióba helyezzük, és egy szűrőt alkalmazunk, amikor visszatérünk. Ily módon további lehetőségeket adhat hozzá egy gyermek témához vagy egy pluginhez. Itt van:

/ **
* Segéd funkció, amely számos témát tartalmaz.
*
* @return tömb $ options Téma lehetőségek tömbje
* @ a (z) customizer / helpers.php fájlban definiált thsp_get_theme_customizer_fields () felhasználást használja
* /
funkció thsp_get_theme_customizer_fields () {

/ *
* Segítő funkció használata az alapértelmezett szükséges képesség eléréséhez
* /
$ required_capability = thsp_settings_page_capability ();

$ options = tömb (


// Szekció azonosítója
'new_customizer_section' => tömb (

/ *
* Ellenőrizzük, hogy ez egy meglévő szakasz-e
* vagy egy új, amelyet regisztrálni kell
* /
'olemasoleva_szekció' => hamis,
/ *
* A szekcióval kapcsolatos érvek
* Codex - http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_section
* /
'args' => tömb (
'title' => __ ('Új szakasz címe', 'my_theme_textdomain'),
'description' => __ ('Új szakaszleírás', 'my_theme_textdomain'),
„prioritás” => 10
),

/ *
* A 'mezők' tömb tartalmazza az összes mezőt, amelynek lennie kell
* hozzáadva ehhez a szakaszhoz
* /
'mezők' => tömb (

/ *
* ==========
* ==========
* Szöveg mező
* ==========
* ==========
* /
// A mező azonosítója
'new_text_field' => tömb (
/ *
* A kapcsolódó érvek beállítása
* Codex - http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_setting
* /
'set_args' => tömb (
'alapértelmezett' => __ ('Alapértelmezett szövegérték', 'my_theme_textdomain'),
'type' => 'option',
'képesség' => $ szükséges_kapacitás,
'szállítás' => 'frissítés',
'sanitize_callback' => 'thsp_sanitize_cb',
),
/ *
* Ellenőrizze a kapcsolódó érveket
* Codex - http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_control
* /
'control_args' => tömb (
'label' => __ ('Új szövegvezérlő címke', 'my_theme_textdomain'),
'type' => 'text', // A szövegmező vezérlése
'prioritás' => 1
)
)

)

),

);

/ *
* A 'thsp_customizer_options' szűrőhorog lehetővé teszi
* adjon hozzá / távolítson el ezen lehetőségek közül néhányat a gyermektémából
* /
return apply_filters ('thsp_customizer_options', $ options);

}

frissítés: A tömb változatlan marad, de most továbbadhatja az opciótömböt egy szűrőhoroghoz is, lásd a 4. részben további részleteket.

Első pillantásra bonyolultnak tűnik, tudom, de hadd magyarázzam meg.

Az $ options a tömb szekciókból áll (ebben az esetben csak egy – new_customizer_section), minden szakasznak vannak argumentumai, mezői és logikai értéke (létező_szekció) annak jelzésére, hogy ez egy új szakasz, vagy csak néhány mezőt adunk hozzá egy meglévőhöz egy. Az érvek tömbje megegyezik azzal, amit átadott $ Wp_customize-> add_section eljárás. A mezők tömege kissé összetettebb.

frissítés: A választási tömb a vezérlő argumentumokban most egy többdimenziós tömb.

Minden mező egy Customizer beállításból és Customizer vezérlésből áll. Éppen ezért vannak set_args és control_args tömbök. Szinte pontosan ugyanazok, mint az argumentumtömbök, amelyeket átadottál $ Wp_customize-> add_setting és $ Wp_customize-> add_control mód. Az egyetlen különbség a „választási” tömb a vezérlő argumentumokban, a $ wp_customize-> add_control megköveteli, hogy ez egy egyszerű kulcs => értékpár tömb legyen, és többdimenziós tömböt használunk helyett.

Ilyen módon több adatot továbbíthat a választások mindegyikéhez, tehát ha például a Google Betűkészleteket tölt be a témájába, akkor olyan karakterláncokat fogsz használni, amelyek lehetővé teszik a megfelelő betűtípus betöltését a választási tömbbe . Láthat példát erre téma, amely a Customizer Boilerplate-t használja.

Tehát, ha már ismeri ezt a három módszert, az mind nagyon ismerős.

A jelölőnégyzet vezérlő hozzáadásával majdnem ugyanaz van, csak a „control_args” tömbben a „type” -et „checkbox” -ra kell változtatni:

/ *
* ==============
* Jelölőnégyzet mező
* ==============
* /
'new_checkbox_field' => tömb (
'set_args' => tömb (
'alapértelmezett' => igaz,
'type' => 'option',
'képesség' => $ szükséges_kapacitás,
'szállítás' => 'frissítés',
'sanitize_callback' => 'thsp_sanitize_cb',
),
'control_args' => tömb (
'label' => __ ('Új rádióvezérlő címke', 'my_theme_textdomain'),
'type' => 'jelölőnégyzet', // Jelölőnégyzet mező vezérlése
'prioritás' => 2
)
),

A rádió és a kiválasztott vezérlők majdnem megegyeznek, csak meg kell adnia az adott választást:

/ *
* ===========
* ===========
* Rádiómező
* ===========
* ===========
* /
'new_radio_field' => tömb (
'set_args' => tömb (
'alapértelmezett' => 'opció-2',
'type' => 'option',
'képesség' => $ thsp_cbp_capability,
'szállítás' => 'frissítés',
),
'control_args' => tömb (
'label' => __ ('Új rádióvezérlő címke', 'my_theme_textdomain'),
'type' => 'radio', // Rádióvezérlés
'választások' => tömb (
'opció-1' => tömb (
'label' => __ ('1. lehetőség', 'my_theme_textdomain')
),
'opció-2' => tömb (
'label' => __ ('2. lehetőség', 'my_theme_textdomain')
),
'opció-3' => tömb (
'label' => __ ('3. lehetőség', 'my_theme_textdomain')
)
),
„prioritás” => 3
)
),

/ *
* ============
* ============
* Válassza ki a mezőt
* ============
* ============
* /
'new_select_field' => tömb (
'set_args' => tömb (
'alapértelmezett' => '3-as lehetőség',
'type' => 'option',
'képesség' => $ thsp_cbp_capability,
'szállítás' => 'frissítés',
),
'control_args' => tömb (
'label' => __ ('Új kiválasztott mezőcímke', 'my_theme_textdomain'),
'type' => 'select', // vezérlés kiválasztása
'választások' => tömb (
'opció-1' => tömb (
'label' => __ ('1. lehetőség', 'my_theme_textdomain')
),
'opció-2' => tömb (
'label' => __ ('2. lehetőség', 'my_theme_textdomain')
),
'opció-3' => tömb (
'label' => __ ('3. lehetőség', 'my_theme_textdomain')
)
),
'prioritás' => 4
)
)

És végül, a WordPressbe beépített két összetett vezérlőtípus – fájlfeltöltés és képfeltöltés:

/ *
* ===========
* ===========
* Fájlfeltöltés
* ===========
* ===========
* /
'new_file_upload_field' => tömb (
'set_args' => tömb (
'alapértelmezett' => '',
'type' => 'option',
'képesség' => $ thsp_cbp_capability,
'szállítás' => 'frissítés',
),
'control_args' => tömb (
'label' => __ ('Fájl feltöltése', 'my_theme_textdomain'),
'type' => 'feltöltés', // A fájl feltöltése mező vezérlése
„prioritás” => 5
)
),

/ *
* ============
* ============
* Kép feltöltése
* ============
* ============
* /
'new_image_upload_field' => tömb (
'set_args' => tömb (
'alapértelmezett' => '',
'type' => 'option',
'képesség' => $ thsp_cbp_capability,
'szállítás' => 'frissítés',
),
'control_args' => tömb (
'label' => __ ('Képfeltöltés', 'my_theme_textdomain'),
'type' => 'image', // Képfeltöltési mező vezérlése
„prioritás” => 6
)
)

Vegye figyelembe, hogy én is használtam ‘Type’ => ‘option’ ezeknek a mezőknek az argumentumainak megadásakor Ez lehetővé teszi az összes érték egyetlen értékként történő tárolását az adatbázisban. Alternatív megoldás az ‘Type’ => ‘theme_mod’ de most maradjunk az ‘opcióval’.

Az Opció tömb használata testreszabási szakaszok, beállítások és kezelőszervek hozzáadására

Ha nem biztos benne, hogyan kell kommunikálni a WordPress Theme Customizer-rel, akkor menjen és ellenőrizze, mert ezt fogjuk csinálni. Az egyetlen különbség az, hogy a szakaszok, beállítások és vezérlőelemek egyenkénti hozzáadása helyett automatizáljuk a folyamatot a létrehozott sorosított tömb segítségével. Csak ugorjunk bele:

funkció thsp_cbp_customize_register ($ wp_customize) {

/ **
* Egyéni kezelőszervek
* /
igényel (dirname (__ FILE__). '/custom-controls.php');


/ *
* Szerezze be az összes mezőt segítő funkcióval
* /
$ thsp_sections = thsp_cbp_get_fields ();


/ *
* Kérje meg annak a DB-bejegyzésnek a nevét, amelybe az opciókat tárolja
* /
$ thsp_cbp_option = thsp_cbp_option ();


/ **
* Húzza át a tömböt, és adjon hozzá Customizer szakaszokat
* /
foreach ($ thsp_section mint $ thsp_section_key => $ thsp_section_value) {

/ **
* Szükség esetén hozzáadja a Customizer részt
* /
if (! $ thsp_section_value ['olemasoleva_rész']) {

$ thsp_section_args = $ thsp_section_value ['args'];

// szakasz hozzáadása
$ Wp_customize-> add_section (
$ thsp_section_key,
$ thsp_section_args
);

} // vége, ha

/ *
* Húzza át a 'mezők' tömböt minden szakaszban
* és adjon hozzá beállításokat és vezérlőket
* /
$ thsp_section_fields = $ thsp_section_value ['fields'];
foreach ($ thsp_section_mezők mint $ thsp_field_key => $ thsp_field_value) {

/ *
* Ellenőrizze, hogy az 'opció' vagy 'téma_mod' kerül-e az opció tárolására
*
* Ha semmi nincs beállítva, akkor a $ wp_customize-> add_setting metódus alapértelmezés szerint „theme_mod” lesz.
* Ha az "opciót" használja beállítási típusként, akkor az értéke egy bejegyzésben kerül tárolásra
* {előtag} _opciók táblája. Az opció nevét a thsp_cbp_option () függvény határozza meg
* /
if (isset ($ thsp_field_value ['setting_args'] ['type']) && 'option' == $ thsp_field_value ['setting_args'] ['type']) {
$ setting_control_id = $ thsp_cbp_option. „[”. $ thsp_field_key. ']';
} más {
$ setting_control_id = $ thsp_field_key;
}

/ *
* Adjon hozzá alapértelmezett visszahívási funkciót, ha egyik nincs megadva
* /
if (! isset ($ thsp_field_value ['setting_args'] ['sanitize_cb'])))
$ thsp_field_value ['setting_args'] ['sanitize_cb'] = 'thsp_cbp_sanitize_cb';
}

/ **
* Hozzáteszi a testreszabási beállításokat
* /
$ Wp_customize-> add_setting (
$ setting_control_id,
$ Thsp_field_value [ 'setting_args']
);

/ **
* Hozzáteszi a Customizer vezérlését
*
* A 'szakasz' értéket hozzá kell adni a 'control_args' tömbhöz
* így a vezérlés hozzáadható az aktuális szakaszhoz
* /
$ thsp_field_value ['control_args'] ['section'] = $ thsp_section_key;

/ *
* $ wp_customize-> add_control módszer megköveteli, hogy a 'választások' legyen egy egyszerű kulcs => értékpár
* /
if (isset ($ thsp_field_value ['control_args'] ['options']))) {
$ thsp_cbp_choices = array ();
foreach ($ thsp_field_value ['control_args'] ['options'] mint $ thsp_cbp_choice_key => $ thsp_cbp_choice_value) {
$ thsp_cbp_choices [$ thsp_cbp_choice_key] = $ thsp_cbp_choice_value ['label'];
}
$ thsp_field_value ['control_args'] ['options'] = $ thsp_cbp_choices;
}


// Ellenőrizze a vezérlés típusát
if ('color' == $ thsp_field_value ['control_args'] ['type']) {
$ Wp_customize-> add_control (
új WP_Customize_Color_Control (
$ wp_customize,
$ setting_control_id,
$ Thsp_field_value [ 'control_args']
)
);
} elseif ('image' == $ thsp_field_value ['control_args'] ['type']) {
$ Wp_customize-> add_control (
új WP_Customize_Image_Control (
$ wp_customize,
$ setting_control_id,
$ Thsp_field_value [ 'control_args']
)
);
} elseif ('feltöltés' == $ thsp_field_value ['control_args'] ['type']) {
$ Wp_customize-> add_control (
új WP_Customize_Upload_Control (
$ wp_customize,
$ setting_control_id,
$ Thsp_field_value [ 'control_args']
)
);
} más {
$ Wp_customize-> add_control (
$ setting_control_id,
$ Thsp_field_value [ 'control_args']
);
}

} // end foreach

} // end foreach

}
add_action ('testreszabási regiszter', 'thsp_cbp_customize_register');

Halad át az összes szakaszon, hozzáadja azokat, amelyek még nem léteznek, majd átlépteti az egyes szakaszok összes mezőjét, hozzáadva egy beállítást és vezérlőt mindegyikhez. Ez minden, ami itt folyik.

Ne feledje, hogy az összes beállításhoz ‘type’ => ‘option’ -t használtunk? Ezért van most „My_theme_options [$ thsp_field_key]” mind a beállítások, mind a szakaszok számára. Ez az összes értéket egy sorosított tömbként tárolja, amelyet a használatával lehet letölteni get_option (‘my_theme_options’). Vagy csak használhatja az alábbiakban meghatározott segítő funkciókat helpers.php az összes mező aktuális és alapértelmezett értékeinek lekéréséhez:

/ **
* Opcióértékek beszerzése
*
* Tömb, amely az összes opciós értéket tartalmazza
* Az opció alapértelmezett értékét akkor használja, ha a felhasználó nem adott meg értéket
*
* @felhasználja a thsp_get_theme_customizer_defaults () fájlt a /customizer/options.php fájlban
* @ visszatérő tömb Az összes opció aktuális értékei
* @since Theme_Customizer_Boilerplate 1.0
* /
funkció thsp_cbp_get_options_values ​​() {

// Az opció alapértelmezett értékeinek beolvasása
$ option_defaults = thsp_cbp_get_options_defaults ();

// A tárolt opciók elemzése az alapértelmezésekkel
$ thsp_cbp_options = wp_parse_args (get_option (thsp_cbp_option (), array ()), $ option_defaults);

// Visszaadja az elemzett tömböt
return $ thsp_cbp_options;

}


/ **
* Az Opció alapértelmezéseinek beolvasása
*
* Olyan tömböt ad vissza, amely minden opció alapértelmezett értékeit tartalmazza
*
* @ a thsp_get_theme_customizer_fields () fájlt használja a /customizer/options.php fájlban
* @return array $ thsp_option_defaults Alapértelmezett értékek az összes opcióhoz
* @since Theme_Customizer_Boilerplate 1.0
* /
funkció thsp_cbp_get_options_defaults () {

// Szerezze be az összes témaopció-mezőt tartalmazó tömböt
$ thsp_sections = thsp_cbp_get_fields ();

// Inicializálja a tömböt az összes témaopció alapértelmezett értékeinek megtartásához
$ thsp_option_defaults = tömb ();

// Húzza át az opciós paraméterek tömbjét
foreach ($ thsp_section mint $ thsp_section) {

$ thsp_section_fields = $ thsp_section ['fields'];

foreach ($ thsp_section_mezők mint $ thsp_field_key => $ thsp_field_value) {

// Adjon hozzá egy asszociatív tömb kulcsot az alapértelmezett tömbhöz a paraméter tömb minden egyes opciójához
if (isset ($ thsp_field_value ['setting_args'] ['default']))) {
$ thsp_option_defaults [$ thsp_field_key] = $ thsp_field_value ['setting_args'] ['default'];
} más {
$ thsp_option_defaults [$ thsp_field_key] = false;
}

}

}

// Visszaadja az alapértelmezett tömböt
return $ thsp_option_defaults;

}

Csak még egy dolgot kell megemlítenem – a szennyvízkezelés visszahívási funkciója, amelyet a ‘set_args’ tömbben adtunk meg. A függvény az exten.php fájlban van meghatározva, és egyszerűen csak az adatokat futtatja wp_kses_post funkció:

/ **
* Téma Customizer tisztító visszahívási funkció
* /
funkció thsp_sanitize_cb ($ input) {

return wp_kses_post ($ input);

}

Honnan innen?

Mostantól ezt a téma-testreszabási kazánlapot használhatja a témáiban, csupán annyit kell tennie, hogy töltse le a Githubból, másolja be a téma könyvtárába, és tartalmazza a function.php fájlját, amely 100% -ban funkcionális és a legtöbb számára elég jó témák.

Mivel a témád nem olyan, mint a legtöbb téma, a jövő héten meglátjuk, hogyan lehet kibővíteni a kazánlemezt a szűrő és az akcióhorgok segítségével..

Szeretném hallani, hogy Ön szerint hogyan lehetne javítani vagy kibővíteni ezt a kazánlapot, ezért kérjük, tüzesítse ki a megjegyzéseket.

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