記事カード「続きを読む」に「はてなブックマーク」と「Pocket」ボタンをつけてSNS拡散を図る ～Luxeritasカスタマイズ
本記事では、トップやカテゴリページの記事カードの「続きを読む」を「はてなブックマーク」と「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&url=<?php the_permalink(); ?>&title=<?php the_title; ?>" title="Bookmark at Hatena" target="_blank" rel="nofollow"><i class="fa fa-hatena">B!</i> 推す</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"> </i>後で</a></li> <li class="tuzuki"><a href="<?php the_permalink() ?>">読む</a> </li> </ul> </div>
ボタンの文字はお好みで。
あまり長い文字を入れるとモバイルで表示が崩れます。
「読む」の前は、わざとアイコンを入れてません。
その方が他二つのボタンに視線誘導できると考えたので。
お好みでアイコンを加えて下さい。fontawesomeには本マークのアイコンもあります。
CSSは不要です。
SNSシェアボタンの設定を「可変タイプ」の「カラー」か「ホワイト」を指定してください。
まとめ
Author：天満川 鈴
小説家になりたい駄文書き、元公安調査庁職員。国家一種経済職→入庁。イスラム過激派などの国際テロ、北朝鮮を担当。
朝鮮総聯へのスパイ工作を描いた小説「キノコ煮込みに秘密のスパイスを 」は週刊誌で紹介され、さらに文壇から「江戸川乱歩賞獲れた」と絶賛。素人の小説としては異例の反響を呼びました。
無料公開してますので是非読んでみてください！