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

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

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

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

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

の内容です。

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

かかかず

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

目次 [非表示]

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

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

お気に入りボタン

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

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

この記事をお気に入り

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

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

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

かかかず

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

仕様の解説

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

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

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

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

かかかず

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

https://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-3704051526585055&output=html&h=280&slotname=9874015004&adk=1295802562&adf=2467631950&pi=t.ma~as.9874015004&w=735&fwrn=4&fwrnh=100&lmt=1706312112&rafmt=1&format=735×280&url=https%3A%2F%2Fdubdesign.net%2Fweb%2Fwordpress%2Ffavoritebutton-page%2F&fwr=0&fwrattr=true&rpe=1&resp_fmts=3&wgl=1&uach=WyJtYWNPUyIsIjE0LjIuMSIsImFybSIsIiIsIjEyMC4wLjYwOTkuMjM0IixudWxsLDAsbnVsbCwiNjQiLFtbIk5vdF9BIEJyYW5kIiwiOC4wLjAuMCJdLFsiQ2hyb21pdW0iLCIxMjAuMC42MDk5LjIzNCJdLFsiR29vZ2xlIENocm9tZSIsIjEyMC4wLjYwOTkuMjM0Il1dLDBd&dt=1706312112205&bpp=5&bdt=332&idt=177&shv=r20240122&mjsv=m202401250101&ptt=9&saldr=aa&abxe=1&correlator=8411237599807&frm=20&pv=2&ga_vid=846531384.1706312112&ga_sid=1706312112&ga_hid=536993010&ga_fc=1&u_tz=540&u_his=1&u_h=2160&u_w=5120&u_ah=2135&u_aw=5120&u_cd=24&u_sd=1&dmc=8&adx=537&ady=3910&biw=2174&bih=1840&scr_x=0&scr_y=0&eid=44759876%2C44759927%2C31080589%2C31080590%2C44795921%2C44809531%2C31080697%2C95320378%2C95320890%2C95321626%2C95322162%2C95323004%2C31078663%2C31078665%2C31078668%2C31078670&oid=2&pvsid=1201374558358979&tmod=96287629&uas=0&nvt=1&fc=896&brdim=192%2C93%2C192%2C93%2C5120%2C25%2C2189%2C1961%2C2189%2C1840&vis=1&rsz=%7C%7CEebr%7C&abl=CS&pfx=0&fu=128&bc=31&bz=1&td=1&psd=W251bGwsbnVsbCxudWxsLDNd&nt=1&ifi=1&uci=a!1&btvi=1&fsb=1&dtd=182

設置と実装の手順

お気に入りボタンと、ページ一覧の設置手順についてです。主に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と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が付与されることで、ボタンの表示が切り替わる仕様になっています。

https://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-3704051526585055&output=html&h=184&slotname=3493213568&adk=3575585016&adf=2510370951&pi=t.ma~as.3493213568&w=735&fwrn=4&lmt=1706312203&rafmt=11&format=735×184&url=https%3A%2F%2Fdubdesign.net%2Fweb%2Fwordpress%2Ffavoritebutton-page%2F&wgl=1&uach=WyJtYWNPUyIsIjE0LjIuMSIsImFybSIsIiIsIjEyMC4wLjYwOTkuMjM0IixudWxsLDAsbnVsbCwiNjQiLFtbIk5vdF9BIEJyYW5kIiwiOC4wLjAuMCJdLFsiQ2hyb21pdW0iLCIxMjAuMC42MDk5LjIzNCJdLFsiR29vZ2xlIENocm9tZSIsIjEyMC4wLjYwOTkuMjM0Il1dLDBd&dt=1706312112210&bpp=1&bdt=337&idt=197&shv=r20240122&mjsv=m202401250101&ptt=9&saldr=aa&abxe=1&cookie=ID%3D532454be917b4e47%3AT%3D1706312112%3ART%3D1706312112%3AS%3DALNI_MbSVKWqX0SzHyxLTJ73iFELvKMpFw&gpic=UID%3D00000cf0c6e7d63c%3AT%3D1706312112%3ART%3D1706312112%3AS%3DALNI_Mbk7m-DqvqncvOrGu7J4h44ZR7z1g&prev_fmts=735×280%2C0x0%2C2174x1840%2C160x600%2C160x600%2C1005x124&nras=5&correlator=8411237599807&frm=20&pv=1&ga_vid=846531384.1706312112&ga_sid=1706312112&ga_hid=536993010&ga_fc=1&rplot=4&u_tz=540&u_his=2&u_h=2160&u_w=5120&u_ah=2135&u_aw=5120&u_cd=24&u_sd=1&dmc=8&adx=537&ady=12614&biw=2174&bih=1840&scr_x=0&scr_y=5387&eid=44759876%2C44759927%2C31080589%2C31080590%2C44795921%2C44809531%2C31080697%2C95320378%2C95320890%2C95321626%2C95322162%2C95323004%2C31078663%2C31078665%2C31078668%2C31078670&oid=2&psts=AOrYGsndGmB1Kmoc8VzZDLIRPJv42ERf4714XYlbi4EjB11-kFOjjvgWXbIrn5tiYEvfnmGBX-kiSUbgBUlGQsJJAaOdNYLo%2CAOrYGsnCpVyHLgxOro0UEevcVSQmvJFkBBy2Zr7FUGQJgZlAe520WQorkfRBGd374aKZJNV5yyBdBr42AN6EPBizzLSduIHPkQMkyvndoPULOQNam80%2CAOrYGsnicWgGLxCgyQT739FSou-OlGNo4DtirvBkkqcdN44iq29sSFhrAfyA7zB9SM3uXDkajGN3MqJRDHgzcw46AF9oXnBO7YASwROs6OrKxuHuCnA%2CAOrYGsk-PLuvsO2Win_r18uioVrVRQadmk2lGfKT_FOKcQnz4hQphTtW861aXw9jm6GWqLr4OgO1aDz2UBsO5Mv897Le3CuAqUyc5KC_9_G98NFzWipirw&pvsid=1201374558358979&tmod=96287629&uas=3&nvt=1&fc=896&brdim=192%2C93%2C192%2C93%2C5120%2C25%2C2189%2C1961%2C2189%2C1840&vis=1&rsz=%7C%7CEebr%7C&abl=CS&pfx=0&fu=128&bc=31&bz=1&td=1&psd=W251bGwsbnVsbCxudWxsLDNd&nt=1&ifi=2&uci=a!2&btvi=5&fsb=1&dtd=90819