固定ページの子ページを取得して列挙するショートコードの作成方法【WordPress】

突然ですが、Wordpressで固定ページの情報を、そのページの子ページを使って追加・編集・削除できたらと思ったことありませんか?

例えば、スタッフ紹介ページや、リクルートコンテンツの「先輩の声」ページなど、画像や表示項目が決まっている情報のセットを繰り返す場合は、アイキャッチやタイトル、カスタムフィールドを使ってお決まりの編集ができるようにしておいて、後は子ページの追加や削除で情報を変更できたりすると、とても管理管理しやすくなります。

もし固定ページ内で同じフォーマットで内容の違う情報をリストしたりする場合は、フォーマットを崩したりする可能性があります。
また、レイアウトが決まっているとクラスやIDなどが付与されていてHTMLを編集する必要があったりすると思います。そうなってしまうとHTMLの知識がない人向けのシステムにならず、CMSの価値も下がってしまいます。

ということで、子ページを使って親ページの情報を管理するための設定方法を解説したいと思います。
固定ページのテンプレート(page.php)に設定しても良いのですが、他の固定ページもあると思いますので、ここでは「テーマのための関数(functions.php)」テンプレートに設定して、表示させるページにショートコードで設置する方法とします。

// ショートコードのための関数設定(ここでは「mychild_list」)
function mychild_list($argv) {

	// 投稿・固定ページにかかわらず一旦全てを取得
	$my_wp_query = new WP_Query();

	// 取得した投稿・固定ページの中から固定ページだけを取得
	$all_pages = $my_wp_query->query(array(
		'post_type' => 'page', // ページタイプは固定ページ
		'nopaging'  => 'true' // 全ての固定ページが対象
	));

	// 取得した全てのページ「$all_pages」から、
	// ショートコードを設置したページ「get_the_ID()」の
	// 子ページ全てを『get_page_children』関数で取得
	$child_pages = get_page_children( get_the_ID(), $all_pages );

	// 書き出すHTMLソースの初期値設定
	$child_source_html = '';

	// 全ての子ページの情報から『foreach』関数を使って一つずつ情報を
	// HTMLソースに設定していく
	foreach($child_pages as $child_page){

   // 子ページの情報を取得するため子ページのIDを取得
		$child_page_id = $child_page->ID;

   // 子ページのIDを基に子ページの情報を取得
		$child_page_data = get_post($child_page_id);

   // 子ページのタイトルを取得
		$child_page_title = $child_page_data->post_title;

   // 子ページのアイキャッチ画像を取得(fullサイズ)
		$child_page_thumb = get_the_post_thumbnail($child_page_id, 'full');

   // アドバンスカスタムフィールドを使用している場合は、フィールドの値を取得
		$child_page_department = get_field('department', $child_page_id);
		$child_page_message = get_field('message', $child_page_id);
		
   // HTMLソースに情報を追加していきます。
		$child_source_html .= '<div><figure>'.$child_page_thumb.'<figcaption>'.$child_page_department.'<p>'.$child_page_title.'さん</p></figcaption></figure></div>';
		$child_source_html .= '<h3>'.$child_page_department.'</h3>';
		$child_source_html .= '<h4>みなさんへのメッセージ</h4><p>'.$child_page_message.'</p>';

   // 繰り返し『foreach』の終了
		}

	// HTMLソースを反映
	return $child_source_html;

// Function『mychild_list』の終了
}

// 『mychild_list』の処理で作成したHTMLソース『$child_source_html』を
// 反映させるショートコードを[child_list /]として設定
add_shortcode('child_list', 'mychild_list');

あとは該当の固定ページの編集画面で「フォーマット」>「カスタムHTML」を選択してショートコードを接地すれば完成です。
上記の例でいけば、下記の通りのショートコードで固定ページに反映されます。

[child_list /]

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です