Niestandardowe typy postów WordPress – idź dalej

W naszej serii na temat typów niestandardowych postów WordPress do tej pory przyjrzeliśmy się tworzeniu niestandardowego typu posta za pomocą wtyczki i sposobowi ręcznego tworzenia niestandardowego typu postu, pisząc własne niestandardowe fragmenty kodu. Przyjrzeliśmy się również, w jaki sposób można zastosować podstawową konfigurację do typów postów, aby łatwiej obsługiwać je z poziomu administratora WordPress. Jeśli nie zapoznałeś się z tymi artykułami, koniecznie spójrz!

W tym artykule zamierzamy pójść o krok dalej, opierając się na naszych wcześniej utworzonych niestandardowych typach postów, aby rozszerzyć ich funkcjonalność i użyteczność na naszej stronie internetowej. Jeśli chcesz kontynuować, musisz utworzyć niestandardowe typy postów, które zbudowaliśmy w naszym artykule „Ręczne tworzenie niestandardowych typów postów WordPress”, więc upewnij się, że zrobiłeś to najpierw, aby poniższe informacje miały sens.

Zacznijmy!

Wyświetlanie niestandardowych typów postów w dowolnym miejscu

Jak widać, zbudowaliśmy wcześniej niestandardowy typ postu, aby wyświetlać przepisy na naszej stronie internetowej. To doskonały przykład sytuacji, w której niestandardowe typy postów są niezwykle przydatnym sposobem na rozszerzenie funkcjonalności naszej strony internetowej.

W naszym przykładzie byliśmy w stanie wyświetlić nasze posty z przepisami, dodając je do menu naszej strony głównej. Ustawiliśmy również widok archiwum, który zawierał wszystkie nasze posty dotyczące przepisów. Są to świetne opcje wyświetlania naszych nowych niestandardowych typów postów, ale co się stanie, gdy chcemy wyświetlić tę zawartość w innym miejscu naszej witryny?

Używanie funkcji WP_Query do wyświetlania niestandardowych typów postów

Aby wyświetlić nasze nowe posty z przepisami w wybranych przez nas lokalizacjach na naszej stronie internetowej, użyjemy funkcji WP_Query . W jego argumentach możemy znaleźć post_types , który zostanie użyty w tym przypadku, ponieważ określa, które typy postów chcemy zapytać. Wraz z nim orderby parametrów publish i porządkowania, ponieważ chcemy pokazać posty z przepisami, które mają status opublikowany i uporządkować je malejąco według daty, aby wyświetlić najnowsze jako pierwsze.

Wyobraźmy sobie, że chcemy wyświetlić listę naszych postów z przepisami w stopce naszej witryny powyżej informacji o prawach autorskich. W tym celu użyjemy fragmentu kodu, który w naszym przypadku należy umieścić w pliku singular.php poniżej początku elementu <footer> .

 <?php $args = array( 'post_type' => 'recipes', 'post_status' => 'publish', 'orderby' => array( 'date' => 'DESC' ), ); $recipes = new WP_Query( $args ); if( $recipes->have_posts() ) { ?> <div class="recent-recipes"> <?php while( $recipes->have_posts() ) : $recipes->the_post(); ?> <div class="recipe"> <a href=""><?php get_post_permalink(); ?><h3><?php the_title(); ?></h3> <?php the_post_thumbnail( 'thumbnail' ) ; ?> </a> </div> <?php endwhile; wp_reset_postdata(); ?> </div> <?php } else { esc_html_e( 'No recipes found' ); } ?>

W tym przykładzie używamy bieżącego domyślnego motywu WordPress Twenty Twenty. Jeśli używasz motywu innego niż Twenty Twenty, edytuj plik zawierający zawartość stopki motywu.

Po dodaniu kodu możemy otworzyć naszą stronę internetową i powinniśmy zobaczyć nasze posty z przepisami wymienione w naszej stopce.

Układ i wygląd tych postów w stopce można zmienić tak, aby wyglądały tak, jak chcesz, używając CSS. Najlepszym miejscem do dodania dowolnego kodu CSS jest plik style.css , który znajduje się w głównym folderze motywu. Poniżej mamy kilka możliwych CSS, których możesz chcieć użyć.

 .recent-recipes h3 { font-size: 18px; margin: 15px 0; } .recipe { float: left; margin: 15px; } .recent-recipes { height: 240px; margin: 0 auto; width: 1190px; }

