カテゴリごとにカスタムのヘッダー、フッター、またはサイドバーを追加する方法


WordPress Web サイト上のカテゴリごとに異なるヘッダー、フッター、またはサイドバーを表示したいですか?

通常、サイト全体に同じヘッダー、フッター、サイドバーが表示されます。ただし、特定のカテゴリに別の情報、色、またはウィジェットを表示したい場合があります。

この記事では、WordPress の各カテゴリにカスタムのヘッダー、フッター、またはサイドバーを簡単に追加する方法を説明します。

カテゴリごとにカスタムのヘッダー、フッター、またはサイドバーを追加する理由は何ですか?

WordPress Web サイトを設定するときは、訪問者があなたとあなたの Web サイトについて知り、興味のあるコンテンツをすばやく簡単に見つけられるように、ヘッダー、フッター、サイドバーをカスタマイズしたことがあるでしょう。

ほとんどのテーマでは、ヘッダー、フッター、サイドバーはすべての投稿、ページ、カテゴリ、アーカイブ ページで同じように見えます。それらの位置と外観はテーマによって異なります。

ただし、サイトに別のヘッダー、フッター、またはサイドバーを表示したい場合もあります。たとえば、WordPress の投稿やページごとに異なるサイドバーを表示したい場合があります。

または、カスタムのヘッダー、フッター、またはサイドバーを表示して、特定のカテゴリの Web サイトの外観を変更したい場合もあります。たとえば、その特定のカテゴリの最近の投稿をカスタム サイドバーに表示できます。

そうは言っても、WordPress の各カテゴリにカスタムのヘッダー、フッター、またはサイドバーを簡単に追加する方法を見てみましょう。次の 3 つの方法について説明します。

  • 方法 1: プラグインを使用してカテゴリごとにカスタム サイドバーを追加する

  • 方法 2: テーマ ビルダーを使用して各カテゴリにカスタム ヘッダーまたはフッターを追加する

  • 方法 3: コードを使用して各カテゴリにカスタム ヘッダー、フッター、またはサイドバーを追加する

方法 1: プラグインを使用してカテゴリごとにカスタム サイドバーを追加する

この方法は、Web サイトのデザインにすでに満足していて、サイドバーのみを変更し、他には何も変更しない場合に最適です。

最初に行う必要があるのは、Easy Custom Sidebars プラグインをインストールしてアクティブ化することです。詳細については、WordPress プラグインのインストール方法に関するステップバイステップガイドをご覧ください。

アクティブ化したら、外観 » サイドバーの置換ページにアクセスしてカスタム サイドバーを作成する必要があります。

まず、サイドバーの名前を入力する必要があります。このチュートリアルでは、ブログ カテゴリに表示するため、これを「ブログ」と呼びます。

その後、カスタム サイドバーに置き換えられるサイドバーを選択する必要があります。

次に、カスタム サイドバーをいつ表示するかを選択する必要があります。画面の左側の列に投稿、ページ、カテゴリ、タグがリストされます。

[カテゴリ] の横にある矢印をクリックし、[ブログ] カテゴリのボックスをオンにする必要があります。その後、「サイドバーに追加」ボタンをクリックする必要があります。

「サイドバーの置換」セクションに「ブログ」カテゴリが表示され、サイドバーがそのカテゴリとともに表示されるようになります。必要に応じて、複数のカテゴリを追加すると、すべてのカテゴリにサイドバーが追加されます。

ここで、「サイドバーの作成」ボタンをクリックして、最初のカスタム サイドバーを作成する必要があります。

次の仕事は、サイドバーにウィジェットを追加することです。ガイドに従ってサイドバーにウィジェットを追加する方法を学ぶことができます。

Easy Custom Sidebar を使用すると、カスタム サイドバーを好きなだけ作成し、各サイドバーを WordPress サイトの異なるカテゴリに割り当てることができます。

方法 2: テーマ ビルダーを使用して各カテゴリにカスタム ヘッダーまたはフッターを追加する

この方法は、Web サイトに独自のデザインを与えるために、すべてのページのサイドバー、ヘッダー、フッターを完全に制御したい場合に最適です。

これを行うには、SeedProd を使用することをお勧めします。

