Jak utworzyć nowy typ zawartości w WordPress

Czy kiedykolwiek myślałeś o tym, aby Twoja strona internetowa wyróżniała się na tle innych, prezentując unikalną zawartość dostosowaną do potrzeb Twoich i Czytelników? Jeśli tak, mam dla Ciebie świetną wiadomość!

WordPress, znany z elastyczności i łatwości obsługi, pozwala na tworzenie nowych, niestandardowych typów zawartości. Standardowo jak wiesz ma dwa podstawowe: Wpisy i Strony. Nie oznacza to jednak, że jesteś na nie skazany i nie możesz utworzyć własnych 🙂 Z łatwością dodać do swojej witryny Portfolio, Wydarzenia czy cokolwiek innego, co tylko przyjdzie Ci do głowy. Staniesz się prawdziwym twórcą!

W tym artykule pokażę Ci, jak krok po kroku utworzyć własny typ zawartości manualnie bez instalacji dodatkowych wtyczek, abyś mógł jeszcze lepiej kontrolować architekturę informacji na swojej stronie i uniknąć typowych błędów. Przygotuj się na odkrycie nieograniczonych możliwości WordPress!

Własny rodzaj zawartości

Własny rodzaj zawartości (ang. Custom Post Type, CPT) to funkcja w WordPress, która pozwala na tworzenie niestandardowych typów wpisów. Dzięki CPT możesz stworzyć zupełnie nowe kategorie zawartości, dostosowane do indywidualnych potrzeb Twojego projektu.

W praktyce oznacza to, że możesz kreować dowolne rodzaje wpisów, takie jak wspomniane wcześniej Portfolio, Wydarzenia, Testy, Recenzje, Produkty, Ogłoszenia, Projekty itp., i zarządzać nimi w sposób uporządkowany i zgodny z własną wizją. CPT pozwalają na lepszą organizację i prezentację informacji, co przekłada się na bardziej profesjonalny wygląd strony oraz lepsze doświadczenie dla użytkownika.

Własne rodzaje zawartości można tworzyć zarówno przy użyciu kodu PHP (tego dotkniemy), jak i za pomocą dedykowanych wtyczek, które ułatwiają proces i nie wymagają znajomości programowania. Niezależnie od wybranej metody, własne rodzaje zawartości zwiększają elastyczność i funkcjonalność Twojej strony na WordPress, umożliwiając lepsze dostosowanie jej do potrzeb Twojej działalności lub pasji.

Fragment kodu

Najszybszym sposobem na dodanie własnego rodzaju zawartości jest prosty, poniżej widoczny kod, który wystarczy skopiować i wkleić do pliku functions.php motywu potomnego. Jeśli takiego motywu nie masz, a boisz sie eksperymentować, możesz użyć wtyczek takich jak WPCode czy Code Snippets.

W naszym przykładzie dodajemy nowy rodzaj zawartości Portfolio, ale Ty możesz stworzyć jakikolwiek inny. Wystarczy, że słowa portfolio w poniższym kodzie zamienisz na inną nazwę, np.: katalog, przepis itp…

function create_post_type() {
  register_post_type( 'portfolio',
    array(
      'labels' => array(
        'name' => __( 'Portfolio' ),
        'singular_name' => __( 'Portfolio' )
      ),
      'public' => true,
      'has_archive' => true,
    )
  );
}
add_action( 'init', 'create_post_type' );

Jeśli wstawisz powyższy kod, a następnie wrócisz do backendu WordPressa zobaczysz nagle coś takiego ????

Jak widzisz nie potrzeba wspomagania się wtyczkami. Jeśli nie potrzebujesz specyficznych pól, to tak na dobrą sprawę to co zrobiliśmy mogłoby wystarczyć.

Dołożysz do tego szablony FSE albo Elementora PRO z Theme Builderem i możesz swoje portfolio całkiem fajnie zaaranżować.

Rozbudowa fragmentu kodu

