Boilerplate fyrir sérsniðið WordPress þema

Boilerplate fyrir sérsniðið WordPress þema
  1. 1. Kynning á WordPress þema sérsniðna
  2. 2. Samskipti við WordPress þema sérsniðna
  3. 3. Lestur sem stendur: Boilerplate fyrir sérsniðið WordPress þema
  4. 4. Útvíkkun ketilsplata WordPress þema
  5. 5. Þema sérsniðið ketilplata – Skilyrt valmöguleikar, barnaþemu og viðbætur

Uppfærsla: Þessari grein hefur verið breytt 19. febrúar 2013 til að endurspegla breytingarnar sem gerðar voru á Theme Customizer Boilerplate.


Vonandi lasstu og hafðir gaman af fyrstu tveimur færslunum af Þema Customizer röð – Kynning á WordPress Theme Customizer og samskipti við Theme Customizer. Nú er kominn tími til að fara yfir á aðalrétt og byrja að setja saman Theme Customizer ketilplötuna sem þú munt geta notað í þemunum þínum. Þessi færsla hefur að geyma nokkrar langar kóða af kóða, svo vertu gaum að athugasemdum.

Athugasemd: Ef þú vilt frekar bara nota ketilplötuna strax geturðu hlaðið því niður frá Github og breytt reitum í valkostum $ með því að krækja í „thsp_cbp_options_array“ síukrókinn.

Það sem við erum að skapa

Þema Customizer Boilerplate skrá uppbygging

Þema Customizer Boilerplate skrá uppbygging

  • customizer.php – Þetta er aðal Theme Customizer ketilplatan, sú sem bætir við köflum, stillingum og stýringum með því að nota gögn úr valmyndaröðinni
  • custom-controls.php – Sérsniðin stjórntæki og aðgerðarkrókur sem gerir þér kleift að bæta við þínum eigin sérsniðnum stjórntækjum
  • helpers.php – Hjálparaðgerðir, notaðar til að sækja þemavalkosti, vanskil valkosta o.s.frv.
  • options.php – Sýnishornarkostir og síukrókur sem gerir þér kleift að breyta valmöguleikanum og nota þína eigin reiti
  • sérsniðin-controls.css – Basic CSS fyrir mynd í stað útvarps sérsniðna stjórnun

Hugmyndin í heild sinni er að geta afritað þessar skrár í undirskrá í þemaskránni þinni, innihaldið customizer.php skrá frá aðgerðunum þínum.php og breytt öllu sem þér líkar, þar með talið og sérstaklega valmöguleikanum, með því að nota Theme Customizer Boilerplate krókana (útskýrt í 4. hluta). Uppfæra: Áður myndirðu bara breyta options.php, en með því að nota króka gerir hlutirnir miklu hreinni.

Nú skulum við nota raunverulegt dæmi – við bætum textastýringu við nýjan þema sérsniðna hluta. Fylkingin er sett í hjálparaðgerð og síu beitt á hana þegar henni er skilað. Þannig geturðu bætt við fleiri valkostum frá þema barns eða viðbót. Hérna er það:

/ **
* Hjálparaðgerð sem geymir fjölda þemavalkosta.
*
* @ endurtaka array $ valkostir Fylking af þemavalkostum
* @ notar thsp_get_theme_customizer_fields () skilgreint í customizer / helpers.php
* /
virka thsp_get_theme_customizer_fields () {

/ *
* Notkun hjálparaðgerða til að fá sjálfgefna hæfileika
* /
$ required_capability = thsp_settings_page_capability ();

$ valkostir = fylki (


// Auðkenni hlutans
'new_customizer_section' => fylki (

/ *
* Við erum að athuga hvort þetta er núverandi hluti
* eða nýjan sem þarf að skrá
* /
'exist_section' => ósatt,
/ *
* Rök tengd kafla
* Codex - http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_section
* /
'args' => fylki (
'title' => __ ('Nýr hluti titils', 'my_theme_textdomain'),
'description' => __ ('Ný hlutalýsing', 'my_theme_textdomain'),
'forgang' => 10
),

/ *
* 'reitir' fylki inniheldur alla reitina sem þarf að vera
* bætt við þennan hluta
* /
'sviðum' => fylki (

/ *
* ==========
* ==========
* Textareitur
* ==========
* ==========
* /
// Auðkenni reits
'new_text_field' => fylki (
/ *
* Að setja tengd rök
* Codex - http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_setting
* /
'setting_args' => fylki (
'default' => __ ('Sjálfgefið textagildi', 'my_theme_textdomain'),
'type' => 'valkostur',
'capability' => $ required_capability,
'flutningur' => 'hressa',
'sanitize_callback' => 'thsp_sanitize_cb',
),
/ *
* Stjórna tengdum rökum
* Codex - http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_control
* /
'control_args' => fylki (
'label' => __ ('Nýr textastýringarmerki', 'my_theme_textdomain'),
'type' => 'texti', // Textasviðsstýring
'forgang' => 1
)
)

)

),

);

/ *
* „thsp_customizer_options“ síukrókurinn gerir þér kleift að gera það
* bæta við / fjarlægja nokkra af þessum valkostum úr þema barns
* /
skila Apply_Filters ('thsp_customizer_options', $ valkostir);

}

Uppfæra: Fylkingin helst sú sama, en nú er einnig hægt að færa valmöguleika fylkisins yfir á síukrók, sjá kafla 4 fyrir frekari upplýsingar.

Útlit flókið við fyrstu sýn, ég veit það, en leyfðu mér að útskýra það.

The $ valkostir fylking samanstendur af hlutum (eingöngu) í þessu tilfelli – new_customizer_section), hver hluti hefur sín rök, reiti og boolean gildi (núverandi_section) til að gefa til kynna hvort það er nýr hluti, eða við erum bara að bæta nokkrum reitum við núverandi einn. Ritagreining er samhljóða því sem þú vilt fara í $ wp_customize-> add_section aðferð. Akurreiturinn er aðeins flóknari.

Uppfæra: valröð í stjórnunarrökum er nú fjölvíddaröð.

Hver reitur samanstendur af Customizer stilling og Customizer stjórnun. Þess vegna höfum við stillingar- og stjórnunar-fylki. Þeir eru næstum því nákvæmlega eins og rifrildi fylki sem þú munt fara í $ wp_customize-> add_setting og $ wp_customize-> add_control aðferðum. Eini munurinn er fylkingin „val“ í stjórnunarrökum, $ wp_customize-> add_control krefst þess að það sé einfaldur lykill => gildi par fylki og við notum fjölvíddaröð í staðinn.

Þannig er mögulegt að koma fleiri gögnum á framfæri við hvert val, svo ef þú ert til dæmis að hlaða Google leturgerðir í þemað þitt muntu geta haft strengi sem gera þér kleift að hlaða rétt letur í valvalmyndinni . Þú getur séð dæmi um þetta þema sem notar Customizer Boilerplate.

Svo ef þú ert þegar meðvitaður um þessar þrjár aðferðir, þá er það allt mjög kunnugt.

Að bæta við gátreitastýringu er næstum því sama, þú þarft bara að breyta ‘tegund’ í ‘gátreit’ í ‘control_args’ fylki:

/ *
* ==============
* Gátreiturinn reitur
* ==============
* /
'new_checkbox_field' => fylki (
'setting_args' => fylki (
'default' => satt,
'type' => 'valkostur',
'capability' => $ required_capability,
'flutningur' => 'hressa',
'sanitize_callback' => 'thsp_sanitize_cb',
),
'control_args' => fylki (
'label' => __ ('Ný merki um útvarpsstjórnun', 'my_theme_textdomain'),
'type' => 'gátreitur', // Reitstýring gátkassa
'forgang' => 2
)
),

Útvarps- og valstýringar eru næstum því eins, þú þarft bara að tilgreina gefna val:

