MENU
HOME
TOP

プラグインより簡単!この記事が気に入ったらいいね!の実装方法

この記事が気に入ったらいいね!とかプラグインで事足りますけど、今回はプラグインなしの実装方法の紹介です。

WordPressの投稿下の方にあるやつですね。

最近WhiteTigerっていうWordPressテーマを配布してるんですけどね、最近「この記事が気に入ったらいいね!」が無くなってる事に気づいたんです。

Facebook使わないから気付かなかった。(いいわけ

えっといつの日か忘れましたが参考にしたネタ元はこちらだったと思います。

参考 FacebookページいいねやTwitterフォロワーが倍増!バイラルメディア風オリジナルSNSボタンの設置方法【WordPress】 | ままはっく

んで、まなしばさんの紹介してるソースコードをバッサリ必要箇所だけとってスタイリングしたものを紹介します。

完成系なイメージ

とりあえず、、完成形なイメージです。

テンプレートの作成

あとでsingle.phpに呼び出すので「like_follow_box.php」というファイル名で以下のソースコードをコピペしてテーマのディレクトリにアップロードしてください。

  • ファイルを作るのも面倒であればsingle.phpの直書きしても大丈夫です。
ソースコードは、これだけです。
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = 'https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v3.1';
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="like_follow__box">
  <div class="like_follow__Thumb" style="background-image: url('<?php echo wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>')"></div> 
  <div class="like_follow__panel">
    <p class="like_follow__title">この記事が気に入ったら<br>いいね!&フォローしよう</p>
    <div class="like_follow__like_Button">
      <div class="fb-like" data-href="FacebookページかサイトのURL" data-layout="button" data-action="like" data-size="small" data-show-faces="false" data-share="false"></div>
    </div>
    <div class="like_follow__follow_Button">
      <a href="https://twitter.com/ツイッターアカウント?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="false">Follow @ツイッターアカウント</a>
      <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
    </div>
    <p class="like_follow__text">最新情報をお届けします</p>
  </div> 
</div>

で、以下を探して自分のツイッターアカウントを入力してください。(2箇所

<a href="https://twitter.com/ツイッターアカウント?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="false">Follow @ツイッターアカウント</a>

以下の部分にはFacebookページかサイトのURLを入れてください。

<div class="fb-like" data-href="FacebookページかサイトのURL" data-layout="button" data-action="like" data-size="small" data-show-faces="false" data-share="false"></div>
  • 通常はFacebookページのURLですが僕みたいにFacebook使いたくない派はサイトのURLを入れてください。

スタイルを整える

仕上げにスタイルの追記です。以下をstyle.cssに追加してください。

/*この記事が気に入ったら、いいね!&follow 共通
---------------------------------*/
.like_follow__box {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 100%;
    background: #26213a;
    color: #fff;
}
.like_follow__Thumb {
    background-position: center;
    background-size: cover;
}
.like_follow__panel {
    text-align: center;
}
/*この記事が気に入ったら、いいね!&follow スマホ
---------------------------------*/
@media (max-width:767px) {
    .like_follow__Thumb {
        width: 30%;
    }
    .like_follow__panel {
        vertical-align: middle;
        width: 70%;
        font-size: 80%;
    }
    .like_follow__like_Button {
        margin: .3em 0;
    }
    .like_follow__text {
        margin-top: .2em;
        font-size: 10px;
    }
}
/*この記事が気に入ったら、いいね!&follow  タブレット端末以上
---------------------------------------------------*/
@media (min-width:768px) {
    .like_follow__Thumb {
        width: 45%;
    }
    .like_follow__panel {
        vertical-align: middle;
        font-weight: bold;
        width: 55%;
        font-size: 100%;
    }
    .like_follow__title {
        font-weight: bold;
    }
    .like_follow__like_Button {
        margin: 12px 0;
    }
    .like_follow__text {
        margin-top: .9em;
        font-size: 12px;
    }
}
けんじ

ブレイクポイントとかスタイルは好みに変更してくださいね。

テンプレートの読み込み

で、表示したいところにテンプレート「like_follow_box.php」を「single.php」で読み込みます。

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

おわり

おしまい。

動作の確認といきたかったのですが、すぐ下にあるのでやめておきます。

それでは、ぜひご活用ください(`・ω・´)ゞ

スポンサーリンク

この記事をかいた人

閲覧どうもありがとうございます。当サイトキャンディースタイルとWordPressテーマのWhite Tigerというサイトを運営しています。まだまだ初心者なので、お見苦しいとこがありますがどうぞよろしく。

コメントを閉じる

コメントを残す

メールアドレスが公開される事はございませんが*の付いている欄は必須項目となります。
なおコメントの反映にお時間がかかる場合があります事をご了承ください。


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください