突然ですが、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 /]
コメントを残す