BLOG

  1. HOME
  2. ブログ
  3. WEB制作・デザイン
  4. WordPress・その他CMS
  5. Local Storageを使ってお気に入り登録したWordpressの記事を呼び出す
by 漢ムラタ 漢ムラタ

Local Storageを使ってお気に入り登録したWordPressの記事を呼び出す

Local Storageを使ってお気に入り登録したWordPressの記事を呼び出す

こんにちは村田です。

今回はLocal Storageを使って、ユーザー登録しなくてもユーザーが任意のWordpressの記事を「お気に入り」に登録して、登録した記事を一覧として出力するまでの流れをご紹介します。

Local Storageとは

HTML5から導入されたWebStorageと呼ばれる仕組みの一つで、特定のデータをユーザーが使用しているブラウザに保存することができます。

導入されたのはHTML5からだけどIEは8から使えるし、他のブラウザも軒並み使うことができます。

閲覧しているユーザー毎になにか情報を保存しておきたいけど、わざわざデータベースまで用意したくないときなどに便利な機能です。

同じような仕組みにCookieがありますが、Local Storageには以下のような違いがあります。

Cookie Local Storage
保存容量 最大4KB 最大5MB~10MB
サーバーへの送信 リクエスト毎 なし
保存期限 任意に決められる 無制限

最大保存容量はブラウザにもよりますが概ね5MBから10MBくらいまではいけるようです。

Cookieはサーバーとの通信の度にデータが送信され、通信リソースを少しではありますが使用することになりますが、Local Storageはそれがありません。

保存期限は無制限となっているので、ユーザーが自身で削除するか、こちら側で削除できる手段を用意してあげない限り半永久的にブラウザにデータが残り続ける事になります。

もし永続的ではなく、一時的な保存の方が都合が良い場合はCookieを使うか、Local Storageではなく、もうひとつのWebStorageとなる「Session Storage」を使用しましょう。
Session StorageはLocal Storageと保存容量やサーバーへの送信に関しては同じですがブラウザを閉じると自動的に保存した内容を破棄してくれます。

WordPressの記事に対して「お気に入りに登録」ボタンを追加する

では早速Wordpressの任意の記事をお気に入り登録できるようにしてみましょう。
まず記事一覧部分に登録用のボタンを用意します。

例えばループ部分をこんな感じ。
お気に入り登録ボタンに対してdata属性で記事のIDを格納しておきます。

で、見た目がとりあえずこんな感じ。

次に「お気に入り登録」ボタンに対してLocal Storageに格納するようJavascriptで処理します。

流れとして、data属性から記事IDを取得して存在が確認できたら、Local Storageから現在の登録内容を「localStorage.getItem」で取得します。
取得した登録内容に今から登録しようとしているIDが既にないかチェックして、未登録ならIDを「localStorage.setItem」で追加と言う流れになります。

Local Storageは「Key」と「Value」の1セットになっているので、今回はKeyを「favorite」としています。

また、Local Storageは一つのKeyに対して1つの値しか保存できませんが、その1つの値に対して複数のデータを入れたい場合、JSON形式などの1つのオブジェクトとして登録させます。

ただし、JSON形式のデータをそのまま格納しても上手くいかないようです。
なので格納前に「JSON.stringify」でJSON形式の値を1つの文字列に変換して格納する必要があります。

そして取得する時は当然文字列のままなのでそれを「JSON.parse」でJSON形式に戻してやるという訳です。

動作確認

実際に値が格納されているかどうかchromeのデベロッパーツールで確認してみましょう。

デベロッパーツールの「Application」から「Storage」に「Local Storage」と言う項目があると思います。

クリックして現在のドメイン名を選択すると格納されているKeyとその値が一覧で見えるようになるので、先ほど設定したKey「favorite」と押したボタンの記事IDがカンマ区切りで格納されているか確認します。

登録したら解除ボタンに反転させる

登録はできましたがこれでは登録するばかりでユーザーがお気に入りを外すことができませんね。

