Jak utworzyć stronę ustawień w WordPress

Jeśli tworzysz wtyczkę do WordPressa, być może zastanawiasz się, jak utworzyć dla niej stronę z ustawieniami . Czy WordPress oferuje do tego jakiś „standardowy” mechanizm? Czy są jakieś nowe narzędzia lub frameworki do tworzenia nowoczesnych stron ustawień? Czy to dobry pomysł, aby stworzyć stronę ustawień? Cóż, dzisiaj porozmawiamy o tym wszystkim i odpowiem na wasze pytania.

Decyzje, a nie opcje

WordPress to platforma, której celem jest demokratyzacja sieci. To stwierdzenie, które brzmi bardzo ładnie, ale jednocześnie jest bardzo abstrakcyjne, jest sposobem na powiedzenie „chcemy, aby każdy mógł korzystać z WordPressa”. I wierzcie lub nie, strony ustawień mogą być, aw rzeczywistości w wielu przypadkach, stanowią dla tego barierę . Nie wierzysz mi? Cóż, sam WordPress mówi tak:

Przy podejmowaniu decyzji właśnie tych użytkowników bierzemy pod uwagę w pierwszej kolejności. Świetnym przykładem tego rozważenia są opcje oprogramowania. Za każdym razem, gdy dajesz użytkownikowi opcję, prosisz go o podjęcie decyzji. Kiedy użytkownik nie przejmuje się tą opcją lub jej nie rozumie, prowadzi to ostatecznie do frustracji. Jako programiści czasami uważamy, że zapewnienie opcji na wszystko jest dobrą rzeczą, nigdy nie możesz mieć zbyt wielu wyborów, prawda? Ostatecznie te wybory kończą się wyborami technicznymi, wyborami, którymi przeciętny użytkownik końcowy nie jest zainteresowany. Naszym obowiązkiem jako programistów jest podejmowanie mądrych decyzji projektowych i unikanie obciążania naszych użytkowników końcowych kwestiami technicznymi.

Filozofia WordPress

Dlatego przed utworzeniem strony ustawień dokładnie zastanów się, jakie opcje chcesz udostępnić użytkownikom, dlaczego chcesz, aby mieli do nich dostęp i czy jest to konieczne lub przydatne.

Filtry jako alternatywa

Nawet jeśli wiem, że nie powinienem oferować swoim użytkownikom zbyt wielu opcji, muszę przyznać, że jako programiście nie zawsze jest mi łatwo podjąć decyzję zamiast oferować opcję. Czasami chcę, aby moi użytkownicy mieli możliwość wyboru , chociaż mam świadomość, że opcje, które przedstawiam, są złożone. Więc co mam zrobić w takich przypadkach? Czy postępuję zgodnie z zaleceniami WordPressa i ograniczam moich zaawansowanych użytkowników?

Na szczęście WordPress oferuje idealne rozwiązanie tego dylematu: filtry . Kiedy projektujesz wtyczkę i chcesz, aby Twoi (zaawansowani) użytkownicy mogli dostosować jej zachowanie, nie twórz strony ustawień ani nic w tym rodzaju. Zamiast tego dostosuj swoją wtyczkę za pomocą mechanizmu filtrowania WordPressa.

Jeśli użyjesz filtrów, większość Twoich użytkowników będzie cieszyć się domyślnym zachowaniem („decyzje”, pamiętasz?), ponieważ będą używać wtyczki z domyślnymi wartościami ustawionymi w Twoich filtrach, podczas gdy zaawansowani użytkownicy będą mogli je modyfikować decyzje za pomocą haków (a więc masz też „opcje”). Najlepsze z obu światów!

Ustawienia WordPress

Ok, teraz, gdy zdajemy sobie sprawę, jak ważne jest podejmowanie decyzji dla naszych użytkowników i widzieliśmy, jak ominąć to ograniczenie (jeśli to konieczne) za pomocą filtrów, nadszedł czas, aby zobaczyć, jak możemy utworzyć stronę ustawień w WordPressie. Bo tak: są chwile, kiedy naprawdę musimy dać naszym użytkownikom możliwość podejmowania decyzji zgodnie z ich preferencjami.

Ustawienia API w WordPressie

Interfejs Settings API został dodany w WordPress w wersji 2.7. Jest to zestaw funkcji standaryzujących tworzenie stron ustawień, pozwalających określić, które opcje są dostępne, jaki będzie interfejs użytkownika do edycji każdej z tych opcji (zasadniczo pól na formularzu) oraz jak walidować, zapisywać i pobierz ich wartości.

Myślę, że najlepszym sposobem nauki są przykłady, więc utwórzmy krok po kroku naszą pierwszą stronę ustawień, korzystając z interfejsu API ustawień.

Tworzenie nowej strony ustawień

Pierwszą rzeczą, którą musisz zrobić, aby utworzyć stronę ustawień, jest (niespodzianka, niespodzianka!) utworzenie strony wyświetlającej ustawienia. Aby to zrobić, po prostu użyj funkcji add_options_page podczas akcji admin_menu i zarejestruj stronę:

 function nelio_add_settings_page() { add_options_page( 'Nelio Plugin Settings', 'Nelio', 'manage_options', 'nelio-example-plugin', 'nelio_render_settings_page' ); } add_action( 'admin_menu', 'nelio_add_settings_page' );