W pewnych sytuacjach może się okazać (zazwyczaj tak jest), że czegoś jednak brakuje. Masz możliwość wpisania tytułu i możliwość wprowadzenia treści bazując na klasycznym edytorze. Spójrz:

W prawej kolumnie są opcje związane z publikacją, a gdzie obrazek wyróżniający, gdzie taksonomie? Zaraz do tego dojdziemy.

Dodajemy edytor blokowy

Co musisz zrobić, aby edytor klasyczny zmienić na edytor blokowy? Wystarczy prosty zabieg polegający na dodaniu do naszego kodu takiego drobiazgu:

'show_in_rest' => true,
'supports' => array('title','editor'),

A oto rezultat:

Kosmetyczny zabieg i edytor blokowy Gutenberg jest aktywny, ale jak widzisz wciąż nie ma możliwości dodania obrazka wyróżniającego, a to dosyć przydatny atrybut 🙂

Cały nasz kod wygląda teraz tak:

function create_post_type() {
  register_post_type( 'portfolio',
    array(
      'labels' => array(
        'name' => __( 'Portfolio' ),
        'singular_name' => __( 'Portfolio' )
      ),
      'show_in_rest' => true,
	'supports' => array('title','editor'),
      'public' => true,
      'has_archive' => true,
    )
  );
}
add_action( 'init', 'create_post_type' );

Dodajemy obrazek wyróżniający

Obrazek wyróżniający w WordPress to grafika, która reprezentuje dany wpis lub stronę na Twojej witrynie. Pełni on funkcję wizualnej ilustracji lub “okładki” dla zawartości, co pomaga w przyciągnięciu uwagi czytelników i skłania ich do zainteresowania się publikacją. Obrazek wyróżniający jest często wykorzystywany w blokach wyświetlających wpisy, archiwach, a także w mediach społecznościowych podczas udostępniania linków do Twojej strony.

Aby go dodać do naszego nowego rodzaju zawartości wzbogać tablicę support o element thumbnail. W naszym wypadku będzie to wyglądało tak:

'supports' => array('title', 'editor', 'thumbnail')

W konsekwencji tego działania zobaczysz taki oto efekt, gdy tylko  spróbujesz dodać nowy wpis do naszego przykładowego Portfolio:

Dodajemy zajawkę, komentarze i wersjonizację

Zajawka to krótki opis lub wstęp do wpisu. Służy jako skrócony podgląd treści wpisu dla Czytelników. Zajawki pozwalają użytkownikom szybko zrozumieć, o czym jest dany wpis, zanim zdecydują się go przeczytać. Standardowo WordPress wyświetla zajawkę z początku treści artykułu, ale jeśli chcesz ją kontrolować trzeba będzie dodać do tablicy ‘excerpt’.

Funkcjonalności komentarzy chyba nie muszę wyjaśniać, natomiast jeśli chodzi o nasz kod musimy dopisać ‘comments’.

Opcja “Revisions” (Rewizje) w WordPress służy do śledzenia zmian wprowadzanych w treści stron i postów oraz umożliwia przywracanie ich poprzednich wersji. Funkcja ta jest szczególnie przydatna, gdy wielu autorów pracuje nad jednym projektem lub gdy chcesz wrócić do wcześniejszej wersji swojej pracy. Aby tę funkcjonalność aktywować w naszym przykładzie dopisujemy ‘revisions’. Zerknij na poniższy fragment kodu:

'supports' => array('title','editor', 'thumbnail', 'excerpt', 'comments', 'revisions')

Kolejna kosmetyka i kolejne sekcje dostępne w edytorze.

Dodajemy pozostałe elementy

Mamy już całkiem sporo, ale można dodać nieco więcej, np. autora, czy wsparcie dla własnych pól, a więc: ‘author’ i ‘custom-fields’.

'supports' => array('title','editor', 'thumbnail', 'excerpt', 'comments', 'revisions', 'author', 'custom-fields')

Teraz nasz pełny kod nowego rodzaju zawartości wygląda tak:

add_action( 'init', 'create_post_type' );

