🚀 シンプル静的サイト → WordPressテーマ化学習ガイド

Posted at 2025-07-23

📝 第1段階：シンプルな静的サイト作成

📁 ディレクトリ構成（静的サイト）

static-site/
├── 🏠 index.html
├── 📖 about.html
├── 📞 contact.html
├── 🎨 style.css
└── ⚡ script.js

1️⃣ index.html（トップページ）

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Cafe - ホーム</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <div class="container">
            <h1><a href="index.html">☕ Simple Cafe</a></h1>
            <nav>
                <ul>
                    <li><a href="index.html">🏠 ホーム</a></li>
                    <li><a href="about.html">📖 私たちについて</a></li>
                    <li><a href="contact.html">📞 お問い合わせ</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <main>
        <section class="hero">
            <div class="container">
                <h2>☕ 美味しいコーヒーをお届け</h2>
                <p>💖 心温まるひとときを提供する小さなカフェです</p>
            </div>
        </section>

        <section class="services">
            <div class="container">
                <h2>✨ サービス</h2>
                <div class="service-grid">
                    <div class="service-item">
                        <h3>🌟 自家焙煎コーヒー</h3>
                        <p>厳選した豆を丁寧に焙煎</p>
                    </div>
                    <div class="service-item">
                        <h3>🍰 手作りスイーツ</h3>
                        <p>毎日手作りの美味しいスイーツ</p>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <footer>
        <div class="container">
            <p>© 2024 Simple Cafe 🌸</p>
        </div>
    </footer>

    <script src="script.js"></script>
</body>
</html>

2️⃣ about.html（私たちについて）

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Cafe - 私たちについて</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <div class="container">
            <h1><a href="index.html">☕ Simple Cafe</a></h1>
            <nav>
                <ul>
                    <li><a href="index.html">🏠 ホーム</a></li>
                    <li><a href="about.html" class="active">📖 私たちについて</a></li>
                    <li><a href="contact.html">📞 お問い合わせ</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <main>
        <section class="page-content">
            <div class="container">
                <h1>📖 私たちについて</h1>
                <p>✨ Simple Cafeは2020年にオープンした小さなカフェです。</p>
                <p>💫 お客様に最高のコーヒー体験を提供することを目指しています。</p>
                
                <h2>⏰ 営業時間</h2>
                <p>📅 平日: 8:00 - 18:00</p>
                <p>🌸 土日: 9:00 - 17:00</p>
            </div>
        </section>
    </main>

    <footer>
        <div class="container">
            <p>© 2024 Simple Cafe 🌸</p>
        </div>
    </footer>

    <script src="script.js"></script>
</body>
</html>

3️⃣ contact.html（お問い合わせ）

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Cafe - お問い合わせ</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <div class="container">
            <h1><a href="index.html">☕ Simple Cafe</a></h1>
            <nav>
                <ul>
                    <li><a href="index.html">🏠 ホーム</a></li>
                    <li><a href="about.html">📖 私たちについて</a></li>
                    <li><a href="contact.html" class="active">📞 お問い合わせ</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <main>
        <section class="page-content">
            <div class="container">
                <h1>📞 お問い合わせ</h1>
                <p>💌 ご質問やご予約はお気軽にお問い合わせください。</p>
                
                <div class="contact-info">
                    <h2>🏪 店舗情報</h2>
                    <p>📍 住所: 東京都渋谷区○○1-2-3</p>
                    <p>📱 電話: 03-1234-5678</p>
                    <p>📧 Email: info@simplecafe.com</p>
                </div>
            </div>
        </section>
    </main>

    <footer>
        <div class="container">
            <p>© 2024 Simple Cafe 🌸</p>
        </div>
    </footer>

    <script src="script.js"></script>
</body>
</html>

4️⃣ style.css

