Jak tworzyć niestandardowe kontrolki dla dostosowywania motywów WordPress
Opublikowany: 2015-06-17Funkcja dostosowywania motywu WordPress (nazywana również „Dostosowywaniem”) daje programistom możliwość dostosowania wyglądu ich motywu, a nawet umożliwia podgląd zmian wprowadzonych w motywie w czasie rzeczywistym. W dzisiejszej erze, w której wyścig o przyciągnięcie klientów do witryny internetowej nasila się, często będziesz odczuwać potrzebę dostosowania projektu witryny. A dzięki dostosowywaniu motywów możesz zaoszczędzić wiele cennego czasu, wyświetlając podgląd na żywo zmian wprowadzonych w projekcie WordPress.
Konfigurator motywu WordPress został wprowadzony jako część interfejsu API dostosowywania motywu (który został wprowadzony w wersji WordPress 3.4. Jeśli chcesz wprowadzić zmiany w ustawieniach motywu, musisz skorzystać z niestandardowych elementów sterujących dostarczanych z motywem dostosowywanie, takie jak pole wyboru, pole tekstowe, radio i kilka innych.Ale co, jeśli chcesz dodać własne niestandardowe elementy sterujące do motywu WordPress?
Aby pomóc Ci zrozumieć, jak tworzyć i dodawać kontrolki dostosowane do Twoich konkretnych potrzeb, zademonstrujemy tworzenie trzech niestandardowych kontrolek, aby wprowadzić kilka zmian w stopce naszego motywu. Jednak, aby rozpocząć proces, najpierw musisz zapoznać się z klasą WP_Customizer_Control.
Zapoznanie się z klasą „WP_Customizer_Control”
Aby wygenerować niestandardową kontrolkę, musisz utworzyć nową klasę i rozszerzyć ją za pomocą klasy WP_Customizer_Control. Ta klasa używa metody „$wp_customize->add_control()”, aby dodać własną niestandardową kontrolkę do ekranu dostosowywania motywu witryny WordPress. Ponadto, aby uzyskać dostęp do tej metody, musisz użyć obiektu $wp_customize dostępnego w haczyku akcji: custom_register.
Rozważmy przykład, który ilustruje, jak dodać istniejącą niestandardową kontrolkę do sekcji motywu (w haczyku akcji „customize_register”) w następujący sposób:
$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', ) ) );
W powyższym przykładzie tworzymy kontrolkę, która da użytkownikom możliwość wybrania nowego obrazu nagłówka.
Przykłady demonstrujące: jak stworzyć więcej niestandardowych kontrolek?
Ta sekcja jest podzielona na trzy różne kroki, z których każdy zawiera kod, który wygeneruje niestandardową kontrolkę dla obszaru tekstowego dla dostosowania motywu. Dodamy kod w pliku footer.php motywu WordPress, aby wprowadzić zmiany w stopce za pomocą nowych kontrolek obszaru tekstowego.
Krok 1: Tworzenie prostej kontroli obszaru tekstowego
Jak omówiliśmy powyżej, w celu stworzenia nowej kontrolki niestandardowej musimy zdefiniować klasę, która będzie używana do rozszerzenia klasy WP_Customize_Control. Zasadniczo ta klasa jest używana wraz z interfejsem API dostosowywania motywu WordPress do dodawania kontrolki wejściowej (tj. kontrolki niestandardowej) na ekranie dostosowywania motywu. Spójrzmy na kod do realizacji tego zadania:
/*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', ));
W tym kodzie hak akcji customer_register służy do informowania WordPressa o niestandardowej funkcji, którą stworzyliśmy o nazwie: theme_footer_customizer. Jak być może wiesz, klasa WP_Customize_Manager pomaga kontrolować WordPress Theme Customizer, więc niestandardowa kontrolka stanie się częścią tej klasy. Jednak, aby uzyskać dostęp do kontroli, musisz użyć obiektu „wp_customize”, który jest instancją haka custom_register.
W naszym przypadku obiekt wp_customize służy do zdefiniowania nowej sekcji stopki, która zostanie uwzględniona w obszarze tekstowym. Tak więc wszystko, co wpiszesz w sekcji stopki „obszar tekstowy”, zostanie wyświetlone w stopce motywu, jak pokazano na zrzucie ekranu poniżej:
Na tym zrzucie ekranu widać, że do motywu dodano nową sekcję „Tekst stopki”. Tekst napisany w tej sekcji zostanie wyświetlony w stopce motywu.
Krok 2: Dodawanie niestandardowej kontroli, aby zmienić kolor tła
Teraz, gdy stworzyliśmy kontrolkę obszaru tekstu, możesz dodać do niego wiele różnych niestandardowych kontrolek. W tym przykładzie dodamy niestandardową kontrolkę do naszej nowej sekcji tekstu stopki, która pomoże zmienić kolor tła stopki. Aby to zrobić, po prostu dodaj następujący fragment kodu w pliku footer.php motywu:
//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', )));
Jak możesz na powyższym zrzucie ekranu, wybierając odpowiedni kolor z „Ustawienia kolorów stopki”, kolor tła stopki zmienił się na szary.
Krok 3: Dodawanie niestandardowej kontroli, aby dodać logo
Inną kontrolką, którą dodajemy do sekcji tekstu stopki, jest „Logo stopki”. Jak sama nazwa wskazuje, kontrolka „Logo stopki” pomoże w dodaniu logo w stopce. Aby dodać tę kontrolkę, musisz dołączyć poniższy fragment kodu do pliku 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', ))); }
Podsumujmy!
Proces tworzenia niestandardowych kontrolek może okazać się nieco czasochłonny. Nie można jednak lekceważyć faktu, że im lepsze elementy sterujące dodasz do ekranu dostosowywania motywu witryny, tym więcej czasu użytkowników można zaoszczędzić, co prowadzi do zwiększenia komfortu użytkowania. Jeśli więc planujesz samodzielnie tworzyć niestandardowe kontrolki, które zostaną dodane do dostosowywania motywów WordPress, ten post będzie dla Ciebie zaradnym przewodnikiem.
