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系フリーランス。最近は育児6:仕事4のバランスで生活してます。これでもかってくらい奥さんの尻に敷かれてる座布団系男子です。

プロフィールはこちら