WordPressでお気に入り記事ストック機能を実装してみる

ユーザ登録型サイトでよくある機能の「お気に入り記事をストックする」機能をWordPressでも実装してみようと思います。こういう機能なんて言うんですかね…お気に入り機能でいいのかな…?
基本的に独自で実装する部分は少なくPluginでの実装がほとんどになるかと思います。

機能を細かくカスタマイズしなければそんなに難しくないのでサクッとやっていきましょう。

利用Theme及びPlugin

  1. Vantage
    https://ja.wordpress.org/themes/vantage/
  2. BuddyPress
    https://wordpress.org/plugins/buddypress/
  3. Gianism
    https://wordpress.org/plugins/gianism/
  4. WP Favorite Posts
    https://wordpress.org/plugins/wp-favorite-posts/
  5. Black Studio TinyMCE Widget
    https://wordpress.org/plugins/black-studio-tinymce-widget/
  6. Page Builder by SiteOrigin
    https://wordpress.org/plugins/siteorigin-panels/
  7. SiteOrigin Widgets Bundle
    https://wordpress.org/plugins/so-widgets-bundle/
  8. SiteOrigin CSS
    https://wordpress.org/plugins/so-css/

SiteOrigin系Pluginは機能実装自体には必要ありませんがVantageの推奨プラグインとしてインストールを勧められますので一応リストに突っ込んでおきました。Page Builderは便利プラグインなのでインストールしておいても良いかと思います。CSS Editorは特に必要ないと言うかCSS構う必要があるなら子テーマで良いのかなと思います…。

Theme、Pluginのインストールは特に難しいこともないと思うのでインストール後の設定から書き残していこうと思います。

登録・ログイン周り実装

メンバーシップ変更

メニューの[設定]→[一般]と進み、一般設定のメンバーシップの「だれでもユーザー登録ができるようにする」にチェックを付けて設定。

BuddyPress固定ページ設定

この段階で固定ページ一覧に「アクティビティ」「メンバー」「有効化」「登録」の4つのページが作成されているかと思います。こちらのページは削除しないように気を付けてください。
メニューの[設定]→[BuddyPress]と進み、固定ページタブを開きコンポーネント、ページを紐付けてください。メンバーはメンバーと、登録は登録と、有効化は有効化と、同じ名前に紐付ければOKです。

Gianism設定

メールアドレス以外にもSNSアカウントでログインできるように設定していきます。SNSログインが不要な場合はこの設定は省略して問題ありません。
※ただし以降の説明はSNSログインありきで説明していきます。
メニューの[設定]→[Gianism]と進み、設定タブを開きます。今回は、「現在の登録設定:WPの設定に従う」「ログイン画面:すべてのボタンをログイン画面に表示する。」「ボタンサイズ:中」に設定します。今回はTwitter連携をさせますので、少し下にスクロールしてTwitterとの接続をONにして各keyやtokenを設定します。

お気に入り記事ストック実装

WP Favorite Posts設定

メニューの[設定]→[WP Favorite Posts]と進み、「登録ユーザーのみ、お気に入りリストを作成できるようにする:ON」「お気に入り追加リンクを表示する場所:After post」に設定して保存します。これ以外の設定は必要に応じて変更してください。

メニュー設定

ログイン・ログアウト・プロフィールリンク追加

メニューの[外観]→[メニュー]と進み、表示オプションのBuddyPressにチェックを入れます。チェックを入れたらBuddyPressの「プロフィール」「ログアウト」「ログイン」を追加してPrimary Menuにチェックを付けてメニューを保存します。この状態でサイトを確認すると、メニューからログイン・ログアウト・プロフィールの確認ができるようになっているかと思います。プロフィールページでは画像のアップや表示名の変更もできるようになっています。

とりあえずここまでである程度の形はできましたので、ここから少し色々と足していこうと思います。

マイページにお気に入り記事リストを表示させる

BuddyPressカスタマイズ用のphpファイルを作る

/wp-content/plugins/bp-custom.phpを作成します。functions.phpに書いても動くには動きますが今回はbp-custom.phpを使っていきます。(functions.phpに書く場合のとの差異は調べてみてください)

お気に入り記事一覧表示追加

bp-custom.phpに以下のコードを追加します。コードの説明は省略します。

add_action('bp_setup_nav', 'fav_list_nav');
function fav_list_nav() {
  global $bp;
  bp_core_new_nav_item(array(
    'name' => 'Favorite',
    'slug' => 'fav',
    'position' => 75,
    'screen_function' => 'fav',
    'show_for_displayed_user' => true,
    'default_subnav_slug' => 'fav',
    'item_css_id' => 'fav'
  ));
}
function fav() {
  add_action('bp_template_title', 'fav_title');
  add_action('bp_template_content', 'fav_content');
  bp_core_load_template(apply_filters('bp_core_template_plugin', 'members/single/plugins'));
}
function fav_title() {
  echo 'Favorite';
}
function fav_content() {
  do_shortcode("[wp-favorite-posts]");
}

これでマイページにFavoriteという項目が追加され、お気に入りした記事の一覧が表示されます。

プロフィールの項目を追加する

メニューの[ユーザー]→[プロフィール欄]と進み、欄を追加で項目を追加できます。また、ドラッグ・アンド・ドロップで項目の順序も変更できます。

サイト全体への通知をOFFにする

/plugins/buddypress/bp-templates/bp-legacy/buddypress/members/single/messages/compose.php:35のチェックボックス出力箇所をコメントアウトします。

ユーザの投稿をどうするとかその辺は少し課題として残りますが、基本的な実装はこの辺りで足りる感じでしょうか…投稿自体もwp_insert_postを使えばどうにかできそうです。
それでは楽しいWordライフを:-)

よろしければSNSでシェアしてください!

コメントを残す

*
*