/* 🎨 リセット */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 🌟 ヘッダー */
header {
    background: #2c3e50;
    color: white;
    padding: 1rem 0;
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header h1 a {
    color: white;
    text-decoration: none;
}

nav ul {
    display: flex;
    list-style: none;
    gap: 2rem;
}

nav a {
    color: white;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    transition: background 0.3s;
}

nav a:hover,
nav a.active {
    background: #34495e;
}

/* ✨ メイン */
main {
    min-height: 70vh;
}

.hero {
    background: #3498db;
    color: white;
    padding: 4rem 0;
    text-align: center;
}

.hero h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.services {
    padding: 3rem 0;
    background: #f8f9fa;
}

.services h2 {
    text-align: center;
    margin-bottom: 2rem;
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.service-item {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    text-align: center;
}

.page-content {
    padding: 3rem 0;
}

.page-content h1 {
    margin-bottom: 1rem;
}

.page-content h2 {
    margin: 2rem 0 1rem;
}

.contact-info {
    margin-top: 2rem;
    padding: 2rem;
    background: #f8f9fa;
    border-radius: 8px;
}

/* 🌸 フッター */
footer {
    background: #2c3e50;
    color: white;
    text-align: center;
    padding: 2rem 0;
}

/* 📱 レスポンシブ */
@media (max-width: 768px) {
    header .container {
        flex-direction: column;
        gap: 1rem;
    }
    
    nav ul {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .hero h2 {
        font-size: 2rem;
    }
    
    .service-grid {
        grid-template-columns: 1fr;
    }
}

5️⃣ script.js

// ⚡ シンプルなJavaScript
document.addEventListener('DOMContentLoaded', function() {
    console.log('🎉 Simple Cafe サイトが読み込まれました');
    
    // 🌟 スムーススクロール
    const links = document.querySelectorAll('a[href^="#"]');
    links.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                target.scrollIntoView({ behavior: 'smooth' });
            }
        });
    });
});

🔄 第2段階：WordPressテーマ化

📂 ファイル保存場所

WordPressテーマファイルは以下の場所に保存します：

Macの場合 🍎

/Applications/Local/lightning-services/sites/サイト名/app/public/wp-content/themes/simple-cafe-theme/

Windowsの場合 🪟

C:\Users\ユーザー名\Local Sites\サイト名\app\public\wp-content\themes\simple-cafe-theme\

🗂️ WordPressテーマディレクトリ構成

simple-cafe-theme/
├── 📋 style.css (テーマ情報含む)
├── 🏠 index.php
├── 📄 header.php
├── 📄 footer.php
├── 📄 page.php
├── ⚙️ functions.php
├── 📁 assets/
│   ├── 🎨 css/
│   │   └── style.css
│   └── ⚡ js/
│       └── script.js
└── 📸 screenshot.png (任意)

1️⃣ style.css（テーマ情報）

/*
Theme Name: Simple Cafe Theme
Description: ☕ シンプルなカフェサイトのWordPressテーマ
Version: 1.0
Author: Your Name
*/

/* 🎨 メインのCSSはassets/css/style.cssに記述 */

2️⃣ functions.php

<?php
// ⚙️ テーマセットアップ
function simple_cafe_setup() {
    // 🏷️ タイトルタグのサポート
    add_theme_support('title-tag');
    
    // 🍔 メニューの登録
    register_nav_menus(array(
        'primary' => 'メインメニュー',
    ));
}
add_action('after_setup_theme', 'simple_cafe_setup');

// 📦 スタイル・スクリプト読み込み
function simple_cafe_scripts() {
    // 🎨 CSS読み込み
    wp_enqueue_style('simple-cafe-style', get_template_directory_uri() . '/assets/css/style.css');
    
    // ⚡ JavaScript読み込み
    wp_enqueue_script('simple-cafe-script', get_template_directory_uri() . '/assets/js/script.js', array(), '1.0', true);
}
add_action('wp_enqueue_scripts', 'simple_cafe_scripts');

// 🍔 フォールバックメニュー
function simple_cafe_fallback_menu() {
    echo '<ul>';
    echo '<li><a href="' . home_url() . '">🏠 ホーム</a></li>';
    echo '</ul>';
}
?>

3️⃣ header.php

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
    <header>
        <div class="container">
            <h1><a href="<?php echo home_url(); ?>">☕ Simple Cafe</a></h1>
            <nav>
                <?php
                wp_nav_menu(array(
                    'theme_location' => 'primary',
                    'menu_class' => '',
                    'container' => false,
                    'fallback_cb' => 'simple_cafe_fallback_menu'
                ));
                ?>
            </nav>
        </div>
    </header>

4️⃣ footer.php

    <footer>
        <div class="container">
            <p>© <?php echo date('Y'); ?> Simple Cafe 🌸</p>
        </div>
    </footer>
    <?php wp_footer(); ?>
</body>
</html>

5️⃣ index.php（トップページ）

<?php get_header(); ?>

