2026年5月20日

WordPressテーマのレイアウトが崩れる場合の解決方法

テーマ・デザイン

はじめに

WordPressテーマのレイアウト崩れは、CSS読み込みエラー・プラグイン競合・テーマカスタマイズのミス・PHPエラーなど様々な原因で発生します。原因を体系的に切り分けることで素早く解決できます。

症状・原因

テーマを更新したらレイアウトが崩れた
プラグインをインストールしたら表示が壊れた
モバイルだけレイアウトが崩れる
特定のページだけレイアウトがおかしい

解決手順

ステップ1：原因を切り分ける

チェックリスト（上から順に確認）:

□ キャッシュが原因:
  → ブラウザのキャッシュをクリア（Ctrl+Shift+R）
  → キャッシュプラグインのキャッシュをクリア
  → wp cache flush

□ プラグイン競合:
  → すべてのプラグインを一時無効化してテスト
  → 1つずつ有効化して原因を特定

□ テーマのカスタマイズ:
  → 追加CSS を確認（外観 → カスタマイズ → 追加CSS）
  → functions.php の編集ミスを確認

□ PHPエラー:
  → wp-config.php で WP_DEBUG=true にして確認
  → ブラウザの開発者ツール → Console でエラー確認

□ テーマの更新が原因:
  → 子テーマを使っていない場合、テーマ更新でカスタマイズが上書き
  → 前バージョンに戻す（バックアップがある場合）

ステップ2：CSSキャッシュをクリアする

# WordPressのキャッシュをすべてクリア
wp cache flush

# トランジェントキャッシュをクリア
wp transient delete --all

# WP Rocketのキャッシュをクリア
wp rocket clean --confirm 2>/dev/null || true

# LiteSpeed Cacheをクリア
wp litespeed-purge all 2>/dev/null || true

# プラグインのキャッシュ設定を確認
wp plugin list --status=active --format=table | grep -i cache

ステップ3：プラグイン競合を確認する

# すべてのプラグインを一時無効化
wp plugin deactivate --all

# レイアウトが直ったか確認後、1つずつ有効化
wp plugin activate contact-form-7
# → 確認
wp plugin activate woocommerce
# → 確認
# 崩れたプラグインが犯人

# 元に戻す（全プラグインを再有効化）
wp plugin activate --all

ステップ4：CSSの問題をブラウザで診断する

Chrome DevTools でCSS問題を特定:
1. F12 → Elements タブ
2. 崩れている要素を右クリック →「検証」
3. Styles パネルで確認:
   → 打ち消し線のあるスタイル = 上書きされている
   → 赤字のプロパティ = 無効なCSS
   → 「user agent stylesheet」= ブラウザデフォルト

よくある問題:
→ floatの解除忘れ → clearfix または overflow:hidden
→ margin/paddingの計算ミス → box-sizing: border-box
→ flexbox/gridの設定ミス → DevToolsのFlex/Gridインスペクター
→ z-indexの重なり問題 → スタックコンテキストを確認

ステップ5：functions.phpのエラーを確認する

# PHPエラーを確認（構文エラーは白い画面になる）
wp eval "echo 'PHP OK';" 2>&1

# エラーログを確認
tail -20 wp-content/debug.log 2>/dev/null

# テーマのfunctions.phpを構文チェック
php -l wp-content/themes/mytheme/functions.php
php -l wp-content/themes/mytheme-child/functions.php

# functions.phpの最終変更を確認
ls -la wp-content/themes/mytheme/functions.php

ステップ6：テーマのCSSを修正する

/* 子テーマのstyle.css で上書き修正 */

/* よくあるレイアウト崩れの修正 */
.site-content {
    box-sizing: border-box;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* floatクリア */
.clearfix::after {
    content: '';
    display: table;
    clear: both;
}

/* モバイルでの崩れを修正 */
@media (max-width: 768px) {
    .sidebar {
        width: 100%;
        float: none;
    }
}

# 追加CSSをWP-CLIで確認
wp theme mod get custom_css

# テーマのCSSキューを確認
wp eval "
global \$wp_styles;
wp_print_styles();
foreach (\$wp_styles->queue as \$handle) {
    echo \$handle . ': ' . \$wp_styles->registered[\$handle]->src . PHP_EOL;
}"

ステップ7：テーマを安全な状態に戻す

# テーマを前バージョンに戻す（公式テーマの場合）
wp theme install twentytwentyfour --force

# デフォルトテーマで動作確認
wp theme activate twentytwentyfour
# → レイアウトが正常なら元のテーマに問題あり

# 元のテーマに戻す
wp theme activate mytheme

# テーマのチェックサムを検証（公式テーマのみ）
wp theme verify-checksums twentytwentyfour

注意事項

レイアウトを修正する際は必ず子テーマで行ってください。親テーマを直接編集するとテーマ更新で上書きされます
モバイルとデスクトップで表示を確認する場合はDevToolsの「デバイスモード」が便利です
PHPエラーが原因の場合は白い画面になることがあります。wp eval "echo 'test';" で確認してください

まとめ

レイアウト崩れは「キャッシュ → プラグイン競合 → CSS → PHPエラー」の順に切り分けます。wp plugin deactivate --all でプラグインを一括無効化して原因を特定し、CSSの修正は必ず子テーマで行いましょう。

Post Views: 10