この記事では、初心者でも簡単に使える無料ツール「Local（https://localwp.com/）」を使って、WordPressサーバーをローカル環境に構築する方法を解説します。難しいLinuxコマンドや仮想マシンの操作は不要です。
🎯 演習の目的
- WordPressの動作環境をローカルに用意する
- HTML/CSSで作ったサイトをWordPressに変換する
- サーバー構築の基本概念を体験する
- テーマフォルダの構造と役割を理解する
🧰 使用ツール
- 【必須】Local（公式サイト：https://localwp.com/）
- ブラウザ：Google Chrome / Firefox
- エディタ：Visual Studio Code
- 自作HTML/CSSファイル（例：index.html, style.css など）
🖥️ LocalでのWordPress環境構築手順
1. Localのインストール
- https://localwp.com/ にアクセス
- Windows / Mac に応じてダウンロード
- ダウンロードしたファイルを実行し、インストール
2. 新しいWordPressサイトを作成
- Localを起動し、「+ Create a new site」 をクリック
- 任意のサイト名を入力（例：
my-training-site） - 「Preferred」環境を選択（自動でPHP/MySQL設定されます）
- WordPressユーザー名・パスワードを設定
✅ 完了すると、ブラウザで「サイトを開く」ボタンからWordPress画面が確認できます。
📁 テーマ開発の準備
- Localで作成されたサイトの
app/public/wp-content/themes/フォルダを開く -
mythemeというフォルダを新規作成 - そこに以下のファイルを追加：
mytheme/
├── index.php
├── style.css
├── header.php
├── footer.php
├── functions.php
🔖 style.css（テーマ情報）
/*
Theme Name: MyTheme
Author: Your Name
Description: 初心者向けWordPressテーマ
Version: 1.0
*/
✂️ HTMLを分割し、header.phpとfooter.phpへ
（例：以前のindex.htmlから分解）
header.php
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header>
<h1><?php bloginfo('name'); ?></h1>
</header>
footer.php
<footer>
<p>© <?php echo date('Y'); ?> <?php bloginfo('name'); ?></p>
</footer>
<?php wp_footer(); ?>
</body>
</html>
index.php
<?php get_header(); ?>
<main>
<p>Welcome to my WordPress site!</p>
</main>
<?php get_footer(); ?>
🧠 WordPress管理画面でテーマを有効化
- Localの管理画面から「WP Admin」を開く
- WordPressにログイン
- 左メニュー「外観」→「テーマ」
- 作成した
MyThemeを有効化
📌 次に学ぶと良いこと
- 投稿や固定ページの表示対応（
single.php,page.php） - メニューやウィジェットエリアの追加（
functions.php） - プラグインの追加と管理
- フォームや画像スライダーの導入
🎉 おわりに
Localを使えば、初心者でも簡単にWordPressサーバーを構築して、自作のHTML/CSSを動的なWordPressテーマとして活用できます。
まずは手元のHTMLをベースに、header.php と footer.php に分割するだけでもOK！
動かしてみる → 直してみる → 拡張してみる、という体験を積み重ねて、実践的なスキルに繋げていきましょう。