プラグイン無しでお気に入りボタンと登録したページ一覧を表示させるスニペット

14分

cookieのイラスト

SHARE

今やブログでよく見かけるSNSボタンほどではありませんが、ユーザーがそのサイトで「お気に入りページに追加」も、ユーザーファーストで便利な機能です。

いざWordPressで「お気に入り」を実際にしようと思うと、有名なFavoritesなどのプラグイン がありますが、cookieを使えばこのお気に入り機能を簡単に実装できてしまいます。

この記事は、そんなお気に入りボタンと登録したページ一覧を表示させるスニペットについて、

  • お気に入りボタンのコードと設置方法。
  • お気に入り登録ページ一覧のコードと設置方法。
  • コピペ用コードのちょっとした解説。

の内容です。

WordPressで通販系のサイトを作る時など、プラグインを使わずにお気に入り機能を追加したい方は、是非最後までご覧いただけたら嬉しいです。

かかかず
かかかず

早速デザインサンプルと併せて、コピペ用コードなど解説していきます。

実装後のデザインサンプル

お気に入りボタンと、ページ一覧のデザインサンプルです。まずは、以下をご覧ください。

お気に入りボタン

以下が、お気に入りボタンです。

何もクリックしていない状態では、「この記事をお気に入り」の表記になっていますが、クリックするとお気に入りに登録され、表示が「お気に入りに登録済み」の表記に変わります。

お気に入り登録したページ一覧

上記のお気に入りボタンをクリックして「お気に入りに登録済み」の表記になっている状態で、ブラウザを再度読み込むと、以下にお気に入り登録をしたページのリンクカードが出現します。

    お気に入りに登録されているページはありません。
かかかず
かかかず

お気に入り登録を何もしていない場合は、「お気に入りに登録されているページはありません。」と表示されます。

仕様の解説

お気に入りボタンと、ページ一覧の主な仕様は以下の通りです。

  • クリックすると、ボタンを設置しているページのIDをcookieで取得して、お気に入りに追加
  • ボタンをクリックすると、ページをリロードしてもお気に入り状態が継続
  • お気に入りしたボタンをもう一回押すと、お気に入り解除
  • 登録ページ一覧は、お気に入り登録したページを全て表示

と、ざっくり書くとこのような仕様です。

この仕様を活かして、例えば全記事ページにボタンを置いて、固定ページにお気に入りページ一覧を作ったりできたりと、色んな形で利用できます。

かかかず
かかかず

応用がきくと思うので、好きなところに使ってみてください。

設置と実装の手順

お気に入りボタンと、ページ一覧の設置手順についてです。主に5つのSTEPで設置が完了します。

jQueryとjquery.cookie.jsの記述

<head>〜</head>の中にjQuery本体を記述して、そのすぐ下に以下のjquery.cookie.js記述します。

HTML 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>

このjquery.cookie.jsを記述することで、cookieを使ってお気に入りの登録をした・しないの判別を行います。

かかかず
かかかず

まずはjQueryの準備です。

お気に入りボタンのPHPとCSSの設置

jQueryとcookieの準備が終わったら、次にお気に入りボタンの設置です。以下のPHPを表示させたい箇所に設置を行います。

お気に入り登録ボタンのPHP 

<div class="favorite_button" data-pageid="<?php the_ID(); ?>">
<button class="favorite_button_in"><i class="fas fa-star"></i><p>この記事をお気に入り</p></button>
</div>

WordPressの記事ページや、固定ページなどの投稿画面からは、PHPを記述しても出力することができません。その為、ショートコード化します。

PHPのショートコード用のファイルの作り方は、以下の記事を参考にして作り、出来たら設置をしましょう。

関連記事 プラグインなしでページ内にPHPを読み込む方法

ショートコード化して、設置ができたら以下のCSSもコピペしましょう。

お気に入り登録ボタンのCSS 

