記事カードの「続きを読む」に「はてなブックマーク」と「Pocket」ボタンをつける ~Luxeritasカスタマイズ(ver2.0以降対応)

この記事は約10分で読めます。

2017-03-15Luxeritas, 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>

次の記述を加えます。

<?php get_template_part('cardsns'); ?>

cardsns.phpという名前でファイルを作り、次のコードを記入。子テーマにアップします。

<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シェアボタンの設定を「可変タイプ」の「カラー」か「ホワイト」を指定してください。

カード型(Luxeritas2.0以降)

list-excerpt-card.phpファイルを子テーマにコピーします。

最後にある以下のコード。

<?php
 if( !isset( $luxe['break_excerpt_card'] ) ) {
 echo apply_filters( 'thk_excerpt', $luxe['excerpt_length_card'], '' );
 }
 else {
 echo apply_filters( 'thk_excerpt_no_break', $luxe['excerpt_length_card'], '' );
 }
?>
</div></div>
<?php
}
// 記事を読むリンク
if( !empty( $luxe['read_more_text_card'] ) ) {
 $length = isset( $luxe['short_title_length_card'] ) ? $luxe['short_title_length_card'] : 8;
?>
<p class="read-more"><a href="<?php the_permalink(); ?>" class="read-more-link" itemprop="url"><?php echo ( isset( $luxe['read_more_short_title_card'] ) ) ? read_more_title_add( $luxe['read_more_text_card'], $length ) : $luxe['read_more_text_card']; ?></a></p>
<?php
}
次の通り変更します。
<?php
 if( !isset( $luxe['break_excerpt_card'] ) ) {
 echo apply_filters( 'thk_excerpt', $luxe['excerpt_length_card'], '' );
 }
 else {
 echo apply_filters( 'thk_excerpt_no_break', $luxe['excerpt_length_card'], '' );
 }
}
?>
</div></div>

<div class="list-sns">
<?php
 get_template_part('cardsns');
?>
</div>

cardsns.phpという名前でファイルを作り、次のコードを記入。子テーマにアップします。

<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には本マークのアイコンもあります。

SNSシェアボタンの設定を「可変タイプ」の「カラー」か「ホワイト」を指定してください。
cssに次の記述を加えます。

.list-sns{
 width:100%;
 max-width:470px;
 float:right;
 }

タイル型(Luxeritas2.0以降)

list-excerpt-card.phpファイルを子テーマにコピーします。

最後にある以下のコード。

<?php
 if( !isset( $luxe['break_excerpt_tile'] ) ) {
 echo apply_filters( 'thk_excerpt', $luxe['excerpt_length_tile'], '' );
 }
 else {
 echo apply_filters( 'thk_excerpt_no_break', $luxe['excerpt_length_tile'], '' );
 }
?>
</div></div>
<?php
}
// 記事を読むリンク
if( !empty( $luxe['read_more_text_tile'] ) ) {
 $length = isset( $luxe['short_title_length_tile'] ) ? $luxe['short_title_length_tile'] : 8;
?>
<p class="read-more"><a href="<?php the_permalink(); ?>" class="read-more-link" itemprop="url"><?php echo ( isset( $luxe['read_more_short_title_tile'] ) ) ? read_more_title_add( $luxe['read_more_text_tile'], $length ) : $luxe['read_more_text_tile']; ?></a></p>
<?php
}

次の通り変更します。

<?php
 if( !isset( $luxe['break_excerpt_tile'] ) ) {
 echo apply_filters( 'thk_excerpt', $luxe['excerpt_length_tile'], '' );
 }
 else {
 echo apply_filters( 'thk_excerpt_no_break', $luxe['excerpt_length_tile'], '' );
 }
}
?>
</div></div>

<div class="list-sns">
<?php
 get_template_part('cardsns');
?>
</div>

あとはカード型と同じ。
ただしcssは不要です。

まとめ

解答者の写真
はてブ増えるといいわねえ……