CONTENTS
  1. HOME
  2. WordPress
  3. WordPressオリジナルテーマ作成
  4. WordPressのオリジナルテーマ事前準備と環境構築

WordPressのオリジナルテーマ事前準備と環境構築

目的

  • Figmaデザイン（UN HAMBUR）の全体構成を確認し、サイト設計の土台を固める
  • 使用する画像・素材を整理し、開発用フォルダを準備する
  • LocalでWordPressの開発環境を構築する
  • コーディング済みのHTML/CSSをWordPressテーマとして使えるように整理する

コーディング済みHTML/CSSの準備

UN HAMBURのデザインに基づいて作成されたコーディング済みHTML/CSSを使用します。
以下のリンクからダウンロードして、作業フォルダに保存してください。

コーディングファイル一式

un-hamburダウンロード

WordPress開発環境の構築（Local）

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

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

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

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

1. 日本語に設定する

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

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

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

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

サイト設定

  • サイトタイトル：UN HAMBUR（アン・ハンバー）
  • キャッチコピー：ひと味ちがうハンバーガーの世界へ
  • サイトアイコン：imagesフォルダよりアップロード

テーマフォルダの準備

コーディング済みのフォルダをテーマとして利用

  • ダウンロードした un-hambur-wp フォルダを開く
  • Localの「Site folder」→ app/public/wp-content/themes/ の中にそのフォルダをコピー＆ペースト
  • コピーしたフォルダを Visual Studio Code で開けるように準備

外観メニューからテーマを適用

  1. WordPress管理画面の「外観」→「テーマ」へ移動
  2. 作成した un-hambur-wpが表示されているか確認
  3. 何も表示されない／「壊れているテーマ」と出る場合は以下を確認
  • index.php がない → WordPressのテーマとして認識されない
  • style.css にテーマ情報が書かれていない → 名前などが表示されない

index.php を作成し、テーマの認識を確認

un-hambur-wpフォルダの中に index.php を作成し、下記の内容を記述します

<?php
echo 'テーマが正しく動作しています';
?>

その後、テーマ画面に「UNNHANBUR Original」が表示されているはずです。
表示されていれば「有効化」しておきましょう。

style.css にテーマ情報を追加

次に、style.css に下記をコピー＆ペーストして保存します。

/*
Theme Name: UNNHANBUR Original
Author: WebTraining
Version: 1.0
*/

PHPの基本文法を確認

<?php
echo 'PHPの基本練習：';
echo '<br>';

$shop_name = 'UNNHANBUR（アン・ハンバー）';
echo '店名：' . $shop_name;
?>
  • echo は文字や変数を画面に表示する命令です
  • $shop_name は「変数」で、値を代入できます
  • .（ドット） を使って文字列を結合します

PHP＋HTMLを組み合わせた書き方

PHPはサーバーサイドのプログラムのため、ブラウザで右クリックして「ページのソースを表示」しても、PHPそのものは見えません。
そのため、HTMLにPHPを挿入する構成で記述します。

<?php
$shop_name = 'UNHANBUR（アン・ハンバー）';
?>

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title><?php echo $shop_name; ?></title>
</head>
<body>
  <h1><?php echo $shop_name; ?>のトップページ</h1>
  <p>PHPの中にHTMLを混ぜて書いています。</p>
</body>
</html>

表示確認ポイント

  • ソース表示で <h1> や <title> に変数の値が出ているかも確認
  • ブラウザで表示を確認 → 正しく $shop_name の内容が反映されているか

スクリーンショットの準備（テーマ一覧の見た目を整える）

WordPressの「外観」＞「テーマ」一覧で、他のテーマのように**サムネイル画像（プレビュー画像）**を表示させるためには、テーマフォルダ内に screenshot.png というファイルが必要です。

設定手順

  1. サイトのindex.htmlをブラウザで表示
  2. ブラウザの全画面スクリーンショットを撮影（Mac：Shift + Command + 4、Windows：Win + Shift + S やシッピングツールなどを使う）
  3. ファイル名を screenshot.png に変更
  4. un-hambur-wpテーマフォルダ内に配置する
    例：/wp-content/themes/un-hambur-wp/screenshot.png

推奨サイズ

  • 1200×900px（比率が大きく異なると切り抜かれる可能性あり）

注意点

WordPressのテーマ一覧で自動的に表示されます（再読み込みが必要な場合もあり）

.jpg や .jpeg はNGです。必ず .png 形式にしてください