Po zapisaniu tego kodu CSS i odświeżeniu strony w stopce powinien pojawić się układ postów z przepisami, który będzie wyglądał następująco:

Znaczenie resetowania pętli

Być może zauważyłeś, że po zdefiniowaniu niezbędnych argumentów w kodzie pętla post zaczyna się i kończy wp_reset_postdata() . Korzystanie z tej funkcji jest bardzo ważne i oto dlaczego.

Kiedy WordPress tworzy układ strony, używa globalnej zmiennej $post , która działa dobrze, jeśli na stronie jest tylko jedna pętla. Teraz, gdy dodaliśmy naszą niestandardową pętlę, w zasadzie nadpisujemy globalną zmienną $post i, o ile nie powiemy WordPressowi, że pętla się resetuje, zostanie ona wznowiona stamtąd przy użyciu niestandardowego typu posta, który zdefiniowaliśmy w naszej pętli.

Spójrzmy, jak to działa w praktyce, powtarzając tytuł posta pod powyższym kodem w ten sposób:

 <?php $args = array( 'post_type' => 'recipes', 'post_status' => 'publish', 'orderby' => array( 'date' => 'DESC' ), ); $recipes = new WP_Query( $args ); if( $recipes->have_posts() ) { ?> <div class="recent-recipes"> <?php while( $recipes->have_posts() ) : $recipes->the_post(); ?> <div class="recipe"> <a href=""><?php get_post_permalink(); ?><h3><?php the_title(); ?></h3> <?php the_post_thumbnail( 'thumbnail' ) ; ?> </a> </div> <?php endwhile; wp_reset_postdata(); ?> </div> <?php } else { esc_html_e( 'No recipes found' ); } ?> <?php the_title(); ?>

Teraz, jeśli odświeżymy naszą stronę na interfejsie naszej witryny, pod naszymi najnowszymi przepisami zobaczymy tytuł „Opublikuj 1”.

Ma to sens, ponieważ przywracamy oryginalną pętlę za pomocą funkcji wp_reset_postdata(); funkcjonować.

Teraz skomentuj wp_reset_postdata(); z Twojego kodu. Zauważysz, że the_title(); kod wyświetli tytuł „Przepis 1” zamiast „Post 1”.

Niestandardowe typy postów – dalsze zarządzanie

W celu dalszego dostosowania zachowania i wyglądu naszych niestandardowych postów przyjrzymy się niektórym opcjom, które można dodać jako rozszerzenie kodu, którego użyliśmy w poprzednim artykule, aby zarejestrować nasz typ postu „przepisy”.

 function recipes_post_type() { register_post_type( 'recipes', array( 'labels' => array( 'name' => __( 'Recipes' ), 'singular_name' => __( 'Recipe' ) ), 'public' => true, 'show_in_rest' => true, 'supports' => array('title', 'editor', 'thumbnail'), 'has_archive' => true, ) ); } add_action( 'init', 'recipes_post_type' );

Dodamy jeszcze kilka argumentów, aby:

1. Zmień adres URL przepisów Niestandardowy typ postu
2. Zmień pozycję menu administracyjnego Custom Post Type
3. Zmień ikonę menu

Zmiana adresu URL niestandardowego typu postu

Jeśli utworzymy post z przepisem i nazwiemy go „Przepis 1”, to domyślny adres URL posta „Przepis 1” będzie wyglądał następująco: https://mycompanyname.com/recipes/recipe-1/ pod warunkiem, że linki bezpośrednie są ustawione na „ Nazwa posta” w naszych ustawieniach linku bezpośredniego.

Jeśli chcesz zmienić sposób wyświetlania w adresie URL niestandardowego typu postu Recipes, możesz użyć argumentu rewrite z jego kluczem slug .

Jak zauważyliśmy na podstawie adresu URL, jeśli ten argument zostanie pominięty, wartością domyślną będzie etykieta niestandardowego typu posta „recipes”. Jeśli chcemy zmienić to na przykład na my-home-recipes , musimy to nadpisać, edytując nasz fragment kodu, aby wyglądał tak:

 function recipes_post_type() { register_post_type( 'recipes', array( 'labels' => array( 'name' => __( 'Recipes' ), 'singular_name' => __( 'Recipe' ) ), 'public' => true, 'show_in_rest' => true, 'supports' => array('title', 'editor', 'thumbnail'), 'has_archive' => true, 'rewrite' => array( 'slug' => 'my-home-recipes' ), ) ); } add_action( 'init', 'recipes_post_type' );

