WordPress, ブログ

facebookでシェア、twitterでツイートなどいわゆるソーシャルボタンというやつは何種類かありますが、Googleなどの検索エンジンからノーフォロータグがつかないリンクとして有名なのがはてなブックマークです。

はてなブックマークでのブックマーク数がSEOにも効果的という話を聞いて自分のサイトにも導入してみようと思います。

 

はてなブックマークボタンの生成

はてなブックマークボタンの生成はこちらのページで発行できます。

記事のURLとタイトルを入力すると記事毎にユニークのURLを発行してくれるのですが、毎回入力するのは面倒くさいです。

<a href="http://b.hatena.ne.jp/entry/&lt;?php the_permalink(); ?&gt;" data-hatena-bookmark-layout="standard-balloon" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加">
<img src="http://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a>
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

そこで、WordPressのテンプレートタグの登場です！

記事のURL部分には、

<?php the_permalink(); ?>

記事のタイトル部分には、

<?php the_title(); ?>

と挿入すれば、その記事のユニークのURLとタイトルを生成してくれるソースとなります。完成系はこちら↓↓↓

<a href="http://b.hatena.ne.jp/entry/&lt;?php the_permalink(); ?&gt;" data-hatena-bookmark-title="&lt;?php the_title(); ?&gt;" data-hatena-bookmark-layout="standard-balloon" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加">
<img src="http://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a>
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

 

WordPressテンプレートへの埋め込み

上記で生成したソースはPHPコードなので、毎回記事に埋め込んでも文字化けしてしまいます（プラグインを導入すれば別）。

そこでテンプレートタグに埋め込んでいきます。

埋め込むテンプレートは、ベースとするテンプレートによって違いますが、私の場合は「Twenty Ten」をベースにしているので、「loop-single.php」というテンプレートをいじります。

どのテンプレートでも、挿入場所はほぼ同じだと思います。

テンプレート中に、

<?php the_content(); ?>

という記述を見つけたら、これが投稿画面の本文フィードに入力した部分の表示場所なので、その前か後ろにコードを貼付ければ問題ないと思います。

 

設置イメージはこちです
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

古い記事へ新しい記事へ