Spis treści
Oczywiście korzystamy z Settings API WordPressa, bo to jedyna słuszna droga. I tworzymy swoją własną podstronę, bo czemu nie, skoro możemy… I potrzebujemy… 🙂 Jak ostatnio zaczynamy od nowa z naszą wtyczką, aby poprzedni kod nie zaciemniał tego, co robimy teraz. Do dzieła!
Dodajemy podstronę
Na potrzeby naszego kursu umówmy się, że stworzyliśmy super wtyczkę, która wymaga mnóstwa ustawień i uzasadnia to, stworzenie swojej podstrony. Tworzymy więc taką podstronę i nazwiemy ją „Test Opcje” ponieważ tak się nazywa nasza wtyczka testowa.
|
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 |
<?php /* Plugin Name: Test opcje Plugin URI: https://wpkurs.pl/ Description: Wtyczka, która pokazuje jak stworzyć Ustawienia za pomocą WordPress API Author: Łukasz Nowicki Version: 0.1.1 Author URI: https://lukasznowicki.info/ Requires at least: 5.4 Tested up to: 5.4 Requires PHP: 7.4 */ add_action( 'admin_menu', function () { add_submenu_page( 'options-general.php', 'Test opcje - ustawienia', 'Test opcje', 'manage_options', 'testopcje', function () { ?> <div class="wrap"> <h2><?php echo get_admin_page_title(); ?></h2> <p class="description">Tutaj parę słów wstępu na temat naszej super wtyczki i opcji, które prezentujemy użytkownikom.</p> <hr> </div> <?php }, 99 ); } ); add_action( 'admin_init', function () { } ); |
Ciekawostka
Kiedy dodajemy stronę, możemy ustawić jej pozycję, mniej więcej. Kiedy dodawaliśmy podstronę, do niedawna nie było takiej możliwości. Od wersji 5.3 WordPressa, mamy $position w funkcji add_submenu_page do dyspozycji. Fajnie, zawsze na bieżąco.Tak to wygląda. Nie będę tutaj opisywał, jak się dodaje podstronę, jest to nieskomplikowane i wierzę, że każdy sobie poradzi. A w razie potrzeby – dajcie znać, mogę i ten temat szerzej opisać. Póki co, wracamy do roboty.
No, może jeszcze parę słów: jak widzicie, akcja admin_init pozostaje chwilowo bezrobotna, do dodawania stron zaprzęgliśmy akcję admin_menu, która do tego właśnie służy.
Co teraz się dzieje? Mamy swoją stronę i bardzo się nią cieszymy. Brakuje nam jednak ustawień na tej stronie. Zaczniemy od sekcji a następnie dodamy do niej pierwsze pole. Nic skomplikowanego, byle kod był krótki i jasny. Zaczynamy:
|
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 28 29 30 31 32 33 34 |
<?php /* Plugin Name: Test opcje Plugin URI: https://wpkurs.pl/ Description: Wtyczka, która pokazuje jak stworzyć Ustawienia za pomocą WordPress API Author: Łukasz Nowicki Version: 0.1.1 Author URI: https://lukasznowicki.info/ Requires at least: 5.4 Tested up to: 5.4 Requires PHP: 7.4 */ add_action( 'admin_menu', function () { add_submenu_page( 'options-general.php', 'Test opcje - ustawienia', 'Test opcje', 'manage_options', 'testopcje', function () { ?> <div class="wrap"> <h2><?php echo get_admin_page_title(); ?></h2> <p class="description">Tutaj parę słów wstępu na temat naszej super wtyczki i opcji, które prezentujemy użytkownikom.</p> <hr> </div> <?php }, 99 ); } ); add_action( 'admin_init', function () { add_settings_section( 'sekcja1', 'Sekcja nr 1', function () { echo '<p>W pierwszej sekcji mamy takie opcje, że hej!</p>'; }, 'testopcje' ); add_settings_field( 'opcja1', '<label for="opcja1">Opcja nr 1</label>', function () { echo '<input id="opcja1" name="opcja1" value="' . esc_attr( get_option( 'opcja1', '' ) ) . '" type="text">'; }, 'testopcje', 'sekcja1' ); register_setting( 'testopcje', 'opcja1' ); } ); |
Zwróćcie uwagę na to, jak mało to się różni. Tak naprawdę, jedyne co nas odróżnia to $id strony! Używamy 'testopcje’, ponieważ tak zarejestrowaliśmy stronę (linijka 15 w powyższym listingu). I już tylko tyle! Czy aby na pewno?
To nie koniec
No niestety, to nie wszystko. Ale nie ma się czym przerażać! Zostało naprawdę niewiele do zrobienia. Póki co, odświeżmy sobie stronę z tym kodem, dostaniemy… dokładnie to samo, co wcześniej! Jak że to tak? Ano, inne strony Ustawień dbały o to, aby wyświetlać sekcje i pola w sekcjach. Nasza strona dumnie wyświetla tytuł i opis ale o nic więcej nie dba… Szybciutko to zmieniamy, dopisując:
|
1 2 3 4 5 6 7 |
<form method="post" action="options.php"> <?php settings_fields( 'testopcje' ); do_settings_sections( 'testopcje' ); submit_button(); ?> </form> |
Znacznik <form> jest obowiązkowy. Metoda przesyłania danych to „post”, a wywoływana akcja to „options.php” co pozwoli WordPressowi zrobić za nas resztę. Następnie mamy tajemniczą funkcję settings_fields. Tajemniczą dlatego, że dotychczas z niej nie korzystaliśmy. Jest świetna, bo odpowiada za to, aby dołożyć do formularza wszystkie niezbędne elementy. W kodzie HTML wygląda to tak:
|
1 2 3 4 |
<input type='hidden' name='option_page' value='testopcje' /> <input type="hidden" name="action" value="update" /> <input type="hidden" id="_wpnonce" name="_wpnonce" value="e0ae3a69bc" /> <input type="hidden" name="_wp_http_referer" value="/wp-admin/options-general.php?page=testopcje" /> |
Kolejna „magiczna” funkcja, do_settings_sections wyświetla nam sekcje ze strony. A submit_button wyświetla przycisk do wysłania formularza!
Teraz nasz kod wygląda tak:
|
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 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<?php /* Plugin Name: Test opcje Plugin URI: https://wpkurs.pl/ Description: Wtyczka, która pokazuje jak stworzyć Ustawienia za pomocą WordPress API Author: Łukasz Nowicki Version: 0.1.1 Author URI: https://lukasznowicki.info/ Requires at least: 5.4 Tested up to: 5.4 Requires PHP: 7.4 */ add_action( 'admin_menu', function () { add_submenu_page( 'options-general.php', 'Test opcje - ustawienia', 'Test opcje', 'manage_options', 'testopcje', function () { ?> <div class="wrap"> <h2><?php echo get_admin_page_title(); ?></h2> <p class="description">Tutaj parę słów wstępu na temat naszej super wtyczki i opcji, które prezentujemy użytkownikom.</p> <hr> <form method="post" action="options.php"> <?php settings_fields( 'testopcje' ); do_settings_sections( 'testopcje' ); submit_button(); ?> </form> </div> <?php }, 99 ); } ); add_action( 'admin_init', function () { add_settings_section( 'sekcja1', 'Sekcja nr 1', function () { echo '<p>W pierwszej sekcji mamy takie opcje, że hej!</p>'; }, 'testopcje' ); add_settings_field( 'opcja1', '<label for="opcja1">Opcja nr 1</label>', function () { echo '<input id="opcja1" name="opcja1" value="' . esc_attr( get_option( 'opcja1', '' ) ) . '" type="text">'; }, 'testopcje', 'sekcja1' ); register_setting( 'testopcje', 'opcja1' ); } ); |
I „robi” taką stronę:
I, jak widać, to nie tylko wygląda – to również działa. Zrobienie na przykład drugiej sekcji, jest dosyć trywialne. Odpowiedzialny fragment (za obie sekcje):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
add_action( 'admin_init', function () { add_settings_section( 'sekcja1', 'Sekcja nr 1', function () { echo '<p>W pierwszej sekcji mamy takie opcje, że hej!</p>'; }, 'testopcje' ); add_settings_field( 'opcja1', '<label for="opcja1">Opcja nr 1</label>', function () { echo '<input id="opcja1" name="opcja1" value="' . esc_attr( get_option( 'opcja1', '' ) ) . '" type="text">'; }, 'testopcje', 'sekcja1' ); register_setting( 'testopcje', 'opcja1' ); add_settings_section( 'sekcja2', 'Sekcja nr 2', function () { echo '<p>A w drugiej sekcji wiele się nie zmieniło, prawdę mówiąc.</p>'; }, 'testopcje' ); add_settings_field( 'opcja2', '<label for="opcja2">Opcja nr 2</label>', function () { echo '<input id="opcja2" name="opcja2" value="' . esc_attr( get_option( 'opcja2', '' ) ) . '" type="text">'; }, 'testopcje', 'sekcja2' ); register_setting( 'testopcje', 'opcja1' ); register_setting( 'testopcje', 'opcja2' ); } ); |
Na podstronie nic nie trzeba robić, druga sekcja i druga opcja – po prostu się pojawią.
Zaraz, zaraz, a co jeśli… o tym może w następnym odcinku.