CONTENTS
  1. HOME
  2. WordPress
  3. WordPressのテーマ使っての作成
  4. WordPressでフルサイト作成の事前準備と環境構築

WordPressでフルサイト作成の事前準備と環境構築

目的

  • Figmaデザイン（UN HAMBUR）の全体構成を確認し、サイト設計の土台を固める
  • 使用画像・素材を整理し、開発用フォルダを準備する
  • LocalでWordPress開発環境を構築し、XT9テーマと必要なプラグインを導入する

デザイン確認

Figmaデザイン確認
  • Figmaでページ構成を確認
    テンプレート・・・トップページ
    固定ページ・・・・ About / Service / News / Contact
    投稿ページ・・・・ブログ記事（サイドバー付）
  • デザインの確認
    • 各ページの構成（見出し・画像・CTAなど）
    • 使用フォント／カラー
    • ボタンや装飾の再利用範囲を意識しながらチェック

画像・素材の整理

  • デスクトップなどに[UN HAMBUR]のフォルダを作成
  • /images フォルダを作成し、Figmaより必要な画像をエクスポートを行う

WordPress開発環境の構築（Local）

Localの準備がまだの場合は、こちらを参照くださいhttps://fukuokamiyako.com/wordpress00/

  • Local を起動 → 新規サイト作成（例：un-hambur）
  • WordPress の日本語版を選択
  • ブラウザで http://un-hambur.local にアクセス確認

WordPress ダッシュボードを日本語化する手順（Local 使用時）

Localでサイトを作成した後は、Google翻訳などの自動翻訳機能ではなく、ダッシュボードの設定から日本語化を行いましょう。

1. 日本語に設定する

  1. 左メニューから「Settings（設定）」をクリック
  2. 「General（一般）」を選択
  3. 「Site Language（サイトの言語）」から「日本語」を選択
  4. 画面下部の「Save Changes（変更を保存）」をクリック

→ ダッシュボードの表示が日本語になります。

2. タイムゾーンや日付形式を設定する

  1. 同じ「一般設定」ページ内で、
    「タイムゾーン」を「東京」に変更
  2. 「日付形式」と「時刻形式」も、日本で使われている形式に合わせて調整
  3. 忘れずに再度「変更を保存」をクリック

サイト設定

  • サイトタイトル：UN HAMBUR（アン・ハンバー）
  • キャッチコピー：ひと味ちがうハンバーガーの世界へ
  • サイトアイコン：Figmaよりエクスポート

X-T9テーマのテーマ導入

X-T9テーマをインストール

WordPress 公式ディレクトリ登録ブロックテーマの「X-T9」を使ってトレーニングします。

X-T9 WordPress Theme
X-T9 フルサイト編集機能に対応した WordPress ブロックテーマ フルサイト編集機能に対応した WordPress ブロックテーマ

公式テーマなので、ダッシュボード＞外観＞X-T9と検索します。表示後インストール＞有効化と進みます。

有効化のあと、推奨プラグインのインストールも行っておきましょう。

プラグインのインストール後、有効化も忘れないようにしましょう。

その他のプラグインのインストール

プラグイン名用途
Contact Form 7お問い合わせフォームの設置
WP Multibyte Patch日本語環境の文字化け・不具合対策
WP Super Cache もしくはLiteSpeed Cacheキャッシュ削除・表示崩れ時の対応用（特に開発中はこまめにクリア推奨）

キャッシュ系プラグインは、「CSSが反映されない」「画像が変わらない」といったトラブルに備えることができます。デザイン変更が反映されない時は、キャッシュクリアを試してみましょう。

プラグインの追加

左メニューのプラグイン＞プラグインを追加から上記の表内のプラグインを検索し、インストール＞有効化を行います。下記が現状のプラグイン一覧です。

プラグインは有効化にしたあと、設定がある場合もありますので、設定も確認しておきましょう。

WP Super Cacheの設定

  • WordPress管理画面 → 設定 > WP Super Cache
  • 「キャッシング」の項目で、
    　→ 「キャッシング停止」を選択（※「キャッシング利用（推奨）」は公開サイト向け）
  • [ステータスを更新] ボタンをクリック

プラグインのインストールと注意点

WordPressのプラグインは非常に便利ですが、安易なインストールは避けましょう。
不必要に多くのプラグインを入れると、表示速度の低下・セキュリティリスク・不具合の原因になることがあります。

プラグイン選定時のチェックポイント

チェック項目内容
必要性が明確か？本当にその機能が必要か？ テーマ側で対応できないか？
最終更新日数か月〜1年以上更新されていない場合は注意（非推奨）
WordPressのバージョンとの互換性「このバージョンで動作確認済み」と書かれているか
利用者の評価星の数やレビュー数を確認。レビューが極端に少ないものは注意
開発元・配布元が信頼できるか作者情報やサポート体制を確認（公式かどうか）

インストールによるリスク例

  • ページの表示が遅くなる（CSS/JSが大量に読み込まれる）
  • 他のプラグインやテーマと競合して、画面が崩れる
  • セキュリティホールから不正アクセスされる
  • アップデート時にエラーが出る

プラグインは「少なければ少ないほど安全」です。本当に必要か、テーマやコードで代用できないかを確認してから導入しましょう。

サイトを確認（http://un-hambur.local/）