SWELLテーマを使って、特定のページごとにサイドバーの表示を変えたいと思ったことはありませんか？
実装方法はいくつかありますが、今回は、Advanced Custom Fields（ACF）プラグインと組み合わせて実現する方法をご紹介します。
この方法であれば、PHPもCSSの一切書かずにノーコードで実装できます。
目次
Advanced Custom Fields（ACF）をインストール
まずは ACF をインストールします。WordPress のプラグインページからもインストールできますが、2024年のゴタゴタもあるので、ACF のウェブサイトからダウンロードしてインストールしておくのが無難でしょう。
ACF をダウンロード
ACF | Download のページで「Download ACF 6.3.12」ボタンをクリックして最新版のACFをダウンロードします。バージョン番号はそのときの最新版になるので、ここでの説明と異なっても問題ありません。
ACF をインストール
WordPress の「プラグイン > 新規プラグインを追加」をクリックします。
「プラグインのアップロード」をクリックして、ダウンロードしたファイルを選択し、「今すぐインストール」をクリックして ACF をインストールします。
「プラグインを有効化」をクリックしてインストール完了です。
プラグイン一覧に「Advanced Custom Fields」が表示されていればインストール成功です。
カスタムタクソノミーを作成
続いて、インストールした ACF を利用してカスタムタクソノミーを作成します。
サイドバーのメニューから「ACF > タクソノミー」をクリックします。
「タクソノミーを追加」をクリックします。
下図のように必要事項を入力して「変更内容を保存」をクリックします。
この中で「階層的」という部分をONにしておくと、カテゴリ選択と同じような表示形式になるので、運用が楽になります。
今回は「投稿タイプ」のところで「固定ページ」と「投稿」を選択したので、これらの編集画面で選択できるようになります。
タクソノミーを作成
続いて、作成した「サイドバータイプ」タクソノミーを登録します。
今回の例では、特定の固定ページごとにサイドバーを切り替えたいと思いますので、固定ページのところにタクソノミーに登録していきます。
サイドバーのメニューから「固定ページ > サイドバータイプ」をクリックします。
今回は、「バナー」「新着記事」「ピックアップ」の三つを作成しました。
固定ページでカスタムタクソノミーを選択
次は固定ページで作成した「サイドバータイプ」タクソノミーを選択します。ここでは以下のように選択します。
- 「サンプルページ１」で「バナー」と「新着記事」を選択
- 「サンプルページ２」で「ピックアップ」を選択
制限ウィジェットでブログパーツを作成
続いてブログパーツを作成します。
サイドバーのメニューから「ブログパーツ > 新規投稿を追加」をクリックします。
まずは「バナー」ブログパーツを作成します。
最初に「制限エリア」ブロックを追加します。ブロックの追加ウィンドウで「制限」と入れると簡単に探し出せます。
追加された「制限エリア」ブロックの右上のアイコンをクリックします。
右サイドバーに設定項目が表示されますので、以下のように設定します。
- 「ページで制限する」をON
- 「制限方法」で「ターム」を選択
- 「個別ページを対象にする」をチェック
- 「タクソノミー」を選択
- 「タクソノミーを選択」から「サイドバータイプ」を選択
- 「ターム」の中から「バナー」を選択
- 「選択したタームの論理関係」で「IN 該当する」を選択
- 「各タクソノミー条件の関係」で「どれか1つでも条件に合うかどうか」を選択
続いて「制限エリア」ブロック右下のプラスアイコンから、制限エリア内にブロックを追加します。今は「バナー」ブログパーツを作成していますので「画像」ブロックを選択します。
バナー画像をアップロードするか、メディアライブラリから選択するかして画像を追加します。
最後に「公開」をクリックしてブログパーツ作成を完了します。
同様の手順で「新着記事」ブログパーツを作ります。下図のように新着記事を3つ縦に並べるブログパーツを作りました。
さらに「ピックアップ」ブログパーツを作ります。下図のように記事を2つピックアップして縦に並べるブログパーツを作りました。
ウィジェット追加
最後に作成したブログパーツをサイドバーに追加します。
まず、ブログパーツの一覧から、作成したブログパーツの「呼び出しコード」をコピーしておきます。
その後、サイドバーのメニューから「外観 > ウィジェット」をクリックします。
画面左下にある「ブロック」を「共通サイドバー」の一番上にドラッグ&ドロップします。
動作確認
これで完了です。
固定ページで選択したサイドバータイプがきちんと表示されているか確認しましょう。
もし意図した通りに表示されなければ、各ブログパーツの「制限ウィジェット」の設定を見直してみましょう。
