WordPressで構築されたWebサイトでは、商品やサービスをカテゴリごとに分類し、共通のテンプレートを使って一覧ページを表示することがあります。しかし、新しいカテゴリを追加する際、既存のカテゴリとは異なる情報やレイアウトが必要になる場合もあります。

今回は、商品一覧を掲載しているWebサイトに新しいカテゴリページを追加し、そのカテゴリだけ商品一覧のカラム数や注意事項を変更するとともに、専用の紹介コンテンツを設置しました。既存のカテゴリへの影響を避けながら、WordPressのタクソノミーと条件分岐を利用して対応した事例をご紹介します。

今回のご相談内容

今回ご相談いただいたのは、WordPressで運用されている商品紹介サイトへの新しいカテゴリページの追加です。既存のサイトでは、商品をカスタム投稿タイプで管理し、タクソノミーによってカテゴリ分けを行っていました。カテゴリごとのページには共通のテンプレートが使用されており、商品一覧や説明文などが表示される仕組みになっていました。

新しく追加するカテゴリも基本的には既存の仕組みを利用できますが、今回は掲載する商品の性質に合わせて、一部の表示内容を変更する必要がありました。具体的には、商品一覧を通常の3カラムから2カラムに変更すること、カテゴリ内の注意事項を専用の文章に差し替えること、さらに商品紹介の補足となる「選ばれる理由」のセクションを追加することが求められました。

発生していた症状・エラー内容

今回の作業は、システムの不具合やエラーによるものではなく、新しいカテゴリの追加に伴う表示仕様の調整です。

既存のテンプレートでは、商品一覧が3カラムで表示され、注意事項もすべてのカテゴリで共通の文章が出力される構成になっていました。そのため、新しいカテゴリを追加するだけでは、今回必要とされている2カラムの商品一覧や専用の注意事項を表示できませんでした。

また、新しいカテゴリには商品の特徴を説明する独自のセクションが必要でしたが、既存のカテゴリページには該当するコンテンツがありませんでした。単純に共通テンプレートへ追加すると、必要のないカテゴリにも同じ情報が表示されてしまうため、表示対象を限定する必要がありました。

原因の特定ポイント

今回のポイントは、既存のカテゴリページが共通のテンプレートで管理されていることでした。WordPressでは、タクソノミーを利用することでカテゴリごとに異なる商品を表示できますが、同じテンプレートを使用している場合、基本的なHTML構造やレイアウトも共通になります。

そのため、特定のカテゴリだけ表示内容を変更したい場合、共通部分を直接書き換えると、ほかのカテゴリにも変更が反映される可能性があります。今回も、商品一覧のカラム数や注意事項をそのまま変更してしまうと、従来の表示を維持したいカテゴリにまで影響が及ぶことが考えられました。

そこで、現在表示しているカテゴリを判定し、対象のカテゴリにだけ専用の処理を適用する方法を採用しました。これなら既存のテンプレートを活用しながら、必要な部分だけ表示を切り替えられます。

実際に行った対応内容

まず、新しいカテゴリをタクソノミーに追加し、既存の商品一覧ページと同じ仕組みで表示できるようにしました。商品データの取得や一覧表示、商品詳細を確認するポップアップなど、共通で利用できる部分はそのまま維持しています。

次に、商品一覧のレイアウトを調整しました。既存のカテゴリは3カラム表示のままとし、新しいカテゴリの場合にだけ専用のCSSクラスを付与する条件分岐を追加しました。このクラスに対して2カラムのスタイルを指定することで、ほかのカテゴリの表示を変更せずに、対象ページだけレイアウトを切り替えられる構成にしています。スマートフォンでは画面幅に合わせて1カラムになるように調整しました。

注意事項についても同様に、表示中のカテゴリを判定する条件分岐を追加しました。通常のカテゴリでは従来の注意事項を表示し、新しいカテゴリでは商品の内容や注文時の案内に合わせた専用の文章を表示するように変更しています。

