WordPress 自定義帖子類型——更進一步

在我們關於 WordPress 自定義帖子類型的系列中，到目前為止，我們已經研究了使用插件創建自定義帖子類型以及如何通過編寫自己的自定義代碼片段來手動創建自定義帖子類型。 我們還研究瞭如何將一些基本配置應用於您的帖子類型，以便您可以從 WordPress 管理員更輕鬆地處理它們。 如果您還沒有查看這些文章，那麼請務必查看！

在本文中，我們將通過構建我們之前創建的自定義帖子類型來進一步擴展它們在我們網站上的功能和可用性。 如果您想繼續，那麼您需要創建我們在我們的文章“手動創建 WordPress 自定義帖子類型”中構建的自定義帖子類型，因此請確保您已先完成此操作，以便以下信息有意義。

讓我們開始吧！

在任何地方顯示自定義帖子類型

正如您將看到的，我們之前構建了一個自定義帖子類型來在我們的網站上顯示食譜。 這是自定義帖子類型是擴展我們網站功能的一種非常有用的方式的完美示例。

在我們的示例中，我們可以通過將食譜帖子添加到我們的主網站菜單來顯示它們。 我們還設置了一個存檔視圖，列出了我們所有與食譜相關的帖子。 這些是顯示我們新的自定義帖子類型的絕佳選擇，但是當我們想在我們網站的其他地方顯示此內容時會發生什麼？

使用 WP_Query 函數顯示自定義帖子類型

為了在我們網站上選擇的位置顯示我們的新食譜帖子，我們將使用WP_Query功能。 在其參數中，我們可以找到將在此實例中使用的post_types ，因為它定義了我們要查詢的帖子類型。 除了它，我們將使用publish和orderby參數，因為我們想要顯示具有已發布狀態的食譜帖子，並按降序排列它們以顯示最新的第一個。

假設我們想在版權信息上方的網站頁腳中顯示我們的食譜帖子列表。 為此，我們將使用一段代碼，在我們的例子中，它需要插入到<footer>元素開始下方的singular.php文件中。

 <?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' ); } ?>

在此示例中，我們使用當前默認的 WordPress Twenty Twenty 主題。 如果您使用二十二十以外的主題，您應該編輯包含您的主題的頁腳內容的文件。

添加代碼後，我們可以打開我們的網站，我們應該會在頁腳中看到我們的食譜帖子。

這些帖子在您的頁腳中的佈局和外觀可以使用 CSS 設置為您希望的樣式。 添加任何 CSS 的最佳位置是位於主題主文件夾下的style.css文件中。 我們有一些您可能想要在下面使用的 CSS。

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

保存此 CSS 並刷新頁面後，您應該會在頁腳中看到食譜帖子的佈局，如下所示：

重置循環的重要性

您可能已經註意到，在代碼中定義了必要的參數之後，一個 post 循環以wp_reset_postdata()函數開始和結束。 此功能的使用非常重要，原因如下。

當 WordPress 創建頁面佈局時，它使用全局$post變量，如果頁面中只有一個循環，該變量可以正常工作。 現在我們添加了自定義循環，我們基本上覆蓋了全局$post變量，除非我們告訴 WordPress 循環重置，否則它將使用我們在循環中定義的自定義帖子類型從那裡恢復。

讓我們通過在上面的代碼下呼應帖子標題來看看這在實踐中是如何工作的，如下所示：

 <?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(); ?>

現在，如果我們刷新我們網站前端的頁面，我們會在我們最近的食譜下看到“帖子 1”標題。

這是有道理的，因為我們使用wp_reset_postdata(); 功能。

現在，註釋掉wp_reset_postdata(); 從你的代碼。 你會注意到the_title(); 代碼將回顯“Recipe 1”標題而不是“Post 1”。

自定義帖子類型 - 進一步管理

為了進一步自定義我們的自定義帖子行為和外觀，我們將查看一些選項，這些選項可以添加為我們在上一篇文章中用於註冊我們的“食譜”帖子類型的代碼的擴展。

 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' );

我們將添加更多參數以便：

1. 更改食譜自定義帖子類型的 URL slug
2. 更改自定義帖子類型管理菜單的位置
3. 更改菜單圖標

更改自定義帖子類型 URL Slug

如果我們創建一個食譜帖子並將其命名為“食譜 1”，那麼“食譜 1”帖子的默認 URL 將類似於https://mycompanyname.com/recipes/recipe-1/ ，前提是永久鏈接設置為“在我們的固定鏈接設置中發布名稱。

如果要更改“食譜自定義帖子類型”在 URL 中的顯示方式，可以使用rewrite參數及其slug鍵。

正如我們從 URL 中註意到的，如果跳過此參數，默認值將是自定義帖子類型標籤“食譜”。 例如，如果我們想將其更改為my-home-recipes ，我們必須通過編輯我們的代碼片段來覆蓋它，如下所示：

 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' );

現在，如果您保存永久鏈接（刷新永久鏈接緩存）並再次查看您的食譜，您的 URL 應該是https://mycompanyname.com/my-home-recipes/recipe-1/

請注意，如果您更改 slug，您還必須在主菜單頁面中將存檔 URL 從/recipes/更改為/my-home-recipes/ 。

更改自定義帖子類型菜單定位

如果您希望將食譜菜單移動到不同的位置，您可以使用menu_position參數，如下所示：

 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' );

您可以用於此參數的值是：

0：在最頂端
5：以下帖子
10 : 媒體下方
15：以下鏈接
20：以下頁面
25：以下評論
60 : 低於菜單中的第一個間隙
65：在插件下面
70：低於用戶
75：在工具下方
80 : 低於設置
100 : 低於菜單中的第二個間隙

下面的屏幕截圖顯示了將值 5 添加到menu_position參數時菜單的位置。

更改自定義帖子類型菜單圖標

目前，食譜菜單使用默認的帖子圖標。 如果它有自己獨特的圖標，那就太好了。 為此，我們可以使用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' );

要顯示您自己的圖標，您可以插入菜單圖標位置的完整 URL（如上面的代碼所示）或通過添加圖標的類名來使用 WordPress Dashicons 庫。 您可以在此處查看帶有相應類的圖標。

例如，如果您選擇食物圖標，您可以像這樣將它添加到您的代碼中'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' );

最終結果應該是您選擇的圖標出現在您的自定義帖子菜單中……幫助您的自定義帖子感覺，嗯，真正的自定義！

延伸閱讀

使用插件創建 WordPress 自定義帖子類型
手動創建 WordPress 自定義帖子類型
使用您自己的插件創建 WordPress 自定義帖子類型！

結論

希望這些技巧能真正幫助您建立自己的自定義帖子類型，並讓您進一步改進 WordPress 網站的功能和使用。 與所有編碼一樣，最好花一些時間試一試，看看您的新代碼如何影響您的網站。 然後，在這些基礎上構建將使您能夠處理需要大量定制的更複雜的項目。