SeedProd は、コードを書かずにカスタム WordPress テーマを簡単に作成できる最高の WordPress テーマ ビルダー プラグインです。これには、ヘッダー、フッター、その他魅力的な WordPress テーマに必要なすべての作成が含まれます。

コードを使わずにカスタム WordPress テーマを簡単に作成する方法に関するガイドに従うことで、WordPress テーマをすばやく作成する方法を学ぶことができます。

これを行うと、SeedProd を使用してカスタム ヘッダーとフッターを簡単に作成し、特定のカテゴリを表示しているときなど、特定の状況でのみ表示されるようにルールを設定できます。

まず、カスタム フッターを作成します。ページ上部にあるオレンジ色の「新しいテーマ テンプレートを追加」ボタンをクリックすると、新しいフッターを作成できます。これにより、フッターなどの新しいテーマ テンプレートを作成できる画面が表示されます。

まずテンプレートに名前を付ける必要があります。このチュートリアルでは、これを「フッター - ブログ」と呼びます。その後、タイプドロップダウンメニューから「フッター」を選択し、複数のフッターが現在のページと一致する場合にどのフッターを表示するかを決定する優先順位を選択する必要があります。

最も優先度の高いフッターが表示されます。デフォルトのフッターの優先度は 0 なので、このフッターに優先度 1 を与えて、一致するページに確実に表示されるようにします。

その後、フッターが表示される条件を設定する必要があります。この例では、「ブログ」カテゴリと一緒に表示したいと考えています。

これを行うには、最初の条件設定が「含む」であることを確認し、中央のドロップダウンから「カテゴリあり」を選択する必要があります。最後に、最後のフィールドに「ブログ」と入力し、「保存」ボタンをクリックして設定を保存する必要があります。

カスタム フッターを作成する別の方法もあります。最初からフッターを作成する代わりに、「複製」リンクをクリックして元のフッターを複製することができます。このチュートリアルではそれを行います。

これにより、カスタマイズ可能な現在のフッターの正確なコピーが作成されます。次に、新しい項目の下にある [条件の編集] リンクをクリックし、上記で新しいテンプレートを作成したときと同様に、名前と条件を選択する必要があります。

次に、新しいフッターをカスタマイズします。その名前をクリックするだけで、SeedProd のドラッグ アンド ドロップ エディターで開きます。

SeedProd を使用すると、フッターに新しいブロックを簡単に追加できます。既存のブロックをクリックして、色、テキスト、その他のオプションを編集することもできます。

このチュートリアルでは、単に背景色を緑色に変更します。

カスタム フッターに満足したら、[保存] の横にある下矢印をクリックしてから、[公開] をクリックしてください。これにより、変更が保存され、フッターがライブにプッシュされます。

おめでとうございます。ブログ カテゴリのアーカイブ ページを表示するとき、およびブログ カテゴリの投稿を表示するときに、新しいフッターが表示されます。

「ブログ」カテゴリの投稿を表示すると次のようになります。

カスタム フッターを作成したので、同じ手順を繰り返して、特定のカテゴリに対してのみ表示されるカスタム ヘッダーを作成できます。

方法 3: コードを使用して各カテゴリにカスタム ヘッダー、フッター、またはサイドバーを追加する

コードに精通している場合は、このメソッドを使用して、特定のカテゴリのアーカイブ ページや、特定のカテゴリに属する投稿にカスタム ヘッダー、フッター、またはサイドバーを表示できます。

これを行うには、テーマ ファイルにコード スニペットを追加する必要があります。これまでにこれを行ったことがない場合は、WordPress でコードをコピーして貼り付ける方法に関するガイドを参照してください。

ヘッダーとフッターにカスタム コードを追加する方法と、WordPress でフッターを編集する 4 つの方法に関する投稿もご覧ください。

コードを使用して各カテゴリにカスタム ヘッダーを追加する

「ブログ」などの特定のカテゴリの投稿にカスタム ヘッダーを追加するには、テーマの single.php ファイルを開き、通常のヘッダー コードを次のコードに置き換える必要があります。

<?php if (in_category('Blogging')) {
get_header('blogging');
} else {
get_header();
} ?>

