記事カード「続きを読む」に「はてなブックマーク」と「Pocket」ボタンをつけてSNS拡散を図る　～Luxeritasカスタマイズ

2017-03-152017-03-22Luxeritas, WordPressカスタマイズ

本記事では、トップやカテゴリページの記事カードの「続きを読む」を「はてなブックマーク」と「Pocket」付の物に差し替えるカスタマイズを紹介します。
イメージは冒頭の画像の通り。
もしかしたら導線を太くする効果があるのではないかと考えています。
設置は超簡単ですので、よろしければ記事を読んで試していただければ。

記事カードに「はてブ」と「Pocket」ボタンを置こうと思った理由

経験上、はてなブックマークとPocketの二つは記事を読む前に押される機会のあるボタンだと思います。
そうであれば記事カードにもボタンを置けば導線を太くする効果が見込めるのではないかと。
記事上のボタンとほとんど変わらない。
それをリストから片っ端に入れていけるわけですので。
特にサイドバーのない（あるいは使われることのない）モバイルでは力を発揮するんじゃないかなあと。

……推測にすぎませんが。

ただPocketボタンは間違いなく訪問者にとって便利でしょう。
まさに「後で読む」なので。
SEO効果があるのかどうかは知りませんが、ユーザーライクなのはいいことじゃないかと思います。

また「小説家になろう」でやってきた経験から言うと、「応援したくても方法がわからない」という方もいます。
「推す」と書いておけば、はてなの拡散効果を知らなくても投票ボタンにも見えますし。
それでいて押しつけがましくない感じに仕上がったと自分では思います。

前置きはこの辺りにして、以下に方法を記します。

方法

子テーマにlist.phpをコピーします。

以下のコードを削除します。

<p class="read-more"><?php
 if( isset( $luxe['read_more_text'] ) ) {
?><a href="<?php the_permalink(); ?>" class="read-more-link" itemprop="url"><?php echo ( isset( $luxe['read_more_short_title'] ) ) ? read_more_title_add( $luxe['read_more_text'] ) : $luxe['read_more_text']; // 記事を読むリンク ?></a><?php
 }
?></p>

次のコードと差し替えます。

<div class="snsf-w">
<ul class="snsfb">
<!--hatena-->
<li class="hatena"><a href="//b.hatena.ne.jp/add?mode=confirm&amp;url=<?php the_permalink(); ?>&amp;title=<?php the_title; ?>" title="Bookmark at Hatena" target="_blank" rel="nofollow"><i class="fa fa-hatena">B!</i>&nbsp;推す</a></li>
<!--pocket-->
<li class="pocket"><a href="//getpocket.com/edit?url=<?php the_permalink(); ?>" title="Pocket: Read it Later" target="_blank" rel="nofollow"><i class="fa fa-get-pocket">&nbsp;</i>後で</a></li>
<li class="tuzuki"><a href="<?php the_permalink() ?>">読む</a>
</li>
</ul>
</div>

ボタンの文字はお好みで。
あまり長い文字を入れるとモバイルで表示が崩れます。

「読む」の前は、わざとアイコンを入れてません。
その方が他二つのボタンに視線誘導できると考えたので。
お好みでアイコンを加えて下さい。fontawesomeには本マークのアイコンもあります。

CSSは不要です。
SNSシェアボタンの設定を「可変タイプ」の「カラー」か「ホワイト」を指定してください。

まとめ

はてブ増えるといいわねえ……