Konfigurator motywu – ustawienie w WordPressie
Aby rozpocząć, aby zrozumieć, czym jest Theme Customizer, obejrzyj wideo z YouTube, Myśleć, wiele się wyjaśni. Po obejrzeniu wideo, prawdopodobnie nie będziesz potrzebować wtyczki Drzewo opcji o którym mówiłem wcześniej.
Myślę, że po obejrzeniu będziesz miał wiele pomysłów na to, jak możesz wykorzystać ten przydatny panel, a oto jak to działa, spójrzmy poniżej.
Istniejące opcje
Pierwszą rzeczą, którą uważam za ważną do rozważenia, są istniejące metody dostosowywania motywu., jak pisze je wielu autorów 3 opcja, uwierzmy im i spróbujmy nauczyć się korzystać z tych metod.
- Są mody, które są obsługiwane do pracy z motywem, Możesz kontrolować te mody za pomocą funkcji set_theme_mod i get_theme_mod. Te funkcje są obsługiwane Interfejs API ustawień WordPress i pracować świetnie.
- Indywidualne ustawienia dla każdego motywu. To nie jest najlepszy sposób na tworzenie tematów, ale ma też swoje miejsce i jest w nim wspierane Konfigurator motywu.
- Serializowane ustawienia – W sumie, przechowujesz ustawienia w tablicy, a następnie zapisz tę tablicę za pomocą opcja_ustawienia lub get_option, jako jeden wiersz w bazie danych. Jest to najbardziej optymalna metoda i rozważymy ją w tym artykule..
Pokrótce wspomnieliśmy o pozostałych dwóch metodach i o tym, czy ich potrzebujemy, wtedy je rozważymy.
Po pierwsze w Theme Customizer lewa strona jest podzielona na sekcje i warto zwrócić na to uwagę! Wszystko działa przez specjalność akcja (świnia) dostosuj_rejestr.
|
1 2 3 |
add_action( 'customize_register', 'themename_customize_register' ); function themename_customize_register($wp_customize) { // ... do stuff ... |
Funkcja otrzymuje jako parametr $wp_dostosuj to jest główny przedmiot. Będziemy z nim pracować podczas dodawania sekcji, kontrole i tym podobne.
Sekcje w Dostosowaniu motywu
Więc, pierwszy, co powinno być zrobione, jest dodanie sekcji. Oto jeden ze sposobów, aby to zrobić:
|
1 2 3 4 5 6 7 8 |
function themename_customize_register($wp_customize){ $wp_customize->add_section('themename_color_scheme', array( 'title' => __('Color Scheme', 'themename'), 'priority' => 120, )); } |
Chociaż w sekcji nie ma żadnych elementów sterujących i nie są one skonfigurowane, nowa sekcja nie zostanie wyświetlona, o sterowaniu porozmawiamy nieco później., a teraz spójrzmy na kod, który opisaliśmy powyżej.
nazwa_motywu_kolor_schematu – pierwszy parametr to unikalny identyfikator do wyświetlenia, będziemy potrzebować tego identyfikatora później, kiedy umieścimy kontrolki w sekcji.
Drugi parametr to tablica. Ta tablica ma dwa indeksy. Indeks tytuł aby określić tytuł i opis sekcji. Indeks priorytet to jest priorytet partycji, co decyduje o ich kolejności.
Ustawienia sekcji
Dalej, zmodyfikujmy niektóre ustawienia. Proponujemy parametry dla naszego przekroju i rozważamy 3 opcja.
Deklarujemy ustawienia w ten sposób:
Opcja ustawienia nr 3. Po zapisaniu zostanie utworzona tablica z nazwą, łącznie z nazwą motywu i indeksem, która będzie nazwą naszej opcji.
|
1 2 3 4 5 |
$wp_customize->add_setting( 'themename_theme_options[color_scheme]', array( 'default' => 'some-default-value', 'type' => 'option', 'capability' => 'edit_theme_options', ) ); |
Opcja ustawienia nr 2. Podczas zapisywania zostanie utworzona zmienna. Nazwa zmiennej będzie zawierać nazwę motywu i nazwę opcji, którego będziemy trzymać.
|
1 2 3 4 5 |
$wp_customize->add_setting( 'themename_color_scheme', array( 'default' => 'some-default-value', 'type' => 'option', 'capability' => 'edit_theme_options', ) ); |
Opcja ustawienia nr 1. Podczas zapisywania zostanie utworzona zmienna, która w swojej nazwie będzie przechowywać tylko nazwę opcji.
|
1 2 3 4 5 |
$wp_customize->add_setting( 'color_scheme', array( 'default' => 'some-default-value', 'type' => 'theme_mod', 'capability' => 'edit_theme_options', ) ); |
Skorzystamy z opcji nr 3.
Oprócz tego, że ustawiliśmy ustawienia motywu WordPressa i z pomocą dodaj_ustawienie umieścić je w bazie danych, trzeba jeszcze ustawić sterowanie. Spróbujmy dodać jeden z nich, po dodaniu sekcja z elementami sterującymi, takimi jak przyciski opcji, pojawi się w Dostosowaniu motywu.
|
1 2 3 4 5 6 7 8 9 10 11 |
$wp_customize->add_control( 'themename_color_scheme', array( 'label' => __( 'Color Scheme', 'themename' ), 'section' => 'themename_color_scheme', 'settings' => 'themename_theme_options[color_scheme]', 'type' => 'radio', 'choices' => array( 'value1' => 'Choice 1', 'value2' => 'Choice 2', 'value3' => 'Choice 3', ), ) ); |
Rozważ wyświetlenie kontrolki pola wyboru w Dostosowaniu motywu
|
1 2 3 4 5 6 7 8 9 10 11 |
$wp_customize->add_setting('themename_theme_options[checkbox_test]', array( 'capability' => 'edit_theme_options', 'type' => 'option', )); $wp_customize->add_control('display_header_text', array( 'settings' => 'themename_theme_options[checkbox_test]', 'label' => __('Display Header Text'), 'section' => 'themename_color_scheme', 'type' => 'checkbox', )); |
Rozważmy przykład wyświetlania kontrolki wyboru w Dostosowaniu motywu
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
$wp_customize->add_setting('themename_theme_options[header_select]', array( 'default' => 'value2', 'capability' => 'edit_theme_options', 'type' => 'option', )); $wp_customize->add_control( 'example_select_box', array( 'settings' => 'themename_theme_options[header_select]', 'label' => 'Select Something:', 'section' => 'themename_color_scheme', 'type' => 'select', 'choices' => array( 'value1' => 'Choice 1', 'value2' => 'Choice 2', 'value3' => 'Choice 3', ), )); |
Rozważmy przykład wyświetlania kontrolki wprowadzania tekstu w Dostosowaniu motywu
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$wp_customize->add_setting('themename_theme_options[text_test]', array( 'default' => 'Arse!', 'capability' => 'edit_theme_options', 'type' => 'option', )); $wp_customize->add_control('themename_text_test', array( 'label' => __('Text Test', 'themename'), 'section' => 'themename_color_scheme', 'settings' => 'themename_theme_options[text_test]', )); |
Rozważ przykład wyświetlania kontrolki przesyłania obrazu w Dostosowaniu motywu
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$wp_customize->add_setting('themename_theme_options[image_upload_test]', array( 'default' => 'image.jpg', 'capability' => 'edit_theme_options', 'type' => 'option', )); $wp_customize->add_control( new WP_Customize_Image_Control($wp_customize, 'image_upload_test', array( 'label' => __('Image Upload Test', 'themename'), 'section' => 'themename_color_scheme', 'settings' => 'themename_theme_options[image_upload_test]', ))); |
Rozważmy przykład wyświetlania kontrolki typu Przesyłanie plików w Dostosowaniu motywu
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$wp_customize->add_setting('themename_theme_options[upload_test]', array( 'default' => 'arse', 'capability' => 'edit_theme_options', 'type' => 'option', )); $wp_customize->add_control( new WP_Customize_Upload_Control($wp_customize, 'upload_test', array( 'label' => __('Upload Test', 'themename'), 'section' => 'themename_color_scheme', 'settings' => 'themename_theme_options[upload_test]', ))); |
Rozważmy przykład wyświetlania kontrolki typu Próbnik kolorów w Dostosowaniu motywu
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$wp_customize->add_setting('themename_theme_options[link_color]', array( 'default' => '000', 'sanitize_callback' => 'sanitize_hex_color', 'capability' => 'edit_theme_options', 'type' => 'option', )); $wp_customize->add_control( new WP_Customize_Color_Control($wp_customize, 'link_color', array( 'label' => __('Link Color', 'themename'), 'section' => 'themename_color_scheme', 'settings' => 'themename_theme_options[link_color]', ))); |
Rozważmy przykład wyświetlania kontrolki typu Page Dropdown w Dostosowaniu motywu
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$wp_customize->add_setting('themename_theme_options[page_test]', array( 'capability' => 'edit_theme_options', 'type' => 'option', )); $wp_customize->add_control('themename_page_test', array( 'label' => __('Page Test', 'themename'), 'section' => 'themename_color_scheme', 'type' => 'dropdown-pages', 'settings' => 'themename_theme_options[page_test]', )); |
Skończyliśmy z typami., w ogóle, jak się okazało, nie wszystko jest tak skomplikowane, a nawet obiektowe, co szczerze mówiąc bardzo mnie ucieszyło WordPressa, są stopniowo korygowane ). Tak myślę, wystarczy zacząć tworzyć własne motywy za pomocą tego narzędzia.
Opcje przeglądania i wyświetlania, które zostały zapisane w programie Theme Customizer
Podgląd na żywo
O tak, prawie zapomniałem, opcje, które stworzyliśmy, ale nadal musimy wyświetlić je w szablonie i umożliwić użytkownikowi przejrzenie naszych opcji przed ich zapisaniem, i tylko ta osoba będzie mogła zobaczyć zmiany., kto je tworzy w czasie rzeczywistym, a zwykły użytkownik nie będzie mógł tego zrobić, dopóki nie naciśnie przycisku zapisu.
Najprawdopodobniej wielu bystrych programistów, którzy siedzą na mojej stronie, już się domyśliło, że aby wyświetlić podgląd opcji, użyjemy podstępnego JQUERY scenariusz.
Na samym końcu naszej funkcji nazwa_motywu_dostosuj_rejestr, przed zamknięciem, wklej kod:
|
1 2 3 |
$wp_customize->get_setting( 'themename_theme_options[text_test]' )->transport = 'postMessage'; $wp_customize->get_setting( 'themename_theme_options[link_color]' )->transport = 'postMessage'; if ( $wp_customize->is_preview() && ! is_admin() ) { add_action( 'wp_footer', 'themename_customize_preview', 21); } |
Ta akcja spowoduje wyświetlenie funkcji w stopce strony po wykonaniu kodu, który pokaże zmiany za pomocą JQUERY, zmiana zawartości elementu $( „#logo a’ ).HTML( nowość ). Uwaga, moje logo jest zaznaczone „#logo a’ możesz być inny.
Kod $wp_customize->get_setting( „…')->transport = „wiadomość pocztowa’ o ile dobrze zrozumiałem, trzeba podać nazwę opcji, aby można było ją dalej wykorzystać do wyświetlenia podglądu, Próbowałem bez tego kodu, ale to nie zadziałało. ), Nie znalazłem też odpowiedzi po angielsku.. Jeśli ktoś ma odpowiedź, Napisz w komentarzach. Mimo, że kod działa.
Oto kod wtyczki jquery:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
function themename_customize_preview() { ?> <script type="text/javascript"> ( function( $ ) { // Update the site title in real time... wp.customize( 'themename_theme_options[text_test]', function( value ) { value.bind( function( newval ) { $( '#logo a' ).html( newval ); } ); } ); //Update site title color in real time... wp.customize( 'themename_theme_options[link_color]', function( value ) { value.bind( function( newval ) { $('a').css('color', newval ); } ); } ); } )( jQuery ); </script> <!--?php }</pre> <p>Как видно из кода выше наш плагин jquery первым параметром передает название опции <u>themename_theme_options[text_test]</u>, а вторым функцию которая будет в режиме реального времени изменять содержимое тега <u>$( '#logo a' ).html( newval );</u>.</p> <p>Если вы все сделали правильно, то у вас при изменении содержимого опции <em>themename_theme_options[link_color]</em> и до нажатия кнопки <u>Сохранить и опубликовать</u> на вашем экране справа будет меняться текст логотипа.</p> <h3>Вывод сохраненных опций</h3> <p>Все что мы делали в предварительном просмотре работает пока мы не нажмем кнопку <u>Сохранить и опубликовать</u> или <u>обновим страницу</u>. Для того чтобы данные не исчезали необходимо заменить стандартный код в шаблоне на вывод нашего содержимого из опции.<br ?--><strong>Открываем шаблон и находим код который нужно поправить:</strong> |
|
1 |
Zastąp kod tym:
|
1 |
<!--?php $themename_theme_options = get_option( "themename_theme_options" ); ?--> |
|
1 |
tak, Myślałem, że artykuł będzie krótszy, ale prawie kompletny przewodnik do pracy z Konfigurator motywu. Widzę, że poniosło mnie z tematem. ).
Ponieważ temat nie jest prosty, postanowiłem przedstawić Ci kilka źródeł.
- Podstawowy kurs projektowania stron internetowych;
- Układ stron;
- Ogólny kurs CMS WordPress oraz kontynuacja kursu dotyczącego tworzenia szablonów;
- Tworzenie stron internetowych w PHP.
Podczas kopiowania lekcji, proszę zostawić link do artykułu autora, to ja!
