Skip to content

Wszystko o WordPressie, tworzeniu stron — i nie tylko

🚀 Jak utworzyć stronę archiwum dla niestandardowych wpisów w WordPress

🚀 Jak utworzyć stronę archiwum dla niestandardowych wpisów w WordPress

Kiedy witryna wykracza poza ramy „blog plus kilka stron", standardowe wpisy i kategorie przestają wystarczać. Portfolio, zespół, referencje, case studies, oferty pracy, wszystko to chce żyć we własnej strukturze, a nie tłoczyć się w ogólnym strumieniu postów, podpierane kulami w postaci kategorii.

WordPress rozwiązuje to zadanie za pomocą niestandardowych typów wpisów. Jednak samo utworzenie CPT nie wystarczy, potrzebna jest jeszcze strona, na której wszystkie wpisy tego typu są zebrane razem: strona archiwum. Bez niej odwiedzający po prostu nie zobaczy listy Pana/Pani prac lub specjalistów w jednym bloku.

Wtyczki-gridy, takie jak Essential Grid, radzą sobie z warstwą wizualną, ale dodają zbędny CSS i JS. Na małych projektach jest to niezauważalne, natomiast na stronie z kilkudziesięcioma tysiącami odwiedzających każdy kilobajt ma znaczenie. Wbudowany mechanizm archiwów WordPress daje tę samą funkcjonalność bez obciążania frontendu i konfiguruje się go w 10 minut.

💡 Szybki przegląd:

  • Tworzymy niestandardowy typ wpisów przez CPT UI i od razu włączamy obsługę archiwum w ustawieniach
  • W razie potrzeby piszemy niestandardowy szablon dla precyzyjnej kontroli układu
  • Konfigurujemy metadane SEO przez Yoast SEO: title, description i og:image dla strony archiwum
  • W razie potrzeby wyłączamy sidebar i dodajemy znaczniki Open Graph

1. Tworzenie niestandardowego typu wpisów

Najprostszym i najbardziej niezawodnym sposobem na zarejestrowanie CPT bez ani jednej linii kodu jest wtyczka Custom Post Type UI. Jest zainstalowana na ponad milionie stron i wspierana od 2010 roku, a jej interfejs jest intuicyjny: pola formularza odpowiadają jeden do jednego argumentom funkcji register_post_type().

Strona wtyczki Custom Post Type UI w repozytorium WordPress

Po zainstalowaniu wtyczki proszę przejść do CPT UI → Add/Edit Post Types. Proszę wypełnić minimum:

  • Post Type Slug, łacińskimi literami, bez spacji (na przykład portfolio)
  • Plural Label, „Portfolio"
  • Singular Label, „Praca"

Pozostałe ustawienia można pozostawić domyślne, wartości domyślne pokrywają zdecydowaną większość typowych scenariuszy. Proszę kliknąć Add Post Type, a nowy typ pojawi się w panelu administracyjnym jako osobna pozycja menu.

2. Konfiguracja strony archiwum

Aby wpisy nowego typu były gromadzone na osobnej stronie, należy jawnie włączyć obsługę archiwów. Domyślnie jest ona wyłączona.

Proszę przejść do CPT UI → Edit Post Types, wybrać utworzony typ z listy:

Strona edycji niestandardowego typu wpisów w CPT UI

Proszę przewinąć do sekcji Settings i wypełnić dwa kluczowe pola:

Pola ustawień Has Archive i Custom Rewrite Slug w CPT UI
  • Has Archive, proszę ustawić True. To jest właśnie przełącznik strony archiwum.
  • Custom Rewrite Slug, slug, pod którym archiwum będzie dostępne. Zazwyczaj pokrywa się z post type slug (na przykład portfolio).

Proszę zapisać zmiany i przejść pod adres http://ВАШ_САЙТ/portfolio. Zobaczą Państwo listę wszystkich wpisów tego typu, sformatowaną standardowym szablonem archive.php aktywnego motywu:

Przykład strony archiwum niestandardowego typu wpisów portfolio

Podstawowa strona jest gotowa. Jeśli standardowy wygląd jest wystarczający, można na tym poprzestać. Jednak w większości przypadków wygląd zewnętrzny chce się dopracować.

3. Niestandardowy szablon archive-{posttype}.php

WordPress używa jasnej hierarchii szablonów. Kiedy odwiedzający wchodzi na stronę archiwum CPT, rdzeń szuka plików w kolejności:

  • archive-{posttype}.php
  • archive.php
  • index.php

Oznacza to, że wystarczy utworzyć plik o nazwie archive-portfolio.php (gdzie portfolio to Pana/Pani post type slug), a WordPress sam go przechwyci.

Kolejność działań:

Proszę skopiować zawartość archive.php swojego motywu do nowego pliku archive-portfolio.php. Następnie proszę zmieniać układ pod zadanie: ukryć datę, jeśli nie jest potrzebna w portfolio; wyświetlić miniaturę w innym rozmiarze; zastąpić standardowy the_excerpt() przez the_content().

1<?php
2/* Template for Portfolio archive — overrides archive.php */
3
4if ( have_posts() ) {
5 while ( have_posts() ) {
6 the_post();
7 // Your custom markup here
8 the_post_thumbnail( 'medium' );
9 the_title( '<h3>', '</h3>' );
10 the_excerpt();
11 }
12}

Jeśli pracują Państwo z motywem FSE (Block Theme), szablon archiwum tworzy się w edytorze strony: Appearance → Editor → Templates → Add New Template → Archive: Portfolio. Bez PHP, wyłącznie blokami, ale logika jest ta sama: własny układ dla konkretnego CPT.

