プログラムデザイナーへの旅路

メモ的な要素として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小技集-パンくずを自作する-編でした！！