Pocket

サイト制作においてWordPressテーマを活用しています。

WordPressテーマ「Fancie NOTE」を使ってサイトを調整していたところ、少し困ったことがありました。

それが、コンテナエリア上部に設定した内容が、トップページだけでなく固定ページや投稿ページなど、他のページにも表示されてしまうという問題です。

トップページの見せ方としては良いけれど、下層ページにまで同じ内容が出てしまうと、ページによっては少し違和感が出てしまいます。

今回は、Fancie NOTEで「コンテナエリア上部」をトップページのみに表示させる方法を調べたところ、DigiPressのマニュアルページを参考にして対応できたので、その手順をまとめておきます。

コンテナエリア上部をトップページだけに表示したかった理由

Fancie NOTEでは、ウィジェットエリアを使ってサイト内のさまざまな場所にコンテンツを表示できます。

今回調整したかったのは、トップページの上部に表示される「コンテナエリア上部」です。

ここにお知らせやバナー、案内文などを入れると、トップページの導線としてはとても便利です。

デザイン性も良いので、トップページ構成そのものとして使用するのにとても良いんです!

 

ただし、そのまま設定するとトップページ以外のページにも表示されてしまう場合があります。

たとえば、固定ページや記事ページの上部にも同じ案内が出てしまうと、ページ本来の内容に入る前に余計な情報が入ってしまい、見た目も少しごちゃついてしまいます。

そこで、今回は「トップページにだけ表示させる」という設定にしたいと思いました。

 

参考にしたのはDigiPressのマニュアルページ

対応方法を調べていたところ、DigiPressの公式マニュアルにある「ページの種類ごとで表示するウィジェットを分ける方法」というページが参考になりました。

このページでは、ウィジェットの表示対象をトップページ、カテゴリーページ、記事ページなどで分ける方法が紹介されています。

Fancie NOTEもDigiPress系のテーマなので、この方法を応用することで、コンテナエリア上部の表示制御ができました。

 

https://digipress.info/manual/how-to-use-widget-logic/

 

使用したプラグインは「Widget Options」

今回使ったのは「Widget Options」というプラグインです。

このプラグインを使うと、ウィジェットごとに表示するページ・非表示にするページを設定できます。

つまり、コンテナエリア上部に入れているウィジェットに対して、

「トップページでは表示する」
「それ以外のページでは表示しない」

という指定ができるようになります。

まずはクラシックウィジェット画面に戻す

注意点として、ウィジェットの表示制御を行う場合、環境によってはブロックウィジェットのままだとうまく設定できないことがあります。

DigiPressのマニュアルでも、まずはクラシックウィジェット画面に戻す手順が紹介されていました。

Fancie NOTEの場合も、管理画面からDigiPressの設定を開き、ウィジェット画面設定で「クラシックウィジェット画面に戻す」にチェックを入れます。

その後、通常のウィジェット管理画面で設定を進めていきます。

Widget Optionsをインストールする

次に、WordPress管理画面からプラグインを追加します。

「プラグイン」→「新規追加」を開き、検索欄に「Widget Options」と入力します。

表示されたプラグインをインストールして、有効化します。

有効化すると、各ウィジェットの設定欄に「Widget Options」の項目が追加されます。

Widget Optionsの設定を確認する

プラグインを有効化したら、「設定」→「Widget Options」を開きます。

ここで、表示制御に関する設定が使える状態になっているか確認します。

特に「Pages Visibility」や「Display Logic」など、ページごとの表示制御に関わる項目を有効にしておくと設定しやすくなります。

 

コンテナエリア上部のウィジェットを設定する

次に、「外観」→「ウィジェット」を開きます。

その中から、Fancie NOTEの「コンテナエリア上部」に入れているウィジェットを開きます。

ウィジェットを開くと、下の方に「Widget Options」の設定項目が追加されています。

ここで表示条件を設定します。

 

基本的な方法としては、トップページのみに表示させたい場合は、表示設定で「Show on checked pages」を選びます。

そのうえで、「Misc」タブの中にある「Home/Front」にチェックを入れます。

これで、チェックしたページ、つまりトップページのみにウィジェットが表示されるようになります。

 

条件分岐タグで指定する方法もある

もう少し細かく制御したい場合は、条件分岐タグを使う方法もあります。

トップページのみに表示したい場合は、以下のような条件を使います。

is_front_page() && !is_paged()

また、ブログ型のトップページとして表示している場合は、以下のような指定が合う場合もあります。

is_home() && !is_paged()

環境によって「フロントページ」と「投稿一覧ページ」の扱いが違うことがあるので、うまく表示されない場合はこの2つを試してみると良いと思います。

実際に設定してみた結果

マニュアル通りでは上手くいかなかった

今回の環境では、Widget Optionsを使って「Home/Front」にチェックを入れてみたのですが、コンテナエリア上部をトップページのみに表示させることができませんでした。

「表示させない」設定にしたら問題解決

先述のとおり、基本的には

  • 「Show on checked pages」を選択
  • 「Misc」タブの中にある「Home/Front」にチェックを入れる

ことで、トップページのみの表示なりますが、うまくいきませんでした。

そこで、次のような設定にしました。

  • 「Hide on checked pages」を選択
  • 「Post types」タブの中にある「投稿」「固定ページ」「お知らせ」等、表示させたくないものにチェックを入れる

 

この方法で、固定ページや投稿ページでは表示されなくなり、トップページだけに必要な案内を出せるようになりました。

 

はじめは手こずりましたら、なんとか対応できたので、同じようにFancie NOTEでコンテナエリア上部の表示場所に悩んでいる方は、DigiPressのマニュアルを参考にしながら設定してみると良いと思います。

 

まとめ

WordPressテーマFancie NOTEで、コンテナエリア上部をトップページのみに表示させたい場合は、「Widget Options」を使うことで対応できます。

手順としては、

  1. クラシックウィジェット画面に戻す
  2. Widget Optionsをインストールして有効化する
  3. コンテナエリア上部のウィジェットを開く
  4. 表示設定でトップページのみに表示するよう指定する

という流れです。

トップページには表示したいけれど、固定ページや投稿ページには表示したくないという場合に便利な方法です。

Fancie NOTEのウィジェット表示で同じように困っている方は、DigiPressの「ページの種類ごとで表示するウィジェットを分ける方法」のページを参考にすると、スムーズに対応できると思います。

Pocket