メモ的な要素としてWordPressの小技集を作っていきたいと思います。
記念すべき第一回はパンくずリストを作成!!
サクッとコードだけ掲載しときます。
functions.phpに追加
// パンくずリスト
function breadcrumb(){
global $post;
$str ='';
if(!is_home()&&!is_admin()){
$str.= '<div class="breadCrumb"><span>';
$str.= '<a href="'. home_url() .'"><img src="'. get_template_directory_uri() .'/img/icon_home.png" alt=""></a></span>';
if(is_category()) {
$cat = get_queried_object();
if($cat -> parent != 0){
$ancestors = array_reverse(get_ancestors( $cat -> cat_ID, 'category' ));
foreach($ancestors as $ancestor){
$str.='<span>></span><span><a href="'. get_category_link($ancestor) .'">'. get_cat_name($ancestor) .'</a></span>';
}
}
$str.='<span>></span><span><a href="'. get_category_link($cat -> term_id). '">'. $cat-> cat_name . '</a></span>';
} elseif(is_page()) {
if($post -> post_parent != 0 ){
$ancestors = array_reverse(get_post_ancestors( $post->ID ));
foreach($ancestors as $ancestor){
$str.='<span>></span><span><a href="'. get_permalink($ancestor).'">'. get_the_title($ancestor) .'</a></span>';
}
} else{
$str.='<span>></span><span>'. $post -> post_title .'</span>';
}
} elseif(is_single()){
$posts = get_post($post->ID);
$categories = get_the_category($post->ID);
$cat = $categories[0];
if($cat -> parent != 0){
$ancestors = array_reverse(get_ancestors( $cat -> cat_ID, 'category' ));
foreach($ancestors as $ancestor){
$str .= '<span>></span><span><a href="'. get_category_link($ancestor) .'">' . get_cat_name($ancestor) .'</a></span>';
}
}
$str.='<span>></span><span><a href="'. get_category_link($cat -> term_id). '">' . $cat-> cat_name . '</a></span><span>></span><span>'. $posts->post_title .'</span>';
} elseif(is_search()){
$str.='<span>></span><span>検索結果 : '. esc_html( get_search_query( false ) ) .'</span>';
} else{
$str.='<div>'. wp_title('', false) .'</div>';
}
$str.='</div>';
}
echo $str;
}
なんかメッチャ見にくい・・・けど多分サクッと動きます。
ホームの部分をアイコンにしている(/img/icon_home.png)ので、その辺はカスタム必要かもです。
使う時は使いたい場所で以下
外をdivで囲ってますが、この辺は↑のfunctionsに入れてもOKかも。
<div class="breadCrumb">
<?php breadcrumb(); ?>
</div>
SCSSを決めてやる
WordPressでパンくずといえば、Breadcrumb NavXTのプラグインを使う場合が多いかと思いますので、Breadcrumb NavXTに合わせたスタイルを決めています。
Breadcrumb NavXTの場合も下記コピペでOKかと!!
@include spはスマホ用のメディアクエリをセットしているので、その辺はご自由に!!
.breadCrumb{
margin-top: 20px;
// コンテンツ同士の間の余白
> span + span{
margin-left: 16px;
@include sp {
margin-left: 10px;
};
}
// homeアイコン
img{
width: 17px;
vertical-align: top;
padding-top: 4px;
}
}
以上、Wordpress小技集-パンくずを自作する-編でした!!