W artykule:
Jedną z rzeczy, które kocham w WordPressie, jest sposób korzystania z WP_Query Klasa do tworzenia własnych zapytań niestandardowych. To może odpytywać o wszystko, co chcesz do bazy danych-i mam na myśli wszystko. Posty, niestandardowe posty, Taksonomia, autorzy, niestandardowe pola, status logowania użytkownika: nadajesz mu nazwę, możesz ją uwzględnić w argumentach zapytania.
Ale wyobraź sobie, że chcesz dać odwiedzającym witrynę możliwość uruchomienia, powtórzenia lub aktualizacji zapytania dodanego w witrynie. Czy jest możliwe, aby zapewnić przycisk, który pozwala im to zrobić?
Odpowiedź brzmi: tak.
W tym poście pokażę Ci naprawdę prostą technikę dodawania przycisku do strony w Twojej witrynie, która uruchamia niestandardowe zapytanie. Użyję zapytania, które stworzyłem dla wcześniejszego postu, który zapytał niestandardowe pola i wyświetlił listę losowych „ulubionych rzeczy”.
Zapytanie w obecnej formie jest już interesujące, które wykorzystuje "rnd" argument do wyszukiwania i wyświetlania wartości pól niestandardowych w sposób losowy. Wykorzystuje również tablicę zmiennych do przechowywania danych z trzech postów, a następnie wyprowadza je wszystkie razem w jednym akapicie.
Pokażę Ci, jak dodać do tego zapytania, tworząc przycisk na stronie, który pozwala użytkownikom ponownie uruchomić zapytanie i wyświetlić więcej losowych ulubionych rzeczy.
Czego potrzebujesz
Aby śledzić wraz z tym postem, musisz następujące:
- Testowa lub rozwojowa instalacja WordPressa i
- Edytor kodu.
Ten post jest dość zaawansowany, więc jeśli w którymś momencie utkniesz, możesz zatrzymać się i spędzić trochę czasu na naszych kursach Akademii w tworzeniu WordPressa. Mój kurs średniozaawansowany daje Ci dobre uziemienie w całym kodzie, którego będę używał w tym poście.
Uwaga: kod dołączony do tego samouczka jest dostępny na GitHub.
Podsumowanie naszego dotychczasowego kodu
Podsumujmy dotychczasowy kod. W moim wcześniejszym poście pokazałem ci, jak napisać wtyczkę, która robi kilka rzeczy:
- Rejestrowanie niestandardowego typu postu o nazwie „ulubione”
- Tworzenie pola meta dla ekranu edycji postu dla naszego nowego typu postu
- Dodawanie kilku pól do tego metaboxa
- Dodając kilka ulubionych rzeczy i wypełniając nasze pola metabox dla każdego z nich
- Uruchamianie niestandardowego zapytania w celu pobrania danych o naszych ulubionych rzeczach
- Przechowywanie tego, co daje nam zapytanie w tablicy zmiennych
- Wysyłanie go jako tekstu na stronie
Możesz znaleźć Pełny kod wtyczki na GitHub (i w moim wcześniejszym poście), ale w tym poście będziemy pracować nad ostatnią funkcją w naszej wtyczce, która wyświetla zapytanie:
A oto co jest na stronie:
Dodamy więc przycisk pod akapitem „ulubione rzeczy”, który pozwala użytkownikom ponownie uruchomić zapytanie i zobaczyć więcej ulubionych rzeczy.
Będzie to składać się z dwóch etapów:
- Edycja zapytania w naszym pluginie
- Dodawanie stylów dla przycisku (w tym prawidłowe sprawdzanie arkusza stylów).
Zacznijmy od edycji tego zapytania.
Edycja zapytania
Dodanie przycisku polega na dodaniu linii do argumentów zapytania, a następnie dodaniu znaczników przycisku pod akapitem z listą ulubionych rzeczy.
Zacznijmy od argumentów zapytania.
Znajdź tę sekcję kodu wtyczki:
Poniżej, dodaj tę linię:
Sprawdza, czy przycisk, który zamierzamy utworzyć, został kliknięty i jeśli tak, aktualizuje zapytanie. Teraz dodajmy przycisk.
Znajdź tę sekcję tej samej funkcji:
Dodaj do niego nową linijkę, aby brzmiała tak:
Dodaje To przycisk, który nie łączy się z inną stroną w witrynie, ale z funkcją aktualizacji argumentów zapytania. Tak więc po kliknięciu przycisku aktualizuje argumenty zapytania i uruchamia je ponownie.
Teraz zapisz swój plik i spójrz na swoją witrynę. Mój wygląda tak:
Mój link tam jest i jeśli na niego kliknę, odświeża zapytanie. Ale to nie wygląda jak guzik. Dodajmy więc trochę stylizacji.
Tworzenie i wyszukiwanie arkusza stylów
W folderze wtyczek Dodaj nowy folder o nazwie css. Wewnątrz, Dodaj nowy plik o nazwie styl.css. To będzie zawierać wszystkie style dla naszej wtyczki.
Aby arkusz stylów działał, musisz go poprawnie zapytać. W głównym pliku Wtyczki Dodaj tę funkcję:
To poprawnie wyświetla arkusz stylów w Twojej wtyczce.
Teraz, aby dodać trochę stylizacji.
Dodawanie stylizacji do naszego przycisku
Otwórz właśnie utworzony arkusz stylów. Musisz wystylizować .przycisk klasy, jak również link, który zawiera. Moja stylizacja jest poniżej, ale możesz zmienić swoje kolory:
Teraz Mój przycisk wygląda tak:
Tak lepiej! Możesz poświęcić trochę czasu na modyfikowanie CSS, dodawanie efektów najechania kursorem lub zmianę koloru tekstu. Ale zalecam, aby było to proste.
Umożliwienie użytkownikom odświeżenia zapytania jest prostsze niż mogłoby się wydawać
Kod, który dodaliśmy do naszego zapytania, aby dodać ten przycisk, składał się z zaledwie dwóch linii. Jak widać, utworzenie przycisku, aby odwiedzający witrynę mogli odświeżyć zapytanie, jest bardzo proste. Dodaj te dwie linie kodu, stwórz stylizację i gotowe!
