【Favoritesプラグイン】WordPressサイトにお気に入り機能追加

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

Favoritesプラグイン

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

Favorites プラグイン公式サイト

ユニクロや無印良品の商品ページにあるあのハートマークです。

気になるページをポチっとクリックし、あとでまとめてチェックするアレ。

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

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

  1. Favoritesのインストール
  2. Favoritesの設定
  3. お気に入り一覧ページを作る
  4. お気に入り一覧ページへのリンク作成

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

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

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

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

目次

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

  1. 管理メニュー → プラグイン 「新規追加 」→ 検索窓に「Favorites」と入力(コピペ)
  2. Favoritesの「インストール」ボタンをクリック
  3. その場で「有効化」ボタンをクリック
Favoritesプラグイン
  • 評価良し!
  • 前回の更新日も古くない
  • WordPress最新バージョンとの互換性あり

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

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」ボタンが表示されます。

Favoritesプラグイン
ボタンやブックマーク数をどこに表示するかの設定
上から順に…
  • ボタンを本文の上に表示
  • ボタンを本文の下に表示
  • 記事編集(個別)画面のカスタムフィールドにブックマーク数を表示
  • 投稿一覧の画面にブックマーク数を表示

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

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

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

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

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

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

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

Favoritesプラグイン

Favorite Button Content & Appearance

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

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

Favoriteプラグイン

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

Favoritesプラグイン

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

Favoritesプラグイン

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

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

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

Favoritesプラグイン
上から…
  • 初期表示
  • ボタンクリック後
  • ボタン内にブックマーク数を表示

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

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

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

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

最も一般的なコード

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

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

favorites一覧

タイトルのみのコード

[user_favorites]

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

favorites一覧タイトルのみ

抜粋も入れるコード

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

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

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

favorites一覧抜粋も表示
上:抜粋空欄 下:抜粋文設定

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

一覧ページへのリンクを作る

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

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

グローバルメニューに(目立つように)入れたら、わかりやすいかもしれません。

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

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

そうでない場合は、目立つ位置にボタンを配置すると良いかも?

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

テーマ SWELLの場合

このサイトもそうですが、私はSWELLER(この言い方合ってる?)です。

つまりSWELL好きのSWELL使い、というのは言い過ぎだけど手持ちのサイトをドンドンSWELLに変更しています。

なので、ブックマーク一覧(Favoritesプラグインの)へのリンクを下記のように配置しました。

ブックマーク一覧

どちらも「あなたのブックマーク一覧ですよ」感を思いっきり出してみました。

目次
閉じる