【Wardpress】カテゴリーやレスポンシブでサイドバーのウィジェットを変えるプラグインが便利

カテゴリー事にウィジェットを切り替えるプラグイン

カテゴリー毎に表示するウィジェットを変えてくれるプラグイン「Custom Sidebars」の紹介です。

「Content Aware Sidebars」や「Custom Widgets」など、ウィジェット系のプラグインって色々あるんですけど、試してみた感じ今回紹介する「Custom Sidebars」が一番感覚的に使えるので、とりあえずこれに落ち着いています。あんまり細かくすると管理が大変なので。

「Custom Sidebars」でできること

条件別にウィジェットを切り替えれる

Custom Sidebarsで分岐できる一例
  • カテゴリー
  • 投稿タイプ
  • タグアーカイブ
  • カテゴリーアーカイブ
  • 投稿者
  • 検索ページ
  • 404Not

などなど、指定したページごとにウィジェットを設定できます。

フッター、記事下、記事上、追尾など、テーマで使えるウィジェットエリアならどこにでも配置できます。例えば、特定のカテゴリーにのみ表示するフッターなんかも設定可能。

カテゴリーアーカイブに表示できるのが地味に嬉しい。前にphpでカテゴリーの記事ページのサイドバーの表示を変えていたんですけど、カテゴリーアーカイブは別で調整が必要で大変だったので、プラグインで一気に変えてしまえるのは助かります。

スクリーンサイズで切り替え可

レスポンシブでスマホでは表示しない設定やスマホでのみ表示するといった設定も可能です。

ピクセルまで細かく指定しているので、自分でサイズを決めてレスポンシブサイトを作ってる場合なんかにも便利。

できないこと

特定の記事だけを指定して切り替えることができません。

個別記事で分岐したいなら「Content Aware Sidebars」が便利です。

ダウンロードと有効可

  • STEP.1
    新規追加からインストール
    Custom Sidebarsのインストール方法

    サイドメニューの「プラグイン」から「➀新規追加」を選択して、➁プラグイン画面の右上の検索窓に「Custom Sidebars」と入力。➂「Custom Sidebars – Dy」が出てきたら「今すぐインストール」を押してインストール。

  • STEP.2
    インストールを終えたら有効化
    Custom Sidebarsのインストール方法
    インストールを終えるとボタンが「有効化」に代わるので、クリックして有効化します。
  • STEP.3
    有効になったら準備完了
    Custom Sidebarsのインストール方法
    有効化してリストに乗ったら準備完了です!

使い方

サイドバーの新規作成

  • STEP.1
    ウィジェットからサイドバーを新規作成
    編集は「外観>ウィジェット」から行います。ウィジェットの編集画面にいくと「Create new Sidebar」というボタンが追加されています。

    このボタンで新規作成

  • STEP.2
    サイドバーの名前を決める

    クリックするとサイドバーの名前を決める画面に。

    サイドバーの名前

    自分が管理しやすいように付ける名前なので、名前は何でもいいです。今回は仮に「料理」というカテゴリーに使うサイドバーってことにしました。

  • STEP.3
    Create Sidebarボタンをクリック
    右下の「Create Sidebar」のボタンをクリックすると新規サイドバーの作成完了。

    新しいウィジェットエリアが追加されました。

    新規サイドバー作成

表示したいカテゴリーを選択

  • STEP.1
    ウィジェットの場所を設定する画面を開く

    サイドバーの場所を決める画面

    新規サイドバーの右下にある「Sidebar Location」から、ウィジェットの場所を設定できる画面を開くことができます。

  • STEP.2
    表示したいカテゴリーを選択
    出てきた画面をスクロールしていくと「As サイドバー for selected categories」という項目があるのでチェックを入れて、出てきた窓をクリック。

    ワードプレスのカテゴリーが羅列されるので、表示したいカテゴリーを選択すれば設定完了です。

    サイドバーの場所を設定する

    これで、「料理」カテゴリーのサイドバーに追加したウィジェットが表示されるようになります。

ここまで設定すればお気付きかと思われますが、サイドバー、フッター、記事下、追尾など、テーマ内で利用可能なウィジェットエリアならどこでも利用できます

カテゴリー以外の場所を設定する場合

「Sidebar Location」をクリックすると一番上のメニューが開いた状態で表示されます。

それぞれアコーディオンになっていて、メニューの名前をクリックすると開閉することができます。

すべて閉じるとこんな感じ。

Custom Sidebarsのメニュー

上からシングルページ、アーカイブページ、スクリーンサイズを指定できます。

For all Single Entries matching selected criteria(シングルページ)

As 〇〇 for selected categories

左側がカテゴリー別。

特定のカテゴリーにだけ表示させたい場合に。

As 〇〇 for selected posttype

右側は投稿タイプ別。

固定ページやカスタム投稿タイプで表示を変えたい場合に。

For Archives(アーカイブページ)

2段目の「For Archives」にはタブがついています。これ見逃しがちなので要注意。

Custom Sidebarsのメニュー

As 〇〇 for selected Archive Types

アーカイブ別。

日付アーカイブ、タグアーカイブ、カテゴリーアーカイブ、検索ページなど、アーカイブでの表示を変えたい場合に。

As 〇〇 for selected Category Archives

個別のカテゴリーアーカイブ別。

特定カテゴリーのアーカイブにだけ表示させたい場合に。

As 〇〇 for selected Author Archives

投稿者別。

特定の投稿者の記事にだけ表示させたい場合に。

MEMO:複数選択も可
例えば、「Aさんが書いた料理カテゴリーの記事にだけ表示させる」とか、「料理カテゴリーで、お肉タグがある記事にだけ表示させる」とか、「料理、雑記、旅行の3つのカテゴリーに表示させる」といったように、複数の項目を選択することもできます。

表示したい場所にチェックを入れるだけなので、感覚的に扱えるのが良いところ。

スクリーンサイズで表示・非表示を切り替える

For Screen Size

いわゆるレスポンシブです。ピクセルで指定したサイズで表示・非表示を切り替えることができます。

Custom Sidebarsのメニュー

Screen

maxが最大サイズ。〇〇以下で表示・非表示。
minが最小サイズです。〇〇以上で表示・非表示。

ちょっとややこしいですね。「max:~まで/min:~から」って考えると分かりやすいかも

Show

Show:表示
Hide:非表示

表示・非表示の切り替えです。

Screen Width

サイズをpxで指定できます。

SNSアカウントでコメントできます

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください