AI×WordPressで作る！構築から運用までの完全ガイド

✅ この記事で学べること（目次）

  • 構築環境：Astraテーマと「Sierra Nature」を選ぶ理由
  • 運用フロー：AI生成HTMLの貼り付けと画像ルール
  • トラブル解決：デザイン崩れ、SSLエラー、保存できない問題の対処法
  • 所要時間：読了約10分（設定作業含まず）

本記事は、当サイト「マニュアルちゃん」を構築した際に確立した、「検索時間を減らし、実行時間を増やす」ためのサイト制作・運用フローの完全マニュアルです。

WordPressの立ち上げから、AIを活用した記事作成、そして初心者が必ず直面するシステムエラーの解決策までを網羅しています。

1. 構築環境とテーマ選定

「マニュアル」として機能させるため、過度な装飾を排除し、読みやすさと表示速度を最優先した環境を構築します。

項目 選定内容
テーマ Astra
高速かつカスタマイズ性が高いため採用。
テンプレート Sierra Nature (Starter Templates)
「Digital Agency」等の複雑なテーマはレイアウト崩れのリスクが高いため、構造がシンプルな本テーマを採用。
ページビルダー Elementor + Royal Addons
直感的な操作で固定ページを作成するため。
⚠️ 重要な注意点

テンプレートをインポートする際は、複雑な動きのあるテーマ（JavaScriptを多用するもの）は避けてください。サーバー環境によってデザインが崩れ、修復不可能になるケースがあります。「シンプルイズベスト」が鉄則です。

2. 記事作成と画像の運用ルール

効率とSEO品質を担保するため、以下のルールを厳守して運用します。

画像サイズとファイル名

サイトの統一感とSEO評価を高めるための黄金比率です。

  • アイキャッチ画像サイズ： 1200px × 675px (アスペクト比 16:9)
  • ファイル形式： .jpg または .webp (軽量化のため)
  • ファイル名： 内容を表す英単語をハイフンで繋ぐ。
    ❌ NG: image01.jpg, スクリーンショット.png
    ✅ OK: ai-seo-discoverability.jpg

記事投稿フロー

  1. AI（Cursor/ChatGPT）にて、指定のプロンプトを用いて記事構成とHTMLコードを生成する。
  2. WordPressの投稿画面で「カスタムHTML」ブロックを選択する。
  3. 生成されたコードを貼り付ける。
  4. プレースホルダー部分に、指定サイズで作成した画像を挿入する。

3. 【トラブルシューティング】よくあるエラーと解決策

構築中に発生する可能性が高いエラーとその解決手順です。現象が発生したら、以下の順で対処してください。

Trouble 1：サイドバーが記事の下に落ちてしまう（カラム落ち）

【現象】
PC表示で右側にあるはずのサイドバーが消え、記事コンテンツの最下部に表示されてしまう。

【原因】
記事内に挿入したHTMLコードの「閉じタグ」の記載ミス。特に画像を挿入した際に発生しやすい。

【解決手順】

  1. ElementorまたはHTML編集画面を開く。
  2. 画像を挿入した箇所のコードを確認する。
  3. <img ... > の直後に </div> が残っていないか確認する。
  4. 不要な </div> を削除する。

Trouble 2：SSL化したのに画像が表示されない / 警告が出る

【現象】
サーバー側でSSL設定を完了しても、ブラウザのアドレスバーに「保護されていない通信」と表示される。または画像が表示されない。

【原因】
WordPressの設定が http のままになっている、または記事内の画像URLが http で記述されている。

【解決手順】

  1. ダッシュボードの「設定」→「一般」を開く。
  2. 「WordPressアドレス」と「サイトアドレス」の両方を http:// から https:// に書き換えて保存する。
  3. プラグイン 「Really Simple SSL」 をインストールし、「SSLを有効化」ボタンを押す。
  4. 記事内の画像コードを確認し、src="https://..." を src="https://..." に修正する。

Trouble 3：記事を「更新」しても設定が保存されない（消える）

【現象】
アイキャッチ画像を設定して「更新」を押しても、リロードすると設定が消えている。

【原因】
SSL化直後のブラウザキャッシュの不整合、またはWordPress内部リンク（パーマリンク）の不整合。

【解決手順】

  1. シークレットモード（プライベートウィンドウ）で管理画面にログインし、保存を試す。
  2. それでも直らない場合、「設定」→「パーマリンク」を開く。
  3. 設定を変更せずに、そのまま「変更を保存」ボタンを1回だけ押す（空更新）。
  4. これで内部リンク構造がリセットされ、正常に保存できるようになる。

Trouble 4：画像がアップロードできない / グレーのアイコンになる

【現象】
画像をアップロードしてもサムネイルが表示されず、書類のようなアイコンになる。

【原因】
画像ファイル自体が破損している、または不完全なデータである。

【解決手順】

  1. 別の画像（正常なjpg/png）をアップロードして試す。
  2. もし別の画像なら成功する場合、元のファイルが壊れているため使用を中止する。
  3. 再度、正しい手順で画像を保存・作成し直してからアップロードする。

4. まとめ

WordPressサイトの構築・運用は、最初の環境設定とトラブル対処法さえ知っていれば、難しいものではありません。

「シンプルに作り、ルールを守って運用し、エラーが出たら一つずつ原因を潰す」。
このマニュアルの手順通りに進めれば、誰でも迷うことなく「マニュアルちゃん」と同じクオリティのサイトを維持できます。

上部へスクロール