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のボタンも設置できます)。

■参考ページ

WordPressテーマ『HIGHLAND』公開しました

WordPressテーマ『HIGHLAND』を公開しました

このブログで紹介しているカスタマイズを、これでもかと盛り込んだ高性能なテーマになっております。商用・非商用問わず無料、是非ご利用ください。

ブログ集客メール講座登録フォーム

「売上が不安定で、月末になるといつも不安……」
「営業が苦手で新規開拓がうまくいかない……」
「Webが苦手でブログをうまく活用できない……」

個人起業家・フリーランスのあなた、こんなお悩みはありませんか?

実は僕も、独立して最初に直面したのが「集客」の壁でした。

しかし今は、1年の大半をベトナムで過ごしながら、フリーランスのWebディベロッパーとして生計を立てています。

僕がなぜ、時間・場所・人間関係に縛られずに暮らせるようになったのか?

その答えは「ブログ」にあります。

今なら、「初心者の人が成果を上げるため」のブログ集客ノウハウを、メール講座限定でお伝えします。

興味のある人は、今すぐ以下から登録【無料】を!

ブログ初心者が生き残るためのブログ集客メール講座

柴田竹思

柴田竹思

日本&ベトナム二拠点生活中のWeb系フリーランス。最近は育児6:仕事4のバランスで生活してます。これでもかってくらい奥さんの尻に敷かれてる座布団系男子です。

プロフィールはこちら