WordPress Tema za prilagodbu teme kotlovske ploče

WordPress Tema za prilagodbu teme kotlovske ploče
  1. 1. Uvod u WordPress alat za prilagodbu tema
  2. 2. Interakcija s alatom za prilagodbu teme WordPress
  3. 3. Trenutno čitam: WordPress Tema za prilagodbu teme kotlovske ploče
  4. 4. Proširenje ploče s kotlovskom pločicom za prilagodbu teme WordPress
  5. 5. Ploča s kotlovnicom za prilagodbu tema – uvjetne mogućnosti, teme za djecu i dodaci

Ažuriranje: Ovaj je članak uređen 19. veljače 2013. kako bi odražavao promjene koje su učinjene na ploči s kotlovnicom za prilagodbu teme.


Nadam se da ste pročitali i uživali u prva dva posta iz serije Prilagoditelj tema – Uvod u WordPress prilagodnik tema i interakcija s Prilagoditeljem tema. Sada je vrijeme da se prebacite na glavno jelo i započnemo s sastavljanjem ploče s gumbom za prilagodbu teme koju ćete moći koristiti u svojim temama. Ovaj post sadrži nekoliko dugačkih blokova koda, pa obratite pažnju na umetnute komentare.

Bilješka: Ako biste radije iskoristili ploču za grijanje, možete je preuzeti s Github-a i mijenjati polja u nizu $ options tako da se zakačite na ‘thsp_cbp_options_array’ kuku filtra.

Što stvaramo

Struktura direktorija kotlovske ploče tematskog prilagodnika

Struktura direktorija kotlovske ploče tematskog prilagodnika

  • customizer.php – Ovo je glavna datoteka tematske ploče s alatima za prilagodbu teme, ona koja dodaje odjeljke, postavke i kontrole koristeći podatke iz polja opcija
  • custom-controls.php – Prilagođene klase kontrola i akcijska kuka koja vam omogućuje dodavanje vlastitih prilagođenih kontrola
  • helpers.php – Pomoćne funkcije, koriste se za dohvaćanje opcija tema, zadanih postavki itd.
  • options.php – Primjer mogućnosti i kuka za filtriranje koja vam omogućuje uređivanje niza opcija i korištenje vlastitih polja
  • prilagodbu-controls.css – Osnovni CSS za sliku zamijenjen radio prilagođenim upravljanjem

Cijela ideja je moći kopirati ove datoteke u poddirektoriju u direktoriju tema, uključiti customizer.php datoteku iz svoje funkcije.php i promijeniti sve što vam se sviđa, uključujući, a posebice niz opcija, pomoću kukica kuke za tematske prilagodnike na kotlovskoj ploči (objašnjeno u dijelu 4). Ažuriraj: Prethodno biste samo uređivali options.php, ali upotrebom kuka stvari su puno čišće.

Upotrijebimo stvarni primjer – dodaćemo tekstualnu kontrolu u novi odjeljak za prilagodbu tema. Niz se postavlja u pomoćnu funkciju i na nju se primjenjuje filtar kad se vrati. Na ovaj način možete dodati više opcija iz podređene teme ili dodatka. Evo ga:

/ **
* Pomoćna funkcija koja sadrži niz mogućnosti tema.
*
* @return niz opcija $ Niz opcija tema
* @uses thsp_get_theme_customizer_fields () definirano u customizer / helpers.php
* /
funkcija thsp_get_theme_customizer_fields () {

/ *
* Pomoću pomoćne funkcije za dobivanje zadane potrebne mogućnosti
* /
$ Requir_capability = thsp_settings_page_capability ();

$ options = niz (


// ID odjeljka
'new_customizer_section' => niz (

/ *
* Provjeravamo je li to postojeći odjeljak
* ili novi koji treba biti registriran
* /
'postojeća_sekcija' => netočno,
/ *
* Argumenti u vezi s odjeljkom
* Codex - http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_section
* /
'args' => niz (
'title' => __ ('Novi naslov odjeljka', 'my_theme_textdomain'),
'description' => __ ('Novi opis odjeljka', 'my_theme_textdomain'),
'prioritet' => 10
),

/ *
* polja 'polja sadrže sva polja koja trebaju biti
* dodano u ovaj odjeljak
* /
'polja' => niz (

/ *
* ==========
* ==========
* Polje za tekst
* ==========
* ==========
* /
// ID polja
'new_text_field' => niz (
/ *
* Postavljanje povezanih argumenata
* Codex - http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_setting
* /
'setting_args' => niz (
'default' => __ ('Zadana vrijednost teksta', 'my_theme_textdomain'),
'type' => 'opcija',
'sposobnost' => $ potrebna_mogućnost,
'transport' => 'osvježi',
'sanitize_callback' => 'thsp_sanitize_cb',
),
/ *
* Kontrole u vezi s argumentima
* Codex - http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_control
* /
'control_args' => niz (
'label' => __ ('Nova oznaka kontrole teksta', 'my_theme_textdomain'),
'type' => 'text', // Kontrola tekstualnog polja
'prioritet' => 1
)
)

)

),

);

/ *
* 'thsp_customizer_options' kuka za filtriranje omogućit će vam da
* dodajte / uklonite neke od tih opcija iz podređene teme
* /
return apply_filters ('thsp_customizer_options', $ opcije);

}

