WordPressで制作されたホームページでは、施工実績や制作事例などをトップページにスライダー形式で表示することがあります。しかし、実績が増えるたびに表示する画像も増えてしまい、スクロールが一周するまでに時間がかかるケースがあります。

今回は、実績紹介のアイキャッチ画像が増え続けることをきっかけに、既存のデザインを活かしながら表示方法を見直した事例をご紹介します。カスタム投稿とカテゴリ分けを利用し、カテゴリごとに最新10件を表示する2段構成のスライダーへ変更する方法を採用しました。

単純に画像を減らすのではなく、ホームページを閲覧する方の見やすさと、今後の更新作業のしやすさを両立することが今回のポイントです。

今回のご相談内容

お客様から、トップページに掲載している実績紹介のアイキャッチ画像についてご相談をいただきました。

これまでのホームページでは、登録されている実績のアイキャッチ画像が横方向に流れるスライダーを設置していました。しかし、新しい実績を追加するたびに画像が増えるため、スライダーが一周するまでに時間がかかることを懸念されていました。

そこで、お客様ご自身で過去の実績に設定していたアイキャッチ画像を一部削除されたのですが、削除した画像の代わりに会社のロゴ画像が表示されるようになってしまったとのことでした。

当初は、実績紹介の画像だけを表示したいというご相談でしたが、お話を進める中で、現在の横スクロール形式を気に入っていらっしゃることも分かりました。そのため、デザインを大きく変更せず、表示する実績の数を調整する方法を検討することになりました。

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

今回発生していたのは、WordPressのエラーではなく、ホームページに設定されている表示仕様によるものでした。

実績紹介のスライダーには、アイキャッチ画像が設定されている場合はその画像を表示し、設定されていない場合はあらかじめ用意されたロゴ画像を表示する仕組みが組み込まれていました。
そのため、管理画面からアイキャッチ画像を削除しても、スライダーの表示対象から実績そのものが除外されるわけではありません。画像が未設定になった実績には、代わりにロゴ画像が表示されていました。

また、スライダーは登録されている実績を全件取得する設定だったため、新しい実績が増えるほど表示対象も増加する状態でした。

つまり、アイキャッチ画像を削除するだけでは、ロゴ画像への置き換わりも、スクロール時間が長くなるという問題も解消できない構造になっていたのです。

原因の特定ポイント

まず確認したのは、WordPressの実績紹介がどのような仕組みで表示されているかという点です。

対象のホームページでは、実績紹介にカスタム投稿が使用されており、各実績はカテゴリによって分類されていました。トップページでは、このカスタム投稿から実績を取得し、アイキャッチ画像を横スクロール形式で表示する構成になっていました。

コードを確認すると、実績の取得件数が無制限に設定されていることが分かりました。WordPressでは、投稿の取得件数を指定することで、最新の実績だけを表示することができますが、今回はその制限が設けられていませんでした。
さらに、画像が未設定の場合には代替画像を表示する処理も確認できました。

この2つの仕様が、今回のご相談につながっていた原因です。
そこで、画像を削除して表示数を調整するのではなく、WordPress側で取得する実績の件数を制限する方法をご提案しました。

実際に行った対応内容

今回の対応では、既存の横スクロール形式を維持しながら、実績紹介をカテゴリ別の2段構成に変更する方針としました。

お客様とのご相談の中では、当初、カテゴリごとにすべての実績を表示する案もありました。しかし、全件表示では今後も画像数が増え続けるため、当初の懸念を根本的に解消できません。

また、多数の画像をトップページに表示すると、画像の読み込みやスライダーの処理によって、ページの表示負荷が増える可能性もあります。

そのため、各カテゴリの最新10件に表示数を制限する構成をご提案し、最終的に以下の仕様で進めることになりました。

• 上段のスライダー
  1つ目のカテゴリに登録されている実績から、公開日の新しい順に10件を取得し、左方向へスクロールする構成です。