.favorite_button {
    display: block;
    text-align: center;
    position: relative;
}
button.favorite_button_in {
    display: inline-block;
    padding: 12px 28px 12px 20px;
    border: 1px solid transparent;
    box-shadow: 0 2px 4px -2px rgb(33 37 56 / 25%);
    cursor: pointer;
    border-radius: 0.45rem;
    border-color: rgb(80,80,80,0.1);
    font-size: 0.95rem;
    transition: 0.2s ease-in-out;
    background: #fcfcfc;
    font-weight: 200;
}
button.favorite_button_in p {
    display: inline-block;
    margin: 0;
}
button.favorite_button_in:hover {
    opacity: 0.8;
}
button.favorite_button_in i {
    color: #6bb6ff;
    font-size: 1.3rem;
    vertical-align: -1px;
    margin-right: 8px;
    opacity: 0.3;
}
.is-choosen .favorite_button_in {
    background: #6bb6ff;
}
.is-choosen .favorite_button_in i {
    opacity: 1;
    color: #FFFF00;
}
.is-choosen .favorite_button_in p {
    font-size: 0;
    color: #FFFF00;
    font-weight: 600;
}
.is-choosen .favorite_button_in p:before {font-size:0.95rem; content: "お気に入り登録済";}

cookie判別のjQueryの設置

ボタンの設置が完了したら、次にお気に入り登録した際に発火するjQueryの設置を行います。

以下のコードを<body>〜</body>のクロージングタグ直前に記述しましょう。

jQuery 

$(function(){
    var fav = [];
    var current_page_id = $(".favorite_button").data("pageid");//現在のページのIDを取得
 
    checked_inspect();//現在のページがお気に入り登録済みかチェック
    $(document).on('click','.favorite_button_in',function(){
      var index = fav.indexOf(current_page_id);
      if(index > -1){
        fav.splice(index, 1);
      } else {
        fav.push(current_page_id);
      }
      var serializedArr = JSON.stringify( fav );
      $.cookie("fav_item",serializedArr, { expires: 7, path: '/' });//cookieを保存
      checked_inspect();
    });
 
 
    function checked_inspect(){//現在のページがお気に入り登録されているかどうか
      fav = $.cookie("fav_item") ? JSON.parse( $.cookie("fav_item") ) : [];
      console.log(fav);
      if(fav.indexOf(current_page_id) > -1){
        $("body").addClass("is-choosen");
      } else {
        $("body").removeClass("is-choosen");
      }
    }
    });

かかかず
かかかず

ここまででお気に入り登録ボタンの設置は完了です。次に、お気に入り登録したページ一覧の出力について見ていきましょう。

登録したページ一覧のPHPとCSSの設置

ここからは、お気に入り登録したページの出力です。

以下のWordPressのテンプレートタグが記載されたPHPのコードを、ショートコード 化して、設置したい場所にショートコード を記述します。

一覧のPHP 

<?php
  /*cookieを取得*/
  if(array_key_exists('fav_item', $_COOKIE)){
    $checked_items = $_COOKIE['fav_item'];
    $checked_items = json_decode($checked_items);
  }
?>
 
<div class="p-main" id="list">
 
  <div class="p-list">
 
  <?php if($checked_items):?>
    <div class="p-list__title">
      お気に入り登録しているページIはこちら
    </div>
    <div class="p-list_wrapper">
    <?php foreach ($checked_items as $checked_item) : ?>
      <div class="p-list__item">
		  <a href="<?php echo $permalink = get_permalink( $checked_item ); //パーマリンク ?>">
			  <div class="p-list__img">
				  <?php echo get_the_post_thumbnail( $checked_item ); //アイキャッチ画像 ?>
			  </div>
			  <div class="p-list__txt">
				  <p class="p-list__date dfont"><?php echo get_the_date( '',$checked_item ); //投稿日時 ?></p>
				  <p class="p-list__title"><?php echo $title = get_the_title($checked_item); //タイトル ?></p>
			  </div>
		  </a>
      </div>
    <?php endforeach;?>
  <?php else :?>
 
    <div class="p-not_fav_items">
      お気に入りに登録されているページはありません。
    </div>
 
  <?php endif;?>
    </div>
  </div>

PHPの設置が完了したら、見た目を整える以下のCSSを貼り付けします。

一覧のCSS 