function create_post_type() {
  register_post_type( 'portfolio',
    array(
      'labels' => array(
        'name' => __( 'Portfolio' ),
        'singular_name' => __( 'Portfolio' )
      ),
	  'show_in_rest' => true,
	  'supports' => array('title','editor', 'thumbnail', 'excerpt', 'comments', 'revisions', 'author', 'custom-fields'),
      'public' => true,
      'has_archive' => true,
    )
  );
}

Inne opcje

Jeśli zechcesz wykorzystać również inne możliwości konfiguracji własnego rodzaju zawartości, możesz dodać do powyższego kodu następujące opcje wedle uznania:

'hierarchical'        => false,
'show_ui'             => true,
'show_in_menu'        => true,
'show_in_nav_menus'   => true,
'show_in_admin_bar'   => true,
'menu_position'       => 5,
'can_export'          => true,
'exclude_from_search' => false,
'publicly_queryable'  => true,
'capability_type'     => 'post',

W ten sposób możesz kontrolować dodatkowe cechy, np. ulokować Portfolio w odpowiednim miejscu menu administratora, wykluczyć z wyszukiwarki itd.

Taksonomie

Mamy własny typ zawartości ustawiony zgodnie z naszymi preferencjami i nie użyliśmy do tego żadnej wtyczki (im ich mniej tym lepiej). Ale może się okazać, że nasze portfolio chcielibyśmy móc dodatkowo kategoryzować, a może nawet tagować. Pytanie jak dodać specyficzną taksonomię dla naszego rodzaju zawartości?

Za chwilę dodamy taksonomię hierarchiczną i taksonomię bez hierarchii. Żeby to lepiej zobrazować odwołam się do standardowego rodzaju zawartości jakim są Wpisy w WordPressie. Wpisy możesz podpiąć pod kategorie (taksonomia hierarchiczna) i otagować (taksonomia bez hierarchii). Zaczynamy.

Tworzymy taksonomię hierarchiczną

Do naszego portfolio dodamy kategorie, które będą określały rodzaj wykonanych prac, np. jeśli założymy, że jesteśmy małą firmą reklamową będą mogły to być kategorie typu: Strony WWW, Katalogi, Wizytówki, Foldery itp…

Gdybyśmy mieli bloga lub serwis z przepisami kulinarnymi mogłyby to być rodzaje dań, np: Kuchnia Polska, Kuchnia Azjatycka itd…

Aby dla naszego przykładowego portfolio małej agencji reklamowej utworzyć kategorie, musisz dopisać kolejne fragmenty kodu. Rozłożę jego całość na mniejsze części, żeby było Ci łatwiej zrozumieć za co dany fragment odpowiada.

Inicjacja poprzez akcję funkcji tworzącej kategorię

Pisanie kodu zacznij pod poniższej akcji. Wywołuję w niej funkcję, którą nazwałem: create_cat_hierarchical_taxonomy

add_action( 'init', 'create_cat_hierarchical_taxonomy', 0 );

Teraz dodaję wywoływaną przez akcję funkcję, której zadaniem jest utworzenie taksonomii

Kod wewnątrz tej funkcji zostanie wykonany przez akcję.

function create_cat_hierarchical_taxonomy() {
}

Gdy to mam za sobą pozostaje wyposażyć funkcję we właściwe dane odpowiadające za nazwę taksonomii, jej rodzaj, etykiety i inne parametry. Zaczniemy od etykiet. Wstaw do funkcji poniższy kod:

  $labels = array(
    'name' => _x( 'Kategorie', 'taxonomy general name' ),
    'singular_name' => _x( 'Kategoria', 'taxonomy singular name' ),
    'search_items' =>  __( 'Szukaj Kategorii' ),
    'all_items' => __( 'Wszystkie' ),
    'parent_item' => __( 'Rodzic' ),
    'parent_item_colon' => __( 'Rodzic:' ),
    'edit_item' => __( 'Edytuj Kategorię' ), 
    'update_item' => __( 'Aktualizuj Kategorię' ),
    'add_new_item' => __( 'Dodaj nową Kategorię' ),
    'new_item_name' => __( 'Nazwa nowej Kategorii' ),
    'menu_name' => __( 'Kategorie' ),
  ); 

