WordPressにお気に入り機能を追加！プラグイン【Favorites】の使い方

この記事は、サイト内にお気に入り機能（ブラウザのお気に入りではなく）を追加するプラグインの紹介です。

試しに…

1. この記事のタイトル下のハートをクリック
2. ハート横のカウントが1つアップ
3. ブックマークを確認
   ・PC…ヘッダー右端のハートをクリック
   ・SP…固定フッターのハートをクリック

「あなたのブックマーク」ページに、記事がサムネイル付きでラインナップされているハズです。

情報サイトやブログを読んでいて、あの記事この記事と気になるタイトルがいくつもある時に利用するタイプのサイト内お気に入り機能です。

Favorites プラグイン公式サイト

ユニクロや無印良品の商品ページにあるハートマークのようなものです。気になるページをポチっとクリックし、あとでまとめてチェックするアレ。

追加も削除もワンクリック、簡単操作が喜ばれます。

Favorites使用までの大まかな流れ

※機能追加後の表示設定はテーマSWELLで説明しています。

お気に入りに追加された複数の記事は、その一覧画面から後追い購読してもらえるはず（多分）。

便利なプラグインですねぇ。PV数が増えそう。

特に情報サイトにはピッタリのお役立ちツールです。

管理画面でアクセス数を見るのはブログを書く楽しみの1つですけど、お気に入りのカウント数はそれ以上に訪問者の意図を感じでワクワクします。

Favoritesのインストールから有効化

1. 管理メニュー → プラグイン 「新規追加 」→ 検索窓に「Favorites」と入力（コピペ）
2. Favoritesの「インストール」ボタンをクリック
3. その場で「有効化」ボタンをクリック

三拍子そろうと未知のプラグインも怖くないですね。

Favoritesの設定

有効化後の設定は…

左メニュー → インストール済みプラグイン → Favoritesの「Settings」から。

General

「Development Mode」以外の「Page Cache」と「Dependencies」の3項目にチェック。

Development Modeは、開発モードを有効にする項目なのでチェックは不要です。

User

User Settings中の「User Cookie Consent」以外の3項目にチェック。

User Cookie Consentは、ユーザーのクッキー使用の同意を求める項目。

Display & Post Types

ここから自分好みに設定しましょう。

ボタンのタイプや色味、テキストなど導入するサイトにマッチさせましょう。

頑張りどころです（難しくはないけど）。

Enabled Favorites for:

左のチェックボックスにチェックを入れると「Settings」ボタンが表示されます。

その「Settings」をクリックすると下記の画面になります。

固定ページ、メディア、LPにチェックも投稿同様チェックすると「Settings」ボタンが表示されます。

私は「Add admin column」以外の3項目にチェック（上の画像とは違っていますが）しています。

記事の上下にボタンがあった方が親切です。

また、投稿一覧でザっと確認できれば楽しいし、比較もできます。

個別の記事編集画面（カスタムフィールド）で確認する必要があるか？ちょっとわかりませんが、もし必要ならひと手間かかります。

ブロックエディターの場合、初期画面にないカスタムフィールドを表示させる必要があります。

1. 記事を保存（有効化の時アラートがでるので）
2. 上部メニュー右側、歯車アイコン横のトリコロン（︙）をクリック
3. オプション（最下段）をクリック
4. 詳細パネルのカスタムフィールドにチェックを入れる
5. 開いたパネルの「有効化してリロード」ボタンをクリック

上記の方法でカスタムフィールドを読み込むと、ブックマーク数が見られます。

Favorite Button Content & Appearance

ボタンのタイプは下の5種類と自由に作れるCustom Markupがあります。

使えそうなボタンばかりです。サイトとマッチするのを選びましょう。

「Specify custom colors」にチェックを入れると、ボタンの色を変更できます。

もっと自由にボタンを作りたいと思う場合は「Custom Markup」を選びます。

「Custom Markup」を選ぶと、下図の「Button Markup」項目が表示されます。

よい例を思いつかなかったので既存ボタンと少々ダブりっていますが、図のように使います。

ネットに不慣れな訪問者が多いサイトには、こんな文言の方がわかりやすいです。

「Include Total Favorite Count」にチェックを入れて、ブックマーク数を表示させました［2021.2.10］。

ブックマーク数が0ばかりだと意味ないなぁ～と思っていましたが、何と今日でこの記事のブックマークが「18」。嬉しいですぅ～。ありがとう！18人

これで、Favoritesプラグインの設定は終わりです。

次は登録された記事を一覧表示するページを作ります。

お気に入り一覧ページを作る

1. 固定ページ → 新規追加
2. 最適なタイトルと読み出しコードを記述。

最も一般的なコード

[user_favorites include_thumbnails ="true" include_buttons ="true"]

サムネイル・記事タイトル・（一覧から削除するための）ボタンの構成です。

タイトルのみのコード

[user_favorites]

あとでどんな記事をとり置きしたのかわからなくなりそう。

抜粋も入れるコード

[user_favorites include_thumbnails ="true" include_buttons ="true" include_excerpts ="true"]

抜粋も表示すれば記事の内容がわかって便利ですが…

抜粋欄に入力していないと全文が表示されます。記事全部に抜粋文を入れるのは大変なので、考えちゃいますね。

訪問者の便利さとサイト運営者の手間を考えると、サムネイル・記事タイトル・削除ボタンの組み合わせかなぁ～。

一覧ページへのリンクを作る（SWELLの場合）

SWELL公式サイト

PCならグローバルメニュー

折角の機能ですから、目立つ場所にリンク設定したいです。

SWELLならグローバルメニューに入れたら、目立って良いと思います。

1. 新規ブログパーツにボタンを作り、お気に入り一覧ページへのリンクを設定
2. ブログパーツの呼び出しコードをコピー
3. 外観 → ウィジェットの「ヘッダー内部」にカスタムHTMLを入れ、呼び出しコードをペースト

スマホならフッター固定メニュー

ハンバーガーメニュー内に隠れているとわかりにくいので、固定ヘッダーや固定フッターがある場合はそこが最適です。

「メニューを目立たせる」には、メニューにCSSクラスを設定して、スタイルを書いて（色を変えるとか）他のメニューと差別化するのもいいですね。

SWELLはスマホに固定フッターを設置するのがとても簡単なので、この場所一択です。

1. 固定フッターに設定してあるメニューを呼び出す
2. カスタムリンクでお気に入り一覧ページのアドレスと文言を設定し、追加
3. 「説明」欄に icon-bookmarks を追加して保存