まとめ

WordPress JINの個別記事にはてなスターを設置する方法

更新日:

読了時間: 約417

はてなスター

一時期、私は「はてなブログ」を使ってブログを運営していた時期がありました。
その際、「はてなスター」や「はてなブックマーク」を多くいただいていました。
当時の私としては、とても嬉しかったのを覚えています。
ブログ更新のモチベーションアップにもつながっていましたね。

WordPressに移ってからは、はてなスターが無い状態でのブログ運営をしばらく続けていました。
ただ、最近になってから…。
「はてなスターをWordPressに設置してみたいな!」とふと思うようになりました。

そこで、ざっと調べてみたところ…。
はてなスターは、WordPressにも設置できることを知りました!
というわけで、早速はてなスターの設置に取り組むことにしました。
若干つまづきましたが…。
何とか無事に、個別記事にはてなスターを設置することができました。

今回の記事では、WordPressを使ってブログ運営している方を対象に、個別記事にはてなスターを設置する方法について解説します。
ちなみに、私が現在使用しているテーマは「JIN」です。
お使いのテーマによって、多少設定が異なりますのであらかじめご了承ください。

はてなスターとは?

「はてなスター」というのは、はてなブログで主に使われている評価機能の一種です。
ブログの個別記事本文の下あたりに設置されているはてなスターのボタンを押すと…。
クリックしたはてなユーザーのアイコンが付いたはてなスターが付与されます。
基本的には、「記事を読みました!」「良いね!」「応援しています!」などといった、メッセージを伝える手段の一つとして使われている印象があります。

私の場合は、はてなブログの記事を読んだ時に、はてなスターが表示されていたら…。
とりあえず、「記事を読みました!」というメッセージの意味合いで、はてなスターをクリックしています。

はてなブログ時代の時は、はてなスターを付けてくれた人のブログに訪問していました。
いわゆる「訪問返し」というやつですね。
色々な記事を読むことができるので、結構楽しいですよ。
人数が多くなってくると、全てのブログに訪問するのは大変になりますけども(笑)。
それでも、極力多くのブログに訪問返しはしていました。

ブログへの訪問返しがきっかけで交流が生まれることもあります。
リピーターになってくれたり、コメントを付けてくれたりしてくれます。
本当にありがたいですよね〜。

はてなスターで、ブログへのアクセスアップが期待できるかも?

WordPressというのは、よく「陸の孤島」と呼ばれています。
ブログを始めてからしばらくの間はアクセスが本当に少ないのですよ…。
モチベーションを維持するのがなかなか大変なのですよね。

もし、WordPressで運営している、このブログにはてなスターを設置したら…。
他のブロガーとの交流が増えて、アクセスアップが期待できるかもしれませんよね!?

いわば、陸の孤島に橋をかけるようなイメージでしょうか?
はてなスターを経由して、他の島(ブログ)との交流がしやすくなる。
はてなスターは足跡代わりにもなりますので、どんなブロガーが訪問したのかも把握しやすいです。

こうして考えてみると…。
WordPressのブログに、はてなスターを設置することのメリットって結構あるんじゃないかと思うのですよね。

WordPressテーマJINの個別記事に、はてなスターを設置する方法

それでは、いよいよ本題です。
WordPressのブログの個別記事に、はてなスターを設定する方法について解説していきます。
ここでは、テーマが「JIN」であることを前提にしていますが…。
他のテーマでも、基本的な設置方法は変わりませんので安心して読み進めていってください。

はてなスターのアカウントを作成する

まずは、何はともあれ、はてなスターのアカウントを作成しなければなりませんね。
とは言っても、この記事を読んでいるということは、既にはてなスターを過去に利用している方が多いかと思います。
もし、はてなスター(はてな)のアカウントが無い方は、以下のリンク先で新規作成してください。
アカウントが既にある方も、はてなスターのページで作業をしますので移動してください。

はてなスター

はてなスターのコードを取得する

ログインしている状態ではてなスターのページに行くと、以下のような画面になります。
このうち、自分の名前のリンク部分をクリックします。

はてなスター