4. Optymalizacja SEO strony archiwum

Strona archiwum to nie tylko techniczny adres URL. Wyszukiwarki ją indeksują i może ona całkiem skutecznie przyciągać ruch na zapytania komercyjne, takie jak „portfolio agencji interaktywnej" lub „zespół agencji".

Jeśli mają Państwo zainstalowany Yoast SEO, metadane dla archiwów CPT konfiguruje się w jednym miejscu:

Ustawienia typów treści w Yoast SEO dla niestandardowych wpisów

Proszę otworzyć Yoast SEO → Settings → Content Types, znaleźć swój Custom Post Type i rozwinąć sekcję. Proszę ustawić szablony dla title i meta description:

Pola szablonu title i description dla strony archiwum w Yoast SEO

Zalecane szablony:

  • Title: %%pt_plural%% %%page%%, %%sitename%%
  • Meta description: %%pt_plural%%, примеры работ, кейсы и проекты. %%sitename%%

Zmienne %%pt_plural%% i %%pt_single%% Yoast podstawia automatycznie z ustawień CPT. Proszę nie zapomnieć wyłączyć noindex dla strony archiwum, jeśli jest on domyślnie włączony, pole wyboru Show in search results musi być aktywne.

5. Znaczniki Open Graph i sidebar

Aby podczas udostępniania linku do strony archiwum w mediach społecznościowych pobierał się obrazek, proszę dodać og:image przez hook wp_head. Kod wstawia się do functions.php aktywnego motywu lub przez wtyczkę Code Snippets:

1add_action( 'wp_head', 'cpt_archive_og_image' );
2function cpt_archive_og_image() {
3 if ( is_post_type_archive( 'portfolio' ) ) {
4 echo '<meta property="og:image" content="' .
5 get_template_directory_uri() . '/images/portfolio-og.jpg' . '" />';
6 }
7}

Warunek is_post_type_archive() uruchamia się tylko na stronie archiwum wskazanego CPT, więc na inne strony znacznik nie wpłynie. Obrazek proszę umieścić w folderze motywu lub przesłać przez bibliotekę mediów i podać bezpośredni URL.

Ostatni szlif, sidebar. Na stronach archiwów często nie jest potrzebny, szczególnie w przypadku portfolio lub zespołu, gdzie ważna jest szerokość kart. Większość nowoczesnych motywów pozwala wyłączyć sidebar w ustawieniach strony:

Ustawienia wyłączenia paska bocznego w edytorze wizualnym motywu

W motywach blokowych proszę przełączyć szablon na Full Width w ustawieniach strony archiwum. W klasycznych proszę poszukać Page Attributes → Template → Full Width w customizerze lub metaboksie edycji.

📺 Wideo: cały proces w 8 minut

Krótki pokaz po angielsku, tworzenie CPT, włączanie archiwum i niestandardowy szablon od pierwszego kliknięcia do gotowej strony:

⁉️🤔 Często zadawane pytania

Dlaczego strona archiwum zwraca błąd 404 po utworzeniu CPT?

Najprawdopodobniej nie włączyli Państwo parametru Has Archive. Proszę przejść do CPT UI → Edit Post Types, znaleźć swój typ, ustawić Has Archive na True i podać Custom Rewrite Slug. Po zapisaniu należy koniecznie wejść w Settings → Permalinks i kliknąć „Save Changes", to zresetuje cache reguł przepisywania.

Czy można obejść się bez wtyczki CPT UI?

Tak, niestandardowe typy wpisów rejestruje się w functions.php za pomocą funkcji register_post_type(). To kod na 15-20 linii, dla developera to kwestia kilku minut. Wtyczka po prostu daje interfejs wizualny i chroni przed błędami w argumentach.

Jak wyświetlić wpisy CPT na stronie głównej?

Proszę dodać 'has_archive' => true do argumentów register_post_type(), a aby wpisy trafiały do ogólnego strumienia, proszę ustawić 'public' => true i 'exclude_from_search' => false. Do punktowego wyświetlania proszę użyć WP_Query z argumentem 'post_type' => 'portfolio'.

Czym archive-{posttype}.php różni się od taxonomy-{taxonomy}.php?

Pierwszy odpowiada za stronę ze WSZYSTKIMI wpisami CPT, drugi, za filtrowanie według konkretnego terminu taksonomii (na przykład „Typ projektu: landing page"). Oba działają zgodnie z hierarchią szablonów, ale uruchamiają się na różnych adresach URL.

Czy tworzenie niestandardowego szablonu jest obowiązkowe?

Nie. Jeśli odpowiada Państwu standardowy archive.php, proszę po prostu włączyć Has Archive i korzystać. Niestandardowy szablon jest potrzebny, gdy wymagany jest unikalny układ: inne rozmiary miniatur, brak dat, grid zamiast listy.

Co zrobić, jeśli standardowy szablon nie odpowiada?

Strona archiwum dla niestandardowych wpisów to rzecz, którą konfiguruje się raz i zapomina. CPT UI plus kilka linii w functions.php całkowicie zamykają temat: żadnych kombajnów-wtyczek, żadnego zbędnego kodu na frontendzie.

Jeśli po przeczytaniu pozostały pytania dotyczące konkretnego motywu lub kombinacji wtyczek, proszę napisać w komentarzach pod postem. Przeanalizujemy Pana/Pani przypadek indywidualnie.