ホームページ制作はコアース・デザインへ!

【THE THOR】AFFINGER5から移行した時の表示崩れと修正方法(カルーセルスライダー編)

今回はカルーセルスライダー編です。THE THORで設定しても最初は表示されませんでした。原因はAFFIGER5の時から有効化していたプラグインでした。

目次

カルーセルスライダーとは?

英語の意味通り、回転木馬(メリーゴーランド)のように、複数の画像をスライドして表示させる機能のことです。THE THORでは、トップページにカルーセルスライダーを設置できます。

画像は当ブログのトップページ(ホーム)で設定したカルーセルスライダーです。

カルーセルスライダーの設定方法

外観>カスタマイズ>TOPページ設定[THE]>カルーセルスライダー設定 で設定します。

設定項目

カルーセルスライダーを表示するか選択

表示か非表示かを選択します。デフォルトでは「非表示」になっています。今回は表示させたいので「表示」を選択します。

表示条件を選択

画像の通り、5つの条件から選択します。当ブログでは「指定した投稿を表示」にし、次に説明するIDを入力しました。

指定するIDを入力

表示させたい記事の投稿ID(もしくはカテゴリID)を入力します。複数の場合はカンマ区切りで入力します。投稿IDはダッシュボードのメニューの 投稿>投稿一覧 で確認できます。

表示件数を指定

1~10件の間で設定できます。とはいえ、10件にしても10記事の画像が一度に表示されるわけではありません。一度に表示できるのは5件で、指定した件数分をスライドして表示してくれます。

画像アスペクト比を選択

画像のように、3種類の中から選択できます。当ブログでは16:9(default)を使用しています。見た目を確認しながら、お好みのアスペクト比を選択しましょう。

この部分に「アイキャッチ上のカテゴリーを非表示する」というチェックボックスがあります。これも好みや目的に応じて設定できますが、当ブログではチェックを入れて非表示にしています。直下の新着記事で表示させていますし、サイドエリアにもカテゴリーを表示しているからです。

移行時のカルーセルスライダーの表示崩れ

前章で解説した仕方で設定したのですが、最初は全く表示されませんでした。キャッシュを削除してみても変わりませんでした。

原因はプラグインだった

ネットで調べていくと、プラグインとの相性の問題で表示されないことがあることが分かりました。

Shortcodes Ultimate

ショートコードを挿入して記事をかんたんに装飾できるプラグインです。ボタンやボックス、ブログカードやサイトカードをかんたんに挿入できます。AFFIGER5を使っていた時は、時々このプラグインでサイトカードなどを挿入していました。実はこのプラグインにもカルーセル機能があり、THE THORの機能とバッティングしてしまうため表示されないようでした。

試しにShortcodes Ultimateを無効化して確認してみると、見事に表示されました!

THE THORには、Shortcodes Ultimateプラグインにある機能とほぼ同等の機能が備わっています。そのためShortcodes Ultimateは削除しました。不要なプラグインはSEO的にも削除しておくと良いですからね。

まとめ

いかがでしたか。今回はカルーセルスライダーの表示崩れについてでした。表示崩れというより表示されなかったわけですが。対処方法はかんたんで、相性の悪いプラグインを無効化するだけでした。

今回のケースからも、有料テーマ「THE THOR」は多機能であることを再確認できました。次回もお楽しみに!

プロフィール

コアース・デザインのWebディレクターです。WordPressなどCMSでのホームページ制作やブログ運営にかかわるお役立ち情報を、初心者目線で発信していきます。

目次