自分がはてなスターを利用しているサービス(ブログ)の一覧が表示されますので、下の方にスクロールしていきます。
そして、「外部のブログを登録する」の部分に、あなたのブログのURLを入力して「追加」ボタンを押します。
すると、あなたの外部ブログ(WordPress)が登録されます。

ブログの登録が終わると、ブログ欄のところにJavaScriptのコードが表示されていると思います。
それをコピーしておいてください。

<script type="text/javascript" src="http://s.hatena.ne.jp/js/HatenaStar.js"></script>
<script type="text/javascript">
Hatena.Star.Token = '************************';
</script>

ヘッダーにコードを配置する

さて、ここからちょっとしたWordPressの編集作業を行います。
JINのテーマを使って入る方は、管理画面のメニューから「HTMLタグ設定」のページに移動してください。
そして、さきほどコピーしたコードを「head内」のテキストエリアに追記しておいてください。

JIN以外のテーマを利用している方は、header.phpやheader-insert.phpなどのヘッダーを書き出しているファイルを見つけてください。
そして、さきほどコピーしたコードをそのファイルに追記してください。

single.phpの編集

これで終わりかと思いきや、実はまだやることがあります。
次は、single.phpの編集です。

お使いのテーマのsingle.phpの編集画面を表示させてください。
「外観」→「テーマエディタ」と進むと、お使いのテーマが選択されます。
その右側にあるファイル一覧からsingle.phpを探してクリックしてください。

テーマによっては、もしかするとsingle.phpではないかもしれません。
個別記事を出力しているファイルを見つけてそれを開いてください。

single.phpのコードをよく見て、個別記事のタイトルを出力している部分を探します。
大抵は、h1タグになっているかと思います。
このh1タグの部分に、aタグを追加します。
aタグのリンク先は、個別記事のURLにしておきます。

JINの場合、編集前は以下のようなコードがあるはずです。

<h1 class="cps-post-title entry-title" itemprop="headline"><?php esc_html(the_title()); ?></h1>

編集後は以下のような感じです。
個別記事のタイトルをaタグで囲みます。
個別記事のURLは、the_permalink()で取得します。

<h1 class="cps-post-title entry-title" itemprop="headline"><a href="<?php the_permalink(); ?>"><?php esc_html(the_title()); ?></a></h1>

他のテーマの方も同様にして、個別記事のタイトルを出力している部分を見つけてください。
そして、タイトルをaタグで囲んでください。

続いて、single.phpを眺めます。
個別記事を囲っているタグと、はてなスターを表示したい位置を見つけます。
その後、その位置の直前にあるタグ(divなど)とクラス名を覚えておいてください。

JINを使っていて、私のブログと同じ位置(シェアボタンの下)に設置したい場合。
その場合は、「article」タグと「div.sns」(クラス名snsのdivタグ)となります。

はてなスターのコードの追記

最後に、さきほどヘッダーに貼り付けたはてなスターのコードを編集します。
JINのテーマであれば、以下のようにコードを追記します。

Hatena.Star.SiteConfig = {
  entryNodes: {
    'article': {
      uri: 'h1 a',
      title: 'h1',
      container: 'div.sns'
    }
  }
};

JINのテーマ以外の方は…。
articleの部分を、個別記事を囲っているタグにします。
containerの部分を、さきほど見つけたはてなスターを設置したい場所のタグとします。

ここまでで作業は完了です。
設定が終わったら保存するのをお忘れなく。

動作のテスト

そして、いよいよテストです。
適当なブログ記事を表示させてみてください。
意図した場所に、はてなスターが設置されていれば成功です!
もしうまく表示できない場合には、おそらく設定が間違っていますので再度確認してみてください。

はてなスター

まとめ

今回の記事では、WordPressのブログに、はてなスターを設置する方法について解説してみました。
JINのテーマを中心に説明しましたが…。
他のテーマでも、上記の手順を踏めば設置可能です。

WordPressでも、はてなスターを設置したいと考えていた方は…。
ぜひこの機会に実装してみてはいかがでしょうか?

-まとめ
-, , , ,

Copyright© スズシンラボ , 2019 All Rights Reserved.