WordPressに「この記事が気に入ったらいいね!しよう」を設置する方法

2017.12.13 WordPress
WordPressに「この記事が気に入ったらいいね!しよう」を設置する方法

WordPressブログの記事下に、「この記事が気に入ったらいいね!しよう」みたいな形でFacebookいいね!ボタンやTwitterフォローボタンを表示するボックスが設置されているのをよく見かけますよね。

SNSでの拡散を狙うバイラルメディアでは、もはや必須とも言える機能かもしれません。この記事が気に入ったらいいねというプラグインを使えば簡単に設置できますが、せっかく自作してみたので、今回はそのメモです。

今回作成した「この記事が気に入ったらいいね!しよう」ボックスの仕様をまとめると以下のような感じです。

  1. ボックスの背景にはその記事のサムネイル画像を表示
  2. サムネイルがなければ代替画像を表示
  3. FBページのいいね!ボタンとTwitterアカウントのフォローボタンを設置
  4. 各SNSで取得できるコードをそのまま貼り付ければ使えるように
  5. レスポンシブ設計(480pxと768pxでスタイル切替)

「この記事が気に入ったらいいね!しよう」のソース

テーマ内の設置したい箇所に下記のソースを追記します。

<div class="follow">
<div class="thumb" style="background-image:url(<?php
$image_id = get_post_thumbnail_id();
$image_url = wp_get_attachment_image_src($image_id, true);
?>
<?php if ( has_post_thumbnail() ): ?>
<?php echo $image_url[0]; ?>
<?php else: ?>
<?php bloginfo('template_url'); ?>/images/no_image.png
<?php endif; ?>);"></div>
<div class="layer">
<div class="follow_inner">
<ul class="follow_btns">
<li>
<!-- ここにFacebookいいね!ボタンのコード -->
</li>
<li>
<!-- ここにTwitterフォローボタンのコード -->
</li>
</ul><!-- .follow_btns -->
<div class="msg">
<p>この記事を気に入ったら<br />いいね!&amp;フォローしよう<span>最新情報をお届けします</span></p>
</div><!-- .msg -->
</div><!-- .follow_inner -->
</div>
</div><!-- .follow -->

上記ソースのスタイルを指定するCSSはこんな感じ。ブレイクポイントはお好みで調整してください。

/* この記事が気に入ったらいいね!しよう
===============================================*/
.follow {
position: relative;
width: 100%;
padding-top: 56.25%;
}
.follow .thumb {
position: absolute;
top: 0;
right: 0;
width: 100% !important;
height: 100% !important;
background-size: cover;
}
.follow .layer {
position: absolute;
top: 0;
right: 0;
width: 100% !important;
height: 100% !important;
background: -moz-linear-gradient(top,  rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.75) 30%, rgba(0,0,0,0.9) 60%, rgba(0,0,0,0.9) 100%);
background: -webkit-linear-gradient(top,  rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.75) 30%,rgba(0,0,0,0.9) 60%,rgba(0,0,0,0.9) 100%);
background: linear-gradient(to bottom,  rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.75) 30%,rgba(0,0,0,0.9) 60%,rgba(0,0,0,0.9) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99000000', endColorstr='#e6000000',GradientType=0 );
}
.follow .follow_inner {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.follow .follow_inner ul {
width: 100%;
text-align: center;
}
.follow .follow_inner ul li {
display: inline-block;
vertical-align: top;
margin: 0 0.2em;
}
.follow .follow_inner .msg {
color: #fff;
text-align: center;
line-height: 1.5;
font-weight: bold;
}
.follow .follow_inner .msg span {
display: block;
text-align: center;
font-weight: normal;
}
@media (min-width: 769px) {
.follow {
margin-bottom: 20px;
}
.follow .follow_inner ul {
margin-bottom: 20px;
}
.follow .follow_inner .msg {
font-size: 150%;
}
.follow .follow_inner .msg span {
font-size: 58.33%;
margin-top: 10px;
}
}
@media (min-width: 481px) and (max-width: 768px) {
.follow .follow_inner ul {
margin-bottom: 10px;
}
.follow .follow_inner .msg {
font-size: 131.25%;
}
.follow .follow_inner .msg span {
font-size: 66.66%;
margin-top: 6px;
}
}
@media (max-width: 480px) {
.follow {
margin-bottom: 20px;
}
.follow .follow_inner ul {
margin-bottom: 0;
}
.follow .follow_inner .msg {
font-size: 100%;
}
.follow .follow_inner .msg span {
font-size: 75%;
margin-top: 6px;
}
}

get_post_thumbnail_idとwp_get_attachment_image_src

get_post_thumbnail_idというテンプレートタグとwp_get_attachment_image_srcという関数を使用しています。

get_post_thumbnail_idで、その投稿のサムネイル(アイキャッチ画像)のIDを取得し、wp_get_attachment_image_srcに渡しています。

そしてwp_get_attachment_image_srcの戻り値で[0](=画像URL)を取得して、インラインでボックス背景に画像を表示という流れです。

各SNSボタンについては、SNSで取得できるコードをそのまま貼り付ける形にしています。

ここではFBページにいいね!するボタンとTwitterアカウントのフォローボタンを設置していますが、お好みで他のボタンを設置することも可能です(もちろん他のSNSのボタンも設置できます)。

■参考ページ

柴田竹思

柴田竹思

ベトナム在住Web系フリーランス。有名企業から個人事業まで、いろんなウェブサイトを制作してます。これまで400弱くらい作りました。一年中WordPressばっかりいじってます。

プロフィールはこちら