人們喜歡圖片。他們喜歡看它們，喜歡點擊它們。因此，在您網站的導航中使用它們是有意義的。
您可能已經在存檔頁面中使用了特色圖像，讓用戶可以更深入地了解帖子的內容，并使您的存檔頁面看起來更好。精美的可點擊大圖片還使瀏覽頁面或發布帖子的過程更加直觀。
但在其他地方，您可以使用特色圖像來幫助導航到 WordPress 網站的某些部分。在這個由兩部分組成的教程中，我們將向您展示如何創建圖像網格，該網格鏈接到您網站中給定頁面的子頁面，或當前頁面的子頁面。
在第一部分中，我將演示如何編寫 php 來獲取頁面并輸出其標題和特色圖像、內部鏈接。在第二部分中，Ian Yates 將向您展示如何添加 css 將列表變成美觀的網格。
您需要什么
要學習本教程，您需要具備以下條件：
- WordPress 的開發安裝 – 在測試之前不要將其添加到您的實時網站。
- 具有供您添加內容或可以編輯的操作掛鉤的主題。如果它是沒有鉤子的第三方主題，請創建一個子主題并對其進行編輯。
- 代碼編輯器。
決定你的方法
要做的第一件事是決定要輸出哪些頁面。在本教程中，我將演示兩個選項：
- 當前頁面的子頁面列表，包含圖像。
- 特定頁面的子頁面列表，包含圖像。它可以顯示在您網站的任何位置，而不僅僅是父頁面。
開始使用
兩種方法的出發點是相同的。
首先在 wp-content/plugins 文件夾中創建一個插件。您需要為插件創建一個文件夾，因為在本教程的第二部分中，您將添加樣式表以及主插件文件。
獲得文件夾后，為您的代碼創建一個 PHP 文件。我正在調用我的 tutsplus-child-pages.php。
現在設置您的插件文件，并在頂部添加注釋掉的文本：
/** * Plugin Name: Tutsplus List Child Pages * Plugin URI: https://github.com/rachelmccollin/tutsplus-list-child-pages * Description: Output a list of children of the current page or a specific page with featured images. * Author: Rachel McCollin * Author URI: https://rachelmccollin.com * Version: 1.0 * Text Domain: tutsplus * License: GPLv2.0+ */
這會告訴 WordPress 您的插件是什么以及它的用途。
現在，如果您還沒有創建一些頁面，請繼續創建一些頁面。我將創建一些帶有子頁面的頁面，其中包括一個位置頁面作為我的特定頁面列表的父頁面。
這是我在管理中的頁面：
現在是時候編寫輸出列表的函數了。
輸出當前頁面的子級列表
讓我們從這個選項開始。這將輸出當前頁面的所有子頁面的列表，其中包含圖像、鏈接和標題。
如果您的網站具有分層頁面結構，并且您希望鼓勵訪問頂級頁面（或中級頁面，如果有的話）的人們訪問該結構中位于其下方的頁面，那么這是一種有用的方法。
首先在插件文件中創建一個函數：
function tutpslus_list_current_child_pages() { }
現在，在該函數內，檢查我們是否在頁面上。其他所有內容都將放入該條件標記內：
if ( is_page() ) { }
接下來，設置 $post 全局變量并定義父頁面：
global $post; // define the page they need to be children of $parentpage = get_the_ID();
之后，定義 get_pages() 函數的參數：
// define args $args = array( 'parent' => $parentpage, 'sort_order' => 'ASC', 'sort_column' => 'menu_order', ); $children = get_pages( $args );
您可能想要更改其中一些參數。我使用 menu_order 進行排序，因此我可以手動調整它，但您可以使用日期、標題或任何其他可排序參數。
下一個任務是使用 get_pages() 函數的結果設置 foreach 循環：
if ( $children ) { ?> <div class="child-page-listing"> <h2><?php _e( 'Learn More', 'tutsplus' ); ?></h2> <?php //foreach loop to output foreach ( $children as $post ) { setup_postdata( $post ); ?><article id="<?php the_ID(); ?>" class="child-listing" post_class>> <?php if ( has_post_thumbnail() ) { ?><a class="child-post-title" href="<?php%20the_permalink();%20?>"> <?php the_title(); ?></a> <div class="child-post-image"> <a href="<?php%20the_permalink();%20?>"> <?php the_post_thumbnail( 'medium' ); ?></a> </div> <?php } ?></article><?php } ?> </div> <?php }
讓我們運行一下該代碼：
- 首先，我們檢查 get_pages() 函數是否返回任何結果，即 $children 是否已填充。
- 然后我們為每個子頁面啟動一個 foreach 循環作為 $post 變量。
- 在該循環中，我們打開一個 article 元素。
- 我們檢查是否有特色圖片（或帖子縮略圖）并將其輸出到頁面的鏈接內。
- 然后我們將頁面的標題輸出到頁面的鏈接中。
- 最后，我們關閉元素和條件檢查以及 foreach 循環本身。
我已向每個元素添加了 CSS 類，以便我們可以在本教程的第二部分中設置它們的樣式。
將代碼添加到主題
現在你有你的功能了。下一步是將其添加到您的主題中，以便可以在正確的位置輸出。
如果您的主題有動作掛鉤，您可以將您的函數掛鉤到其中之一。因此，如果我的有一個 after_content 掛鉤，我可以在我的插件中的函數外部添加此代碼：
add_action( 'after_content', 'tutpslus_list_current_child_pages' );
但是，我在這個演示中使用了“二十十六”主題，它沒有這樣的動作掛鉤。因此，我需要直接在模板文件中添加函數。
如果您使用自己的主題，則可以將其添加到 page.php 文件中您希望顯示列表的位置。
但如果您使用的是第三方主題，則不得對其進行編輯，因為下次更新主題時所有更改都將丟失。相反，創建一個子主題。在新的子主題中創建父主題的 page.php 文件的副本（或 page.php 的循環文件的副本），然后對其進行編輯。
確定您希望在頁面中輸出列表的位置，并將其添加到主題模板文件中：
tutpslus_list_current_child_pages();
我已將其添加到子主題的 page.php 文件中的循環之后。
現在讓我們看一下該網站。這是我的關于我們頁面及其子頁面：
這就是添加指向當前頁面子頁面的鏈接的方法。但是，如果您想添加指向某一特定頁面的子頁面的鏈接該怎么辦？接下來讓我們解決這個問題。
輸出特定頁面的子級列表
此代碼與當前頁面子頁面的代碼幾乎相同。區別在于定義運行 get_pages() 時將使用的父頁面。
復制插件文件中的第一個函數并編輯函數名稱，使它們不同。
找到頁面上的條件檢查并將其刪除。不要忘記也刪除該檢查的右大括號。
現在找到如下行：
$parentpage = get_the_ID();
將其替換為：
$page = get_page_by_path( 'locations', OBJECT, 'page' ); $parentpage = $page->ID;
您會看到它使用 get_page_by_path() 函數，其第一個參數是目標頁面的 slug。編輯此內容，使其使用您想要在網站中定位的頁面的 slug。
在此函數中編輯 CSS 類也是一種很好的做法，以便它們與第一個函數中的 CSS 類不同。這樣，如果您同時使用兩者，則可以為每個使用不同的樣式。
這是進行這些編輯后的完整功能：
function tutpslus_list_locations_child_pages() { global $post; // define the page they need to be children of $page = get_page_by_path( 'locations', OBJECT, 'page' ); $parentpage = $page->ID; // define args $args = array( 'parent' => $parentpage, 'sort_order' => 'ASC', 'sort_column' => 'menu_order', ); //run get_posts $children = get_pages( $args ); if ( $children ) { ?> <div class="child-page-listing"> <h2><?php _e( 'Our Locations', 'tutsplus' ); ?></h2> <?php //foreach loop to output foreach ( $children as $post ) { setup_postdata( $post ); ?><article id="<?php the_ID(); ?>" class="location-listing" post_class>> <?php if ( has_post_thumbnail() ) { ?><a class="location-title" href="<?php%20the_permalink();%20?>"> <?php the_title(); ?></a> <div class="location-image"> <a href="<?php%20the_permalink();%20?>"> <?php the_post_thumbnail( 'medium' ); ?></a> </div> <?php } ?></article><?php } ?> </div> <?php } }
將代碼添加到主題
您需要再次將代碼添加到主題中。在這種情況下，您不僅希望列表在靜態頁面中輸出，而且可能希望將其放在不同的位置。
如果您的主題有操作掛鉤，您可以在插件文件中使用其中之一，方式與之前類似：
add_action( 'before_footer', 'tutpslus_list_locations_child_pages' );
我將把它添加到我的主題的頁腳中，再次在我的子主題中創建 footer.php 的副本并對其進行編輯。
這是我的 footer.php 文件中的代碼，位于 footer 元素的開頭：
<?php tutpslus_list_locations_child_pages(); // list locations pages ?>
這是我的頁腳中的列表輸出。這是在單個帖子的底部：
提示：如果出現以下情況，您可能希望避免在位置頁面中輸出此列表：您同時運行這兩個函數，以避免重復。嘗試使用頁面 ID 添加條件標記來實現此目的。
后續步驟
您現在有兩個頁面列表：一個是當前頁面的子頁面，另一個是特定頁面的子頁面。
現在，圖像都被推到頁面的一側，標題看起來不太好。在這個由兩部分組成的教程的下一部分（鏈接如下）中，您將學習如何設置圖像樣式以創建具有 CSS 網格布局的網格，以及如何將標題文本集成到該網格中。
