親固定ページ内に子の固定ページ一覧を表示させたいときありませんか?
いくつかプラグインもありますが自作してみました。functions.phpに記述しますので、すべてのテーマに対応できるはずです。functions.phpとstyle.cssを編集できる方であればだれでもできます。
また、今回紹介するコードは無料版のチャットGPT(GPT-3.5)と一緒に作成しました。
完成後のイメージはこちらです。
特徴をまとめました。
某有名プラグインを丸パクリ参考にしています♪
functions.phpの記述
早速コードをご紹介します。
まずは以下のコードすべてをfunctions.phpに記述します。
// メタボックスの追加
add_action( 'admin_menu', 'add_childpage_metabox' );
function add_childpage_metabox() {
add_meta_box(
'custom_childpage',// 識別子
'子ページ表示設定',// 表示される見出し
'create_childpage',// 以下で定義する関数
'page', // 投稿タイプ、複数の場合は配列 array の形にする
'side',// 表示する位置
'default', // 優先度
);
}
// 管理画面にフィールドを出力
function create_childpage() {
$explanation = '表示するときはチェックを入れる';
$keyname = 'childpage';
global $post;
$get_value = get_post_meta( $post->ID, $keyname, true );
wp_nonce_field( 'action_' . $keyname, 'nonce_' . $keyname );
$value = 'childpage';
$checked = '';
if( $value === $get_value ) $checked = ' checked';
echo '<label><input type="checkbox" name="' . $keyname . '" value="' . $value . '"' . $checked . '>'.$explanation.'</label>';}
// カスタムフィールドの保存
add_action( 'save_post', 'save_custom_childpage' );
function save_custom_childpage( $post_id ) {
$keyname = 'childpage';
if ( isset( $_POST['nonce_' . $keyname] )) {
if( check_admin_referer( 'action_' . $keyname, 'nonce_' . $keyname ) ) {
if( isset( $_POST[$keyname] )) {
update_post_meta( $post_id, $keyname, $_POST[$keyname] );
} else {
delete_post_meta( $post_id, $keyname, get_post_meta( $post_id, $keyname, true ) );
}
}
}
}
// 親固定ページに子ページ
function display_child_pages() {
$post_obj = get_queried_object();
$children = get_pages(array(
'parent' => $post_obj->ID,
'sort_column' => 'menu_order', // 並び替えの基準となるカラムを指定
'sort_order' => 'ASC' // 昇順または降順を指定
));
// If there are children, display them
if ($children) {
// 見出しタグ
$header = 'h3';
// 色を取得
$color = '#000000';
// 続きを読む
$text = '続きを読む';
echo '<div class="child-pages-container">';
foreach ($children as $child) {
echo '<div class="child-page-box">';
echo '<' . $header . ' class="child-page-header">' . $child->post_title . '</' . $header . '>'; // タイトルを追加
// 抜粋がある場合は抜粋を表示、ない場合はコンテンツの一部を表示
if (!empty($child->post_excerpt)) {
echo '<p class="child-page-para">' . $child->post_excerpt . '</p>';
} else {
echo '<p class="child-page-para">' . wp_trim_words($child->post_content, 20) . '</p>';//20文字
}
// 「続きを読む」ボタンに選択した色を適用
echo '<p class="child-page-a"><a href="' . get_permalink($child->ID) . '" class="read-more-button" style="background-color: ' . esc_attr($color) . '">'.esc_attr($text).'</a></p>';//esc_attr()を削除するとタグが入力可能になる
echo '</div>';
}
echo '</div>';
}
}
// 固定ページの下に子ページの一覧を表示させる
function add_child_pages_to_content( $content ) {
if (is_singular() && get_post_meta(get_the_ID(), 'childpage', true)) {
ob_start();
display_child_pages();
$child_pages = ob_get_clean();
$content .= $child_pages;
}
return $content;
}
add_filter( 'the_content', 'add_child_pages_to_content' );
style.cssの記述
次にstyle.cssに以下を貼り付けます。
/* ボックスコンテナ */
.child-pages-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
/* 各子ページボックス */
.child-page-box {
width: 48%; /* 子ページボックスの幅を調整 */
margin: 10px 0;
padding: 15px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #f9f9f9;
display: flex;
flex-direction: column;
}
/* ボックス内の文章 */
.child-page-para{
flex-grow: 1;
}
/* レスポンシブ対応 */
@media (max-width: 768px) {
.child-page-box {
width: 100%; /* 小さいデバイスで100%幅にする */
}
}
/* 続きを読むボタンのスタイル */
a.read-more-button {
display: inline-block;
margin-top: 10px;
text-align: center;
padding: 5px 10px;
color: #fff;
text-decoration: none;
border-radius: 5px;
transition:none;
}
/* 続きを読むボタンのエフェクト */
a.read-more-button:hover {
text-decoration: initial ;
opacity: 0.5 ;
filter: invert(1);
mix-blend-mode: difference;
}
.child-page-a {
text-align:right;
}
使い方
まずは、親子関係のある固定ページを作成します。
子固定ページは表示させたい順番に順序をつけておきます。一番左上に表示させたい子固定ページが一番小さい数字になるようにしましょう。
次に固定ページ一覧を表示させたい固定ページ(この場合は親の固定ページ)のチェックボックスにチェックを入れます。
チェックボックスは編集画面の右側、ページ属性の下あたりにあると思います。
チェックを入れて公開すると固定ページ一覧が表示されます。
デフォルトはチェックがついていないから忘れずに♪
親子関係のない固定ページにチェックを入れても固定ページ一覧は表示されません。必ず親子関係のある固定ページを作成しましょう。
応用
子固定ページと孫以下の階層の固定ページを同じページに表示させたい
47行目
'parent' => $post_obj->ID,'parent'の代わりに'child_of'にすると孫以下の階層の固定ページも親の固定ページ上に表示されます。
子固定ページの並び順を変更する
48行目、49行目
'sort_column' => 'menu_order', // 並び替えの基準となるカラムを指定
'sort_order' => 'ASC' // 昇順または降順を指定子固定ページの表示順は固定ページの順序を元に並べ変えています。49行目で昇順を指定しています。
固定ページ見出しのタグを変更する
54行目からの
// 見出しタグ
$header = 'h3';
// 色を取得
$color = '#000000';
// 続きを読む
$text = '続きを読む';はそれぞれ子固定ページの見出しのタグ、続きを読むのボタンの色、続きを読むボタンの文字を変更できます。
本文と抜粋の文字数を変更する
functions.phpの70行目を
echo '<p class="child-page-para">' . wp_trim_words($child->post_excerpt, 20) . '</p>';//抜粋の取得文字数20文字にすると抜粋の先頭から20文字目までが表示されるようになります。チャットGPTが作ったので本文の場合と抜粋の場合で統一感がなかったです。
functions.phpの72行目
echo '<p class="child-page-para">' . wp_trim_words($child->post_content, 20) . '</p>';//20文字の20を変更すると固定ページ本文内の取得される文字数が変わります。30にすると30文字、0にすると本文なしの…だけが表示されました。
まとめ
頑張ればこれをプラグインにできたりもします。筆者は自作プラグインにして活用しています。でもすでに素晴らしいプラグインがあるのでそれで十分だったりします。
