人們喜歡圖片。他們喜歡看它們，喜歡點(diǎn)擊它們。因此，在您網(wǎng)站的導(dǎo)航中使用它們是有意義的。

您可能已經(jīng)在存檔頁(yè)面中使用了特色圖像，讓用戶可以更深入地了解帖子的內(nèi)容，并使您的存檔頁(yè)面看起來(lái)更好。精美的可點(diǎn)擊大圖片還使瀏覽頁(yè)面或發(fā)布帖子的過(guò)程更加直觀。

但在其他地方，您可以使用特色圖像來(lái)幫助導(dǎo)航到 WordPress 網(wǎng)站的某些部分。在這個(gè)由兩部分組成的教程中，我們將向您展示如何創(chuàng)建圖像網(wǎng)格，該網(wǎng)格鏈接到您網(wǎng)站中給定頁(yè)面的子頁(yè)面，或當(dāng)前頁(yè)面的子頁(yè)面。

在第一部分中，我將演示如何編寫 PHP 來(lái)獲取頁(yè)面并輸出其標(biāo)題和特色圖像、內(nèi)部鏈接。在第二部分中，Ian Yates 將向您展示如何添加 CSS 將列表變成美觀的網(wǎng)格。

您需要什么

要學(xué)習(xí)本教程，您需要具備以下條件：

• WordPress 的開發(fā)安裝 - 在測(cè)試之前不要將其添加到您的實(shí)時(shí)網(wǎng)站。
• 具有供您添加內(nèi)容或可以編輯的操作掛鉤的主題。如果它是沒有鉤子的第三方主題，請(qǐng)創(chuàng)建一個(gè)子主題并對(duì)其進(jìn)行編輯。
• 代碼編輯器。

決定你的方法

要做的第一件事是決定要輸出哪些頁(yè)面。在本教程中，我將演示兩個(gè)選項(xiàng)：

• 當(dāng)前頁(yè)面的子頁(yè)面列表，包含圖像。
• 特定頁(yè)面的子頁(yè)面列表，包含圖像。它可以顯示在您網(wǎng)站的任何位置，而不僅僅是父頁(yè)面。

開始使用

兩種方法的出發(fā)點(diǎn)是相同的。

首先在 wp-content/plugins 文件夾中創(chuàng)建一個(gè)插件。您需要為插件創(chuàng)建一個(gè)文件夾，因?yàn)樵诒窘坛痰牡诙糠种?，您將添加樣式表以及主插件文件?/p>

獲得文件夾后，為您的代碼創(chuàng)建一個(gè) PHP 文件。我正在調(diào)用我的 tutsplus-child-pages.php。

現(xiàn)在設(shè)置您的插件文件，并在頂部添加注釋掉的文本：

/**
 * 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+
 */

這會(huì)告訴 WordPress 您的插件是什么以及它的用途。

現(xiàn)在，如果您還沒有創(chuàng)建一些頁(yè)面，請(qǐng)繼續(xù)創(chuàng)建一些頁(yè)面。我將創(chuàng)建一些帶有子頁(yè)面的頁(yè)面，其中包括一個(gè)位置頁(yè)面作為我的特定頁(yè)面列表的父頁(yè)面。

這是我在管理中的頁(yè)面：

現(xiàn)在是時(shí)候編寫輸出列表的函數(shù)了。

輸出當(dāng)前頁(yè)面的子級(jí)列表

讓我們從這個(gè)選項(xiàng)開始。這將輸出當(dāng)前頁(yè)面的所有子頁(yè)面的列表，其中包含圖像、鏈接和標(biāo)題。

如果您的網(wǎng)站具有分層頁(yè)面結(jié)構(gòu)，并且您希望鼓勵(lì)訪問(wèn)頂級(jí)頁(yè)面（或中級(jí)頁(yè)面，如果有的話）的人們?cè)L問(wèn)該結(jié)構(gòu)中位于其下方的頁(yè)面，那么這是一種有用的方法。

首先在插件文件中創(chuàng)建一個(gè)函數(shù)：

function tutpslus_list_current_child_pages() {

}

現(xiàn)在，在該函數(shù)內(nèi)，檢查我們是否在頁(yè)面上。其他所有內(nèi)容都將放入該條件標(biāo)記內(nèi)：

if ( is_page() ) {

}

接下來(lái)，設(shè)置 $post 全局變量并定義父頁(yè)面：

global $post;

// define the page they need to be children of
$parentpage = get_the_ID();

之后，定義 get_pages() 函數(shù)的參數(shù)：

// define args
$args = array(
    'parent' => $parentpage,
	'sort_order' => 'ASC',
	'sort_column' => 'menu_order',
);

$children = get_pages( $args );

您可能想要更改其中一些參數(shù)。我使用 menu_order 進(jìn)行排序，因此我可以手動(dòng)調(diào)整它，但您可以使用日期、標(biāo)題或任何其他可排序參數(shù)。

下一個(gè)任務(wù)是使用 get_pages() 函數(shù)的結(jié)果設(shè)置 foreach 函數(shù)的結(jié)果設(shè)置 foreach 循環(huán)：

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" <?php post_class(); ?>>
				
				<?php if ( has_post_thumbnail() ) { ?>
				
					<a class="child-post-title" href="<?php the_permalink(); ?>">
						<?php the_title(); ?>
					</a>
					
					<div class="child-post-image">	
						<a href="<?php the_permalink(); ?>">
							<?php the_post_thumbnail( 'medium' ); ?>
						</a>
					</div>	
			
				<?php }	?>
			
			</article>	
			
		<?php } ?>
		
	</div>
	
<?php }

讓我們運(yùn)行一下該代碼：

1. 首先，我們檢查 get_pages() 函數(shù)是否返回任何結(jié)果，即 $children 函數(shù)是否返回任何結(jié)果，即 $children 是否已填充。
2. 然后我們?yōu)槊總€(gè)子頁(yè)面啟動(dòng)一個(gè) foreach 循環(huán)作為 foreach 循環(huán)作為 $post 變量。
3. 在該循環(huán)中，我們打開一個(gè) article 元素。
4. 我們檢查是否有特色圖片（或帖子縮略圖）并將其輸出到頁(yè)面的鏈接內(nèi)。
5. 然后我們將頁(yè)面的標(biāo)題輸出到頁(yè)面的鏈接中。
6. 最后，我們關(guān)閉元素和條件檢查以及 foreach 循環(huán)本身。

我已向每個(gè)元素添加了 CSS 類，以便我們可以在本教程的第二部分中設(shè)置它們的樣式。

將代碼添加到主題

現(xiàn)在你有你的功能了。下一步是將其添加到您的主題中，以便可以在正確的位置輸出。

如果您的主題有動(dòng)作掛鉤，您可以將您的函數(shù)掛鉤到其中之一。因此，如果我的有一個(gè) after_content 掛鉤，我可以在我的插件中的函數(shù)外部添加此代碼：

add_action( 'after_content', 'tutpslus_list_current_child_pages' );

但是，我在這個(gè)演示中使用了“二十十六”主題，它沒有這樣的動(dòng)作掛鉤。因此，我需要直接在模板文件中添加函數(shù)。

如果您使用自己的主題，則可以將其添加到 page.php 文件中您希望顯示列表的位置。

但如果您使用的是第三方主題，則不得對(duì)其進(jìn)行編輯，因?yàn)橄麓胃轮黝}時(shí)所有更改都將丟失。相反，創(chuàng)建一個(gè)子主題。在新的子主題中創(chuàng)建父主題的 page.php 文件的副本（或 page.php 的循環(huán)文件的副本），然后對(duì)其進(jìn)行編輯。

確定您希望在頁(yè)面中輸出列表的位置，并將其添加到主題模板文件中：

tutpslus_list_current_child_pages();

我已將其添加到子主題的 page.php 文件中的循環(huán)之后。

現(xiàn)在讓我們看一下該網(wǎng)站。這是我的關(guān)于我們頁(yè)面及其子頁(yè)面：

這就是添加指向當(dāng)前頁(yè)面子頁(yè)面的鏈接的方法。但是，如果您想添加指向某一特定頁(yè)面的子頁(yè)面的鏈接該怎么辦？接下來(lái)讓我們解決這個(gè)問(wèn)題。

輸出特定頁(yè)面的子級(jí)列表

此代碼與當(dāng)前頁(yè)面子頁(yè)面的代碼幾乎相同。區(qū)別在于定義運(yùn)行 get_pages() 時(shí)將使用的父頁(yè)面。

復(fù)制插件文件中的第一個(gè)函數(shù)并編輯函數(shù)名稱，使它們不同。

找到頁(yè)面上的條件檢查并將其刪除。不要忘記也刪除該檢查的右大括號(hào)。

現(xiàn)在找到如下行：

$parentpage = get_the_ID();

將其替換為：

$page = get_page_by_path( 'locations', OBJECT, 'page' );
    
$parentpage = $page->ID;

您會(huì)看到它使用 get_page_by_path() 函數(shù)，其第一個(gè)參數(shù)是目標(biāo)頁(yè)面的 slug。編輯此內(nèi)容，使其使用您想要在網(wǎng)站中定位的頁(yè)面的 slug。

在此函數(shù)中編輯 CSS 類也是一種很好的做法，以便它們與第一個(gè)函數(shù)中的 CSS 類不同。這樣，如果您同時(shí)使用兩者，則可以為每個(gè)使用不同的樣式。

這是進(jìn)行這些編輯后的完整功能：

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" <?php post_class(); ?>>
					
					<?php if ( has_post_thumbnail() ) { ?>
					
						<a class="location-title" href="<?php the_permalink(); ?>">
							<?php the_title(); ?>
						</a>
						
						<div class="location-image">	
							<a href="<?php the_permalink(); ?>">
								<?php the_post_thumbnail( 'medium' ); ?>
							</a>
						</div>	
				
					<?php }	?>
				
				</article>	
				
			<?php } ?>
			
		</div>
		
	<?php }
			
}

將代碼添加到主題

您需要再次將代碼添加到主題中。在這種情況下，您不僅希望列表在靜態(tài)頁(yè)面中輸出，而且可能希望將其放在不同的位置。

如果您的主題有操作掛鉤，您可以在插件文件中使用其中之一，方式與之前類似：

add_action( 'before_footer', 'tutpslus_list_locations_child_pages' );

我將把它添加到我的主題的頁(yè)腳中，再次在我的子主題中創(chuàng)建 footer.php 的副本并對(duì)其進(jìn)行編輯。

這是我的 footer.php 文件中的代碼，位于 footer 元素的開頭：

<?php tutpslus_list_locations_child_pages(); // list locations pages ?>

這是我的頁(yè)腳中的列表輸出。這是在單個(gè)帖子的底部：

提示：如果出現(xiàn)以下情況，您可能希望避免在位置頁(yè)面中輸出此列表：您同時(shí)運(yùn)行這兩個(gè)函數(shù)，以避免重復(fù)。嘗試使用頁(yè)面 ID 添加條件標(biāo)記來(lái)實(shí)現(xiàn)此目的。

后續(xù)步驟

您現(xiàn)在有兩個(gè)頁(yè)面列表：一個(gè)是當(dāng)前頁(yè)面的子頁(yè)面，另一個(gè)是特定頁(yè)面的子頁(yè)面。

現(xiàn)在，圖像都被推到頁(yè)面的一側(cè)，標(biāo)題看起來(lái)不太好。在這個(gè)由兩部分組成的教程的下一部分（鏈接如下）中，您將學(xué)習(xí)如何設(shè)置圖像樣式以創(chuàng)建具有 CSS 網(wǎng)格布局的網(wǎng)格，以及如何將標(biāo)題文本集成到該網(wǎng)格中。