WordPressでサブカテゴリを非表示またはスタイル設定する方法

ウェブサイトを構築する際、多くの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でも私たちを見つけることができます。