0

はてなブックマークボタンを表示する

はてなブックマークボタンを表示する

 

はてなブックマークボタンとは、はてなブックマークが提供しているソーシャル用のボタンになります。このボタンを利用することでサイト閲覧者へのブックマークを促すひとつとなり、ブックマークをしてくれたユーザーがサイトを訪れることなく、サイトをチェックできるようにしてくれるものになります。「Facebook」や「Twitter」などもありますが、今回は「はてなブックマーク」に絞って記載しておきます。

表示する場所として、「投稿ページ」と「特定のカテゴリーページ」に表示してみます。

 

1.はてなブックマークボタンのコードを作成する

はてなブックマークボタン

b-hatena-img1

1-1.ボタンのタイプを選びます

今回は左の小さなアイコンを選択ししておきます。

 

1-2.あなたのサイトURLを入力します。

後ほど変更も出来ますが、サイトのURLを入力しておきましょう。

 

1-3.ページのタイトル(サイト名)を入力します。

後ほど変更も出来ますが、サイト名を入力しておきましょう。

 

1-4.右側にコードが表示されます。

表示されたコードを、テキストエディタ貼り付けます。

 

2.social-button.phpを作成

先ほどのコードを修正していきます。

 こちらの、1行目の<a>タグ内のhrefの値、

 の部分を、下記のように変更します。

  •  コードのサイトURLの部分を「<?php the_permalink(); ?>」に修正
  • ページタイトル部分を「<?php the_title(); ?>」に修正
  • 上下を<ul>タグと<li>タグで囲む

 

そうすると、下記のような全体のコードになります。

 これを「social-button.php」として保存します。

 

3.content.phpを修正する

表示したいページの先頭と末尾にそれぞれボタンを表示していきます。

 

 4.表示を確認する

確認してみると、記事の先頭と末尾に、ボタンが表示されているかと思います。

b-hatena-img2

 

※補足

今回は「投稿ページ」と「カテゴリーIDが’column’」のページに特定しましたが、複数のカテゴリーに表示する場合は、in_categoryのパラメータを以下のようにします。

 以上になります。

 




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

mororeco > WordPress > はてなブックマークボタンを表示する