WP Review Slider 更新後にレビュー下に空白ができる原因と直し方

WP Review Slider 更新後にレビュー下に空白ができる原因と直し方

WP Review Slider を v17.7 から v18.2 に更新した後、レビューの「続きを読む」リンクの下に、折りたたまれているテキストと同じ高さの空白が発生するのは、バージョン 18.2 で導入された高さ制御のスタイルが原因である可能性が高い。テーマの追加 CSS に数行のコードを追加することで即座に解消できる。

なぜバージョン 18.2 でレビュー下に空白が生まれるのか

WP Review Slider のバージョン 18.2 では、内部のテンプレート構造や CSS クラスに変更が加えられており、長いレビュー本文の折りたたみ表示を実現するために「最小の高さ」（min-height）や「最大の高さ」（max-height）が明示的に指定されるようになったと推測される。

旧バージョンでは、折りたたまれたテキストは表示領域をまったく取らず、クリック時に要素の高さが伸びるという自然な挙動だった。しかし新バージョンでは、非表示のテキスト部分の高さがあらかじめ確保されてしまい、あたかも「読む前から続きテキストのスペースが空いている」ように空白が生まれる。これは下記の CSS プロパティが影響していることが多い。

• max-height が実際のテキスト全体の高さに設定されている
• overflow: hidden が適用されている
• 折りたたみ用の JavaScript が高さ計算を誤っている

いずれにせよ、テーマの追加 CSS で強制的に高さの挙動を上書きすれば問題は解決する。以下に具体的な手順を示す。

追加 CSS で余白を解消する具体的な手順

まず対象となる CSS クラスを特定する必要がある。多くの場合、WP Review Slider が出力するレビュー本文のコンテナには wprs-review-text や review-content といったクラスが付与されている。ブラウザの開発者ツールで余白が生まれている要素を検証し、クラス名を確認しておく。

挿入する CSS コードの基本形

まずは以下のコードを追加 CSS に貼り付ける。クラス名 .wprs-review-content は、実際に使用されているクラス名に読み替える。

/* WP Review Slider の折りたたみ余白を解消 */
.wprs-review-content {
    max-height: none !important;
    overflow: visible !important;
}

上記で改善しない場合は、レビュー全体のコンテナに対して同様の指定を加える。

/* 親コンテナも含めてリセット */
.wprs-review,
.wprs-review-body,
.wprs-review-content {
    max-height: none !important;
    overflow: visible !important;
}

開発者ツールで正確なクラス名を特定する方法

上記の汎用コードで直らない場合は、ブラウザの検証機能を使って問題の要素を直接特定する。

1. Chrome で該当ページを開き、余白が生まれているレビュー部分を右クリック →「検証」を選択する
2. 要素パネルで、余白を作っている親コンテナを探す。高さ（height / min-height / max-height）がピクセル単位で指定されている要素が原因だ
3. その要素に付与されているクラス名を確認する（例: wprs-review-text、review-excerpt など）
4. 特定したクラス名に対して、上記の max-height / overflow リセットを適用する

子テーマを使っている場合の注意点

カスタマイズ画面の「追加 CSS」はテーマのアップデートでも消えないため、最も手軽で安全な方法だ。一方、子テーマの style.css に直接書く場合は、キャッシュのクリアを忘れずに行う。また !important を連発すると保守性が下がるため、どうしても必要な場合に限定して使う方がよい。

根本原因がプラグインの JavaScript にある場合の対処

上記の CSS で解決しないケースでは、プラグインの JavaScript が要素の高さを動的に計算し、インラインスタイルとして書き込んでいる可能性がある。

• ページを読み込んだ直後は空白がないのに、少し時間が経ってから空白が現れる → JavaScript の高さ計算が原因
• 要素に直接 style=”height: XXXpx” や style=”max-height: XXXpx” が書かれている → CSS の !important でもインラインスタイルを上書きできない場合がある

その場合の選択肢は以下の通り。

よくある質問

追加 CSS を書いても全く反映されない場合は？

キャッシュ系プラグインや CDN が原因で、古い CSS が配信され続けている可能性が高い。キャッシュをすべてクリアし、CDN を使用している場合はパージを実行する。また、サーバーレベルのキャッシュ（Varnish や Nginx FastCGI キャッシュ）が有効な場合もあるため、サーバー管理画面も確認する。

クラス名がわからず、どの要素に CSS を当てればいいか特定できない

Chrome の開発者ツールで余白が生まれている箇所を右クリック →「検証」で、その要素がハイライトされる。スタイルパネルを見ると適用されている CSS とセレクタが表示されるため、そのクラス名をコピーして使う。矢印アイコン（要素選択ツール）を使うと、画面上の任意の要素をクリックするだけで対応する DOM ノードにジャンプできる。

WP Review Slider の無料版と Pro 版で挙動は異なるのか

基本的なレビュー表示の仕組みは共通だが、Pro 版ではテンプレートのカスタマイズ機能や追加の表示オプションが存在する。そのため、CSS クラスの名前や構造が Pro 版と無料版で一部異なることがある。クラス名の特定手順は同じなので、上記の方法で正確なセレクタを調べて対応する。

「WP Rollback」で旧バージョンに戻しても問題ないのか

WP Rollback は WordPress 公式ディレクトリで提供されている信頼性の高いプラグインで、指定したバージョンに安全にダウングレードできる。ただし、v18.2 で追加されたデータ構造や設定値がある場合、旧バージョンでは正常に読み取れないこともある。ダウングレード前に必ずサイト全体のバックアップを取得しておくことが重要だ。

この記事のポイント

• v18.2 で発生するレビュー下の空白は、CSS の max-height または overflow 設定が原因
• 「追加 CSS」から max-height: none !important; を指定すれば即座に解消できる
• JavaScript による動的な高さ制御が原因の場合は、プラグイン設定の確認や開発者への報告を検討する
• クラス名が不明な場合はブラウザの開発者ツールで DOM 構造を直接確認する
• 急ぎの場合は WP Rollback で v17.7 に戻す選択肢もあるが、事前バックアップが必須

佐々木 太陽

・ Reddit、Stack Overflow、WordPress.org フォーラムを日々巡回し、現場の悩みを拾い上げて記事化
・ WordPress、WooCommerce、Next.js などモダンWeb制作領域のトラブルシューティングが専門
・ 「検索しても答えが見つからなかった」を一つでも減らすことが目標
・ エラーメッセージから根本原因にたどり着く粘り強い調査が得意
・ 初心者がつまずきやすい箇所を先回りで解決する記事作りを心がけている