/ *
* ===========
* ===========
* Útvarpsreitur
* ===========
* ===========
* /
'new_radio_field' => fylki (
'setting_args' => fylki (
'default' => 'valkostur-2',
'type' => 'valkostur',
'capability' => $ thsp_cbp_capability,
'flutningur' => 'hressa',
),
'control_args' => fylki (
'label' => __ ('Ný merki um útvarpsstjórnun', 'my_theme_textdomain'),
'type' => 'útvarp', // Útvarpsstýring
'choice' => fylki (
'option-1' => fylki (
'label' => __ ('Valkostur 1', 'my_theme_textdomain')
),
'option-2' => fylki (
'label' => __ ('Valkostur 2', 'my_theme_textdomain')
),
'option-3' => fylki (
'label' => __ ('Valkostur 3', 'my_theme_textdomain')
)
),
'forgang' => 3
)
),

/ *
* ============
* ============
* Veldu reit
* ============
* ============
* /
'new_select_field' => fylki (
'setting_args' => fylki (
'default' => 'valkostur-3',
'type' => 'valkostur',
'capability' => $ thsp_cbp_capability,
'flutningur' => 'hressa',
),
'control_args' => fylki (
'label' => __ ('Nýtt valið reitamerki', 'my_theme_textdomain'),
'type' => 'velja', // Veldu stjórn
'choice' => fylki (
'option-1' => fylki (
'label' => __ ('Valkostur 1', 'my_theme_textdomain')
),
'option-2' => fylki (
'label' => __ ('Valkostur 2', 'my_theme_textdomain')
),
'option-3' => fylki (
'label' => __ ('Valkostur 3', 'my_theme_textdomain')
)
),
'forgang' => 4
)
)

Og að lokum, tvær flóknar stjórntegundir sem eru innbyggðar í WordPress – hlaða upp skrá og hlaða upp mynd:

/ *
* ===========
* ===========
* Upphala skrá
* ===========
* ===========
* /
'new_file_upload_field' => fylki (
'setting_args' => fylki (
'default' => '',
'type' => 'valkostur',
'capability' => $ thsp_cbp_capability,
'flutningur' => 'hressa',
),
'control_args' => fylki (
'label' => __ ('Upphala skrá', 'my_theme_textdomain'),
'type' => 'senda', // stjórnun skráarupphleðslu
'forgang' => 5
)
),

/ *
* ============
* ============
* Hlaða upp mynd
* ============
* ============
* /
'new_image_upload_field' => fylki (
'setting_args' => fylki (
'default' => '',
'type' => 'valkostur',
'capability' => $ thsp_cbp_capability,
'flutningur' => 'hressa',
),
'control_args' => fylki (
'label' => __ ('Upphala mynd', 'my_theme_textdomain'),
'type' => 'mynd', // stjórnun á upphleðslu myndar
'forgang' => 6
)
)

Athugið að ég notaði ‘Tegund’ => ‘valkostur’ við að setja rök fyrir öllum þessum sviðum. Þetta gerir kleift að geyma öll gildi sem eitt gildi í gagnagrunninum. Valkosturinn er ‘Tegund’ => ‘þema_móðir’ en í bili skulum við halda okkur við „valkost“.

Notkun valmöguleika fyrir að bæta við sérsniðnum hlutum, stillingum og stýringum

Ef þú ert ekki viss um hvernig þú átt í samskiptum við WordPress Theme Customizer skaltu fara og athuga, því það er það sem við munum gera núna. Eini munurinn er sá að í stað þess að bæta við köflum, stillingum og stýringum í einu, munum við gera sjálfvirkan aðferð með raðgreiddri röð sem við bjuggum til. Við skulum hoppa aðeins inn í það:

