人々は寫真が大好きです。彼らは見るのが大好きで、クリックするのが大好きです。したがって、Web サイトのナビゲーションでこれらを使用することは理にかなっています。

ユーザーに投稿の內(nèi)容をより深く理解してもらい、アーカイブ ページの見栄えを良くするために、アーカイブ ページで注目の畫像を既に使用している場合があります。美しく大きなクリック可能な畫像により、ページの閲覧や投稿の公開プロセスがより直感的になります。

しかし、他の場所では、注目の畫像を使用して WordPress サイトの特定の部分に移動(dòng)することができます。この 2 部構(gòu)成のチュートリアルでは、Web サイト內(nèi)の特定のページのサブページ、または現(xiàn)在のページのサブページにリンクする畫像のグリッドを作成する方法を説明します。

この最初のパートでは、ページを取得し、そのタイトル、注目の畫像、內(nèi)部リンクを出力する PHP の記述方法を説明します。パート 2 では、Ian Yates が CSS を追加してリストを美しいグリッドに変える方法を紹介します。

＃＃＃あなたは何が必要ですか＃＃＃

このチュートリアルに従うには、次のものが必要です:

WordPress の開発インストール - テストするまでライブ サイトに追加しないでください。

• コンテンツを追加または編集するためのアクション フックを持つテーマ。フックのないサードパーティのテーマの場合は、子テーマを作成して編集します。
• コードエディタ。
アプローチを決定する

最初に行うことは、どのページを出力するかを決定することです。このチュートリアルでは、2 つのオプションを説明します:

現(xiàn)在のページのサブページのリスト (畫像を含む)。

• 畫像を含む、特定のページのサブページのリスト。親ページだけでなく、サイトのどこにでも表示できます。
使い始める

2 つの方法の開始點(diǎn)は同じです。

まず、

wp-content/plugins

フォルダーにプラグインを作成します。このチュートリアルの後半では、メインのプラグイン ファイルだけでなくスタイルシートも追加するため、プラグイン用のフォルダーを作成する必要があります。 フォルダーを取得したら、コード用の PHP ファイルを作成します。私は

tutsplus

-child-pages.php という名前を付けています。 次に、プラグイン ファイルを設(shè)定し、コメントアウトされたテキストを先頭に追加します。 リーリー

これにより、プラグインが何であるか、またその用途が WordPress に伝わります。

まだページを作成していない場合は、いくつかのページを作成してください。特定のページのリストの親ページとして

location

ページを含む、サブページを含むいくつかのページを作成します。

これは管理部門の私のページです:

次に、リストを出力する関數(shù)を作成します。

現(xiàn)在のページの子リストを出力します

このオプションから始めましょう。これにより、畫像、リンク、タイトルを含む、現(xiàn)在のページのすべてのサブページのリストが出力されます。

これは、サイトに階層的なページ構(gòu)造があり、トップレベルのページ (または、存在する場合は中間レベルのページ) にアクセスするユーザーに、その構(gòu)造の下にあるページにアクセスするよう促したい場合に便利な方法です。

最初にプラグイン ファイルに関數(shù)を作成します:

リーリー

次に、関數(shù)內(nèi)で、そのページにいるかどうかを確認(rèn)します。他のすべてはこのコンディショナル タグ內(nèi)に配置されます:

リーリー

次に、

$post

グローバル変數(shù)を設(shè)定し、親ページを定義します。 リーリー

その後、get_pages() 関數(shù)のパラメータを定義します。

リーリー

これらのパラメータの一部を変更したい場合があります。手動(dòng)で調(diào)整できるように並べ替えに menu_order を使用していますが、日付、タイトル、その他の並べ替え可能なパラメーターを使用することもできます。

次のタスクは、get_pages() 関數(shù)

foreach

ループを使用して結(jié)果を設(shè)定することです: リーリー このコードを?qū)g行してみましょう:

まず、

get_pages()

関數(shù)が結(jié)果を返すかどうか、つまり

$children
1. が設(shè)定されているかどうかを確認(rèn)します。 次に、各サブページの foreach ループを
$post
2. 変數(shù)として開始します。 このループでは、article 要素を開きます。
3. アイキャッチ畫像（または投稿サムネイル）があるかどうかを確認(rèn)し、ページへのリンク內(nèi)に出力します。 次に、ページのタイトルをページのリンクに出力します。
4. 最後に、要素と條件のチェック、および foreach ループ自體をオフにします。
このチュートリアルの第 2 部でスタイルを設(shè)定できるように、各要素に CSS クラスを追加しました。
コードをテーマに追加する

これで関數(shù)が完成しました。次のステップでは、これをテーマに追加して、正しい場所に出力できるようにします。

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

add_action( 'after_content', 'tutpslus_list_current_child_pages' );

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

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

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

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

tutpslus_list_current_child_pages();

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

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

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

輸出特定頁面的子級列表

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

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

找到頁面上的條件檢查并將其刪除。不要忘記也刪除該檢查的右大括號。

現(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)頁面的 slug。編輯此內(nèi)容，使其使用您想要在網(wǎng)站中定位的頁面的 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)頁面中輸出，而且可能希望將其放在不同的位置。

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

add_action( 'before_footer', 'tutpslus_list_locations_child_pages' );

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

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

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

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

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

后續(xù)步驟

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

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