Teraz, jeśli zapiszesz permalinki (opróżnisz pamięć podręczną permalinków) i ponownie wyświetlisz swój przepis, Twój adres URL powinien wyglądać tak: https://mycompanyname.com/my-home-recipes/recipe-1/

Zauważ, że jeśli zmienisz slug, będziesz musiał również zmienić adres URL archiwum z /recipes/ na /my-home-recipes/ na stronie Menu Głównego.

Zmiana pozycjonowania niestandardowego menu typu post

Jeśli chcesz przenieść menu Receptury do innej pozycji, możesz użyć argumentu menu_position w ten sposób:

 function recipes_post_type() { register_post_type( 'recipes', array( 'labels' => array( 'name' => __( 'Recipes' ), 'singular_name' => __( 'Recipe' ) ), 'public' => true, 'show_in_rest' => true, 'supports' => array('title', 'editor', 'thumbnail'), 'has_archive' => true, 'rewrite' => array( 'slug' => 'my-home-recipes' ), 'menu_position' => 5, ) ); } add_action( 'init', 'recipes_post_type' );

Wartości, których możesz użyć dla tego argumentu to:

0 : na samej górze
5 : poniżej postów
10: poniżej mediów
15 : poniżej Linki
20: poniżej stron
25 : poniżej komentarze
60 : poniżej pierwszej przerwy w menu
65 : poniżej Wtyczki
70: poniżej Użytkownicy
75: poniżej Narzędzia
80 : poniżej Ustawienia
100 : poniżej drugiej przerwy w menu

Poniższy zrzut ekranu pokazuje pozycję menu, gdy wartość 5 została dodana do argumentu menu_position .

Zmiana ikony menu niestandardowego typu postu

Obecnie menu Przepisy używa domyślnej ikony postów. Byłoby miłym akcentem, miał swoją unikalną ikonę. W tym celu możemy użyć argumentu menu_icon .

 function recipes_post_type() { register_post_type( 'recipes', array( 'labels' => array( 'name' => __( 'Recipes' ), 'singular_name' => __( 'Recipe' ) ), 'public' => true, 'show_in_rest' => true, 'supports' => array('title', 'editor', 'thumbnail'), 'has_archive' => true, 'rewrite' => array( 'slug' => 'my-home-recipes' ), 'menu_position' => 5, 'menu_icon' => 'https://mycompanyname.com/wp-content/uploads/2020/10/recipes.svg', ) ); } add_action( 'init', 'recipes_post_type' );

Aby wyświetlić własną ikonę, możesz wstawić pełny adres URL lokalizacji ikony menu (jak pokazano w powyższym kodzie) lub użyć biblioteki WordPress Dashicons, dodając nazwę klasy ikony. Tutaj możesz zobaczyć ikony z odpowiednimi klasami.

Jeśli na przykład wybierzesz ikonę jedzenia, dodasz ją do swojego kodu w następujący 'menu_icon' => 'dashicons-food' .

 function recipes_post_type() { register_post_type( 'recipes', array( 'labels' => array( 'name' => __( 'Recipes' ), 'singular_name' => __( 'Recipe' ) ), 'public' => true, 'show_in_rest' => true, 'supports' => array('title', 'editor', 'thumbnail'), 'has_archive' => true, 'rewrite' => array( 'slug' => 'my-home-recipes' ), 'menu_position' => 5, 'menu_icon' => 'dashicons-food', ) ); } add_action( 'init', 'recipes_post_type' );

Efektem końcowym powinno być to, że wybrana przez Ciebie ikona pojawi się w Twoim menu Własny post… pomagając uczynić Twój post niestandardowy, no cóż, naprawdę niestandardowym!

Dalsza lektura

Twórz niestandardowe typy postów WordPress za pomocą wtyczki
Twórz niestandardowe typy postów WordPress ręcznie
Twórz niestandardowe typy postów WordPress za pomocą własnej wtyczki!

Wniosek

Mamy nadzieję, że te wskazówki naprawdę pomogą ci w dążeniu do stworzenia własnych niestandardowych typów postów, a dzięki temu pozwolą ci dalej ulepszać funkcje i korzystanie z witryny WordPress. Podobnie jak w przypadku każdego kodowania, najlepiej poświęcić trochę czasu na zabawę i zobaczyć, jak nowy kod wpłynie na Twoją witrynę. Opieranie się na tych fundamentach pozwoli Ci zająć się jeszcze bardziej złożonymi projektami, w których potrzebne jest duże dostosowanie.