１１月１２日のまとめ＿WordPressをHTTPS化＆レイアウト修正した一日

IT

k-stone.click サイト構成図（Nginx / WordPress / MySQL / HTTPS設定）
k-stone.click の構成と HTTPS / CSS / 画像配信の流れ

症状

  • ページが「素のHTML」表示のように左寄りで崩れる
  • スマホで一部アイキャッチ画像が表示されない
  • <head> 内の CSS href が http:// のまま出力されていた

原因

  1. Nginx→PHP-FPM の FastCGI パラメータ不足で WordPress が HTTPS を誤認（is_ssl() が false）。
  2. テーマCSSの読み込みがキャッシュに阻まれ更新が反映されづらかった。
  3. 一部の画像で URL / キャッシュの不整合が残存。

修正手順（抜粋）

1) Nginx：FastCGI で HTTPS を明示

docker exec -it wordpress-nginx-1 bash -lc '
F=/etc/nginx/conf.d/wp-https.conf
cp "$F" "$F.bak.$(date +%F-%H%M)"
sed -i "/fastcgi_param HTTPS/d;/fastcgi_param HTTP_X_FORWARDED_PROTO/d;/fastcgi_param SERVER_PORT/d" "$F"
sed -i "/location ~ \\\.php\\$ {/,/}/ s#fastcgi_pass wordpress:9000;#fastcgi_param HTTPS on;
    fastcgi_param HTTP_X_FORWARDED_PROTO https;
    fastcgi_param SERVER_PORT 443;
    fastcgi_pass wordpress:9000;#;" "$F"
nginx -t && nginx -s reload
'

2) WordPress：プロキシ越し HTTPS を wp-config.php で保証

// Reverse proxy 経由でも SSL を認識させる
if (isset($_SERVER['HTTP_X_FORWARDED_PROTO']) && $_SERVER['HTTP_X_FORWARDED_PROTO'] === 'https') {
  $_SERVER['HTTPS'] = 'on';
}

3) テーマCSSを確実に読ませ、キャッシュを無力化

wp_enqueue_style(
  'my-original-theme',
  get_stylesheet_directory_uri() . '/style.css',
  [],
  filemtime( get_stylesheet_directory() . '/style.css' )  // 更新時刻でバージョン付け
);

4) レイアウトの基本整形（中央寄せ・はみ出し防止）

.wrapper{max-width:980px;margin:0 auto;padding:0 16px;box-sizing:border-box;}
img{max-width:100%;height:auto;display:block;}
.wp-post-image{width:100%;height:auto;display:block;object-fit:cover;}
figure,.wp-block-image{margin:0;}

5) 画像の見た目サイズを「半分」に調整

.wp-post-image,
.entry-content img{
  max-width:50%;
  height:auto;
  display:block;
  margin:0 auto;
}

6) キャッシュをクリア

docker exec -it wordpress bash -lc "wp --allow-root cache flush || true"

結果

  • CSS の <link> の href がすべて https:// に統一され、レイアウト復旧
  • スマホ・PC とも崩れ解消、画像も安定表示（横幅 50%）
  • 以後の更新は filemtime により確実に反映

メモ

  • コンテナ内で docker exec は使えない（ホストで実行）
  • is_ssl() を true にするには HTTPS on と HTTP_X_FORWARDED_PROTO https の両方が鍵
  • CSS/JS は filemtime バージョン付けが頼れるキャッシュバスター