fall thsp_cbp_customize_register ($ wp_customize) {

/ **
* Sérsniðin stjórntæki
* /
krefjast (dirname (__ FILE__). '/custom-controls.php');


/ *
* Fáðu alla reitina með hjálparaðgerð
* /
$ thsp_sections = thsp_cbp_get_fields ();


/ *
* Fáðu nafn DB-færslunnar þar sem valkostir verða geymdir
* /
$ thsp_cbp_option = thsp_cbp_option ();


/ **
* Lykkið í gegnum fylkinguna og bætið við Customizer hlutum
* /
foreach ($ thsp_sections sem $ thsp_section_key => $ thsp_section_value) {

/ **
* Bætir við sérsniðnum hluta, ef þörf krefur
* /
ef (! $ thsp_section_value ['núverandi_section']) {

$ thsp_section_args = $ thsp_section_value ['args'];

// Bæta við kafla
$ wp_customize-> add_section (
$ thsp_section_key,
$ thsp_section_args
);

} // enda ef

/ *
* Lykkið í gegnum „reiti“ fylki í hverjum kafla
* og bæta við stillingum og stjórntækjum
* /
$ thsp_section_fields = $ thsp_section_value ['field'];
foreach ($ thsp_section_fields sem $ thsp_field_key => $ thsp_field_value) {

/ *
* Athugaðu hvort 'valkostur' eða 'þema_móði' er notað til að geyma valkost
*
* Ef ekkert er stillt mun $ wp_customize-> add_setting aðferð vera 'þema_móði' sjálfgefið
* Ef 'valkostur' er notaður sem stillingartegund verður gildi hans geymt í færslu í
* {forskeyti} _ val á töflu. Valkostarheiti er skilgreint með thsp_cbp_option () aðgerðinni
* /
if (isset ($ thsp_field_value ['setting_args'] ['type']) && 'option' == $ thsp_field_value ['setting_args'] ['type']) {
$ setting_control_id = $ thsp_cbp_option. '['. $ thsp_field_key. ']';
} Annar {
$ setting_control_id = $ thsp_field_key;
}

/ *
* Bættu við sjálfgefinni svarhringingu ef engin er skilgreind
* /
ef (! isset ($ thsp_field_value ['setting_args'] ['sanitize_cb'])) {
$ thsp_field_value ['setting_args'] ['sanitize_cb'] = 'thsp_cbp_sanitize_cb';
}

/ **
* Bætir við sérsniðnum stillingum
* /
$ wp_customize-> add_setting (
$ stilling_stjórnun_id,
$ thsp_field_value ['setting_args']
);

/ **
* Bætir við stjórnun viðskiptavina
*
* 'hluti' gildi verður að bæta við 'control_args' fylki
* svo stjórn geta bætt við núverandi hluta
* /
$ thsp_field_value ['control_args'] ['section'] = $ thsp_section_key;

/ *
* $ wp_customize-> add_control aðferð krefst þess að 'val' sé einfaldur lykill => gildi par
* /
if (isset ($ thsp_field_value ['control_args'] ['val'])) {
$ thsp_cbp_choices = fylki ();
foreach ($ thsp_field_value ['control_args'] ['choice'] sem $ 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'] ['choice'] = $ thsp_cbp_choices;
}


// Athugaðu tegund stjórna
if ('litur' == $ thsp_field_value ['control_args'] ['type']) {
$ wp_customize-> add_control (
nýr WP_Customize_Color_Control (
$ wp_customize,
$ stilling_stjórnun_id,
$ thsp_field_value ['control_args']
)
);
} elseif ('mynd' == $ thsp_field_value ['control_args'] ['type']) {
$ wp_customize-> add_control (
nýtt WP_Customize_Image_Control (
$ wp_customize,
$ stilling_stjórnun_id,
$ thsp_field_value ['control_args']
)
);
} elseif ('upload' == $ thsp_field_value ['control_args'] ['type']) {
$ wp_customize-> add_control (
nýtt WP_Customize_Upload_Control (
$ wp_customize,
$ stilling_stjórnun_id,
$ thsp_field_value ['control_args']
)
);
} Annar {
$ wp_customize-> add_control (
$ stilling_stjórnun_id,
$ thsp_field_value ['control_args']
);
}

} // enda foreach

} // enda foreach

}
add_action ('customize_register', 'thsp_cbp_customize_register');

Fara í gegnum alla hluti, bæta þeim sem eru ekki þegar til, fara síðan í gegnum alla reitina í hverjum kafla, bæta við stillingu og stýringu fyrir hvern og einn. Það er allt sem er að gerast hér.

Mundu að við notuðum ‘type’ => ‘valkost’ fyrir alla stillingarnar? Þess vegna höfum við núna „My_theme_options [$ thsp_field_key]“ fyrir bæði stillingar og hluta. Þetta mun geyma öll gildi sem eina raðgreina sem þú getur sótt með því að nota get_option (‘my_theme_options’). Eða þú getur bara notað hjálparaðgerðir sem skilgreindar eru í helpers.php til að sækja bæði núverandi gildi og sjálfgefin gildi fyrir alla reiti:

/ **
* Fáðu valmöguleika
*
* Array sem geymir öll valmöguleika
* Sjálfgefið gildi valmöguleikans er notað ef notandi hefur ekki tilgreint gildi
*
* @ notar thsp_get_theme_customizer_defaults () skilgreint í /customizer/options.php
* @ endurtaka fylking Núverandi gildi fyrir alla valkosti
* @since Theme_Customizer_Boilerplate 1.0
* /
fallið thsp_cbp_get_options_values ​​() {

// Fáðu sjálfgefið valkost
$ option_defaults = thsp_cbp_get_options_defaults ();

// Gegnið á vistaða valkosti með vanskilunum
$ thsp_cbp_options = wp_parse_args (get_option (thsp_cbp_option (), fylki ()), $ option_defaults);

// Skilið þáttaröðinni aftur
skila $ thsp_cbp_options;

}


/ **
* Fáðu vanskil
*
* Skilar fylki sem hefur sjálfgefið gildi fyrir alla valkosti
*
* @ notar thsp_get_theme_customizer_fields () skilgreint í /customizer/options.php
* @ endurtaka fylki $ thsp_option_defaults Sjálfgefin gildi fyrir alla valkosti
* @since Theme_Customizer_Boilerplate 1.0
* /
fall thsp_cbp_get_options_defaults () {

// Fáðu fylkið sem geymir alla reiti þemavalkostar
$ thsp_sections = thsp_cbp_get_fields ();

// Frumstilla fylkinguna til að halda sjálfgefnum gildum fyrir alla þemavalkosti
$ thsp_option_defaults = fylki ();

// Lykkið í gegnum valkostsins breyturöð
foreach ($ thsp_sections sem $ thsp_section) {

$ thsp_section_fields = $ thsp_section ['sviðum'];

foreach ($ thsp_section_fields sem $ thsp_field_key => $ thsp_field_value) {

// Bætið tengipunktalykli við sjálfgefið fylki fyrir hvern valkost í færibreytum
if (isset ($ thsp_field_value ['setting_args'] ['default'])) {
$ thsp_option_defaults [$ thsp_field_key] = $ thsp_field_value ['setting_args'] ['default'];
} Annar {
$ thsp_option_defaults [$ thsp_field_key] = ósatt;
}

}

}

// Til baka staðalkerfið
skila $ thsp_option_defaults;

}

Það er aðeins eitt sem ég ætti að nefna – endurtekningaraðgerð fyrir hreinsun sem við tilgreindum í röðinni „setting_args“. Aðgerð er skilgreind í ext.php og keyrir einfaldlega gögn í gegnum wp_kses_post fall:

/ **
* Þema Customizer hreinsun svarhringingu virka
* /
fall thsp_sanitize_cb ($ inntak) {

skila wp_kses_post ($ inntak);

}

Hvar á að fara héðan?

Í bili geturðu notað þennan Þema Customizer Boilerplate í þemunum þínum, allt sem þú þarft að gera er að hlaða því niður frá Github, afrita í skrá þemans þíns og innihalda aðalskrána frá features.php, sem er 100% virk og nógu góð fyrir flesta þemu.

Þar sem þemað þitt er ekki „eins og flest þemu“, sjáum við í næstu viku hvernig á að lengja ketilplötuna með síu og aðgerðakrókum.

Ég vildi gjarnan heyra hvernig þér finnst að hægt væri að bæta eða stækka þessa ketilplötu, svo vinsamlegast skelltu þér í athugasemdirnar.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Adblock
    detector