wordpressのブログが陸の孤島すぎるので「はてな」のスターを実装してみた




wordpressでこのブログを立ち上げて半年近くが経過しました。

はっきり言ってアクセスは

クソ雑魚ナメクジ

です。

個人的な愚痴ブログといえど、アクセス数が少ないとやっぱやる気とかさ、モチベーションとかそういうのがさ、続かなくなるわけですよ。

wordpressで独自ドメイン取って自力でやっていくっていうのはもう完全に陸の孤島状態で、唯一、力になってくれるのはGoogle先生のみ。

けどGoogle先生はとてもクール非情リアリストで、役に立たないやつ(記事)は一切仲間と認めてくれないので新しい友達(読者)に紹介(検索結果に出したり)してくれなくなる。

それに比べて「はてな」は羨ましい限り。

「なんでこんな記事がブクマされまくってスターいっぱい付いてんの」って八つ当たりまでしたくなります。

あそこはニュースサイトやランキングサイトじゃないんですよ。

ソーシャル

です。

インスタが写真で、ツイッターが短文で、とやってるものが単にブックマークとブログになっているだけで、ソーシャルの馴れ合いゆえの相乗効果でアクセスがハネ上がるわけで。

「3カ月で10万PV達成しました!」とか言ってるブログ!
サーバ借りてwordpressで新規ドメインのブログ立ち上げてはてなとかソーシャルの資産引き継がず誰にも拡散せずGoogle検索一本でやってみろ! ぜってームリだかんな!
【追記】
侮ってました。すいません。
僕がコンサルしたブログが3カ月で10万PV行けそうな感じがしてきました。

残念ながらこのブログの話ではありませんよ。 僕はwebの総合クリエイターのようなものなので、ページ作ったりプログラム書いたりバナー作ったり...

【追記ここまで】

という愚痴をぶちまけたところで、ちょっとでもソーシャルのおこぼれを貰えないかなぁというゲスな動機でwordpressのブログにはてなスター(hatena Star)を付けてみました。

みんな!押してね!

※この記事ではwordpressのテンプレートを修正します。
若干のhtmlやjavascriptの知識があれば問題ありませんが、皆無の場合は ftp などで書き換えるファイルを予めダウンロードして保管しておきましょう。

※ミスがあったらすいません。とりあえず僕のとこでは動いてるので大丈夫かな。

※僕ははてな民ではないのでスターの使い方とかよく知りません。今回初めてスターのボタンをクリックしたほどの無知っぷりです。




はてなのアカウントを取る

いちおうはてなのアカウントは持っていたけど、仕様を調べたらIDの紐づけから身バレの可能性が超々高かったので過去のアカウントは捨てて新しくアカウントを取りました。

ちなみにはてなのログアウト方法。これ公式ページのどこに書いてあるんだよっていうくらいわかりにくい。

https://www.hatena.ne.jp/logout

ここにアクセスするだけで一発ログアウトされる。

アカウントを取得したら

はてなスター

へアクセスする。


「ようこそ、ユーザー名さん」という部分がリンクになっているのでクリック。

はてなスターに外部ブログを登録する


いきなりブログ登録の画面になるのでブログのURLを入力する。
httpsならそれも含めて。


トークンコードの含まれたjavascriptが発行されるのでコピーする。

wordpressにはてなスターを実装する

wordpressの

外観 → テーマの編集

をクリック。

右サイドに表示されているテーマの構成パーツから

header.php

とか

header-insert.php

みたいなやつを探してクリック。これはwordpressのテンプレートによって異なる。

左のメインウインドウにコードが表示されるので、その中にさっきコピーしたjavascriptをペーストする。
この時、あなたのブログがhttpsなら、はてなが発行したjavascriptの中のhttpの記述をhttpsに修正すること

続いてそのすぐ下に、

http://developer.hatena.ne.jp/ja/documents/star/misc/hatenastarjs

こちらのはてな公式のドキュメントにあるスクリプトをコピーして貼り付ける。

<script type="text/javascript" src="http://s.hatena.ne.jp/js/HatenaStar.js"></script>
<script type="text/javascript">
Hatena.Star.SiteConfig = {
  entryNodes: {
    'div.section': {
      uri: 'h3 a',
      title: 'h3',
      container: 'h3'
    }
  }
};
</script>

こういうコード。

が、このままのコードだとwordpressのテンプレートによってはまったく動作しません。

