Spis treści
- WordPress
- Co to jest CPT, czyli Custom Post Types?
- Jak dodać nowy typ postu do WordPress’a?
- ACF, czyli Advanced Custom Fields
- Praktyczne wykorzystanie ACF i CPT
- Dlaczego używanie ACF i CPT jest ważne w stronach na WordPressie?
- Podsumowanie
WordPress
Tworzenie sklepów internetowych oraz stron w oparciu o WordPress to popularny i modny nurt w web developmencie. WordPress to narzędzie do zarządzania treścią (ang. CMS - Content Managment System), pozwalające na tworzenie stron i sklepów internetowych.
W początkowym założeniu miał służyć jako prosty system do tworzenia blogów, z czasem jednak zyskał na popularności - ze względu na jego możliwości oraz dodatki, które przez cały czas do niego powstają.
WordPress opiera się na zasadzie typów postów (ang. post types), na podstawie których tworzy się podstrony serwisu i posty na blogu. Podstawowe to POST oraz PAGE.
Co to jest CPT, czyli Custom Post Types?
Najpopularniejszym narzędziem WordPress w ostatnich latach jest edytor treści Gutenberg, pozwalający na stworzenie struktury pojedynczej strony lub artykułu bez znajomości HTML, CSS, JavaScript - oferuje wiele komponentów, takich jak:
- akapity,
- galerie,
- slidery zdjęć,
- sekcje z listą postów blogowych.
Tutaj rozwija się pojęcie Custom Post Type, ponieważ te bloki to nowy typ postu, używany jako taki mały element do budowania większej funkcjonalności.
Żeby zrozumieć, czym są CPT (ang. Custom Post Types), trzeba przyjrzeć się wtyczce WooCommerce bazującej na customowym typie, jakim są produkty, które mają większe możliwości i funkcje niż wcześniej wspomniane POST i PAGE. Podstawowymi ich elementami są:
- cena,
- wymiary,
- galeria zdjęć.
(źródło: WooCoomerce.com)
Korzystając z CPT, można zbudować dowolny system. Przykładem takiego systemu może być Biblioteka online.
Jak dodać nowy typ postu do WordPress’a?
Pierwszy sposób to wg oficjalnej dokumentacji: developer.wordpress.org/reference/functions/register_post_type/.
Najprostszą metodą dodawania postów jest wpisanie przykładowego kodu do pliku functions.php
Konieczne do uzupełnienia to:
'name' => 'Books'
- odpowiada na nazwę typu posta'singular_name' => 'Book'
- nazwa pojedynczego typu postu'menu_name' => 'Library'
- nazwa wyświetlana w panelu administracyjnym WordPress
Inną możliwością jest dodanie typu postu poprzez wtyczkę Custom Post Type UI. Oferuje ona dodawanie postów z poziomu panelu administracyjnego, pomijając generowanie tej funkcjonalności z pliku functions.php
Dodanie pluginu do użytku jest bardzo proste. W panelu WordPress należy wejść w pozycję Wtyczki (ang. Plugins) -> Dodaj nową (ang. Add new plugin) -> W polu wyszukiwania wpisać “CPT” -> Instaluj
W kolejnym kroku należy dodać taki typ postu, wykorzystując wtyczkę.
Następnie uzupełnić poniższe dane:
Teraz można dodawać książki do spisu.
Aktualnie wchodząc w edycję, można jedynie dodać tytuł i tekst, co niewiele daje w kwestii stworzenia spisu książek online. Brakuje informacji takich jak autor, rok wydania, rodzaj okładki, ilość stron, format, stan, seria, galeria. Świat WordPressa poradził sobie i z tym problemem: wydając wtyczkę Advanced Custom Fields.
ACF, czyli Advanced Custom Fields
Autor wtyczki określił to narzędzie jako niezbędne do pełnego kontrolowania edycji i danych dostępnych w WordPress.
(źródło: advancedcustomfields.com)
Dodawanie pól i pobieranie danych jest proste i intuicyjne.
(źródło: advancedcustomfields.com)
Dzięki swoim możliwościom posłuży ona do uzupełnienia w/w braków w danych książki. W głównym menu WordPress należy przejść do zakładki Własne pola (ang. Custom fields), następnie wybrać Grupy Pól. Po przejściu do odpowiedniego widoku trzeba kliknąć Dodaj nową. Pojawi się taki ekran:
Teraz można dodać niezbędne do funkcjonowania spisu dane dla książek.
Ostatnim krokiem jest zapisanie tej grupy pól i przejście do edycji.
Praktyczne wykorzystanie ACF i CPT
Ostatnim etapem pokazania możliwości tych dwóch wyżej wymienionych narzędzi jest praktyczny przykład. Zostaną dodane dwa widoki, czyli lista książek oraz widok pojedynczej książki.
Strona archiwum ze spisem
Najpierw dodamy plik wyświetlający aktualny spis zebranych książek. Z racji tego, iż typ postu nazywa się “book”, to plik odpowiedzialny za pokazanie danych z bazy danych wszystkich dostępnych pozycji nazywa się archive-book.php. Więcej na ten temat opisane jest w dokumentacji WordPress developer.wordpress.org/themes/template-files-section/custom-post-type-template-files/.
Chcąc pobrać dane pozycji ze spisu, trzeba użyć kilku funkcji, które oferują ACF i CPT. Oto podstawowe i najważniejsze fragmenty kodu, na których opiera się pobieranie oraz wyświetlanie danych z WordPress i ACF.
Ciekawostką ze świata WordPress jest to, że wszystkie funkcje zaczynające się od the_
np. the_title()
- wyświetlają informacje, a te z przedrostkiem get_
, np. get_the_title()
- pobierają dane, ale żeby je wyświetlić, należy połączyć je z komendą echo, np. echo get_the_title()
.
Wbudowane w WordPressie:
the_ID()
- wyświetla ID aktualnie przetwarzanego postuthe_title()
- wyświetla tytuł postuthe_post_thumbnail( 'thumbnail' )
- wyświetla obrazek wyróżniający postu w formacie 150px x 150pxthe_permalink()
- wyświetla adres url danego postu
Wbudowane w ACF:
the_field('nazwa_pola')
- wyświetla wartość z CMS, która jest wpisana w dane pole
Efektem użycia szablonu oraz wyżej wymienionych fragmentów kodu jest gotowy szablon listujący wszystkie pozycje z biblioteki według daty ich dodania.
Projekt takiej listy można rozwinąć o sortowanie po wartościach poszczególnych kolumn - jednak to temat na zupełnie inny artykuł ;) Najważniejszym punktem tego mini projektu jest szablon pojedynczego postu, pokazuje on duże możliwości, jakie niesie połączenie ze sobą ACF oraz CPT.
Dlaczego używanie ACF i CPT jest ważne w stronach na WordPressie?
W standardowej postaci WordPress to zwykły system blogowy z możliwością rozbudowania go w kierunku pełnoprawnej strony internetowej. Z pomocą w tym przychodzą tzw. page-buildery, czyli narzędzia posiadające wiele gotowych komponentów do budowy strony lub wcześniej wspomniany Gutenberg i tworzone w nim bloki. Rozwiązania te mają jednak spore ograniczenia jeśli chodzi o przepływ danych lub ich używanie w celu filtrowania opcji, szukania po dacie bądź też innym atrybucie danego postu.
Pluginy będące tematem tego artykułu w dużym stopniu rozwiązują te problemy. Dodane pola w nowych typach postów mogą zostać wykorzystane jako atrybuty filtrujące w dużej wyszukiwarce sklepowej.
Ten przykład to tylko kropla w morzu potrzeb dla osób budujących bardziej zaawansowane strony.
Szablon pojedynczego wpisu oparty o ACF
Zgodnie z założeniem fazą końcową jest przedstawienie szczegółowego widoku dla przedmiotu, jakim jest książka w spisie. Na początku artykułu wymieniłem cechy, jakie będą ją opisywały. Wykorzystując wcześniej przygotowane fragmenty kodu, tworzymy „templatkę” wpisu typu book.
Jedyną niespodzianką jest wykorzystanie galerii. Pole galerii to tablica adresów URL zdjęć tam dodanych, więc trzeba je pobrać do osobnej zmiennej, by ją przetworzyć. Do tego posłużyła pętla FOREACH (czym są tablice czy pętle - polecam poczytać w dokumentacji dowolnego języka programowania). Mechanizm ten zwraca pojedynczy element, który do niego należy - a ze względu na to, że został wybrany adres URL, to zapis stał się bardzo prosty.
Hmmm… jeśli próbujesz odtworzyć kod z przykładu i nie działa… to sprawdź, czy poprawnie zostało dodane pole w ACF, czy nie została pomylona nazwa podczas wywoływania lub po prostu być może już nie pierwszy raz… czy została domknięta pętla foreach. Takie małe rady :)
Wyżej zamieszczony kod transformuje się do postaci takiego oto widoku.
Wszystkie początkowe założenia zostały spełnione, użytkownik może sprawdzić listę dostępnych książek, a także podejrzeć szczegóły każdej z nich.
Podsumowanie
W ekosystemie WordPress istnieje wiele narzędzi ułatwiających pracę developerom oraz dających klientom produkt spełniający ich oczekiwania. Custom Post Types i Advanced Custom Fields to zdecydowanie podstawowe elementy tego świata. Dzięki nim można tworzyć rozbudowane systemy, np. fora, strony z prezentacjami produktów, systemy rezerwacyjne, zaawansowane filtrowania pomagające sprecyzować i znaleźć idealny przedmiot na przeglądanej stronie tj. odpowiedni model samochodu.
Te dwa pluginy to klucz do wspaniałych stron internetowych, rozbudowanych systemów. Są nieodłącznym elementem pracy każdego developera, który tworzy projekty w oparciu o WordPress.
Pamiętaj, że jeżeli oprócz funkcjonalności w tym systemie zarządzania treścią chcesz również zlecić pozycjonowanie strony WordPress, zgłoś się do nas!