Jeśli używasz WordPressa jako CMS, ta wiadomość jest będzie dla Ciebie jak wiatr w żagle: własne typy wpisów (ang. custom post types) pomogą Ci w bardziej elastyczny sposób dostosować witrynę do potrzeb Twoich lub Twojego klienta.
Każdy, kto wykorzystywał WordPressa jako systemu o szerszej funkcjonalności niż tradycyjny blog, prędzej czy później doszedł do wniosku, że prosty mechanizm wpisów i kategorii to za mało. Począwszy od WordPressa w wersji 3.0 można tworzyć własne typy wpisów.Co to oznacza? Zobaczmy jak to działa w praktyce. Tutorial ten będzie miał formę studium przypadku, czyli analizy problemu wykonanej na rzeczywistym przykładzie.
Przykład zastosowania
Opis problemu
Być może już wcześniej zauważyłaś/-eś, że na tym blogu w pasku bocznym po lewej stronie mamy sekcję pt. „Czy wiesz, że…” wyświetlającą krótką notatkę zachęcającą do przeczytania jakiegoś artykułu z tego bloga. Zwróćmy uwagę, że treść notatki wyświetla się losowo. Każda z takich notatek jest w jakiś sposób w WordPressie zapamiętana. Jak? Moglibyśmy wprowadzić ją jako zwykły wpis i przyporządkować do jakiejś kategorii, jednak wówczas teksty notatek byłyby automatycznie wyświetlane:
na stronie głównej
w kanałach nowości RSS
w archiwum
w wynikach wyszukiwania
jako wpisy danego autora
itd.
a tego wszystkiego chcemy uniknąć, ponieważ notatki te nie stanowią istoty naszego bloga, są czymś w rodzaju „wzmianki na marginesie”. Ręczne pomijanie ich z wyświetlania z uwzględnieniem wszystkich tych przypadków, to zbyt dużo pracy. Poza tym nie chcemy przechowywać ich z „tradycyjnymi” wpisami, żeby uniknąć misz-maszu wśród naszych artykułów.
Własne typy wpisów jako rozwiązanie
Własne typy wpisów – jak są przechowywane (powiększ)
Co innego gdybyśmy mogli pamiętać własne wpisy gdzieś jakby „na boku”. Na pomoc przychodzą własne typy danych (custom post types). Zobaczmy na obrazku obok, w jaki sposób pamiętam teksty tych notatek w WordPressie tego bloga:
Każda notatka składa się z:
tytułu (nie jest wyświetlany na ustronie, ale nam przyda się do identyfikacji notatki)
opisu, czyli treści notatki (description)
wpisu do którego się odwołuje (reference post)
daty utworzenia notatki (note date)
Własne typy wpisów – edycja (powiększ)
Edycja notatki wygląda niemal identycznie jak edycja tradycyjnego wpisu w WordPressie. Zobacz obrazek obok. Typ nazwałam note (angielski odpowiednik słowa „notatka”), ale równie dobrze moglibyśmy go nazwać „ciekawostka” czy zupełnie inaczej.
Jak założyć i wyświetlić w WordPressie wpisy oparte o własny typ wpisu
Realizacja przedstawionej wyżej funkcjonalności sprowadza się do wykonania 3 kroków:
Krok 1. Założenie własnego typu danych o wybranej nazwie
Wszystkie zmiany wykonywane w tym kroku należy wpisywać do pliku functions.php.
Krok 1.1. Rejestracja własnego typu wpisu
Własny typ wpisu tworzymy i rejestrujemy za pomocą funkcji register_post_type. W naszym przykładzie typ ten będzie nosił nazwę note (notatka).
add_action('init', 'note_register');
function note_register() {
$args = array(
'label' => __('My notes'),
'singular_label' => __('My note'),
'public' => true,
'show_ui' => true,
'capability_type' => 'post',
'hierarchical' => false,
'rewrite' => true,
'supports' => array('title')
);
register_post_type( 'note' , $args );
}
Rezultat kroku 1.1 (powiększ)
Na rysunku obok widać efekt wykonania tego kroku: w menu bocznym w naszym panelu administracyjnym powinna pojawić się nowa sekcja „My notes” z dwoma pozycjami do wyboru „My notes” oraz „Dodaj nowy”.
Rezultat kroku 1.1 – dodanie nowego wpisu (notatki)
Po kliknięciu w „Dodaj nowy” zobaczymy ekran jak pokazano obok. Widzimy, że ekran przypomina nieco tradycyjny ekran edycji wpisu: ma tytuł (title), lecz jednak nie ma posiada ekranu edycji treści (editor). Ekranu edycji nie włączamy celowo, gdyż do wprowadzania pozostałych wartości wykorzystamy własne pola (ang. custom post fields), o czym później. Włączenie obsługi tytułu umożliwił nam parametr: 'supports’ => array(’title’).
Wykaz innych parametrów akceptowanych przez funkcję register_post_type znajdziemy w Kodeksie WordPressa.
Krok 1.2. Dodanie własnego ekranu do edycji treści wpisu
Oprócz tytułu wpisu (naszej notatki) chcielibyśmy mieć możliwość przechowywania, wyświetlania i edycji następujących pól:
opisu, czyli treści notatki (description)
tematu wpisu do którego się odwołuje nasza notatka (reference post)
daty utworzenia notatki (note date)
Za pomocą funkcji add_meta_box utworzymy własną sekcję edycji dla naszych wpisów (notatek):
add_action("admin_init", "add_note_info");
function add_note_info() {
add_meta_box("noteInfo-meta", __( 'Note information') , "meta_options", "note", "normal", "low");
}
Opis najważniejszych parametrów:
noteInfo-meta – HTML-owy identyfikator sekcji
Note information – tytuł sekcji wyświetlany na ekranie (widoczny na obrazku niżej)
meta_options – funkcja, która wyświetli na ekranie, w postaci HTML-a daną sekcję (kod funkcji niżej)
note – typ ekranu na którym będzie wyświetlona sekcja edycji, tutaj będzie to nazwa utworzonego przez nas typu wpisu
Znaczenie pozostałych parametrów funkcji add_meta_box możemy doczytać w Kodeksie
Poniżej kod funkcji meta_options, który pozwala na wyświetlenie pól edycji. U nas będą to pola note_content (etykieta „Enter note content”) oraz post_ref (etykieta Enter reference post title).
function meta_options() {
global $post;
$custom = get_post_custom($post->ID);
$note_content = $custom["note_content"][0];?>
<label style="display: block; margin-bottom: 5px"> <?php _e( 'Enter note content:') ?> </label><textarea cols="20" rows="5" name="note_content" style="width:99%"><?php echo esc_attr( $note_content ); ?> </textarea>'
<?php $ref_post = $custom["ref_post"][0]; ?>
<label><?php _e( 'Enter reference post title:') ?></label><input type="text" name="ref_post" value="<?php echo esc_attr( $ref_post ); ?>" size="80" style="width:97% />
<?php }
Rezultat kroku 1.2 (powiększ)
Na obrazku obok pokazano efekt uzyskany po wykonaniu tego kroku. Wyświetlamy własny meta-box, inaczej sekcję edycji (z etykietą „Note information”) czyli obszar, w którym pokazujemy własne pola skojarzone z danym wpisem:
note_content – pole typu textarea (textarea cols=”20″ rows=”5″ name=”note_content”)
ref_post – pole tekstowe (input type=”text” name=”ref_post”)
Za pomocą funkcji get_post_custom wyciągamy z bazy zawartość wszystkich własnych pól skojarzonych z danym wpisem. Jest to (czyli sięgnięcie poprzez tę funkcję do bazy) niezbędne, kiedy otwieramy istniejący już wpis do ponownej edycji.
Krok 1.3. Zapisanie w bazie wartości wprowadzonych przez użytkownika
Gdybyśmy w tym momencie kliknęli w „Dodaj nowy” i wprowadzili jakieś wartości dla własnych pól note_content i/lub ref_post, okaże się, że nasze dane wylecą w przysłowiowy kosmos. Aby trafiły do bazy potrzebny będzie jeszcze mechanizm, za pomocą którego WordPress odczyta z ekranu wartości wprowadzone/zmodyfikowane przez użytkownika i zapamięta je w bazie.
W tym celu napiszemy funkcję save_note_data, która zostanie wywołana przez WordPress w momencie dodania/modyfikacji wpisu. Aby tak się stało wbijamy się z jej wywołaniem do akcji save_post. W celu podpięcia się w core’owy cykl przetwarzania WordPressa wykorzystamy funkcję add_action, gdzie jako pierwszy parametr podajemy właśnie save_post:
add_action('save_post', 'save_note_data');
function save_note_data() {
global $post;
update_post_meta($post->ID, "note_content", $_POST["note_content"]);
update_post_meta($post->ID, "ref_post", $_POST["ref_post"]);
}
Za pomocą funkcji update_post_meta zapisujemy lub aktualizujemy w bazie wartości dla własnych pól (custom post fields): note_content oraz ref_post przypisanych do danego wpisu (właśnie aktualizowanej notatki).
Widok w układzie kolumnowym (powiększ)
Krok 1.4. Wyświetlenie pól wpisu w kolumnach
Gdy teraz będziemy dodawać nowe wpisy-notatki, a następnie wejdziemy w ponowną edycję dowolnego z nich, wartości w polach note_content oraz ref_post będą pamiętane jak należy. Jednak gdy w panelu admin. spróbujemy wyświetlić wykaz wszystkich naszych notatek (czyli klikniemy w „My notes”) czeka nas małe rozczarowanie. Zobaczymy wprawdzie tytuł i datę każdej z nich, ale nic poza tym – patrz rysunek obok.
W tym kroku dodamy dwie kolumny do tego widoku. Naszym celem jest pokazanie w układzie kolumnowym również pól note_content oraz ref_post.
Krok 1.4.1. Wyświetlenie nagłówków kolumn
W celu wyświetlenia nagłówków kolumn z własnymi etykietami do pliku function.php wpisujemy poniższy kod:
add_filter("manage_edit-note_columns", "note_edit_columns");
function note_edit_columns($columns) {
$columns = array(
"cb" => "<input type="checkbox" />",
"title" => __('Note title'),
"note_content" => __('Description'),
"ref_post" => __('Reference post'),
'date' => __('Note date'),
);
return $columns;
}
Uwaga! Niezmiernie ważna jest nazwa pierwszego parametru funkcji add_filter: manage_edit-note_columns. Po przedrostku manage_edit- musi się znaleźć nazwa typu wpisu, zgodna z tą, którą podaliśmy w kroku 1.1 (w funkcji register_post_type), u nas będzie to note, zakończona postfiksem _columns.
Rezultat kroku 1.4.1 (powiększ)
Na obrazku obok przedstawiono efekt wykonania tego kroku. Pojawiły się tytuły nowych kolumn Description title oraz Reference post a dotychczasowe (tytuł i data wpisu) zmieniły swoje etykiety.
W powyższym fragmencie kodu jest jeszcze jeden tejamniczy zapis:
"cb" => "<input type="check.ox" />"
To przypisanie musimy pozostawić, żeby nie zniknęła nam pierwsza z domyślnych kolumn, jaką jest okienko typu checkbox umożliwiające wykonywanie akcji zbiorowych na naszych wpisach.
Krok 1.4.2 Wyświetlenie wartości w kolumnach Zaraz, zaraz… Mamy już eleganckie nagłówki wszystkich kolumn, ale dlaczego wartości widoczne są tylko w dwóch z nich? Musimy jeszcze powiedzieć WordPressowi, do jakich pól w bazie ma sięgnąć, żeby uzupełnić zawartość kolumn wyświetlających dane z naszych własnych pól (custom post fields): note_content oraz ref_post.
add_action("manage_posts_custom_column", "note_custom_columns");
function note_custom_columns($column) {
global $post;
switch ($column) {
case "note_content":
$custom = get_post_custom();
echo $custom["note_content"][0];
break;
case "ref_post":
$custom = get_post_custom();
echo $custom["ref_post"][0];
break;
}
}
Z naszą funkcją note_custom_columns wpinamy się w przetwarzanie WordPressa w punkcie manage posts custom column” target=blank”
Dla kolumny note_content wyświetlamy wartość z pola note_content, dla kolumny ref_post postępujemy analogicznie. Zauważmy, że do odczytu wartości z własnych pól (ang. custom fields) posłużyliśmy ponownie (jak w kroku 1.2) funkcją get_post_custom.
Rezultat kroku 1.4.2 (powiększ)
Odświeżamy ekran z naszymi notatkami i powinniśmy zobaczyć wykaz podobny jak na obrazku obok.
Od tego momentu możemy dodawać, modyfikować i usuwać wpisy własnego typu (notatka).
Widok po wprowadzeniu wpisów (powiększ)
Krok 2. Dodanie kilku wpisów utworzonego typu
Mamy już pełny interfejs do zarządzania naszymi notatkami. Teraz dodajmy kilka wpisów wykorzystując opcję My notes->Dodaj nowy. Po wykonaniu tego kroku powinniśmy uzyskać efekt pokazany na rysunku obok.
Krok 3. Wyświetlenie losowo wybranego wpisu na pasku bocznym
Jak dotąd nasze notatki siedzą tylko w bazie i są widoczne w panelu administracyjnym. Czas pokazać je światu, czyli wyświetlić na stronie. Jako że są to w dalszym ciągu wpisy WordPressowe do ich wyświetlania należy zbudować query. Naszym celem jest wyświetlenie tylko jednego, losowego wpisu, który ma sie pojawić na pasku bocznym, w sekcji widgetowej. Owieramy plik sidebar.php i dopisujemy:
<div class="side-widget">
<h2><?php _e('Did you know...') ?></h2>
<?php global $post;
$r = new WP_Query(array('posts_per_page' => 1, 'no_found_rows' => true,
'post_type' => 'note', 'orderby' => 'rand'));
if ($r->have_posts()) :
while ($r->have_posts()) : $r->the_post();
$custom = get_post_custom($post->ID);
echo '<p>' . $custom["note_content"][0] . '</p>';
endwhile;
wp_reset_postdata();
endif;?>
</div>
Komentarz do najistotniejszych fragmentów kodu:
’posts_per_page’ => 1 – wybieramy tylko jeden wpis
’post_type’ => 'note’ – wybieramy tylko spośród wpisów typu notatka (note)
’orderby’ => 'rand’ – wybieramy wpis losowy
’no_found_rows’ => true – wyłączamy automatyczne zliczanie wszystkich wpisów w wyniku w celu przyspieszenia zapytania
Do wyświetlenia głównej treści notatki (note_content) wykorzystujemy funkcję get_post_custom i odwołujemy się do pola note_content, podobnie jak to robiliśmy już wcześniej.
Informacje dodatkowe
Pokazane wyżej kroki w pełni pozwalają na realizację naszego zadania – po ich wykonaniu możemy już cieszyć się efektem. Będzie podobny do tego jak na tym blogu w lewej, bocznej kolumnie.
Ale przydałby się coś jeszcze: możliwość wykonania podglądu lub wyświetlenia strony z treścią pojedynczego wpisu.
Robimy szablon podglądu własnego wpisu (powiększ)
Na rysunku obok widzimy, że po najechaniu myszą na tytuł wpisu oraz opcję Zobacz w dolnym pasku przeglądarki (Firefox) widzimy URL strony, na której wpis będzie widoczny. Naszym celem jest pokazanie na niej tytułu i treści wpisu.
W katalogu z naszym motywem zakładamy plik o nazwie single-note.php. Nazwa ta nie jest przypadkowa. Pierwszy jej człon (single) jest odpowiednikiem nazwy znanego nam szablonu single.php, służącego do wyświetlania pojedynczego wpisu, a drugi (note) odpowiada typowi wpisu jaki nadaliśmy w kroku 1.1. Oba człony muszą być połączone myślnikiem.
Do pliku single-note.php wklejamy kod wyróżniony poniżej. Kontekst (to co jest przed i za wyróżnieniem) będzie się oczywiście różnić, w zależności od budowy struktury danego motywu.
<?php get_header();
if ( have_posts() ) while ( have_posts() ) : the_post();
$custom = get_post_custom($post->ID); ?>
<h2><?php echo $post->post_title ?></h2>
<p><?php echo $custom["note_content"][0] ?></p>
endwhile;
get_footer(); ?>
Co się stanie jeśli nie utworzymy dedykowanego pliku single-note.php? Zgodnie z hierarchią szablonów, WordPress sięgnie do pliku index.php. Nasz wpis-notatka jest wpisem jak każdym inny, więc wykorzystanie standardowej pętli WordPressa pokaże jakiś wynik, ale w naszym przypadku tylko częściowo. Na ekranie poglądu wpisu zobaczymy jedynie sam tytuł wpisu-notatki. Jej treść przechowujemy we własnym polu (note_content), a wyświetlania tego pola nie znajdziemy ma w ogólnym pliku index.php. Dlatego najlepiej napisać własny szablon dla wyświetlania pojedynczego wpisu.
To już wszystko. Pamiętaj, że ten tutorial jest utworzony z myślą o Tobie. Jeśli któryś z przedstawionych tu punktów jest dla Ciebie niejasny, śmiało zapytaj o to w komentarzach. Możesz również ekspresowo sprawdzić, jak działa mechanizm własnych typów wpisów, korzystając z kompletu prezentowanych tu kodów – do pobrania niżej.
Pliki do pobrania
Niżej znajdują paczka plików do pobrania, zawierająca wszystkie kody źródłowe wykorzystane w tym tutorialu.
Comments