• 下段のスライダー
  2つ目のカテゴリに登録されている実績から、同じく最新10件を取得し、上段とは逆の右方向へスクロールする構成です。

WordPress側では、カスタム投稿の取得条件を変更し、カテゴリごとに実績を取得できるようにしました。既存のカテゴリ分けを利用するため、新たにカテゴリを作成する必要はありませんでした。

また、スライダーの動作にはJavaScriptの「Slick Slider」が使用されていたため、既存の仕組みを活かして2つのスライダーを個別に制御する構成としました。

これにより、上段と下段で異なるカテゴリの実績を表示し、それぞれ異なる方向へスクロールさせる仕組みを実装しました。

対応後の結果・改善点

今回の変更によって、トップページの実績紹介は、カテゴリ別に最新10件ずつを表示する構成になりました。

従来はすべての実績が表示対象になっていましたが、変更後は各カテゴリの表示件数が最大10件に制限されるため、今後新しい実績が追加されても、トップページに表示される画像数が増え続けることはありません。

また、新しい実績が追加されると、公開日の新しいものから順に表示対象となるため、古い実績のアイキャッチ画像を手動で削除する必要もなくなります。

デザイン面では、従来の横スクロール形式を維持しながら2段構成に変更することで、カテゴリごとの実績を分けて紹介できるようにしました。上下でスクロール方向を変えることで、これまでとは異なる見せ方も取り入れています。

今回の改修では、既存のデザインを活かしつつ、表示件数の管理と更新時の運用負担を改善する構成にできたことが大きなポイントです。

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

今回の事例で重要だったのは、最初に発生した現象だけでなく、お客様が何を改善したいと考えているのかを確認することでした。

アイキャッチ画像を削除するとロゴ画像が表示されるという現象だけであれば、代替画像の表示処理を変更する方法も考えられます。
しかし、それだけでは実績が増え続ける問題は解決しません。

また、単純にスライダーを廃止して一覧形式に変更する方法もありましたが、今回はお客様が現在のスクロールデザインを気に入っていらっしゃいました。
そこで、表示件数の制限とカテゴリ別の表示を組み合わせることで、デザインへのご希望と運用面の課題を両立できる方法を検討しました。

ホームページの改修では、技術的に実現できることが、必ずしも最適な方法とは限りません。サイトを閲覧する方にとっての見やすさや、今後の更新作業まで考慮することが大切です。

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

WordPressで投稿記事や施工実績などをスライダー表示する場合は、表示対象の取得条件を確認しておくことをおすすめします。
特に、投稿を追加するたびにスライダーの画像が増える仕様では、運用期間が長くなるほど表示数が多くなる可能性があります。

トップページは、ホームページ全体の情報を紹介する入口としての役割があります。そのため、すべての実績を表示するのではなく、最新の実績や代表的な実績を一定数掲載し、詳しく見たい方を一覧ページへ案内する方法も有効です。

また、アイキャッチ画像を削除した場合にどのような表示になるかも、事前に把握しておくと安心です。画像を削除しても投稿自体が表示対象に残る場合、今回のように代替画像が表示されることがあります。

実績紹介の表示数を調整したい場合は、画像を削除する前に、投稿の取得件数や表示条件を変更できないか確認することが大切です。

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

メディアプライムスタイルでは、WordPressサイトの表示不具合や既存機能の改修、運用方法の見直しなど、ホームページの保守・サポートを行っています。
今回のように、現在のデザインを維持したまま表示方法を変更したい場合も、既存の仕組みを確認しながら対応方法を検討しています。

ホームページは公開して終わりではなく、情報を追加しながら運用していくものです。運用を続ける中で、当初は問題のなかった表示方法が使いにくくなることもあります。

「実績が増えて表示が長くなってきた」「現在のデザインを活かしたまま見せ方を変えたい」など、WordPressサイトの表示や更新方法でお困りのことがありましたら、お気軽にご相談ください。