2018年08月01日
Docker for Mac を使って WordPress の...
2018年07月29日
Docker for Mac のインストール
2018年07月08日
Docker 便利コマンドあれこれ
2018年07月08日
オライリーの Docker 本(Docker Up &...
2018年07月05日
iPad mini 2 を購入しました
2018年07月04日
Docker で Jenkins するときのあれこれ

HOME > カテゴリ(WordPress)の記事

プラグインを使わずに WordPress でパンくずリストを設置してみた



WordPress を理解するためにも、プラグインを使わずに自力で設置にチャレンジしてみると良いかも。

今更ながらパンくずリストを設置してみました。

パンくずリストっていうのは、よくついてるこういうの。

Pankuzu 01

パンくずリストは、Google などの検索エンジンにサイト構造を理解させるためにも重要で基本の SEO 対策施策のひとつだそうな。

参考:リッチ スニペット – パンくずリスト – ウェブマスター ツール ヘルプ

Wordpress では、簡単にパンくずリストを表示するためのプラグインが沢山ありますが、今回はプラグインを使わずに設置してみました。

設置するにあたり、ACラボさんの記事を参考にさせてもらいました。ホームアイコンなどの画像も使わせてもらってます。

Thanx!パンくずリストの正しい使い方

共通の CSS

パンくずリストは、記事ページ(single.php)、アーカイブページ(archive.php)、個別ページ(page.php)、トップページ(home.php)へ設置しますが、共通の CSS として以下のソースを、style.css へ貼付けます。

/* ---------------------------------------------*/
/* パンくずリスト */
/* ---------------------------------------------*/ /* リスト */ ol.topic-path {  margin: 0;  padding: 7px 5px;  list-style-type: none; /* リストマーク非表示 */  font-size: 100%; } /* リスト項目 */ ol.topic-path li {  padding-left: 5px;  display: inline; } /* リスト項目(最初の項目) */ ol.topic-path li.first {  padding-left: 25px;  background: url(images/pankuzu/topic-path-home-black.png) no-repeat left; /* ホーム記号(※) */ } /* リンクエリア */ ol.topic-path li a {  padding-right: 18px; /* 右パディング */  background: url(images/pankuzu/topic-path-gray.gif) no-repeat right; /* 矢印記号(※) */ } /* リンク色 */  ol.topic-path li a {  color: #4682b4; } /* リンク色(マウスオーバー) */  ol.topic-path li a:hover {  color: #79a7cc; }

必要に応じて適時修正しちゃってください。


記事ページ(single.php)への設置

Pankuzu single

記事ページへパンくずリストを設置するためには single.php を修正します。

パンくずリストを表示したい場所へ以下のソースを貼付けます。一応サブカテゴリにも対応していますが、3階層以上のサブカテゴリには対応してませんので、適時修正を。

cat_ID;
 $cat_name = $cat_info->name;
 $cat_url = get_category_link( $cat_id );

 $parent_id = $cat_info->parent;
 if( $parent_id <> 0 ) {
  $parent_info = get_category($parent_id, false);
  $parent_name = $parent_info->cat_name;
  $parent_url = get_category_link( $parent_id );
 }
?>

     
  1. HOME
  2.   0 ) {    echo '
  3. '.attribute_escape($parent_name).'
  4. ';   }   echo '
  5. '.$cat_name.'
  6. ';   echo '
  7. '.get_the_title().'
  8. ';  ?>

single.php では、


で、カテゴリ情報を取得出来ないので、

$cat = get_the_category();
$cat = $cat[0];

でカテゴリ情報を取得します。


関連記事:WordPress のテンプレートファイルで、カテゴリ情報(カテゴリ名とかカテゴリIDとか)を取得する方法


アーカイブページ(archive.php)への設置

Pankuz archive

カテゴリー別ページや日付別ページなどのアーカイブページへパンくずリストを設置するためには archive.php を修正します。

パンくずリストを表示したい場所へ以下のソースを貼付けます。一応サブカテゴリにも対応していますが、3階層以上のサブカテゴリには対応してませんので、適時修正を。

name;

 $parent_name = 0;
 if ($cat_info->parent) {
  $parent_name = get_category($cat_info->parent, false);
  $parent_url  = get_category_link( $cat_info->parent );
 }
?>

     
  1. HOME
  2.  parent ) {     echo '
  3. '.attribute_escape($parent_name->cat_name).'
  4. ';    }    echo '
  5. '.$cat_name.'
  6. ';   } else if( is_tag() ) {    echo '
  7. タグ('.trim(wp_title('', false)).')
  8. ';   }  ?>

archive.php では、


で、カテゴリ情報が取得出来ます。$cat_info はオブジェクトなので、$cat_info[name] ではなく $cat_info->name で変数にアクセスしてください。

関連記事:WordPress のテンプレートファイルで、カテゴリ情報(カテゴリ名とかカテゴリIDとか)を取得する方法


個別ページ(page.php)への設置

Pankuz page

個別ページへパンくずリストを設置するためには archive.php を修正します。

パンくずリストを表示したい場所へ以下のソースを貼付けます。一応サブカテゴリにも対応していますが、3階層以上のサブカテゴリには対応してませんので、適時修正を。

cat_ID;
 $cat_name = $cat_info->name;
 $cat_url = get_category_link( $cat_id );
 
 $parent_id = $cat_info->parent;
 if( $parent_id <> 0 ) {
  $parent_info = get_category($parent_id, false);
  $parent_name = $parent_info->cat_name;
  $parent_url = get_category_link( $parent_id );
 }
?>

     
  1. HOME
  2.  

個別ページ(page.php)では、記事ページ(single.php)と同様に、


  $cat_id = get_query_var(‘cat’);
  $cat_info = get_category( $cat_id, false );
?>

で、カテゴリ情報を取得出来ないので、

$cat = get_the_category();
$cat = $cat[0];

でカテゴリ情報を取得します。

関連記事:WordPress のテンプレートファイルで、カテゴリ情報(カテゴリ名とかカテゴリIDとか)を取得する方法


トップページ(home.php)への設置

Pankuz home

トップページへパンくずリストを設置するためには home.php を修正します。

トップページは、読んで時のごとくトップ階層なので、特に難しい事はありません。

      
  1. HOME

これだけです。


まとめ

今回プラグインを使わずにパンくずリストを設置してみた訳ですが、テンプレートファイル(single.php や archive.php など)によって、カテゴリー情報の取得方法が微妙に違ってたりしますので、注意してください。

プラグインで設置すればお手軽なんだと思いますが、PHP や WordPress に慣れる意味でも自力で設置にチャレンジする事をお勧めします。

パンくずリスト設置すると、WordPress の雰囲気が色々分かって、後々のカスタマイズする際の良い勉強になると思いますよ。

是非是非チャレンジしちゃってください。

でわでわ。

[amazonjs asin=”479736758X” locale=”JP” tmpl=”Small” title=”本格ビジネスサイトを作りながら学ぶ WordPressの教科書”] [amazonjs asin=”4797370963″ locale=”JP” tmpl=”Small” title=”【Amazon.co.jp限定】本格ビジネスサイトを作りながら学ぶ WordPressの教科書2 オリジナルステッカー付き”]




この記事にコメントする





Copyright © 2012 - 2013 MacBook Air とWordPressでこうなった All rights reserved
Designed by Theme Junkie. Powered by WordPress.