さらに、新しいカテゴリ専用の「選ばれる理由」セクションを追加しました。商品の特徴を4つの項目に分け、写真と説明文を組み合わせた構成です。パソコンでは写真と文章を左右交互に配置し、スマートフォンでは写真の下に文章が続く縦並びのレイアウトにしました。

このセクションの実装では、写真とテキストボックスを一部重ねるデザインを採用しましたが、当初は画像が番号や文章に重なってしまう状態がありました。そこで、画像との重なりを維持しながら、テキストの表示位置と余白を調整しました。見た目のデザインだけでなく、文章が隠れずに読めることも考慮してCSSを修正しています。

対応後の結果・改善点

今回の対応により、新しいカテゴリに必要な専用の表示仕様を、既存のタクソノミーテンプレートに組み込むことができました。

商品一覧は対象カテゴリのみ2カラムに切り替わり、ほかのカテゴリでは従来の3カラム表示を維持する構成になっています。また、注意事項もカテゴリに応じて出し分けられるようになり、それぞれの商品に適した情報を掲載できるようになりました。

「選ばれる理由」のセクションについても、パソコンとスマートフォンで異なる画面構成に対応できるようにしています。写真と文章の重なりによる表示上の問題もCSSの調整で解消し、商品の特徴を視覚的に伝えられる構成にしました。

今回のように既存の仕組みを活用することで、新しいカテゴリのためにテンプレート全体を作り直すことなく、必要な機能やデザインを追加できます。

今回の対応から分かったこと

WordPressでカテゴリごとに異なるページを作成する場合、必ずしもカテゴリごとに新しいテンプレートを用意する必要はありません。

今回のように、基本的なページ構造や商品データの取得方法が共通しているのであれば、条件分岐によって一部の表示だけを切り替える方法が有効です。共通部分を維持できるため、同じ処理を複数のテンプレートに記述する必要がなく、修正箇所を限定しやすくなります。

一方で、カテゴリごとの違いが増えていく場合には、条件分岐が複雑になり、管理しにくくなる可能性もあります。そのため、どこまでを共通化し、どこからを個別の仕様として扱うかを判断することが大切です。

今回は、商品一覧や基本的なページ構造は共通しており、変更が必要な箇所も明確だったため、既存テンプレートへの条件分岐の追加が適していると判断しました。

同様のトラブルを防ぐために

WordPressで新しいカテゴリを追加する際は、既存のカテゴリと何が共通していて、何が異なるのかを事前に整理しておくことが重要です。

例えば、商品一覧のカラム数、掲載する説明文、注意事項、カテゴリ独自のコンテンツなどを確認しておくことで、必要な修正範囲を判断しやすくなります。見た目だけを変更するのか、表示する情報そのものを変更するのかによっても、適切な実装方法は異なります。

また、共通テンプレートを修正する場合は、対象のカテゴリだけでなく、既存のカテゴリにも影響がないかを確認することが大切です。特にCSSは複数のページで共通利用されていることがあるため、専用のクラスを設けるなど、変更範囲を限定する工夫が役立ちます。

パソコンでは問題なく表示されていても、スマートフォンでは画像と文章の配置が崩れることがあります。今回のように画像を重ねるデザインでは、画面幅による見え方の違いにも注意が必要です。

メディアプライムスタイルのサポートについて

メディアプライムスタイルでは、WordPressサイトの保守・管理をはじめ、既存ページの修正や新しいコンテンツの追加など、運用中のWebサイトに関するご相談にも対応しています。

今回のように、既存の仕組みを維持しながら特定のカテゴリだけ表示内容を変更したい場合も、現在のサイト構成を確認したうえで、必要な修正方法を検討します。

Webサイトを運用していると、制作当初には想定していなかった商品やサービスが増え、ページごとに異なる情報を掲載したくなることがあります。そのような場合も、必ずしも大きな改修が必要になるとは限りません。

既存サイトへのページ追加や表示内容の調整などでお困りの際は、お気軽にご相談ください。