To własne nazwy związane z tworzona kategorią, które poźniej będą ułatwiały Ci nawigowanie i identyfikowanie poszczególnych elementów. Nazwy jak Kategorie, Wszystkie, Dodaj nową kategorię i pozostałe możesz zastąpić własnymi nazwami wedle potrzeb, np. Dodaj nowy przepis ????

Rejestracja taksonomii

Same etykiety nie wystarczą do tego aby nasze kategorie dla portfolio pojawiły się w edytorze. Taksonomie musisz zarejestrować, oto przykładowy kod rejestracji:

  register_taxonomy('portfolio-cat',array('portfolio'), array(
    'hierarchical' => true,
    'labels' => $labels,
    'show_ui' => true,
    'show_in_rest' => true,
    'show_admin_column' => true,
    'query_var' => true,
    'rewrite' => array( 'slug' => 'portfolio-cat' ),
  ));

Aby powiązać rejestrowaną taksonomię z portfolio, koniecznie musisz wprowadzić nazwę utworzonego wcześniej rodzaju zawartości. Widzisz ją w pierwszej linijce powyższego kodu: array(‘portfolio’)

Parametr ‘hierarchical’ jak być może się domyślasz, decyduje o tym czy taksonomia zachowa się jak standardowe kategorie WordPressa czy jak tagi.

Pełny kod naszej kategorii dla portfolio

Jeśli chcesz sprawdzić jak zadziała całość, skopiuj i wklej ten kod do motywu potomnego, może być po kodzie tworzącym rodzaj zawartości Portfolio.

//dodanie akcji init i wywołanie funkcji create_cat_hierarchical_taxonomy
add_action( 'init', 'create_cat_hierarchical_taxonomy', 0 );
 
//utworzenie niestandardowej taksonomii hierarchicznej
function create_cat_hierarchical_taxonomy() {
 
// Zacznijmy od spolszczenia etykiet
  $labels = array(
    'name' => _x( 'Kategorie', 'taxonomy general name' ),
    'singular_name' => _x( 'Kategoria', 'taxonomy singular name' ),
    'search_items' =>  __( 'Szukaj Kategorii' ),
    'all_items' => __( 'Wszystkie' ),
    'parent_item' => __( 'Rodzic' ),
    'parent_item_colon' => __( 'Rodzic:' ),
    'edit_item' => __( 'Edytuj Kategorię' ), 
    'update_item' => __( 'Aktualizuj Kategorię' ),
    'add_new_item' => __( 'Dodaj nową Kategorię' ),
    'new_item_name' => __( 'Nazwa nowej Kategorii' ),
    'menu_name' => __( 'Kategorie' ),
  );    
 
// rejestrujemy taksonomię
  register_taxonomy('portfolio-cat',array('portfolio'), array(
    'hierarchical' => true,
    'labels' => $labels,
    'show_ui' => true,
    'show_in_rest' => true,
    'show_admin_column' => true,
    'query_var' => true,
    'rewrite' => array( 'slug' => 'portfolio-cat' ),
  ));
 
}

Taksonomia w panelu WordPress

Teraz przejdź do kokpitu WordPress, rozwiń menu Portfolio i powinieneś zobaczyć dodatkowy element, czyli nasze kategorie ????

Dodając wpis Portfolio również wszystko się zgadza ????

Taksonomia bez hierarchii

Teraz dodamy kolejną taksonomię. Tym razem do naszego portfolio dołożę wykorzystane technologie w ramach danego projektu jaki będę opisywał. Przy portfolio gdzie prezentuję wykonane strony www może to być np.: wordpress, php i inne… W tym wypadku nie potrzebuję struktury hierarchicznej.

Sam kod niewiele różni się od wcześniejszego. Jeśli go przeanalizujesz zauważysz niewielką kosmetykę.

//dodanie akcji init i wywołanie funkcji create_tech_taxonomy
add_action( 'init', 'create_tech_taxonomy', 0 );
 