このjavascriptは entryNodes で指定されたhtmlタグに対してはてなスターを付加させるという意味になっている。

上記の例だと

<div class="section">
  <h3><a href="link">記事タイトル</a></h3>
</div>

と記述された部分の中でh3タグを使用してリンクが設定されている部分にスターが付くという意味になっている。
この部分をあなたのブログで有効になるように修正します。

このブログのテンプレートでは記事一覧のページではひとつの記事のパーツがentry-card-contentというクラス名になっていて記事タイトルがh2タグを利用しているので、

'div.entry-card-content': {
uri: 'h2 a',
title: 'h2',
container: 'h2'

と書き換える。


ばっちりですね。
ちゃんと動作するか自分でクリック、自分のはてなスターのページでスター一覧をチェック。


問題なし。

次は個別の投稿ページにスターを付けます。

wordpressの多くのテンプレートが、個別の投稿ページの記事タイトルにリンクが設定されていない。


このブログで使用しているテンプレートの記事タイトルに設定されているクラス名はentry-title。
やはり記事タイトル自体にはリンクが設定されていなくてただのテキストになっている。
このままだとスターが付かないのでテンプレートを修正します。

投稿ページのテンプレートは先ほどと同じく

外観 → テーマの編集

をクリック。

右サイドに表示されているテーマの構成パーツから

content.php

とか

entry-body.php

みたいなやつを探してクリック、左のメインウインドウにコードが表示される。

このブログ(Simplicity2)のテンプレートだとentry-body.phpの中に


このような記述がある。これが記事タイトルを出力している部分。


このように書き換える。
元々は「投稿ページ以外だったらリンクを付ける」みたいな処理が入っているが、今回は問答無用でリンクを付けるのでこのようにすっきりした一文になる。


無事、投稿ページの記事タイトルにリンクが付きました。

けどこのままじゃはてなスターが付いていないので、次はこれにはてなスターを付ける。

もう一度、最初の方でjavascriptを追加した

header.php

とか

header-insert.php

というファイルを開く。

<script type="text/javascript" src="https://s.hatena.ne.jp/js/HatenaStar.js"></script>
<script type="text/javascript">
Hatena.Star.Token = 'あなたのトークンコード';
</script>
<script type="text/javascript">
Hatena.Star.SiteConfig = {
  entryNodes: {
    'div.entry-card-content': {
      uri: 'h2 a',
      title: 'h2',
      container: 'h2'
    },
    'article.article': [
    { uri: 'h1 a', title: 'h1', container: 'h1' },
    { uri: 'h1 a', title: 'h1', container: 'div.sns-buttons' }
    ]
  }
};
</script>

試行錯誤するハメになったものの、結局上記のようになった。
トークンコードは自分のを入れてください。

このブログのテンプレート(Simplicity2)では記事全体がarticleタグに入っているので、そのarticleタグ内のh1タグ(記事タイトルに使用されている)に対してスターを付けるようにしました。

当然、記事を書くときにh1タグを使わないように注意。

また、文末にもAddスターのボタンを設置するために文末のソーシャルタグのコンテナの後ろにもAddスターボタンが付くようにしてあります。
div.sns-buttons
の部分を自分のブログに合わせて修正してください。


動作OK。
10分くらいで実装できるだろうとタカをくくってたら1時間もかかってしまった。

半分くらいはキャプチャしたり記事書いてた時間ですが。

あとはcssをいじって見栄えを修正して完了。

果たしてこれでアクセスアップにつながるのか。しばらく実験ですね。
けど、はてブのボタンは最初から置いてたけどまったく無反応だったしこれもあんまり期待できなさそう。

はてなの「読者になる」ボタンも実装しようかと調べてみたら、あれって「はてな内に作ったブログ限定」の機能で、wordpressに設置した場合ははてなでブログ作っておいてそこからのリダイレクトでやりくりするみたいな抜け道しかないですね。

まぁそういうことで、このブログは愚痴&実験用なのでそんなにアクセス集める必要はないんですがせめて月間1万PVくらいはないとクリック率とかそういう母数の必要なテストができないんですよ。
なので当面はめざせ月間1万PV!ですね。




シェアする

  • このエントリーをはてなブックマークに追加
  •  

フォローする

ランキングに参加しています。
この記事が役に立ったらぜひクリックお願いします。
ブログランキング・にほんブログ村へ