<main>
    <section class="hero">
        <div class="container">
            <h2>☕ 美味しいコーヒーをお届け</h2>
            <p>💖 心温まるひとときを提供する小さなカフェです</p>
        </div>
    </section>

    <section class="services">
        <div class="container">
            <h2>✨ サービス</h2>
            <div class="service-grid">
                <div class="service-item">
                    <h3>🌟 自家焙煎コーヒー</h3>
                    <p>厳選した豆を丁寧に焙煎</p>
                </div>
                <div class="service-item">
                    <h3>🍰 手作りスイーツ</h3>
                    <p>毎日手作りの美味しいスイーツ</p>
                </div>
            </div>
        </div>
    </section>
</main>

<?php get_footer(); ?>

6️⃣ page.php（固定ページ用）

<?php get_header(); ?>

<main>
    <section class="page-content">
        <div class="container">
            <?php while (have_posts()) : the_post(); ?>
                <h1><?php the_title(); ?></h1>
                <div class="content">
                    <?php the_content(); ?>
                </div>
            <?php endwhile; ?>
        </div>
    </section>
</main>

<?php get_footer(); ?>

7️⃣ assets/css/style.css

/* 🎨 静的サイトのstyle.cssをそのままコピー */

8️⃣ assets/js/script.js

/* ⚡ 静的サイトのscript.jsをそのままコピー */

🎯 テーマ化手順

ステップ1: 🏗️ Localでサイト作成

新規サイト「simple-cafe」を作成

ステップ2: 📁 テーマフォルダ作成

wp-content/themes/simple-cafe-theme/ フォルダを作成

ステップ3: 📦 ファイル配置

上記のPHPファイルを作成・配置
静的サイトのCSS/JSをassets/フォルダに配置

ステップ4: 🎛️ WordPress管理画面

📋 1. 固定ページ作成（先にこちら！）

固定ページ > 新規追加
「私たちについて」ページを作成・公開
「お問い合わせ」ページを作成・公開

🍔 2. メニュー作成

外観 > メニュー
「メインメニュー」を新規作成
カスタムリンクで「🏠 ホーム」を追加
固定ページから「📖 私たちについて」「📞 お問い合わせ」を追加
🚨 重要：「メニュー設定」で「メインメニュー」にチェック ← これがないと表示されない！
「メニューを保存」

🎨 3. テーマ有効化

外観 > テーマで「Simple Cafe Theme」を有効化

ステップ5: 🌐 Live Links共有

Localの「Live Link」ボタンで共有URL生成

🎉 完成！

これで静的サイトがWordPressテーマとして動作します！ 🚀

🌟 学習のコツ：

📝 まず静的サイトを完成させる
🔄 段階的にPHPテンプレートに分割
🔧 WordPressの関数に置き換え
✅ 管理画面での動的コンテンツ編集を確認

🎯 ポイント：

📋 静的サイトは3ページのみの最小構成
🔄 WordPressテーマ化では基本的なテンプレート分割を学習
📍 ファイル保存場所を明確に指定
🌐 Localでの開発からLive Links共有まで対応

この手順で基本的なテーマ化スキルが身につきます！ ✨(ﾉ◕ヮ◕)ﾉ*:･ﾟ✧

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

🚀 シンプル静的サイト → WordPressテーマ化 学習ガイド

📝 第1段階：シンプルな静的サイト作成

📁 ディレクトリ構成（静的サイト）

1️⃣ index.html（トップページ）

2️⃣ about.html（私たちについて）

3️⃣ contact.html（お問い合わせ）

4️⃣ style.css

5️⃣ script.js

🔄 第2段階：WordPressテーマ化

📂 ファイル保存場所

🗂️ WordPressテーマディレクトリ構成

1️⃣ style.css（テーマ情報）

2️⃣ functions.php

3️⃣ header.php

4️⃣ footer.php

5️⃣ index.php（トップページ）

6️⃣ page.php（固定ページ用）

7️⃣ assets/css/style.css

8️⃣ assets/js/script.js

🎯 テーマ化手順

ステップ1: 🏗️ Localでサイト作成

ステップ2: 📁 テーマフォルダ作成

ステップ3: 📦 ファイル配置

ステップ4: 🎛️ WordPress管理画面

📋 1. 固定ページ作成（先にこちら！）

🍔 2. メニュー作成

🎨 3. テーマ有効化

ステップ5: 🌐 Live Links共有

🎉 完成！

🚀 シンプル静的サイト → WordPressテーマ化学習ガイド