Jak widać, jedyne, co robimy z tą funkcją, to rejestracja nowej strony, która pojawi się w menu Ustawienia WordPress, wraz z jej tytułem, nazwą w menu, uprawnieniami, które użytkownik musi mieć, aby mieć do niej dostęp i system operacyjny. Ostatni argument, nelio_render_settings_page , to nazwa funkcji, która będzie odpowiedzialna za renderowanie wspomnianej strony:

 <?php function nelio_render_settings_page() { ?> <h2>Nelio Plugin Settings</h2> <form action="options.php" method="post"> <?php settings_fields( 'nelio_example_plugin_settings' ); do_settings_sections( 'nelio_example_plugin' ); ?> <input type="submit" name="submit" class="button button-primary" value="<?php esc_attr_e( 'Save' ); ?>" /> </form> <?php }

Sama strona ustawień jest stosunkowo łatwa do utworzenia. Wystarczy dodać form , którego treść będzie półautomatycznie generowana przez WordPress. Z jednej strony wywołujemy funkcję settings_fields , która w zasadzie dodaje jednorazową wartość do formularza, aby była „bezpieczna”. Następnie prosimy WordPressa o wyrenderowanie wszystkich ustawień, które stworzyliśmy dla naszej wtyczki za pomocą funkcji do_settings_sections . I na koniec po prostu dodajemy przycisk Prześlij formularz.

Rzeczywiste ustawienia na naszej stronie ustawień

Następnie musimy zarejestrować każdą z opcji, które będą częścią naszej strony ustawień. W tym celu wykorzystamy dwie funkcje: register_setting , która pozwala nam wskazać nazwę pod jaką będziemy zapisać ustawienia w bazie danych oraz add_settings_field , która dodaje każdą indywidualną opcję:

 function nelio_register_settings() { register_setting( 'nelio_example_plugin_settings', 'nelio_example_plugin_settings', 'nelio_validate_example_plugin_settings' ); add_settings_section( 'section_one', 'Section One', 'nelio_section_one_text', 'nelio_example_plugin' ); add_settings_field( 'some_text_field', 'Some Text Field', 'nelio_render_some_text_field', 'nelio_example_plugin', 'section_one' ); add_settings_field( 'another_number_field', 'Another Number Field', 'nelio_render_another_number_field', 'nelio_example_plugin', 'section_one' ); } add_action( 'admin_init', 'nelio_register_settings' );

Poprzedni fragment kodu zawiera kilka rzeczy, które zasługują na szczególną uwagę. Z jednej strony zauważ, że funkcja register_setting ma jako trzeci argument: nelio_validate_example_plugin_settings . Jest to nazwa funkcji zwrotnej, która zostanie wywołana w celu sprawdzenia wartości wybranych przez użytkownika (pamiętaj, że zawsze musisz sprawdzać i oczyszczać pola formularza). Ta funkcja wygląda mniej więcej tak:

 function nelio_validate_example_plugin_settings( $input ) { $output['some_text_field'] = sanitize_text_field( $input['some_text_field'] ); $output['another_number_field'] = absint( $input['another_number_field'] ); // ... return $output; }

gdzie pobieramy każde przesłane pole z $input i oczyszczamy je do $output , abyśmy wiedzieli na pewno, że cokolwiek zapiszemy w bazie danych, jest prawidłowe i poprawne.

Drugą rzeczą, na której chciałem się skupić, jest fakt, że każde z pól, które definiujemy, zawiera również odniesienie do funkcji, która mówi WordPressowi, jak każde pole powinno być renderowane. Na przykład wywołania zwrotne pól w naszym przykładzie mogą wyglądać mniej więcej tak:

 function nelio_section_one_text() { echo '<p>This is the first (and only) section in my settings.</p>'; } function nelio_render_some_text_field() { $options = get_option( 'nelio_example_plugin_settings' ); printf( '<input type="text" name="%s" value="%s" />', esc_attr( 'nelio_example_plugin_settings[some_text_field]' ), esc_attr( $options['some_text_field'] ) ); } function nelio_render_another_number_field() { $options = get_option( 'nelio_example_plugin_settings' ); printf( '<input type="number" name="%s" value="%s" />', esc_attr( 'nelio_example_plugin_settings[another_number_field]' ), esc_attr( $options['another_number_field'] ) ); }

Zasadniczo wszystkie te wywołania zwrotne pobierają bieżącą wartość pola, które mają wyrenderować (za pomocą get_option ) i renderują kod HTML, który pozwoli użytkownikowi ustawić jedną lub drugą wartość (w tym przykładzie pole input wpisz text lub number ).

Pytasz jaki jest końcowy wynik? Ten:

Końcowe przemyślenia

Jak widać, tworzenie strony ustawień jest stosunkowo proste. Osobiście nie przepadam za całym procesem, ponieważ jest dość powtarzalny i musimy pisać w kółko ten sam szablonowy kod… ale mimo wszystko jest to łatwe.

Aby jeszcze bardziej uprościć ten proces, istnieją pewne internetowe generatory kodu, za pomocą których za pomocą prostego interfejsu użytkownika możesz zdefiniować różne pola na stronie ustawień. Oto kilka przykładów:

• API ustawień WP
• Generator stron opcji WordPress

I oczywiście zawsze istnieje możliwość stworzenia strony ustawień przy użyciu technologii takich jak React… ale to jest historia na inny czas, nie sądzisz?

Polecane zdjęcie Rimy Kruciene na Unsplash.