以前、宙也さんのサイト【ART+BEAT MANIFESTO】で紹介されていた”お気に入り機能”を参考に設置させていただいていたのですが、クッキーの関係でいつの間にか登録していたお気に入りが消えたりする等の問題があったので、修正とともに機能の追加をし、プラグイン化することにしました。
内容は、Cocoonに設置することを前提に編集し直しています。
あくまでも自分の好みに合わせて修正しています。
興味のある方は使ってみてください。
今回プラグイン化で追加・改善された点
１. 保存方式の変更
お気に入りデータの保存場所を ブラウザーの Cookie 中心から、ブラウザーの localStorage 中心へ変更した。
読者の各ブラウザ内に保存する仕様になっています。
サイトデータの削除、ブラウザキャッシュ・保存データの削除、localStorageの削除、プライベートブラウズの利用を行った場合にはお気に入りのデータも消える可能性があります。
localStorageは、使用するブラウザごとに保存ため、同じ読者でも使う環境が変わると、お気に入りは別になります。
例えば、
スマホの Safari、PC の Chrome、タブレットの Chrome はそれぞれ別々の保存領域となります。
そのため、スマホでお気に入りした記事 → PCには自動では出ない という仕様です。
その代わり、インポート／エクスポート機能で移せます。
２. 設定画面の追加
専用の設定ページを追加しました。
左のメニュにある設定 → 読者お気に入り で設定画面を開くことが出来ます。
設定できる主な項目は以下です。
・ON時の色
・対象投稿タイプ
・ボタンマーク
・ボタンサイズ
・保存最大件数
・ウィジェット表示件数
・一覧ページ表示形式
・一覧ページ並び順
・抜粋表示
・インポート／エクスポート表示
・ショートコード対応
・ツールチップ文言・色
また、設定画面の上部に「現在の設定概要」をクリックすると展開され、設定内容を確認することが出来ます。
３. お気に入り一覧ページを追加
プラグインをインストールすると、自動で固定ページとして、お気に入り一覧ページを作成・利用できるようになります。
一覧ページでは、読者が保存した記事をまとめて確認できます。
一覧ページでの表示形式も設定画面で選べます。
・標準リスト表示
・横長ブログカード
・タイトルだけ
４. サイドバー用ウィジェットを追加
ウィジェットでは、お気に入り一覧をサイドバーなどに表示できます。
表示できる内容は下記となります。また、初期設定の変更は設定画面から行えます。
・初期表示件数
・さらに表示後の最大件数
・スクロール高さ
・お気に入り一覧ページへのリンク
・「さらに表示 / 閉じる」機能
５. カスタム投稿タイプ対応
投稿だけでなく、カスタム投稿タイプ等も対象にできるようにした。
設定画面で、
・投稿
・固定ページ
・その他の公開カスタム投稿タイプ
などを選択できます。
固定ページは初期状態では対象外にしています。
６. Cocoonの各種リストに対応
Cocoonの記事カードやリスト表示に、お気に入りボタンを追加できるようにした。
対応例：
・通常の記事一覧
・新着記事
・人気記事
・Cocoonウィジェット内リスト
また、Cocoonウィジェット内リストに表示するかどうかを設定画面で設定できます。
７. 指定ショートコードへの対応
custom_post_list など、指定したショートコードの出力にもお気に入りボタンを追加できるようにした。
例：
custom_post_list設定画面で対象ショートコード名を指定できます。
ただし、ショートコードの出力内に投稿への通常リンクがある場合に対応します。
<a href="https://example.com/news/sample/">記事タイトル</a>外部URL、JavaScriptリンク、アンカーリンク、投稿URLではない独自URLは対象外です。
８. ボタンマークのカスタマイズ
お気に入りボタンのマークを選べるようにした。
・星
・星（外枠→塗りつぶし）
・しおり
・ハート
・チェック
・クリップ
・プラス
・任意の文字
ボタンサイズやON時の色も設定できます。
９. マウスオーバー表示のカスタマイズ
お気に入りボタンにマウスを乗せたときの文言を設定できます。
・未追加時：ブックマークに追加
・追加済み時：リストから削除
さらに、背景色と文字色も設定できます。
初期値は現在、
背景色：#f7ab00
文字色：#ffffff
です。
１０. お気に入り一覧の並び順
お気に入り一覧ページでは、並び順を選べます。
・追加順
・タイトル順
タイトル順はブラウザの日本語ロケールによる簡易的な文字順です。
英字・ひらがな・カタカナ・漢字が混在する場合、漢字の読み仮名までは判定しないため、完全な五十音順にはならない場合があります。
１１. インポート／エクスポート機能
読者が自分のお気に入りデータを移行できるようにした。
お気に入り一覧ページより下記が可能です。
・エクスポート
・インポート
・全削除
別端末へ移したい場合は、エクスポートしたファイルを移動先でインポートできます。
１２. 設定を初期値に戻す機能
設定画面に、”設定を初期値に戻す” ボタンを追加した。
初期化しても、以下は削除されません。
・読者のブラウザ内のお気に入りデータ
・作成済みのお気に入り一覧ページ
・お気に入り一覧ページIDの紐づけ
設定項目だけを初期値に戻します。
さいごに
いろいろと変更や機能の追加をしましたが、下記についてはサイトが重くなり煩雑になることから実装していません。
・別端末で自動同期されない
・別ブラウザ間でも共有されない
・ブラウザデータを削除すると消える
・サイト運営者は「誰が何をお気に入りしたか」を見られない
・記事ごとのお気に入り数集計はできない
WordPress側でプラグインを削除しても、読者のブラウザ内に残っている localStorage データは基本的にはそのままです。
ただし、プラグインがないと表示・読み込みをしないため、読者からは見えません。
再度プラグインを有効化すれば、同じブラウザでは残っているお気に入りを再表示できる可能性があります。
Cocoonに特化していろいろと機能を使いしていますが、他のテーマでも使えるかもしれません。
タイトルの横に表示させる”お気に入りボタン”をテーマに合わせたフックにすれば動くと思います。
興味のある方はお試しください。
コメント