ebicology(えびころじー)

親ページIDを使ってサイトマップを作るショートコードの作り方

引数に親ページIDを指定するショートコードでサイトマップを作って、下図の様に親タイトルと子ページ一覧をセットで表示します。

PHP（functions.phpに書きます）

function get_sitemap($atts){
$children= null;
$children = wp_list_pages('title_li=&child_of='.$atts[0].'&echo=0');
return '<h3><a href="'.get_permalink($atts[0]).'">'. get_post($atts[0])->post_title.'</a></h3><ul>'.$children.'</ul>';
}
add_shortcode('sitemap','get_sitemap');

※パラメータで細かく指定できるので詳しくは「テンプレートタグ/wp list pages｜WordPress Codex」をご参照ください。

CSS

下記、適当に更新して使ってください。

ul li ul { margin-top: 2px;} 
ul li ul li { position: relative; list-style: none;} 
ul li ul li::before,
ul li ul li::after{
  content: "";
  position: absolute;
  width: 10px;
  left: -16px;
}
ul li ul li::before {
  top: -7px;
  height: calc(100% + 7px);
  border-left: 1px solid #CDCDCD;
} 
ul li ul li:last-child::before { height: calc(1em + .25em);}
ul li ul li::after {
  top: 12px;
  border-bottom: 1px solid #CDCDCD;
}

ショートコード呼び出し

[sitemap ●]

※●には親ページIDを入力します。

Comments

コメントを残す