WordPressでSEOに良いパンくずリストを設置してみた

こんにちは、いつもの通りのポンコシ

 

 

と思いきや、先日の飲まれた事件からようやく立ち直ってきたポンコシですw

 

 

 

 

プログラムは良いです。

 

 

嫌なことも怒りも煩悩も過去の後悔も未来への不安も性欲も恋心もすべて忘れることが出来ますw

 

 

 

まあ一時だけですけどww

 

 

 

忘れたいことがある方は、ぜひポンコシと一緒にブログを作りましょうw

 

 

 

 

 

さて、XYZブログの方では早速香港旅行記始まりましたね。

 

 

ポンコシもそろそろ後追いながら書いて行こうと思うんですが本日は好きな開発ネタです。

 

 

エロを期待してた方々、申し訳ないですw

 

 

 

 

 

本日は、ブログにパンくずリストを、直接コードを書いて設置する方法です。

 

 

ただ、パンくずリストと言ってもただリンクを表示するだけじゃありません。

 

 

 

今回作ったパンくずは、GoogleのSEOを意識した作りとなっております。

 

 

更に、カスタム投稿タイプでもカテゴリーを表示してくれるバージョンも作ったので、ポンコツブログが入っている風俗嬢報部には必須の機能となっています。

 

 

 

 

まず、パンくずリストについて少し説明しますと、

 

Screen Shot 2016-01-08 at 16.32.42

 

上画像の記事タイトルの上にある、◯◯ > ◯◯ > ◯◯ ってのがパンくずリストです。

 

 

 

今回、なんでこれをブログに設置しようと思ったかと言うと、SEOに良いと噂されているからですw

 

 

初耳の方の為に、”SEO”とは、今であれば基本的にGoogleで検索上位に表示される様にするための施策と思ってもらって良いかと思います。

 

 

 

で、なんでこのパンくずリストがGoogle SEOに良いのかと言うと、ポンコツ知識のわかる範囲での想像ですがw、Googleが検索順位を計算するためにページを解析する時に、このリストがあるとGoogleのコンピューターにとってサイトの構造がわかりやすいからです。

 

 

パンくずリストを見ると、どこをたどると今いるページに辿り着くのか、逆にどうすればホームに戻れるのかと言ったことが一目で分かります。

 

 

ページ間の構造が複雑で迷子になりやすいサイトは人間からもコンピューターからも嫌われてしまうと言うわけです。

 

 

 

また、今回作成したリストでは、内部にGoogleが参照するための識別子を挿入することで、Googleの検索エンジンがサイト構造についての情報をより正確に解析出来る様にしてみました。

 

 

こうすることで、コンピューターにも優しい(SEO対策に良さげな)サイトを心がけているポンコシですw

 

 

 

 

じゃ、早速ですがWP(ワードプレスですねw)の function.php に書き込んだソースです。

 

 

参考ソースはbl6.jpさんと、本家Googleになります。

 

今回は、Googleにてolリストタグを使用したデモが掲載されていたので、bl6.jpさんのdivタグの例からolに変更しました。

 

 

 

さて、SEO的に何がポイントなのかと言うと、Google検索エンジンが理解するための構造化データと言うモノをHTMLの中に入れています。

 

 

具体的には以下のプロパティーをol, li, a, spanタグの中に記述しています。

 

 

itemscope

itemtype

itemprop

<meta itemprop="position" content="1" />

 

 

それぞれがどんな意味かと言うよりは、どこに書くかで理解した方がわかりやすいです。

 

 

まず、

 

 

リスト頭に記述した内容のこの部分http://schema.org/BreadcrumbListでolリストがパンくずリストです。と言うことをコンピューターに伝えています。

 

 

次に、

 

 

このli要素がパンくずリストの中の1つのアイテムと言うことをitemprop="itemListElement" itemscope itemtype="http://schema.org/ListItemと長ったらしいので伝えていますw

 

 

また、リスト内の1つ1つのli要素の中のaとspanタグにも以下を設定します。

 

 

aタグの中のitemprop="item"は、パンくずリストのリンク文字列と言うことを、

 

spanタグの中のitemprop="name"は、リンク文字列の表示名であると言うことを

 

それぞれ明示するために記述します。

 

 

で、リスト内のそれぞれのリンク文字列の後に以下を記述して完了です。

 

 

これは、リンク文字列がパンくずリストの頭(=サイトホーム)から何番目か(=position)を示すmetaタグです。

 

content内の$i++は、リンクが増えるにつれて数字を1づつ増加させるPHP言語のコードです。

 

 

 

ページにアクセスした時に実際に吐き出されるHTMLはこんな感じになりますね。

 

Screen Shot 2016-01-08 at 17.36.38

 

それぞれのli要素内、metaタグのpositionの数字がサイトホームから何番目なのかを表しています。

 

 

 

Screen Shot 2016-01-08 at 16.32.42

 

 

 

で、これをGoogleの構造化データテストツールで解析してみるとこんな感じの結果になります。

 

Screen Shot 2016-01-08 at 17.43.03

 

めでたくGoogleでも意味の分かるコンピューターに優しい(SEO対策に良さげな)サイトパーツが出来上がりましたw

 

 

 

 

 

ではお次は、こいつをカスタム投稿タイプ(嬢報部で言うポンコツブログの方)にも使えるパンくずリストに改造してみたいと思います。

 

 

まずはソースを、

 

 

まずは14行目、カテゴリーページかの条件分岐を以下に変更しています

 

 

カテゴリーページかどうかを判断するテンプレートタグはis_category()ですが、

 

今回はカスタム投稿内のカスタム分類ページかどうかを調べたいのでis_tax()を使用します。

 

 

引数に渡しているモノは、$current_type.'_cat'

 

ちなみに、is_taxの引数はカスタム分類のスラッグ名です。

 

 

じつは、$current_typeにはポンコツブログで使用しているカスタム投稿タイプのスラッグを、関数呼び出しの時点で渡しています。

 

 

また、ポンコツブログで使用しているカスタム分類のスラッグは、

 

カスタム投稿タイプのスラッグ + '_cat'という文字列になっています。

 

 

つまり、カスタム分類テンプレートphp内でこの関数を呼び出す際に、カスタム投稿タイプ名を引数としてこの “custom_breadcrumb関数” を呼び出してやれば、自動的に使用されているカスタム分類を判別してくれると言うわけです。

 

 

晴れてどのカスタム分類かを識別出来たら、以下の箇所(複数)を通常版から変更しています。

 

 

入れ子になったカテゴリーを遡って取得するために呼び出しているget_ancestorsに渡す第1引数のカテゴリーIDは、カスタム分類ではcat_IDでなくterm_IDでアクセス出来ます。

 

第2引数も、通常のカテゴリー用のcategoryから、カスタム分類名に変更しています。

 

 

また、カスタム分類(カテゴリー)ページへのリンクを取得する箇所(複数)では、

 

 

get_cat_linkget_term_linkに変更してカスタム分類ページへのリンクを取得する様にしています。

 

 

また、リンク文字列の取得(複数箇所)も通常カテゴリーと変化します。

 

 

通常カテゴリーではcat_nameでタームオブジェクト内のカテゴリー名にアクセス出来ますが、

 

カスタム分類では、nameでアクセスすることになるので変更します。

 

 

 

通常バージョンからの変更点は以上になるかと思います。

 

 

また、固定ページで呼び出すことは無いのでis_pageの分岐は消去しました。

 

 

 

最後に、関数呼び出しの実例になります。

 

 

通常版は、

 

 

のみ、非常に簡素ですが、デフォルトの投稿タイプでしか機能しません。

 

 

次に、お好みのカスタム投稿タイプで使えるバージョン

 

 

引数に、作成した投稿タイプのスラッグを渡して下さい。

 

ポンコツブログでは使用しているカスタム分類名はponkoshi_catなので、ponkoshiと言う文字列を渡すと、内部でカスタムカテゴリー名=ponkoshi_cat で処理を始めます。

 

 

 

以上で、めでたくコンピューターに優しい&カスタム投稿タイプにも優しいパンくずリストが出来上がりました。

 

 

 

 

さあ、次回はちゃんとエロ記事を書こうと思いますw

 

 


3 comments to this article

  1. SEXプレデターXYZちゃん

    on 2016/1/8 at 7:41 PM - 返信

    くずがパンくずリストなんて作ってんじゃねーよ。

    XYZにしてー♡

    ってゆおーと思ったけど

    よく見たらアルバトロスには、デフォルトで付いてた(笑)

    • ポンコシ

      on 2016/1/9 at 9:17 AM - 返信

      今のところ同じ現象が見えんので放置しときます(・∀・)キリッ

コメントを残す