【SWELL】カテゴリー＆固定ページごとにサイドバーを自由に変化する方法

ハシビィくん

サイドバーってユーザーの目によく触れるっすけど、カテゴリーごとに表示内容を変えて有効的アプローチしたいっす！

カピーさん

基本的には1種類だが、カスタマイズすれば自由に変更できるぞ！

WordPressでは基本的にサイドバーに表示させる項目は、ウィジェットとして表示させるページの種類が決まっています。SWELLの場合ですと、「共通サイドバー」「トップページ専用」「追尾サイドバー」があります。

ですが、今回のカスタマイズを使えば「このページにはこんなサイドバーにしたいな」というのが実現できるようになります。

固定ページごとにサイドバーを変更したい

特定の固定ページだけに指定のサイドバーを表示するカスタマイズ方法を紹介します。

カピーさん

固定ページのIDは一覧画面で確認できるぞ。

タイトル・スラッグ（URL)は任意の設定ができますが、記事のIDはWordPressのシステムから自動的に割り振りされます。

特定の固定ページだけ表示内容を変える方法

特定の固定ページにだけ〇〇を表示させたいというときには、先ほどのIDを活用してコントロールすることができます。

<?php if ( is_page(’1’) ) : ?>

表示させたい内容を記述

<?php endif; ?>

特定の投稿（記事）ページだけ表示内容を変える方法

先ほどの固定ページ版を少し変えるだけで、投稿ページ限定での特定のページの表示を変えることができます。

<?php if ( is_single('1') ) : ?>

表示させたい内容を記述

<?php endif; ?>

固定ページと同じくIDを調べて入力することで、特定のページのみに限定することができます。

違うのは、pageとsingleの記載になります。

特定のカテゴリーページだけ表示内容を変える方法

先ほどの応用編として、特定のカテゴリーアーカイブページだけに表示内容を変える方法です。

<?php if ( is_category('soccer') ) : ?>

表示させたい内容を記述

<?php endif; ?>

カテゴリーページの場合は、記事IDでなくカテゴリースラッグ名を入力してください。スラッグなので英数字になります。

また条件定義で複数のパターンをコントロールすることも可能です。

<?php if ( is_category('A') ) : ?>

Aカテゴリーの場合に表示させたい内容を記述

<?php elseif(is_category('B')):?>

Bカテゴリーの場合に表示させたい内容を記述

<?php else:?>

それ以外の場合に表示させたい内容を記述

<?php endif;?>

上記コードの1番最後の記述の対象になるのは、A・Bカテゴリー以外の全てのページが対象になります。固定ページ、投稿ページも含まれております。

SWELLの機能で表示内容をコントロールする方法

ここまでPHPで表示内容を変えるカスタマイズを紹介していきましたが、実は似たようなことがSWELLの機能で実現可能なんです。

今回実装する内容としては、アーカイブページのサイドバーと投稿ページで表示させる内容を分岐（変化）させるというものです。変化部分は以下の内容を想定して進めていきます。

実装方法

SWELLのブログパーツと制限エリアブロックを合わせて実装する方法になります。ページ種類ごとにサイドバーの表示ウィジェットを分けるという仕組みになっています。

STEP

ブログパーツで制限エリアブロックを作成

制限ブロック内に表示させたいブロックを作ります。

「ブログパーツ→新規追加」と選択。

※今回は分かりやすいように検索機能を実装していきます。

STEP

制限エリアブロックを表示させるページの種別を設定

制限エリアブロックを選択した状態でブロックタブをクリック。クリックすると「制限設定」という設定項目が表示されます。

今回は実装例として、ページ種別ごとに表示制限をコントロールしたいので「ページで制限する」を有効状態に。

• 制限方法：ページ種別
• ページ種別：「アーカイブ」を選択

これでブログパーツで行う設定は以上になります。

STEP

ブログパーツをサイドバーウィジェットに入力

最後は先ほど作成したブログパーツをウィジェットエリアに表示させる工程になります。

まずは作成したブログパーツを呼び出しコードをコピーします。

その後「外観→ウィジェット」と進めていき、共通サイドバーにカスタムHTMLを追加。

追加したカスタムHTMLにコピーしておいた呼び出しコードを貼り付けてください。

貼り付け後に以下のようになっていればOKです。タイトル欄は空欄でもOK。

以上でカスタマイズ作業は完了です。表示されているかを確認してください。

「ページ種別」ではなく、「ターム」を選んだ場合は『カテゴリー・タグ・タクソノミー』を選んでアーカイブページ＆投稿ページに表示させるように設定することも可能です。

「ページ種別」よりも細かな設定が可能です。

カピーさん

企業Webページでは、該当のカテゴリー毎にサービス用のサイト内バナーを設置したりもするぞ！

ハシビィくん

ブログサイトならまとめ記事なんかのリンクを設置するのも面白そうっすね。

カピーさん

クライアント様（クリエイター）の中には、実績ページ限定で外部のオンラインストア（SUZURI）へのリンクを設置するケースもあったな。

【番外編】力技で表示内容を変える方法

ここまでの方法でも十分実装できるのですが、とてもシンプルな方法としてCSSを使ったバージョンを紹介させていただきます。

ブログパーツを作成するところまでは変わらないので割愛させていただきます。以下は【番外編】のみの手順になります。

設定対象とするカテゴリーは上記画像の「オリジナル」になります。

STEP

ブログパーツに追加CSSクラスを設定

右側のブロックメニューから「高度な設定→追加CSSクラス」に任意のクラスを入力してください。

今回は実装例として『side-original』と設定しております。

STEP

ブログパーツをサイドバーウィジェットに入力

まずは作成したブログパーツを呼び出しコードをコピーします。

その後「外観→ウィジェット」と進めていき、共通サイドバーにカスタムHTMLを追加。

追加したカスタムHTMLにコピーしておいた呼び出しコードを貼り付けてください。

貼り付け後に以下のようになっていればOKです。タイトル欄は空欄でもOK。

STEP

CSSコードを追加する

追加CSSに以下コードを追記してください。追加CSSは「外観→カスタマイザー」もしくは「外観→テーマファイルフォルダー→子テーマstyle.css」に入力。

.side-original{
display: none;
}

次に表示させたいカテゴリーページだけで表示させるコードを追記します。

.category-original .side-original{
display:block !important;
}

これでオリジナルカテゴリーにのみサイドバーに表示されているはず。

まとめ：カテゴリー＆固定ページごとにサイドバーを自由に変化する方法

• PHPの条件分岐を使えば、固定ページ・投稿ページ・カテゴリーページごとにサイドバーの表示内容を変更できる
• SWELLなら「ブログパーツ」と「制限エリアブロック」を活用して、コードを書かずに表示を切り替えられる
• CSSを利用した方法なら、特定カテゴリーだけにサイドバーコンテンツを表示することも可能