Spis treści

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.

post wordpress

page wordpress

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.

gutenberg blocks

Ż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ęć.

product editor

(ź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

jak dodać nowy typ postu wordpress

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

library menu

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

dodanie pluginu custom post type wordpress

W kolejnym kroku należy dodać taki typ postu, wykorzystując wtyczkę.

cpt menus

Następnie uzupełnić poniższe dane:

cpt wordpress panel

Teraz można dodawać książki do spisu.

click add book

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

advanced custom fields

Autor wtyczki określił to narzędzie jako niezbędne do pełnego kontrolowania edycji i danych dostępnych w WordPress.

advanced custom fields home hero

(źródło: advancedcustomfields.com)

Dodawanie pól i pobieranie danych jest proste i intuicyjne.

advanced custom fields simple intutive

(ź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:

acf book empty fields

Teraz można dodać niezbędne do funkcjonowania spisu dane dla książek.

acf book

Ostatnim krokiem jest zapisanie tej grupy pól i przejście do edycji.

uzupełnione pola acf

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/.

code blank archive

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 postu
  • the_title() - wyświetla tytuł postu
  • the_post_thumbnail( 'thumbnail' ) - wyświetla obrazek wyróżniający postu w formacie 150px x 150px
  • the_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.

code done archive

spis

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.

filtry woocommerce

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.

single book template

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.

single book frontend

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!