なのでお気に入りに登録したらボタンを「お気に入り解除」ボタンに反転させる動きを付けます。

Local Storageを一旦空にする

動作確認にあたって、既に登録済だと確認しづらいので一旦Local Storageの中身を空にしておきましょう。

chromeのデベロッパーツールで先ほどと同じところにアクセスします。
そして削除したいKeyを右クリックして「Delete」を選択することでKeyごとまるっと削除されます。

空になったところで、先ほどの登録処理の最後に登録ボタンの「add」クラスを削除して「remove」クラスを付与します。
ついでにテキストも「お気にいり解除」としておきましょう。

今度は「remove」クラスのボタンをクリックした時の登録解除の処理を記述していきます。

ほぼ登録の時と処理が一緒ですね。
既に登録済であればspliceメソッドで該当するインデックス番号の値を削除して、再度格納し直すという流れです。

これで登録と解除を繰り返すことができるようになりました。デベロッパーツールで値の増減を確認してみましょう。

読み込み時にボタンの状態を反映させる

今のままではページ読み込み時には全てボタンの文言が「お気に入り登録」になってしまうので、今度はページ読み込み時に登録状態を反映しましょう。

現在の登録内容を取得して、それをforで格納されている数の分だけ処理を行います。
そして格納されているIDと合致するdata-id属性を持っているbuttonに対してクラスと文言の差し替えを実行するだけです。

登録一覧ページを作成する

それではいよいよお気に入りに登録した記事を一覧表示するページを作っていきましょう。

まず一覧用の固定ページを追加します。タイトルやスラッグは別になんでもいいですが、今回は「お気に入り一覧」というタイトルと「favorite」というスラッグで作成します。

出力用テンプレート「page-favorite.php」を作成して下記のような内容とします。

<div id=”favorite” class=”favorite”>の中にAjaxで生成した記事一覧が格納されるイメージです。

AjaxでWordpressの記事を読み込み

まずfunctions.phpに必要な処理を書いたjavascript(今回は「favorite.js」とする)を「wp_enqueue_script」で登録して、「wp_localize_script」で必要なデータを登録したjsに受け渡しできるようにします。

次に「favorite.js」の中身を書いていきます。

まず最初にLocal Storageの登録しているお気に入り記事IDを取得して、それをコンマ区切りの1つの文字列に変換します。

次にWPから帰ってきた内容を格納するための囲みを定義しておいて、WP側に引き渡す情報をまとめます。引き渡すのはアクション名と先ほどのコンマ区切りのID文字列になります。
アクション名は任意のもので良いので分かり易い名前にしておきます。

Ajax通信が成功したら、戻ってきたデータを事前に定義していた囲みの中にappendで追加するという流れです。

最後にもう一度前述のfunctions.phpの中に記述を追加します。

まずadd_actionで後述の処理をフックさせますが、アクション名の「wp_ajax_favorite」及び「wp_ajax_nopriv_favorite」の「favorite」部分は先ほどの「favorite.js」内で指定したアクション名と一致しておく必要があります。

POST送信でお気に入り登録している記事IDがfavorite.jsから届くので、それを今度はカンマ毎に配列に直して、「post__in」で必要な記事IDとして指定します。

あとは記事があればループ処理で適宜お好みの形で整形して出力させます。
これで「お気に入り一覧」ページにアクセスすると記事がAjaxで読み込まれるはずです。

あとは必要に応じてこの一覧にも登録解除ボタンを入れてみるのもいいですね。

最後に

Local Storageは扱いやすくて容量も豊富ですが、セキュリティ面では弱く、今現在データを保護することはできないらしいのでユーザーにとって重要な情報、例えば

  • ログインユーザーIDやパスワード
  • 個人情報
  • クレジットカード情報
  • APIキー

などそういった重要な情報は決してLocal Storageには保存しないようにしましょう。

ではまた次回。

ページの先頭に戻る