Cum să creați controale personalizate pentru Personalizatorul de teme WordPress
Publicat: 2015-06-17Funcția WordPress Theme Customizer (numită și „Customizer”) oferă dezvoltatorilor posibilitatea de a personaliza aspectul temei și chiar de a-i ajuta să previzualizeze modificările aduse temei în timp real. În epoca actuală, în care cursa de a atrage clienți către un site web se intensifică, veți simți adesea nevoia să vă personalizați designul site-ului. Și, mulțumită, personalizării temei, puteți economisi mult timp prețios prin previzualizarea live a modificărilor aduse designului dvs. WordPress.
Personalizatorul de teme WordPress a fost introdus ca parte a API-ului de personalizare a temei (care a fost introdus în versiunea WordPress 3.4. Dacă doriți să faceți modificări setărilor temei, atunci va trebui să utilizați controalele personalizate care sunt livrate împreună cu tema). personalizat, cum ar fi o casetă de selectare, un câmp de text, un radio și câteva altele. Dar, ce se întâmplă dacă doriți să adăugați propriile controale personalizate la tema dvs. WordPress?
Pentru a vă ajuta să înțelegeți cum puteți crea și adăuga comenzi adaptate nevoilor dvs. specifice, vă vom demonstra crearea a trei comenzi personalizate pentru a face câteva modificări subsolului temei noastre. Cu toate acestea, pentru a începe procesul, va trebui mai întâi să vă familiarizați cu clasa WP_Customizer_Control.
Cunoașterea clasei „WP_Customizer_Control”.
Pentru a genera un control personalizat, trebuie să creați o nouă clasă și să o extindeți folosind clasa WP_Customizer_Control. Această clasă folosește metoda „$wp_customize->add_control()” pentru a adăuga propriul control personalizat la ecranul de personalizare a temei site-ului WordPress. Mai mult, pentru a accesa această metodă, trebuie să utilizați obiectul $wp_customize disponibil în cârligul de acțiuni: customize_register.
Să luăm în considerare un exemplu care ilustrează modul în care puteți adăuga un control personalizat existent la secțiunea temei dvs. (în cârligul de acțiuni „customize_register”) după cum urmează:
$wp_customize->add_control( new WP_Customize_Header_Image_ Control( $wp_customize, 'header_image', array( 'label' => __( 'Header image', 'mynewtheme' ), 'section' => 'header_image_settings', 'settings' => 'header_image_position', ) ) );$wp_customize->add_control( new WP_Customize_Header_Image_ Control( $wp_customize, 'header_image', array( 'label' => __( 'Header image', 'mynewtheme' ), 'section' => 'header_image_settings', 'settings' => 'header_image_position', ) ) );
În exemplul de mai sus, creăm un control care va oferi utilizatorilor posibilitatea de a alege o nouă imagine de antet.
Exemple care demonstrează: Cum să creați mai multe controale personalizate?
Această secțiune este împărțită în trei pași diferiți, în care fiecare pas conține cod care va genera un control personalizat pentru zona de text pentru personalizarea temei. Vom adăuga codul în fișierul footer.php al temei WordPress, astfel încât să facem modificări la subsol prin noile controale ale zonei de text.
Pasul 1: Crearea unui control simplu al zonei de text
După cum am discutat mai sus, pentru a crea un nou control personalizat, trebuie să definim o clasă care va fi folosită pentru extinderea clasei WP_Customize_Control. În esență, această clasă este utilizată împreună cu API-ul de personalizare a temei WordPress pentru adăugarea unui control de intrare (adică control personalizat) pe ecranul de personalizare a temei. Să ne uităm la codul pentru a implementa această sarcină:
/*Customizer Code HERE*/ add_action('customize_ register', 'theme_footer_customizer'); function theme_footer_customizer($wp_ customize){ //adding section in wordpress customizer $wp_customize->add_section(' footer_settings_section', array( 'title' => 'Footer Text Section' )); //adding setting for footer text area $wp_customize->add_setting(' text_setting', array( 'default' => 'Default Text For Footer Section', )); $wp_customize->add_control(' text_setting', array( 'label' => 'Footer Text Here', 'section' => 'footer_settings_section', 'type' => 'textarea', ));/*Customizer Code HERE*/ add_action('customize_ register', 'theme_footer_customizer'); function theme_footer_customizer($wp_ customize){ //adding section in wordpress customizer $wp_customize->add_section(' footer_settings_section', array( 'title' => 'Footer Text Section' )); //adding setting for footer text area $wp_customize->add_setting(' text_setting', array( 'default' => 'Default Text For Footer Section', )); $wp_customize->add_control(' text_setting', array( 'label' => 'Footer Text Here', 'section' => 'footer_settings_section', 'type' => 'textarea', ));
În acest cod, cârligul de acțiune customer_register este folosit pentru a spune WordPress despre funcția personalizată, pe care am creat-o cu numele: theme_footer_customizer. După cum probabil știți, că clasa WP_Customize_Manager ajută la controlul WordPress Theme Customizer și astfel controlul personalizat va deveni o parte a acestei clase. Cu toate acestea, pentru a vă accesa controlul, va trebui să utilizați obiectul „wp_customize” care este o instanță a hook-ului customize_register.
În cazul nostru, obiectul wp_customize este folosit pentru a defini o nouă secțiune de subsol care va fi inclusă în zona de text. Deci, orice veți tasta în secțiunea de subsol „zona de text” va fi afișat în subsolul temei, așa cum se arată în captura de ecran de mai jos:
În această captură de ecran, puteți vedea că o nouă „secțiune de text de subsol” este adăugată temei dvs. Textul scris în această secțiune va fi afișat în subsolul temei.
Pasul 2: Adăugarea controlului personalizat pentru a schimba culoarea de fundal
Deci, acum că am creat un control pentru zona de text, îi puteți adăuga multe controale personalizate diferite. În acest exemplu, vom adăuga un control personalizat la noua noastră secțiune de text Subsol, care va ajuta la schimbarea culorii de fundal a subsolului. Pentru a face acest lucru, adăugați pur și simplu următorul fragment de cod în fișierul footer.php al temei:
//adding setting for background $wp_customize->add_setting(' background_color', array( 'default' => '#ffffff', ) ); $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'background_color', array( 'label' => 'Footer Color Setting', 'section' => 'footer_settings_section', 'settings' => 'background_color', )));//adding setting for background $wp_customize->add_setting(' background_color', array( 'default' => '#ffffff', ) ); $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'background_color', array( 'label' => 'Footer Color Setting', 'section' => 'footer_settings_section', 'settings' => 'background_color', )));
După cum puteți în captura de ecran de mai sus, alegând o culoare adecvată din „Setarea culorii subsolului”, culoarea de fundal a subsolului s-a schimbat în gri.
Pasul 3: Adăugarea controlului personalizat pentru a adăuga sigla
Un alt control pe care îl adăugăm la secțiunea de text Subsol este „Sigla subsol”. După cum sugerează și numele, controlul „Sigla de subsol” va ajuta la adăugarea unei sigle în subsol. Pentru a adăuga acest control, va trebui să includeți fragmentul de cod de mai jos în fișierul footer.php:
//adding setting for footer logo $wp_customize->add_setting(' footer_logo'); $wp_customize->add_control(new WP_Customize_Upload_Control($ wp_customize,'footer_logo', array( 'label' => __('Footer Logo', 'mytheme'), 'section' => 'footer_settings_section', 'settings' => 'footer_logo', ))); }//adding setting for footer logo $wp_customize->add_setting(' footer_logo'); $wp_customize->add_control(new WP_Customize_Upload_Control($ wp_customize,'footer_logo', array( 'label' => __('Footer Logo', 'mytheme'), 'section' => 'footer_settings_section', 'settings' => 'footer_logo', ))); }
Să încheiem!
Este posibil să considerați că procesul de creare a controalelor personalizate necesită puțin timp. Dar, nu puteți neglija faptul că, cu cât veți adăuga controale mai bune la ecranul de personalizare a temei site-ului dvs. web, cu atât mai mult timp al utilizatorilor poate fi salvat, ceea ce duce la o experiență îmbunătățită a utilizatorului. Deci, dacă intenționați să construiți unele controale personalizate pe cont propriu pentru a fi adăugate la personalizarea temei WordPress, atunci această postare se va dovedi un ghid plin de resurse pentru dvs.