//utworzenie niestandardowej taksonomii o nazwie Technologie
function create_tech_taxonomy() {

// spolszczenie etykiet dla technologii
  $labels = array(
    'name' => _x( 'Technologie', 'taxonomy general name' ),
    'singular_name' => _x( 'Technologia', 'taxonomy singular name' ),
    'search_items' =>  __( 'Szukaj Technologii' ),
    'all_items' => __( 'Wszystkie' ),
    'parent_item' => __( 'Rodzic' ),
    'parent_item_colon' => __( 'Rodzic:' ),
    'edit_item' => __( 'Edytuj Technologię' ), 
    'update_item' => __( 'Aktualizuj Technologię' ),
    'add_new_item' => __( 'Dodaj nową Technologię' ),
    'new_item_name' => __( 'Nazwa nowej Technologii' ),
    'menu_name' => __( 'Technologie' ),
  );    
 
// rejestruja taksonomii
  register_taxonomy('technologie',array('portfolio'), array(
    'hierarchical' => false,
    'labels' => $labels,
    'show_ui' => true,
    'show_in_rest' => true,
    'show_admin_column' => true,
    'update_count_callback' => '_update_post_term_count',
    'query_var' => true,
    'rewrite' => array( 'slug' => 'technologia' ),
  ));
 
}

I znowu spójrz na efekt finalny.

Przy dodawaniu i edycji wpisów Portfolio:

Całość w jednym

Poniżej całość kodu jakiego użyliśmy do stworzenia nowego rodzaju treści i niestandardowych taksonomii.

add_action( 'init', 'create_post_type' );

function create_post_type() {
  register_post_type( 'portfolio',
    array(
      'labels' => array(
        'name' => __( 'Portfolio' ),
        'singular_name' => __( 'Portfolio' )
      ),
	  'show_in_rest' => true,
	  'supports' => array('title','editor', 'thumbnail', 'excerpt', 'comments', 'revisions', 'author', 'custom-fields'),
      'public' => true,
      'has_archive' => true,
		'taxonomies' => array( 'genres' ),
    )
  );
}

add_action( 'init', 'create_cat_hierarchical_taxonomy', 0 );

function create_cat_hierarchical_taxonomy() {
 
  $labels = array(
    'name' => _x( 'Kategorie', 'taxonomy general name' ),
    'singular_name' => _x( 'Kategoria', 'taxonomy singular name' ),
    'search_items' =>  __( 'Szukaj Kategorii' ),
    'all_items' => __( 'Wszystkie' ),
    'parent_item' => __( 'Rodzic' ),
    'parent_item_colon' => __( 'Rodzic:' ),
    'edit_item' => __( 'Edytuj Kategorię' ), 
    'update_item' => __( 'Aktualizuj Kategorię' ),
    'add_new_item' => __( 'Dodaj nową Kategorię' ),
    'new_item_name' => __( 'Nazwa nowej Kategorii' ),
    'menu_name' => __( 'Kategorie' ),
  );    
 
  register_taxonomy('portfolio-cat',array('portfolio'), array(
    'hierarchical' => true,
    'labels' => $labels,
    'show_ui' => true,
    'show_in_rest' => true,
    'show_admin_column' => true,
    'query_var' => true,
    'rewrite' => array( 'slug' => 'portfolio-cat' ),
  ));
 
}
 
add_action( 'init', 'create_tech_taxonomy', 0 );
 
