close
PHPWordPress

Tworzenie wtyczek WordPress – #3 Wyświetlanie wydarzeń i ustawienia

tworzenie-wtyczek-wordpress-3

W trzeciej części kursu “Tworzenie wtyczek WordPress” wyświetlimy wydarzenia wewnątrz widgetu. Dodamy również stronę ustawień i wygenerujemy na ich podstawie style CSS.

Wyświetlanie wydarzeń

W poprzedniej części kursu dodaliśmy do wtyczki widget. W tej chwili wyświetla on tylko tytuł podany w panelu administratora. W zakładce Events prawdopodobnie masz już kilkanaście przykładowych wydarzeń. Możesz je teraz usunąć i dodać kilka prawdziwych eventów.

events

Upewnij się, że wszystkie wydarzenia mają ustawioną datę, godzinę i miejsce.

Pobieranie eventów

Możemy teraz utworzyć nowy plik w folderze includes. Nazwiemy go functions.php. Podepnijmy go do głównego pliku:

Wewnątrz tego pliku utworzymy funkcję, która pobierze i wyświetli wszystkie wydarzenia:

Korzystając z WP_Query pobieramy wszystkie posty o typie events. Parametr post_per_page informuje funkcję o tym, ile wydarzeń ma pobrać. -1 oznacza pobranie wszystkich. Jeśli chciałbyś to ograniczyć, to możesz tutaj podać inną wartość.

Następnie tworzymy standardową dla WordPressa pętlę, która przechodzi przez wszystkie pobrane posty. Wewnątrz pętli:

  • pobieramy ID aktualnego posta
  • do zmiennej $date zapisujemy pobraną przy pomocy get_post_meta() datę aktualnego wydarzenia. Tę wartość (np. 2017-05-11) zamieniamy na unixowy znacznik czasu (np. 1494547260). Ten format pozwoli nam na korzystanie z funkcji date()
  • do zmiennych $location i $time trafiają kolejno lokalizacja i czas wydarzenia
  • do zmiennej $day zapisujemy dzień wydarzenia (2017-05-11)
  • do zmiennej $month zapisujemy miesiąc wydarzenia (2017-05-11)

Poniżej tworzymy prostą strukturę HTML, w której umieszczamy pobrane dane. Wszystkie klasy poprzedzamy unikalnym prefixem devcorner-events. Dzięki temu unikniemy potencjalnych konfliktów z innymi klasami w szablonie. Cała treść będzie jednocześnie linkiem do indywidualnej strony wydarzenia. Link wyświetlamy korzystając z funkcji the_permalink().

Przejdźmy teraz do pliku widget.php i wywołajmy funkcję devcorner_events_widget_content() wewnątrz widget():

Przejdźmy teraz na stronę główną.

events no css

Dodanie stylów CSS

Wydarzenia są poprawnie wyświetlane. Nie wyglądają jednak zbyt dobrze. Dodamy teraz kilka reguł CSS, które znacznie poprawią ich czytelność.

W folderze public/css stwórzmy plik widget-style.css. Zanim dodamy do niego pierwsze reguły musimy podpiąć ten plik do strony. Na końcu pliku functions.php dodajmy kod:

W WordPressie style podpinamy korzystając z funkcji wp_enqueue_style(). Pierwszy parametr to unikalna nazwa arkusza CSS. Standardowo wstawiamy tutaj prefix. Drugim parametrem tej funkcji jest pełna ścieżka do pliku .css. Funkcja plugins_url() zwraca URL katalogu z wtyczkami (wp-content/plugins). String podany jako parametr tej funkcji zostanie dodany do ścieżki.

Poniżej dodajemy funkcję do akcji wp_enqueue_scripts.

Odśwież teraz stronę główną i przejdź do inspektora kodu. Znajdziesz tutaj podpięty plik widget-style.css.

devcorner events css file

Możemy teraz dodać nasze reguły w pliku widget-style.css:

Odświeżmy teraz stronę główną.

devcorner events style

Dzięki dodanym stylom wydarzenia są teraz bardziej czytelne.

Strona ustawień

Dodanie nowej podstrony

Drugą rzeczą, którą zrobimy w tej części kursu będzie dodanie strony ustawień. Taką stronę możemy zobaczyć w większości wtyczek. Ustawiania zwiększają elastyczność pluginu oraz pozwalają zwykłym użytkownikom na samodzielną modyfikację.

Dodanie nowej podstrony w panelu WP jest bardzo proste. W pliku menu.php dodajmy poniższy kod:

Funkcja add_submenu_page() służy do dodawania podstron. Składa się z poniższych parametrów:

  • edit.php?post_type=events – rodzic podstrony w panelu administratora. Tutaj informujemy wtyczkę, że ustawienia mają zostać podpięte pod zakładkę Events.
  • Devcorner Events Settings – tytuł strony (wyświetlany na karcie strony w przeglądarce)
  • Settings – nazwa strony (wyświetlana w menu)
  • manage_options – wymagana zdolność usera, aby mógł uzyskać dostęp do strony. Zdolność manage_options posiadają tylko użytkownicy z rolą administratora. Pełny spis ról i ich możliwości znajdziesz tutaj.
  • devcorner_events_settings – unikalna nazwa strony wyświetlana w URL
  • devcorner_events_settings_content – nazwa funkcji, która wyświetla zawartość tej strony

Akcją, do której podpinamy funkcję jest admin_menu. Możesz teraz przejść do panelu administratora:

devcorner events settings empty

Zawartość podstrony

Strona jest już widoczna, ale pokazuje błąd. Nie mamy jeszcze funkcji, która wygeneruje treść. Dodajmy ją na końcu pliku menu.php:

Na początku upewniamy się, że użytkownik jest administratorem. Jeśli nie jest, to korzystając z funkcji wp_die() wyświetlamy wiadomość o błędzie.

Następnie wyświetlamy prosty formularz. Ważnym elementem jest input o typie hidden, którego użyjemy do upewnienia się, że użytkownik zapisuje dane. Poniżej mamy jeszcze przycisk wysyłający formularz.

Klasy takie jak wrap, postbox, button, button-primary są zdefiniowane przez WordPressa i pozwalają nam na dopasowanie wyglądu ustawień do całego panelu administratora.

Odświeżmy stronę ustawień:

de settings

W tej części kursu dodamy tutaj jedną opcję – możliwość wybrania efektu hover na wydarzeniach w widgecie. Użytkownik będzie mógł wybrać brak lub obramowanie. Poniżej paragrafu “Tutaj możesz…” dodajmy tabelę z opcjami:

Oczywiście korzystamy tutaj z inputów o typie radio. Pierwszy posiada wartość none, drugi border. Warto zapamiętać szczególnie ten fragment:

Jeśli w bazie danych opcja devcorner_events_hover posiada wartość none, to dodajemy atrybut checked (zaznacz pole). W drugim polu jedyną różnicą jest zmiana wartości na border. Za chwilę zobaczysz działanie na przykładzie.

Odświeżmy teraz stronę ustawień.

dc events hover

Ustawienia nie mają jeszcze odpowiednich paddingów, ale tym zajmiemy się później.

Możesz teraz zaznaczyć dowolną opcję, ale po odświeżeniu zaznaczenie zniknie. Musimy napisać kod, który zapisze dane. Dodajmy go pod instrukcją if, która sprawdza możliwości użytkownika (current_user_can()):

Jeśli użytkownik zapisał ustawienia, to aktualizujemy opcję devcorner_events_hover. Otrzymuje ona wartość atrybutu value z zaznaczonego pola radio (none lub border). Następnie wyświetlamy informację o pomyślnym zapisie. Klasy notice i updated dadzą komunikatowi charakterystyczny dla WP wygląd.

Odświeżmy stronę, zaznaczmy dowolną opcję i zapiszmy zmiany:

dc events hover updated

Możesz zaobserwować, że nawet po odświeżeniu strony input radio pozostanie zaznaczony. Jest to zasługa wcześniejszego dodania atrybutu checked.

Dodanie dodatkowych stylów CSS

Teraz dodamy efekt hover, który jest kontrolowany przez ustawienia. Przejdźmy do pliku functions.php. Będziemy dopisywać kod do funkcji devcorner_events_load_styles():

Kod jest bardzo prosty. Tworzymy zmienną $custom_css. Jeśli opcja devcorner_events_hover ma wartość border, to do zmiennej dopisujemy regułę dodającą efekt hover. Na końcu korzystając z wp_add_inline_style() dodajemy style zawarte w zmiennej do strony.

W ustawieniach wybierz teraz opcję obramowanie, zapisz zmiany i odśwież stronę główną:

devcorner events hover

Po ustawieniu opcji na brak efekt zniknie.

To już wszystko w tej części kursu. W kolejnej dodamy kilka nowych ustawień i zarejestrujemy nowy shortcode.

Pobierz paczkę z wtyczką >>