/* 一覧ページ */
.p-list_wrapper {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.p-list__item {
    width: 48%;
    background: #FFF;
    border-radius: 2px;
    background: #fff;
    box-shadow: 0 0 3px 0 rgb(0 0 0 / 12%), 0 2px 3px 0 rgb(0 0 0 / 22%);
    cursor: pointer;
    transition: 0.2s ease-in-out;
    margin-bottom: 25px;
}
.p-list__item:hover {
    box-shadow: 0 15px 30px -5px rgb(0 0 0 / 15%), 0 0 5px rgb(0 0 0 / 10%);
    transform: translateY(-4px);
}
.p-list__item a {
    display: block;
    text-decoration: none;
    color: #313131;
}
.p-list__img {
    height: 160px;
    overflow: hidden;
    border-radius: 2px 2px 0 0;
}
.p-list__txt {
    padding: 8px 13px 8px;
}
p.p-list__date {
    display: block;
    margin: 0;
    color: #b5b5b5;
    font-size: 13px;
    font-weight: bold;
    position:relative;
}
p.p-list__date:before {
    content: "\f017";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 4px;
    vertical-align: middle;
}
p.p-list__title {
    margin: 0 0 8px;
    font-size: 1.2em;
    line-height: 1.56;
    font-weight: 600;
}
@media screen and (max-width: 767px) {
/* （ここにモバイル用スタイルを記述） */
.p-list_wrapper {
    flex-flow: column;
}
.p-list__item {
    width: 100%;
}
.p-list__img {
    height: 210px;
}
.p-list__txt {
    padding-top: 12px;
}
}

完成

これで完成です。コピペする内容が多少多いですが、これだけでOKなので設置したページのテストなどを行いましょう。

かかかず
かかかず

見た目やデザインは、当サイトで利用しているWordPressテーマSANGO向けなので、好みに応じてカスタマイズしてください。

コピペ用コード一式

設置と実装の手順でご紹介した同じコードを、ボタンとページ一覧別で以下にまとめました。

お気に入りボタンとcookie

お気に入りボタン一式のコードで、PHPとCSS、jQueryの3つになります。

コードを表示する

お気に入り登録ボタンのPHP 

<div class="favorite_button" data-pageid="<?php the_ID(); ?>">
<button class="favorite_button_in"><i class="fas fa-star"></i><p>この記事をお気に入り</p></button>
</div>

お気に入り登録ボタンのCSS 

.favorite_button {
    display: block;
    text-align: center;
    position: relative;
}
button.favorite_button_in {
    display: inline-block;
    padding: 12px 28px 12px 20px;
    border: 1px solid transparent;
    box-shadow: 0 2px 4px -2px rgb(33 37 56 / 25%);
    cursor: pointer;
    border-radius: 0.45rem;
    border-color: rgb(80,80,80,0.1);
    font-size: 0.95rem;
    transition: 0.2s ease-in-out;
    background: #fcfcfc;
    font-weight: 200;
}
button.favorite_button_in p {
    display: inline-block;
    margin: 0;
}
button.favorite_button_in:hover {
    opacity: 0.8;
}
button.favorite_button_in i {
    color: #6bb6ff;
    font-size: 1.3rem;
    vertical-align: -1px;
    margin-right: 8px;
    opacity: 0.3;
}
.is-choosen .favorite_button_in {
    background: #6bb6ff;
}
.is-choosen .favorite_button_in i {
    opacity: 1;
    color: #FFFF00;
}
.is-choosen .favorite_button_in p {
    font-size: 0;
    color: #FFFF00;
    font-weight: 600;
}
.is-choosen .favorite_button_in p:before {font-size:0.95rem; content: "お気に入り登録済";}

jQuery 

$(function(){
    var fav = [];
    var current_page_id = $(".favorite_button").data("pageid");//現在のページのIDを取得
 
    checked_inspect();//現在のページがお気に入り登録済みかチェック
    $(document).on('click','.favorite_button_in',function(){
      var index = fav.indexOf(current_page_id);
      if(index > -1){
        fav.splice(index, 1);
      } else {
        fav.push(current_page_id);
      }
      var serializedArr = JSON.stringify( fav );
      $.cookie("fav_item",serializedArr, { expires: 7, path: '/' });//cookieを保存
      checked_inspect();
    });
 
 
    function checked_inspect(){//現在のページがお気に入り登録されているかどうか
      fav = $.cookie("fav_item") ? JSON.parse( $.cookie("fav_item") ) : [];
      console.log(fav);
      if(fav.indexOf(current_page_id) > -1){
        $("body").addClass("is-choosen");
      } else {
        $("body").removeClass("is-choosen");
      }
    }
    });

お気に入り登録したページ一覧の表示

こちらは、お気に入り登録をしたページ一覧のコードで、PHPとCSSの2種です。こちらも設置したい場所にコピペしましょう。

コードを表示する

一覧のPHP 

<?php
  /*cookieを取得*/
  if(array_key_exists('fav_item', $_COOKIE)){
    $checked_items = $_COOKIE['fav_item'];
    $checked_items = json_decode($checked_items);
  }
?>
 
<div class="p-main" id="list">
 
  <div class="p-list">
 
  <?php if($checked_items):?>
    <div class="p-list__title">
      お気に入り登録しているページIはこちら
    </div>
    <div class="p-list_wrapper">
    <?php foreach ($checked_items as $checked_item) : ?>
      <div class="p-list__item">
		  <a href="<?php echo $permalink = get_permalink( $checked_item ); //パーマリンク ?>">
			  <div class="p-list__img">
				  <?php echo get_the_post_thumbnail( $checked_item ); //アイキャッチ画像 ?>
			  </div>
			  <div class="p-list__txt">
				  <p class="p-list__date dfont"><?php echo get_the_date( '',$checked_item ); //投稿日時 ?></p>
				  <p class="p-list__title"><?php echo $title = get_the_title($checked_item); //タイトル ?></p>
			  </div>
		  </a>
      </div>
    <?php endforeach;?>
  <?php else :?>
 
    <div class="p-not_fav_items">
      お気に入りに登録されているページはありません。
    </div>
 
  <?php endif;?>
    </div>
  </div>

一覧のCSS 

/* 一覧ページ */
.p-list_wrapper {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.p-list__item {
    width: 48%;
    background: #FFF;
    border-radius: 2px;
    background: #fff;
    box-shadow: 0 0 3px 0 rgb(0 0 0 / 12%), 0 2px 3px 0 rgb(0 0 0 / 22%);
    cursor: pointer;
    transition: 0.2s ease-in-out;
    margin-bottom: 25px;
}
.p-list__item:hover {
    box-shadow: 0 15px 30px -5px rgb(0 0 0 / 15%), 0 0 5px rgb(0 0 0 / 10%);
    transform: translateY(-4px);
}
.p-list__item a {
    display: block;
    text-decoration: none;
    color: #313131;
}
.p-list__img {
    height: 160px;
    overflow: hidden;
    border-radius: 2px 2px 0 0;
}
.p-list__txt {
    padding: 8px 13px 8px;
}
p.p-list__date {
    display: block;
    margin: 0;
    color: #b5b5b5;
    font-size: 13px;
    font-weight: bold;
    position:relative;
}
p.p-list__date:before {
    content: "\f017";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 4px;
    vertical-align: middle;
}
p.p-list__title {
    margin: 0 0 8px;
    font-size: 1.2em;
    line-height: 1.56;
    font-weight: 600;
}
@media screen and (max-width: 767px) {
/* （ここにモバイル用スタイルを記述） */
.p-list_wrapper {
    flex-flow: column;
}
.p-list__item {
    width: 100%;
}
.p-list__img {
    height: 210px;
}
.p-list__txt {
    padding-top: 12px;
}
}

ちょっとしたコードの解説

ちょっとしたコードの解説です。カスタマイズの時など使うときの参考にしてください。

お気に入りボタンのPHP：data-pageid=”<?php the_ID(); ?>”

お気に入りボタンに、WordPress関数タグの<?php the_ID(); ?>を使って、その記事のIDを取得しています。

そして、取得したIDがそのままcookieに格納され、「お気に入り登録した・しない」の判別で、表示も切り替わるようになっています。

jQuery：bodyにis-choosenのclass付与

ボタンをクリックしたら、現在のページがお気に入り登録されているかどうかの確認が完了して、登録になる場合、もしくは既に登録している場合body のclassに is-choosen が付与されます。

この、is-choosenが付与されることで、ボタンの表示が切り替わる仕様になっています。

さいごに

このように、プラグイン無しでもPHPとjQueryのコードを書くことで、ユーザーライクな機能が実装できます。

プラスアルファで「お気に入りの記事一覧から登録解除」の機能を追加するスニペットを作ってみました。

かかかず
かかかず

以下の動画が実装後のサンプルです。

有料ですが、気になった方は以下の記事も参考にしてみてください。

プラグイン無しでお気に入りに追加した記事をページ遷移せずにページ一覧で解除可能にするスニペット

前の記事

アコーディオンのイラスト
jQueryを使ってWordPressの子カテゴリーをアコーデ…

次の記事

jQueryのコピペでできる閲覧中の記事のカテゴリに色をつける…
jQueryのイラスト

関連記事

カテゴリーのイラスト

同じカテゴリの記事一覧

ボタンの影

まとめ記事

Article

About

Summary

OTHER

DUB DESiGNはデザインをテーマにしたメディアです。Webデザインに関するHow-toや、WordPressのスニペットなど、デザインの話を中心に、仕事を楽しむすべての方を対象に記事を配信しています。

＞＞ 詳しくはこちら