Ažuriraj: Niz ostaje isti, ali sada također možete proslijediti niz opcija opcijama na kuku filtra, pogledajte dio 4 za više detalja..

Na prvi pogled djeluje komplicirano, znam, ali dopustite mi da objasnim.

opcije $ niz se sastoji od odjeljka (samo jednog u ovom slučaju – new_customizer_section), svaki odjeljak ima svoje argumente, polja i logičku vrijednost (postojeća_sekcija) da naznači je li to novi odjeljak ili samo dodavamo neka polja postojećem jedan. Niz argumenata je identičan onome što biste prenijeli $ Wp_customize-> add_section način. Niz polja je malo složeniji.

Ažuriraj: niz izbora u kontrolnim argumentima sada je višedimenzionalni niz.

Svako se polje sastoji od postavke Customizer i Customizer kontrole. Zbog toga imamo skupove postavki_args i control_args. Gotovo su potpuno isti kao argumenti nizova koje biste prenijeli $ Wp_customize-> add_setting i $ Wp_customize-> add_control metode. Jedina razlika je niz odabira u kontrolnim argumentima, $ wp_customize-> add_control zahtijeva da to bude jednostavan ključ => vrijednost vrijednosti parova, a mi umjesto toga koristimo višedimenzionalni niz.

Na ovaj je način moguće proslijediti više podataka svakom izboru, tako da ako, primjerice, učitavate Google Fontove u svoju temu, moći ćete imati žice koje omogućuju učitavanje ispravnog fonta u niz izbora , Možete vidjeti primjer toga tema koja koristi Customizer Boilerplate.

Dakle, ako ste već upoznati s ove tri metode, sve su to vrlo poznate.

Dodavanje potvrdnog okvira gotovo je isto, samo trebate promijeniti “vrstu” u “potvrdni okvir” u nizu “control_args”:

/ *
* ==============
* Polje za potvrdu
* ==============
* /
'new_checkbox_field' => niz (
'setting_args' => niz (
'zadano' => točno,
'type' => 'opcija',
'sposobnost' => $ potrebna_mogućnost,
'transport' => 'osvježi',
'sanitize_callback' => 'thsp_sanitize_cb',
),
'control_args' => niz (
'label' => __ ('Nova oznaka radijske kontrole', 'my_theme_textdomain'),
'type' => 'checkbox', // kontrola polja za potvrdni okvir
'prioritet' => 2
)
),

Kontrole za radio i odabir su gotovo iste, samo trebate odrediti odabrane opcije:

/ *
* ============
* ============
* Radio polje
* ============
* ============
* /
'new_radio_field' => niz (
'setting_args' => niz (
'zadano' => 'opcija-2',
'type' => 'opcija',
'sposobnost' => $ thsp_cbp_capability,
'transport' => 'osvježi',
),
'control_args' => niz (
'label' => __ ('Nova oznaka radijske kontrole', 'my_theme_textdomain'),
'type' => 'radio', // Radio kontrola
'choices' => niz (
'option-1' => niz (
'label' => __ ('Opcija 1', 'my_theme_textdomain')
),
'option-2' => niz (
'label' => __ ('Opcija 2', 'my_theme_textdomain')
),
'option-3' => niz (
'label' => __ ('Opcija 3', 'my_theme_textdomain')
)
),
'prioritet' => 3
)
),

/ *
* ============
* ============
* Odaberite polje
* ============
* ============
* /
'new_select_field' => niz (
'setting_args' => niz (
'zadano' => 'opcija-3',
'type' => 'opcija',
'sposobnost' => $ thsp_cbp_capability,
'transport' => 'osvježi',
),
'control_args' => niz (
'label' => __ ('Nova oznaka odabranog polja', 'my_theme_textdomain'),
'type' => 'select', // Odaberite kontrolu
'choices' => niz (
'option-1' => niz (
'label' => __ ('Opcija 1', 'my_theme_textdomain')
),
'option-2' => niz (
'label' => __ ('Opcija 2', 'my_theme_textdomain')
),
'option-3' => niz (
'label' => __ ('Opcija 3', 'my_theme_textdomain')
)
),
'prioritet' => 4
)
)

I na kraju, dvije složene kontrole koje su ugrađene u WordPress – prijenos datoteka i prijenos slika:

/ *
* ============
* ============
* Prijenos datoteke
* ============
* ============
* /
'new_file_upload_field' => niz (
'setting_args' => niz (
'zadano' => '',
'type' => 'opcija',
'sposobnost' => $ thsp_cbp_capability,
'transport' => 'osvježi',
),
'control_args' => niz (
'label' => __ ('Prijenos datoteke', 'my_theme_textdomain'),
'type' => 'upload', // kontrola polja za prijenos datoteka
'prioritet' => 5
)
),

/ *
* ============
* ============
* Prijenos slike
* ============
* ============
* /
'new_image_upload_field' => niz (
'setting_args' => niz (
'zadano' => '',
'type' => 'opcija',
'sposobnost' => $ thsp_cbp_capability,
'transport' => 'osvježi',
),
'control_args' => niz (
'label' => __ ('Prijenos slike', 'my_theme_textdomain'),
'type' => 'image', // kontrola polja za prijenos slike
'prioritet' => 6
)
)

Imajte na umu da sam koristio ‘Type’ => ‘opcija’ u postavljanju argumenata za sva ova polja. Ovo će omogućiti da se sve vrijednosti pohrane kao jedna vrijednost u vašoj bazi podataka. Alternativa je ‘Type’ => ‘theme_mod’ ali za sada se držimo “opcije”.

Korištenje opcija Niz za dodavanje odjeljaka, postavki i kontrola za prilagodbu

Ako niste sigurni kako komunicirati s alatom za prilagodbu tema WordPressa, idite i provjerite jer to sada radimo. Jedina je razlika što ćemo umjesto dodavanja pojedinačnih sekcija, postavki i kontrola automatizirati proces koristeći serializirani niz koji smo stvorili. Hajde da skočimo u to:

funkcija thsp_cbp_customize_register ($ wp_customize) {

/ **
* Prilagođene kontrole
* /
zahtijevati (dirname (__ FILE__). '/custom-controls.php');


/ *
* Dobijte sva polja pomoću pomoćne funkcije
* /
$ thsp_sections = thsp_cbp_get_fields ();


/ *
* Dobijte naziv DB unosa pod kojim će se pohraniti opcije
* /
$ thsp_cbp_option = thsp_cbp_option ();


/ **
* Pregledajte niz i dodajte odjeljke za prilagodbu
* /
foreach ($ thsp_sections kao $ thsp_section_key => $ thsp_section_value) {

/ **
* Dodaje odjeljak za prilagodbu podataka, ako je potrebno
* /
if (! $ thsp_section_value ['postojeća_sekcija']) {

$ thsp_section_args = $ thsp_section_value ['args'];

// Dodaj odjeljak
$ Wp_customize-> add_section (
$ thsp_section_key,
$ thsp_section_args
);

} // završi ako

/ *
* Preskačite niz 'polja' u svakom odjeljku
* i dodajte postavke i kontrole
* /
$ thsp_section_fields = $ thsp_section_value ['polja'];
foreach ($ thsp_section_fields kao $ thsp_field_key => $ thsp_field_value) {

/ *
* Provjerite upotrebljava li se za pohranu opcija 'option' ili 'theme_mod'
*
* Ako ništa nije postavljeno, metoda $ wp_customize-> add_setting zadat će zadati 'theme_mod'
* Ako se kao vrsta postavke koristi 'opcija', vrijednost će se pohraniti u unos
* {prefiks} _ tablica mogućnosti. Naziv opcije je definiran funkcijom thsp_cbp_option ()
* /
if (isset ($ thsp_field_value ['setting_args'] ['type']) && 'opcija' == $ thsp_field_value ['setting_args'] ['type']) {
$ setting_control_id = $ thsp_cbp_option. '['. $ thsp_field_key. '];
} else {
$ setting_control_id = $ thsp_field_key;
}

/ *
* Dodajte zadanu funkciju povratnog poziva, ako nije definirana nijedna
* /
if (! isset ($ thsp_field_value ['setting_args'] ['sanitize_cb'])) {
$ thsp_field_value ['setting_args'] ['sanitize_cb'] = 'thsp_cbp_sanitize_cb';
}

/ **
* Dodaje postavke prilagoditelja
* /
$ Wp_customize-> add_setting (
$ setting_control_id,
$ Thsp_field_value [ ''] setting_args
);

/ **
* Dodaje kontrolu prilagoditelja
*
Vrijednost 'odjeljka' mora se dodati polju 'control_args'
* kako bi se kontrola mogla dodati u trenutni odjeljak
* /
$ thsp_field_value ['control_args'] ['section'] = $ thsp_section_key;

/ *
* $ wp_customize-> metoda add_control zahtijeva da 'izbora' bude jednostavan ključ => vrijednost vrijednosti
* /
if (isset ($ thsp_field_value ['control_args'] ['izbora'])) {
$ thsp_cbp_choices = array ();
foreach ($ thsp_field_value ['control_args'] ['izbora'] kao $ 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'] ['izbora'] = $ thsp_cbp_choices;
}


// Provjerite vrstu upravljanja
if ('color' == $ thsp_field_value ['control_args'] ['type']) {
$ Wp_customize-> add_control (
novi 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 (
novi WP_Customize_Image_Control (
$ wp_customize,
$ setting_control_id,
$ Thsp_field_value [ ''] control_args
)
);
} elseif ('upload' == $ thsp_field_value ['control_args'] ['type']) {
$ Wp_customize-> add_control (
novi WP_Customize_Upload_Control (
$ wp_customize,
$ setting_control_id,
$ Thsp_field_value [ ''] control_args
)
);
} else {
$ Wp_customize-> add_control (
$ setting_control_id,
$ Thsp_field_value [ ''] control_args
);
}

} // kraj foreach

} // kraj foreach

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

Kroz sve odjeljke dodajte one koji već ne postoje, zatim prođite kroz sva polja u svakom odjeljku, dodajući postavku i kontrolu za svaki. To se sve ovdje događa.

Sjećate se da smo za sve postavke koristili ‘type’ => ‘option’? Zato sada to imamo „My_theme_options [$ thsp_field_key]” za postavke i odjeljke. Ovo će pohraniti sve vrijednosti kao jedan serializirani niz koji možete preuzeti pomoću get_option (“my_theme_options”). Ili možete jednostavno koristiti pomoćne funkcije definirane u helpers.php dohvatiti trenutne i zadane vrijednosti za sva polja:

/ **
* Dobijte opcijske vrijednosti
*
* Niz koji sadrži sve vrijednosti mogućnosti
* Zadana vrijednost opcije koristi se ako korisnik nije odredio vrijednost
*
* @uses thsp_get_theme_customizer_defaults () definirano u /customizer/options.php
* @return niz Trenutne vrijednosti za sve opcije
* @since Theme_Customizer_Boilerplate 1.0
* /
funkcija thsp_cbp_get_options_values ​​() {

// Dohvati zadane opcije
$ option_defaults = thsp_cbp_get_options_defaults ();

// Analizirajte pohranjene opcije sa zadanim vrijednostima
$ thsp_cbp_options = wp_parse_args (get_option (thsp_cbp_option (), array ()), $ option_defaults);

// Vratiti raščlanjeni niz
vratiti $ thsp_cbp_options;

}


/ **
* Dobijte zadane opcije
*
* Vraća niz koji sadrži zadane vrijednosti za sve opcije
*
* @uses thsp_get_theme_customizer_fields () definirano u /customizer/options.php
* @return niz $ thsp_option_defaults Zadane vrijednosti za sve opcije
* @since Theme_Customizer_Boilerplate 1.0
* /
funkcija thsp_cbp_get_options_defaults () {

// Dohvati niz koji sadrži sva polja s opcijama teme
$ thsp_sections = thsp_cbp_get_fields ();

// Inicijalizirajte niz da zadrži zadane vrijednosti za sve opcije teme
$ thsp_option_defaults = array ();

// Pregledajte niz opcija parametara
foreach ($ thsp_sections kao $ thsp_section) {

$ thsp_section_fields = $ thsp_section ['polja'];

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

// Dodajte asocijativni ključ matrice matriji zadanih postavki za svaku opciju u nizu parametara
if (isset ($ thsp_field_value ['setting_args'] ['default'])) {
$ thsp_option_defaults [$ thsp_field_key] = $ thsp_field_value ['setting_args'] ['default'];
} else {
$ thsp_option_defaults [$ thsp_field_key] = netočno;
}

}

}

// Vrati niz zadanih postavki
vratiti $ thsp_option_defaults;

}

Moram spomenuti samo još jednu stvar – sanitizacijska funkcija povratnog poziva koju smo naveli u nizu ‘settings_args’. Funkcija je definirana u exte.php i jednostavno pokreće podatke wp_kses_post funkcija:

/ **
* Funkcija tematskog prilagođavanja čišćenja povratnih poziva
* /
funkcija thsp_sanitize_cb ($ unos) {

vratiti wp_kses_post ($ unos);

}

Kamo odavde?

Za sada možete koristiti ovu temu Prilagodjivač kotlovske ploče u svojim temama, sve što trebate učiniti je preuzeti s Github-a, kopirati u direktorij svoje teme i uključiti glavnu datoteku iz funkcije.php, koja je 100% funkcionalna i dovoljno dobra za većinu teme.

Budući da vaša tema nije “poput većine tema”, sljedeći tjedan vidjet ćemo kako proširiti ploču za grijanje pomoću filtera i akcijskih kuka.

Volio bih čuti kako mislite da se ova ploča s bojlerima može poboljšati ili proširiti, pa vas molim da otpustite u komentarima.

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