ウェブサイトを構築する際、多くのWordPressユーザーは、すべてのサブカテゴリを表示すれば訪問者が探しているものをより早く見つけられると想定しています。
しかし、私たちの経験では、サイトに長いサブカテゴリリストを表示しても見栄えが悪く、訪問者を圧倒してしまう可能性があります。人々がナビゲートするのを助ける代わりに、しばしば混乱させ、サイトを散らかってプロフェッショナルでないように見せてしまいます。
良いニュースは、長年にわたり、サブカテゴリの表示方法をカスタマイズするいくつかの簡単な方法を発見したことです。
このチュートリアルでは、コードスニペットを使用してサブカテゴリーを非表示にし、スタイルを変更する方法を説明します。
WordPressでサブカテゴリーを使用する理由
WordPressサイトに投稿を作成する際、カテゴリーとタグを使用して整理できます。コンテンツを適切に分類すると、SEOを強化でき、サイトへのトラフィックを増やすことができます。
投稿を整理することで、サイトのナビゲーションも改善され、訪問者は探しているコンテンツを簡単に見つけることができます。サイトの構造が複雑になった場合は、サブカテゴリを作成することもできます。
たとえば、旅行ブログでは、米国内の観光名所のカテゴリーを持つことができます。コンテンツが増えるにつれて、シカゴ、ロサンゼルス、ニューヨーク市などの都市のサブカテゴリーを作成することが理にかなっているかもしれません。
WordPressウィジェットにカテゴリを表示する場合、フラットリストまたは階層を使用できます。各オプションがデモサイトでどのように表示されるかを以下に示します。
WordPressダッシュボードの外観 » ウィジェットにアクセスし、カテゴリウィジェットの「階層を表示」ボックスをチェックすることで、これを行います。
しかし、どちらのオプションを選択しても、リストは最終的に長くなり、管理不能になり、WordPressサイトで見栄えが悪くなります。
このガイドでは、カテゴリリストのナビゲーションを容易にするためにサブカテゴリを非表示にする方法と、サブカテゴリをスタイル設定してすっきり見せる方法を説明します。以下のクイックリンクを使用して、最も関心のあるセクションにジャンプできます。
CSSを使用してWordPressでサブカテゴリーを非表示にする方法
この記事では、サブカテゴリを非表示にしたりスタイルを設定したりするために、CSSコードスニペットを使用します。スニペットは、テーマのstyle.cssファイルに直接追加したり、WPCodeのようなコードスニペットプラグインに追加したり、WordPressダッシュボードのテーマカスタマイザーを使用して追加したりできます。
CSSの追加は初心者には難しい場合があり、間違いを犯すとWordPressサイトが壊れる可能性があります。コードスニペットの使用に慣れていない場合は、WordPressサイトにカスタムCSSを簡単に追加する方法に関するガイドを確認することをお勧めします。
というわけで、WordPressでサブカテゴリを非表示にする方法を見ていきましょう。
次のコードをコピーして、テーマのstyle.cssファイル、コードスニペットプラグイン、またはWordPressテーマカスタマイザーに貼り付ける必要があります。
.children {
display:none;
}
テーマカスタマイザーを使用するには、まず 外観 » カスタマイズ に移動し、リストの一番下にある「追加CSS」をクリックする必要があります。その後、コードを貼り付けて「公開」ボタンをクリックするだけです。
これでWordPressサイトにアクセスして、サブカテゴリが非表示になっていることを確認できます。テストウェブサイトのビフォーアフターのスクリーンショットを以下に示します。
これでかなりすっきりしましたが、訪問者はサブカテゴリを見ることができなくなりました。WordPressのカテゴリページにサブカテゴリを表示する方法に関するガイドを確認することをお勧めします。
そのようにすると、訪問者が「United States」カテゴリーをクリックしたときに、シカゴ、ロサンゼルス、ニューヨーク市などのサブカテゴリーへのリンクが表示されます。
WordPressでCSSを使用してサブカテゴリをスタイル設定する方法
CSSを使用して、カテゴリとサブカテゴリの外観をカスタマイズすることもできます。これは、CSSに関するご自身の知識と、現在のテーマでの外観をどのように変更したいかによって異なります。
たとえば、サブカテゴリーを階層的に表示する場合、縦棒を追加すると、どのカテゴリーが同じレベルにあるかをすばやく確認できます。その方法を見てみましょう。
サブカテゴリのスタイルを変更する手順は、非表示にする手順と同じです。以下のコードをコピーして、style.css、WPCodeプラグイン、またはWordPressテーマカスタマイザーに貼り付ける必要があります。
.children {
padding: 0 0 0 5px;
margin: 0 0 0 2px;
border-left: 1px solid #333;
}
テーマカスタマイザーを使用している場合は、「公開」ボタンをクリックすることを忘れないでください。
これで、WordPressサイトにアクセスして変更をプレビューできます。こちらはテストサイトの変更前と変更後のスクリーンショットです。
好みに合わせてスタイルをカスタマイズするために、コードを自由に調整してください。
また、CSSを使用してWordPressテーマの他の要素をスタイル設定することもできます。例えば、個々のカテゴリーを異なるスタイルで表示するようにCSSを設定できます。
WordPressのカテゴリとサブカテゴリに関するエキスパートガイド
サブカテゴリを非表示またはスタイル設定する方法がわかったので、WordPressでカテゴリとサブカテゴリを使用する他のチュートリアルを確認したいかもしれません。
- WordPressのURLにカテゴリとサブカテゴリを含める方法
- WordPressウィジェットで空のカテゴリを表示する方法
- WordPressでカテゴリーの説明を表示する方法
- WordPressにタクソノミー画像（カテゴリアイコン）を追加する方法
このチュートリアルが、WordPressでサブカテゴリを非表示にし、スタイルを変更する方法を学ぶのに役立ったことを願っています。また、サイトを成長させるための必須WordPressプラグインのリストや、WordPressで関連記事を表示する方法に関するチュートリアルも確認したいかもしれません。
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
Farukh Hussain
わあ、この簡単なヒントをありがとう。いつも通り命の恩人です。神のご加護がありますように。
WPBeginnerサポート
You’re welcome, glad our guide was helpful
管理者
Quoc Thai
チュートリアルをありがとうございます！ :))
Phaoloo
Simple and useful as always