function create_tech_taxonomy() {
 
  $labels = array(
    'name' => _x( 'Technologie', 'taxonomy general name' ),
    'singular_name' => _x( 'Technologia', 'taxonomy singular name' ),
    'search_items' =>  __( 'Szukaj Technologii' ),
    'all_items' => __( 'Wszystkie' ),
    'parent_item' => __( 'Rodzic' ),
    'parent_item_colon' => __( 'Rodzic:' ),
    'edit_item' => __( 'Edytuj Technologię' ), 
    'update_item' => __( 'Aktualizuj Technologię' ),
    'add_new_item' => __( 'Dodaj nową Technologię' ),
    'new_item_name' => __( 'Nazwa nowej Technologii' ),
    'menu_name' => __( 'Technologie' ),
  );    

  register_taxonomy('technologie',array('portfolio'), array(
    'hierarchical' => false,
    'labels' => $labels,
    'show_ui' => true,
    'show_in_rest' => true,
    'show_admin_column' => true,
    'update_count_callback' => '_update_post_term_count',
    'query_var' => true,
    'rewrite' => array( 'slug' => 'technologia' ),
  ));
 
}

Nie taki diabeł straszny jak go malują, prawda? ????

Własne pola

Czasem może się pojawić potrzeba dodania dodatkowego pola opisu, np. chcielibyśmy przechowywać w osobnym polu np. datę realizacji danego projektu. To również zrobisz bez konieczności instalowania kolejnych wtyczek.

Własne pola mamy aktywne, ponieważ tworząc nowy rodzaj zawartości Portfolio zadeklarowaliśmy chęć korzystania z nich. Dla przypomnienia:

'supports' => array('title','editor', 'thumbnail', 'excerpt', 'comments', 'revisions', 'author', 'custom-fields'),

Widać deklarację na samum końcu. Gdy jednak zajrzysz do edytora blokowego domyślnie nie będziesz ich widział. Aby się pojawiły przejdź do Preferencji edytora.

A następnie w zakładce Panele włącz widok dodatkowych pól. I zatwierdź zmiany.

Sprawdź teraz co pojawiło się pod treścią artykułu w edytorze. Powinieneś zobaczyć sekcję z własnymi polami. Możesz ich dodać tyle ile chcesz. W naszym przypadku chciałem dodać rok realizacji, oto i on:

Podsumowując

W sytuacji gdy nie jesteś techniczny, ale jednocześnie nie chcesz faszerować WordPressa kolejnymi wtyczkami użyj powyżej zaprezentowanej metody tworzenia nowego rodzaju zawartości z niestandardowymi taksonomiami i polami. Powyższe przykłady kodu skopiuj i wklej do pliku functions.php motywu potomnego lub do wtyczki takiej jak CodeSnippets, zmień nazwy wedle uznania i gotowe ????

Wtyczki

Ah, te wtyczki, jakże inny byłby bez nich świat. Ale pamiętaj, że zbyt duża ich ilość jest szkodliwa ???? WordPress z ogromnym repozytorium daje Ci szeroki wachlarz możliwości. Dzięki wtyczkom możesz uniknąć ręcznego wpisywania kodu i zamiast tego korzystać z opcji klikania. Jeśli więc preferujesz “klikologię”, wybierz wtyczkę, która najlepiej spełnia Twoje potrzeby i jest jak możliwie intuicyjna.

Kilka rozwiązań, które polecam:

• Custom Post Type UI
• Pods – od razu z możliwością dodawania własnych pól opisu
• JetEngine – własne rodzaje treści, pola i wiele innych możliwości – kombajn
• MetaBox – rozwiązanie modułowe. Podobnie jak JetEngine może wiele
• CubeWP – najmłodsza z wymienionych wtyczek oferująca wszystkie najważniejsze funkcje pozwalające budować zaawansowane serwisy bez kodowania.
• ACF – popularna wtyczka do tworzenia własnych pól opisu, wiele innych rozwiązań (wtyczek) integruje się z nią.

Większość dostępna jest w bezpłatnym repozytorium. Tylko JetEngine nie ma wersji darmowej.

Poeksperymentuj, a zobaczysz że nie jest to skomplikowane i daje sporo frajdy. Poczujesz się jak prawdziwy Admin, przez duże A ????. Tylko nie rób tego na stronie produkcyjnej! Walcz na poligonie doświadczalnym.

Kierując się w przyszłość możesz też sięgnąć po sztuczną inteligencję, która na podstawie poleceń jest w stanie przygotować Ci gotowy kod 🙂 Zerknij na poniższy artykuł: