Jak łatwo dodać filtry postów do swojej witryny WordPress

Częstym żądaniem, z którym się spotykam, jest umożliwienie użytkownikom filtrowania lub sortowania postów w interfejsie ich witryny.

Być może użytkownicy chcą przeglądać posty alfabetycznie, a może tylko te posty z miniaturami? Ma to już sens w przypadku zwykłych postów, ale może być jeszcze bardziej znaczące w przypadku produktów, zdjęć lub innych rodzajów treści.

W dzisiejszym Weekendowym projekcie WordPress przedstawię krótkie podsumowanie tego, jak zaimplementować taką funkcję w motywie Twenty Fifteen. Do roboty!

• Tworzenie motywu potomnego
• Tworzenie kontroli
• Modyfikowanie zapytania
• Inteligentniejsze formularze
• Zachowanie WordPress
• Wniosek

Tworzenie motywu potomnego

Jak zawsze potrzebujesz motywu potomnego. Mamy przewodnik po motywach potomnych tutaj na WPMU DEV, polecam go przeczytać, jeśli nie znasz motywów potomnych.

Tworzenie kontroli

Dodajmy trzy kontrolki: jedną do porządkowania postów, jedną do ustawiania kierunku sortowania i jedną do pokazywania tylko postów z miniaturami.

Pierwszym krokiem jest skopiowanie index.php motywu nadrzędnego do naszego motywu potomnego.

Otwórz plik index.php w motywie potomnym i wklej następujący kod HTML poniżej głównego kontenera (który powinien znajdować się w wierszu 20):

A oto jak to wygląda na froncie:

Jak widać brakuje nam odrobiny stylizacji. Rozwiążmy to, dodając kilka stylów do arkusza stylów:

Reakcja, którą często słyszę od nowicjuszy w programowaniu, brzmi: „skąd wiedział, że to są style, które sprawią, że wtopi się w temat?”

Rozwiązanie jest dość proste: oszukuję. Używam narzędzi programistycznych w Chrome do sprawdzania zwykłych elementów artykułu. W tym przypadku pozwoliło mi zobaczyć, w jaki sposób elementy uzyskują cień pudełka i marginesy, a ja po prostu zastosowałem te zasady do własnego elementu.

Modyfikowanie zapytania

Wybierzmy „uporządkujmy według tytułu”, „rosnąco” i „posty z miniaturami” i prześlij formularz. Powinieneś zobaczyć zmianę bez robienia czegokolwiek w kodzie.

Aby zobaczyć dlaczego, sprawdźmy adres URL. Powinno to wyglądać mniej więcej tak:

 http://twojadomena.com/?orderby=post_title&order=DESC&thumbnail=only_thumbnailed

Smakołyki informacji można przywołać w naszych skryptach PHP za pomocą zmiennej $_GET . WordPress już wie, co oznaczają parametry order i orderby i używa ich w domyślnym zapytaniu. W rezultacie, jeśli potrzebujemy tylko zamówień i wskazówek, wszystko jest gotowe.

To wszystko świetnie, ale znowu, skąd to wiedziałem? Mogłem użyć „order_by” jako parametru zamiast „orderby”. W tym przypadku WordPress nie wychwytuje naszych zamiarów. Zajrzałem do dokumentacji WP_Query w WordPress Codex, gdzie znajduje się kilka parametrów, z których wiele można wykorzystać w adresach URL.

Teraz zaimplementujmy nasz parametr miniatury posta. Wpis ma miniaturę, jeśli zawiera metadane z powiązanym z nim kluczem _thumbnail_id . Musimy zmodyfikować nasze zapytanie, aby upewnić się, że zostało to wzięte pod uwagę. Zróbmy to teraz za pomocą query_posts() .

Wklej następujący kod nad get_header() na górze pliku:

Łączymy parametry oryginalnego zapytania z naszym własnym nowym parametrem, co skutkuje innym zestawem postów. Nasz formularz działa teraz, ale nie pamięta naszych wyborów. Naprawmy to, przepisując nasz formularz i używając trochę PHP.

Inteligentniejsze formularze

Oprócz wylistowania wszystkich opcji zamówienia według selektora, potrzebujemy sposobu na wskazanie, który z nich jest wybrany. Gdybyśmy zrobili to bez pętli, wyglądałoby to mniej więcej tak:

Czy rozumiesz cokolwiek z tego? Nie winię cię! W ramach każdej opcji sprawdzamy, czy aktualnie wybrana wartość jest równa wartości opcji. Jeśli tak, wyprowadzamy wybraną właściwość. Zróbmy to o wiele czyściej za pomocą pętli:

To trochę dłużej, ale tylko dlatego, że mamy trzy opcje. Jest to o wiele lepszy format do zarządzania dowolnym rodzajem selekcji. Rozszerzmy to na cały formularz:

Wszystko gotowe. Formularz powinien teraz zapamiętać nasze wybory na podstawie zmiennych $_GET w adresie URL.

Zachowanie WordPress

Pamiętasz, jak wspomniałem, że wiem, jak używać „order” i „orderby”, ponieważ zajrzałem do dokumentacji WP_Query? To dobra praktyka, ale może prowadzić do nieoczekiwanych rezultatów. Znajdź ślimak z kategorii, którą masz, powiedzmy, że ta kategoria to „wordpress”.

Teraz użyj następującego adresu URL: http://yourwebsite.com/?category_name=wordpress. Powinieneś zobaczyć swoje archiwum kategorii, zawierające listę wszystkich twoich postów WordPress. To jest w porządku, ale mamy dwa problemy:

Jeśli masz włączone ładne permalinki (co powinieneś), strona została przekierowana na nowy adres URL, najprawdopodobniej http://yourwebsite.com/category/wordpress. Nasze filtry nie będą widoczne, ponieważ plik archive.php obsługuje ten widok, a nie index.php . Ponadto nazwa naszej kategorii nie jest przekazywana jako parametr adresu URL, więc będziemy musieli zastosować dodatkowe sztuczki, aby nasze filtry działały.

Najkrótszym sposobem na to, aby to zadziałało, jest celowe nieużywanie tych samych parametrów, których używa WordPress. Możesz przekazać nazwę kategorii za pomocą parametru catname w adresie URL, ponieważ WordPress tego nie wykryje. Następnie możesz podać to do zapytania, używając prawidłowej nazwy parametru. Coś takiego:

Alternatywą byłoby użycie funkcji zamiast wyprowadzania naszego formularza w index.php bez zmian. Musisz wykryć kategorię z samego zapytania WordPress i na tej podstawie wyświetlić aktualny wybór.

Wniosek

Dodawanie własnych filtrów nie jest takie trudne, ale wymaga trochę manipulacji. W naszym przypadku możesz chcieć upewnić się, że paginacja zostanie usunięta, gdy kolejność jest ustawiona na losową. Można go zastąpić przyciskiem „pokaż więcej losowości”, który po prostu ponownie ładuje stronę.

Mam nadzieję, że ten artykuł dał ci podstawy, jak możesz to zrobić dla siebie i będziesz w stanie zbudować potrzebne filtry.

• weekendowe projekty wordpress