このコードは、誰かが「ブログ」カテゴリの投稿を閲覧した場合、header-blogging.php というファイルが存在する場合はそれを表示する必要があることを WordPress に伝えます。存在しない場合、または投稿が「ブログ」カテゴリにない場合、WordPress はデフォルトのヘッダー ファイルを表示します。

1 行目の「Blogging」をカテゴリの名前に変更し、2 行目の「blogging」をカスタム ヘッダーの名前に変更してください。

複数のカテゴリにカスタム フッターを表示したい場合、または複数のカスタム ヘッダーがある場合は、次のようなものを使用できます。

<?php if (in_category(array('Blogging', 'Photography'))) {
get_header('blogging');
} elseif (in_category('News'))) {
get_header('news');
} else {
get_header();
} ?>

これにより、「ブログ」または「写真」カテゴリの投稿に header-blogging.php カスタム ヘッダーが表示されます。また、「ニュース」カテゴリのすべての投稿の header-news.php ヘッダーも表示されます。他のすべての投稿では、デフォルトの header.php ヘッダーが表示されます。

これまでのところ、特定のカテゴリの投稿を表示するときにのみカスタム ヘッダーが表示されます。カテゴリ アーカイブ ページを表示するときにカスタム ヘッダーを表示することもできます。

これを行うには、テーマの category.php ファイルを変更する必要があります。テーマにそのファイルがない場合は、独自のカテゴリ テンプレートを作成するか、代わりにテーマの archive.php または index.php ファイルを編集できます。

ファイルを開いて、通常のヘッダー コードをこのコードに置き換える必要があります。最初の行が上で使用したコードと少し異なることに注意してください。

<?php if (is_category('Blogging')) {
get_header('blogging');
} else {
get_header();
} ?>

注: 「in_category()」関数は、投稿が特定のカテゴリにあるかどうかを確認します。 「is_category()」関数は、特定のカテゴリのアーカイブを見ているかどうかを確認します。

コードを使用して各カテゴリにカスタム フッターを追加する

特定のカテゴリのカスタム フッターの表示も同様です。カテゴリごとに個別のフッターを取得するには、テーマの single.php テンプレートを編集し、フッター コードを次のものに置き換える必要があります。

<?php if (in_category('Blogging')) {
get_footer('blogging');
} else {
get_footer();
} ?>

カテゴリの名前とカスタム フッターを使用するようにコードを変更してください。

また、テーマの category.php ファイルを変更して、フッター コードをこのスニペットに置き換える必要があります。繰り返しになりますが、使用するカテゴリとカスタム フッターの名前を必ず含めてください。

<?php if (is_category('Blogging')) {
get_footer('blogging');
} else {
get_footer();
} ?>

詳細が必要な場合は、上記の「コードを使用して各カテゴリにカスタム ヘッダーを追加する」を参照してください。

コードを使用してカテゴリごとにカスタム サイドバーを追加する

同じ方法を使用して、特定のカテゴリのカスタム サイドバーを表示することもできます。テーマの single.php テンプレートを編集し、サイドバーのコードを次のものに置き換える必要があります。

<?php if (in_category('Blogging')) {
get_sidebar('blogging');
} else {
get_sidebar();
} ?>

使用するカテゴリとカスタム サイドバーの名前を含むコード スニペットを編集する必要があります。

また、テーマの category.php テンプレートを変更し、サイドバー コードを次のものに置き換える必要があります。

<?php if (is_category('Blogging')) {
get_sidebar('blogging');
} else {
get_sidebar();
} ?>

さらに詳細が必要な場合は、上記の「コードを使用して各カテゴリにカスタム ヘッダーを追加する」を参照してください。

このチュートリアルが、WordPress の各カテゴリにカスタムのヘッダー、フッター、またはサイドバーを簡単に追加する方法を学ぶのに役立つことを願っています。 WordPress を使ってオンライン ブログでお金を稼ぐ方法を学んだり、WordPress の一般的なエラーとその修正方法のリストを確認したりすることもできます。

この記事が気に入っていただけましたら、WordPress ビデオ チュートリアルの YouTube チャンネルに登録してください。 Twitter や Facebook でもご覧いただけます。