今回は親ページの中で子ページ一覧を表示する方法を書いてみたいと思います。
見解
SEO的な問題で言えば、パーマリンクの構造とパンくずリストの構造を合わせるのに、WPの場合は固定ページの親子関係が一番楽かなと思ったりします。
カスタム投稿でも同じですね。親子関係を付けるのが一番理想的なパーマリンクとパンくずが出来上がると思うんです。
カテゴリやタグで親子関係つけると、WPはポストタイプをパーマリンク内に含めますので、パンくずリストと実際のパーマリンクの構造がずれてしまったりします。
なのでカテゴリベースで親子関係を付ける理由がない時は固定ページの親子関係をベースに親子関係を作っていったほうが楽だと思うんです。
Exec-PHPプラグイン
で、まぁ今回の固定ページ内に固定ページの一覧を表示する方法ですが、それなら固定ページ内でPHPがかければ超便利だなってことで昔はExec-PHPを使用していたんですけどね、Exec-PHPはセキュリティー上とても宜しくないらしいんで却下。
どうもeval()を使用しているので任意のコードを実行できてしまうとか。
オライリーのJavascriptパターンの本にも書いてましたね~「コード中にevalを見つけたらeval()はワルというじゅもんを唱えましょう」と。
Child Pages Shortcodeプラグイン
じゃあ、どうしようかって次はプラグイン。
使ったことがあるのはChild Pages Shortcode。
子ページの一覧を表示は出来るんですが、デザインとかタグ関係とか好きなようにいじれないので辞めようと。
そうするとやっぱりショートコードを書くのが一番手っ取り早いと思います。
ショートコードの作り方基本
ショートコード作るってなんかハードル高そうとか思いそうですけど、実は全然そんなこと無いんです。
使用しているテーマのfunction.phpにでも、
function shortcode_templateurl() {
return get_bloginfo('template_url'); //テンプレートのURLを返す
}
add_shortcode('temp_url', 'shortcode_templateurl'); //temp_urlというショートコードを作成して呼び出されたらshortcode_templateurl()を実行する。
と、書くだけでhttps://kurubusi.net/wp-content/themes/kurubusi_bootstrap_sass_01というショートコードが完成します。
後は、ショートコードを使いたい場所、今回は固定ページのエディタの中でhttps://kurubusi.net/wp-content/themes/kurubusi_bootstrap_sass_01と書けばshortcode_templateurl()内でかかれた内容が実行されます。
上の例の場合は、https://kurubusi.net/wp-content/themes/kurubusi_bootstrap_sass_01が呼ばれたら、使用中のテーマまでのURLを返しなさいっていうショートコードを作成しています。
これで固定ページとか投稿でテンプレートまでのURLを自由に使えますね~。
親固定ページ内で子固定ページの一覧を表示する方法
ですので今回は[childlist]とかいうショートコードを作成して、固定ページに[childlist]を記載、function.php内に下記を追記
function outChildlist() {
global $post;
$args = array(
'posts_per_page' => -1 ,
'post_type' => 'page' ,
'post_parent' => $post->ID,
);
query_posts($args);
if (have_posts()) :
$html = '<ul>';
while ( have_posts() ) : the_post();
$html .= '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
endwhile;
$html .= '</ul>';
endif;
wp_reset_query();
return $html;
}
add_shortcode('childlist', 'outChildlist'); //[childlist]が呼び出されたらoutChildlist()を実行
みたいな感じで書けば固定ページ内で一覧ページを出力できます。
同じく色々PHP使いたいなーって時はショートコード書いて、その中で使いたいPHPを書けばOK!




WPでjsの追加cssの読み込みはwp_head()から
P3でWordPressのサイトスピードチェックをして余分なプラグインを見極める