WordPressサイトでカテゴリーごとに異なるヘッダー、フッター、サイドバーを表示したいですか？
通常、サイト全体を通して同じヘッダー、フッター、サイドバーが表示されます。しかし、カテゴリーによっては異なる情報、色、ウィジェットを表示したい場合があります。
この投稿では、WordPressのカテゴリーごとにカスタマイザー、フッター、サイドバーを簡単に追加する方法を紹介します。
なぜカテゴリーごとにカスタマイザー、フッター、サイドバーを追加するのか？
WordPressでサイトを立ち上げる際、訪問者があなたやあなたのサイトについて知り、興味のあるコンテンツを素早く簡単に見つけられるように、ヘッダー、フッター、サイドバーをカスタマイズすることがほとんどでしょう。
ほとんどのテーマでは、ヘッダー、サイドバー、フッターのテンプレートは投稿日、ページ、カテゴリー、アーカイブページのすべてで同じように見えます。それらの位置と外観はテーマによって異なります。
しかし、サイト上に異なるヘッダー、フッター、サイドバーを表示したい場合もあるでしょう。例えば、WordPressのカスタム投稿やページごとに異なるサイドバーを表示したい場合があります。
また、カスタムヘッダー、カスタムフッター、カスタムサイドバーを表示することで、特定のカテゴリー用にサイトの外観を変更したい場合もあります。例えば、カスタムサイドバーに特定のカテゴリーからの最近の投稿を表示することができます。
ということで、WordPressブログのカテゴリーごとにカスタムヘッダー、フッター、サイドバーを簡単に追加する方法を見ていきましょう。ここでは3つの方法を取り上げます：
- 方法1：プラグインを使ってカテゴリーごとにカスタム・サイドバーを追加する。
- 方法2：テーマビルダーを使用して、カテゴリーごとにカスタマイザーまたはフッターを追加する。
- 方法3：コードを使ってカテゴリーごとにカスタマイザー、フッター、サイドバーを追加する。
方法1：プラグインを使ってカテゴリーごとにカスタム・サイドバーを追加する。
この方法は、すでにウェブデザインに満足しており、サイトのサイドバーだけを変更したい場合に最適です。また、初心者にも簡単にできます。
まず最初にEasy Custom Sidebarsプラグインをインストールして有効化します。詳しくはWordPressプラグインのインストール方法をご覧ください。
注： このプラグインはWordPressの最新バージョンでテストされていないことにお気づきかもしれません。とはいえ、私たち自身もこのプラグインを使用したことがあり、私たちの方では問題なく動作しました。
古いプラグインの使用についてさらに詳しく知りたい方は、WordPressのバージョンでテストされていないプラグインをインストールすべきかどうかについてのガイドをお読みください。より良い、より更新された代替手段を見つけた場合は、以下のコメントでお知らせください。
有効化した後、カスタマイザーサイドバーを作成するために外観 ” サイドバーの置き換えページにアクセスする必要があります。
まず、新しいサイドバーの名前を入力する必要がある。このチュートリアルでは、「ブログ」カテゴリーに表示したいので、「ブログ」と呼ぶことにする。
その後、カスタムサイドバーに置き換えるサイドバーを選択します。
次に、カスタムサイドバーを表示するタイミングを選択する必要があります。画面の左のカラムに様々なページ、投稿、カテゴリー、タグが表示されます。
カテゴリーの隣にある矢印をクリックし、ブログカテゴリーのボックスをチェックする必要があります。その後、「サイドバーに追加」ボタンをクリックします。
ブログ」カテゴリーが「サイドバーの置き換え」セクションに外観表示され、サイドバーがそのカテゴリーで表示されるようになりました。お望みであれば、複数のカテゴリーを追加することができ、サイドバーはすべて追加されます。
サイドバーを作成」ボタンをクリックして、最初のカスタムサイドバーを作成してください。
次の作業は、サイドバーウィジェットエリアにWordPressウィジェットを追加することです。WordPressのサイドバーウィジェットを追加する方法については、こちらのガイドを参照してください。
イージーカスタムサイドバーは、カスタムサイドバーを好きなだけ作成し、WordPressサイトの異なるカテゴリーページに各サイドバーを割り当てることができます。
方法2：テーマビルダーを使用して、カテゴリーごとにカスタマイザーまたはフッターを追加する。
この方法は、サイドバー、ヘッダー、フッターをすべてのページでコントロールし、ユニークなデザインのサイトを作りたい場合に最適です。
そのためには、SeedProdの使用をお勧めします。
SeedProdは、コードを書くことなく簡単にカスタマイザーWordPressテーマを作成することができます最高のWordPressテーマとページビルダープラグインです。これには、ヘッダー、フッター、その他魅力的なWordPressテーマに必要なすべてのものの作成が含まれます。
WordPressテーマを素早く作成する方法は、コードなしで簡単にカスタマイザーを作成する方法をご覧ください。
SeedProdを使えば、カスタマイザーやフッターを簡単に作成することができ、特定のカテゴリーを表示しているときなど、特定の状況下でのみ表示されるようにルールを設定することができます。
まず始めに、カスタマイザーを作成します。ページ上部のオレンジ色の「新規テーマテンプレートの追加」ボタンをクリックすると、新しいフッターを作成できます。フッターのような新しいテーマテンプレートを作成する画面が表示されます。
テンプレートに名前をつけることから始めましょう。このチュートリアルでは「Footer – Blogging」と呼ぶことにする。その後、「タイプ」ドロップダウンメニューから「フッター」を選択し、優先順位を選択します。複数のフッターが現在のページに一致する場合、どのフッターが表示されるかを決定します。
優先順位が最大のフッターが表示されます。初期設定のフッターの優先順位は0なので、このフッターの優先順位を1にして、一致するページに表示されるようにします。
その後、フッターが表示される条件を設定する必要がある。私たちの場合、「ブログ」カテゴリーと一緒に表示させたい。
そのためには、最初の条件設定が「Include」であることを確認し、真ん中のドロップダウンから「Has Category」を選択します。最後に、最後のフィールドに「blogging」と入力し、「Save」ボタンをクリックして設定を保存します。
カスタムフッターを作成する方法はもう一つあります。一から作成するのではなく、「Duplicate（複製）」リンクをクリックして、オリジナルのフッターを複製するだけです。このチュートリアルではそうします。
これで、カスタマイズ可能な現在のフッターの完全なコピーが作成されます。次に、新規項目の下にある「条件の編集」リンクをクリックし、上記の新規テンプレート作成時と同じように名前と条件を選択する必要があります。
さて、いよいよ新しいフッターのカスタマイズです。その名前をクリックするだけで、SeedProdのドラッグ＆ドロップエディターが開きます。
SeedProdでは、フッターに新しいブロックを簡単に追加することができます。また、既存のブロックをクリックして色やテキスト、その他のオプションを編集することもできます。
このチュートリアルでは、単に背景色を緑に変更します。
カスタム・フッターに満足したら、「保存」の隣にある下向き矢印をクリックし、「公開する」をクリックしてください。これで変更が保存され、フッターが公開されます。
おめでとうございます！新しいフッターは、ブログカテゴリーのアーカイブページを表示する際や、ブログカテゴリー内の投稿を表示する際に表示されます。
ブログ」カテゴリーで投稿を表示するとこんな感じ。
カスタム・フッターを作成したので、特定のカテゴリーにのみ表示されるカスタム・ヘッダーを作成する手順を繰り返すことができます。
方法3：コードを使ってカテゴリーごとにカスタマイザー、フッター、サイドバーを追加する。
もしあなたがコードに詳しいのであれば、特定のカテゴリーに属するアーカイブページや投稿日にカスタマイザー、フッター、サイドバーを表示するためにこの方法を使うことができます。この方法はPHPを扱うだけなので、HTMLやCSSを使う必要はありません。
これを行うには、テーマファイルにコードスニペットを追加する必要があります。この作業を行ったことがない場合は、WordPressでコードをコピー＆ペーストする方法をご覧ください。
ヘッダーとフッターにカスタムコードを追加する方法についての投稿もご覧ください。
コードを使用した各カテゴリーのカスタムヘッダーの追加
カスタムヘッダーを’Blogging’のような特定のカテゴリーの投稿に追加するには、テーマのsingle.phpファイルを開き、通常のヘッダーコードをこのコードに置き換える必要があります：
<?php if (in_category('Blogging')) {
get_header('blogging');
} else {
get_header();
} ?>
このコードは、誰かが「Blogging」カテゴリーの投稿を表示した場合、header-blogging.phpというファイルが存在すれば、それを表示する必要があることをWordPressに伝えます。それが存在しない場合、または投稿が’Blogging’カテゴリーにない場合、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();
} ?>
これは’Blogging’または’Photography’カテゴリーの投稿日にheader-blogging.phpカスタムヘッダーを表示します。また、’News’カテゴリー内のすべての投稿に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のヘッダーメニューにボタンを追加する方法
- チェックリストWordPressサイトのフッターに追加するもの
- WordPressフッターのデザイン例（＋ベストプラクティス）
このチュートリアルで、WordPressで各カテゴリーのカスタムヘッダー、フッター、サイドバーを簡単に追加する方法を学んでいただけたら幸いです。WordPressでオンラインブログでお金を稼ぐ方法や、WordPressのよくあるエラーとその修正方法のリストもご覧ください。
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Dave B
I’ve tried to implement a different footer on the static home page with the following code, but it doesn’t work….
Can you help please?
}
Johann
Hi all,
This is a great trick, but one of my client asked if we can can adapt this to WooCommerce?
I tried but unsuccessful…
Can you tell me how would you implement this to WooCommerce archive-product.php template?
Gabrielle
Hi, what can i do if i want to have custom headers, sidebars and footers to be saved in subfolders, like:
sidebar-cars in folder sidebars/sidebar-cars.php
John
But how do I do this for each category?
Ivan Jaquez
Hello and thanks for this great article. What about each category linking to an external url and not just the homepage? For example: Dog training category’s header linked to an external site. Thanks in advanced
Carol Dunlop
You must have been reading my mind! I just spoke with a client who wants a different footer on one certain page and this looks like it is going to work perfectly. Thanks for the awesome info.
Stuart Mackey
Thanks! I use categories for my business Site to denote the major “service categories” of video production I offer to my clients. This should allow me to have an intro describing the type of video and its function; marketing, testimonial, etc.
hamed.oveysi
I want a custom header for several category pages. Your code works with one category. How to do it?
David
what if i just want a different sidebar than the home page, in other words all categories would have the same sidebar but the home page would have a different sidebar, also how would I be able to edit the different sidebars in the widgets panel?
thanks for this post btw easiest one I found so far.
Editorial Staff
If you just want a different sidebar on the homepage, use the conditional tag if is_home or is_frontpage (depending on how you are creating a custom homepage), and then include a different sidebar file.
管理者
Mike
On a related note – you can create a custom sidebar for each individual page or post using the Graceful Sidebar Plugin. To use this you simply edit your post as normal and specify the sidebar widget title and content in the custom edit fields provided by this plugin.
DaveK
WPBeginner does it again! I was looking for ages for a solution to add a different sidebar to different categories, and this worked a treat. Thanks
Ljuboja
Does this trick do the same with pages?
Tnx !
Editorial Staff
For pages, you just use the custom page templates.
管理者
dains
Actually, a custom page template is a great place to implement this solution. A built-in WP function to tell it to use a custom header, sidebar or footer? Sign me up.
Since you’re using conditional tags for this solution (is_category), you should be able to use the ones for pages (http://codex.wordpress.org/Conditional_Tags#A_PAGE_Page) in a custom page template. I am planning a custom front page assigned via the admin section, so I’ll be trying it out with is_front_page instead of is_category.
Great
sven
hi, thanks for a a great tutorial, this is just what i was looking for. i now have a custom sidebar for one of my categories, and as I kept the dynamic sidebar code I thought I would be able to add widgets to it. It however does not show up in the widget editor. how do i get it so I can add widgets to my category specific sidebar?
Editorial Staff
Follow this tutorial.
管理者
shravan
Thank you so much for this post. This really bailed me out of big trouble. I looked for plugins to do this job for me but couldn’t find any. I was so glad to find the solution on this post.
Now I can create different headers for different categories.
Thanks again and keep up the good work.
Delighted Programer
ohhh this is what i have been looking for!!! Have been trying to figure out how to display a section with advertisements related to categories in wordpress and here it is!!!
thank you HEAPS!
Wellwisher007
improve the spelling of programer to programmer
wrerm
I recently purchased a WP Book and designed a wesbsite using WP and this is very useful. Thanks!
Jason Pelker
Is there a way to change the sidebar/header on a single post, depending on the post’s category?
Editorial Staff
Yes it is possible. You will have to use this tutorial about creating custom single post templates in WordPress.
管理者