開発環境とテーマの基盤を整える – WordPress実践制作【WPCafe編】

前回、サンプルサイト「WPCafe」の全体像と、これから学べる技術について紹介しました。今回からいよいよ実際の制作に入ります。

今回の目標は、オリジナルテーマのサイトを表示することです。これまで学んできた基礎をベースに、実際のサンプルサイトを構築していきましょう。

これまでの学習と同様にLocalとVS Codeを使って、ローカル環境（自分のパソコン上）でサイトを構築していきます。

この実践シリーズで大切にしたい3つのこと

このシリーズでは、ただ手順をなぞるだけの学習ではなく、以下の3つを大切にしながら進めていきます。

1. 「なぜ？」を理解する

「推奨されているから」「手順に書いてあるから」ではなく、その理由や意図を理解した上で進めましょう。

「だったらそうした方がいいね」と自分の意志で判断できるようになることが重要です。

なぜこのタイミングでこの設定をするのか。なぜこのプラグインが必要なのか。一つ一つの「なぜ？」を理解することで、別のプロジェクトでも応用できる力が身につきます。

2. 実際に手を動かす

読むだけでは身につきません。必ず自分の手で実際にコードを書き、設定を行い、動作を確認しましょう。エラーが出たら調べる。思った通りに動かなかったら原因を探る。その試行錯誤のプロセスこそが、本当の学びです。

3. コピーではなく自分で作る

この記事では「wpcafe.local」「カフェテーマ」といった具体例を示しますが、全く同じものを作る必要はありません。

• URLを「mysite.local」に変えてみる
• サイト名を「MyRestaurant」にしてみる
• 自分の好きなテーマ名をつけてみる

記事の流れや構造は参考にしつつ、細かい内容は自分で決めてOKです。むしろ、自分なりのアレンジを加えることで、より深く理解できるはずです。

完全なコピーを作るのではなく、この記事を「ガイド」として、あなた自身のオリジナルサイトを作り上げていきましょう。

開発環境について

この記事では、LocalやVS Codeなどの開発環境がすでに整っていることを前提に進めます。まだ環境構築が済んでいない方は、以下の過去記事を参考に準備してください。

参考①

Localのインストールと初回サイト作成 – WordPress学習環境の構築

WordPressの学習環境としてLocalのダウンロードからインストール、初回テストサイト作成まで完全解説します。わずか数分で完成し、環境構築の悩みから解放されて純粋にWordPressの学習に集中できるようになります。初心者が迷いがちなサイト名の付け方や設定のポイントも丁寧に説明しています。

参考②

オリジナルテーマを作ってみよう！ – WordPressテーマの仕組みを理解する

WordPressのテーマとは何かを、実際に最小限のオリジナルテーマを作成しながら学びます。ファイル構造やテーマの役割、wp-contentやthemesフォルダの意味、style.cssとindex.phpの基本など、WordPressの仕組みを根本から理解する第一歩に最適な内容です。

それでは、開発環境の準備が整っていることを前提に、学習を進めていきましょう。

Localでサイトを作成する

まずは、Localで新しいWordPressサイトを作成します。

1. Localを起動し、+ボタンをクリック
2. Create a new siteを選択しContinueをクリック
3. サイト名「wpcafe」を入力
   Advanced optionsを展開しLocal site pathで場所を選択しContinueをクリック
4. Preferredを選択しContinueをクリック
5. ユーザー名、パスワードを入力。Advanced optionsを展開し日本語を選択。
6. ADD SITEをクリックして作成完了

作成が完了すると、サイトのローカルURLは http://wpcafe.local になります。

オリジナルテーマの作成

テーマファイルの作成

WordPressのテーマは、最低限2つのファイルがあれば動作します。今回はシンプルな構成からスタートしましょう。

Localでサイトを右クリックし、「Open site shell」を選択してターミナルを開くか、VS Codeでサイトのフォルダを開きます。

テーマフォルダは以下の場所に作成します。

app/public/wp-content/themes/cafe-theme/

app/public/wp-content/themes/cafe-theme/

このcafe-themeフォルダ内に、以下の2つのファイルを作成してください。

app
└── public
    └── wp-content
        └── themes
            └── cafe-theme
　　             ├── index.php
　　             └── style.css

app
└── public
    └── wp-content
        └── themes
            └── cafe-theme
　　             ├── index.php
　　             └── style.css

テーマヘッダーの記述

style.cssの冒頭に、テーマ情報を記述します。これがないとWordPressはテーマとして認識しません。

/*
Theme Name: カフェテーマ
*/

/*
Theme Name: カフェテーマ
*/

index.phpは空のままで構いません。次回以降、実際のコンテンツを表示する際に記述していきます。

テーマの有効化

1. ブラウザで http://wpcafe.local/wp-admin にアクセス
2. 設定したユーザー名とパスワードでログイン
3. ダッシュボード左メニューから 外観→テーマ を選択
4. 「カフェテーマ」 が表示されているので、有効化をクリック

これで、自作のオリジナルテーマが有効になりました。

WordPressの初期設定

制作を始める前に、WordPressの初期状態を整えておきましょう。

不要なサンプルコンテンツの削除

WordPressをインストールすると、デフォルトでいくつかのサンプルコンテンツが作成されています。これらは不要なので削除します。

1. 投稿の削除:
   • 投稿→投稿一覧から「Hello world!」を削除
2. 固定ページの削除:
   • 固定ページ→固定ページ一覧から「サンプルページ」を削除

一般設定

サイトの基本情報を設定します。

1. 設定→一般を開く
2. サイトのタイトル: 「WPCafe」(または任意のタイトル)
3. キャッチフレーズ: 「心地よい時間を過ごせる街のカフェ」(または任意のキャッチフレーズ)
4. 変更を保存をクリック

トップページの設定

WordPressはデフォルトで投稿一覧をトップページに表示しますが、今回は固定ページをトップページとして使用します。

なぜ固定ページをトップページにするのか？

WordPressは元々ブログシステムとして開発されたため、デフォルトでは「最新の投稿」一覧がトップページに表示されます。

しかし、今回のカフェサイトのような企業サイトや店舗サイトでは、ブログ一覧ではなく、デザインされたトップページが必要です。訪問者に伝えたい情報（営業時間、アクセス、コンセプトなど）を自由にレイアウトしたページをトップに置くため、固定ページを使用します。

固定ページの作成

• 固定ページ→新規追加
• タイトルに「HOME」と入力
• 本文は空のままで公開をクリック

表示設定

• 設定→表示設定を開く
• ホームページの表示で 「固定ページ」 を選択
• ホームページのドロップダウンから 「HOME」 を選択
• 変更を保存をクリック

メディア設定

画像ファイルの管理をシンプルにするため、年月ベースのフォルダ整理をオフにします。

1. 設定→メディアを開く
2. アップロードしたファイルを年月ベースのフォルダーに整理のチェックを外す
3. 変更を保存をクリック

この設定をオフにする理由は、画像のパス（img要素のsrc属性）に年月が含まれてしまうのを避けるためです。年月が含まれると、いつアップロードしたのかが画像のURLから分かってしまいます。

プラグインの導入

本格的な制作を始める前に、3つのプラグインを導入します。これらは必須ではありませんが、制作の初期段階で導入しておくことが重要です。

1. EWWW Image Optimizer – 画像の最適化
2. FileBird Lite – メディアライブラリの整理
3. WP Multibyte Patch – 日本語環境の最適化

なぜ初期段階で導入するのか

WP Multibyte Patchは、日本語サイトを構築する際にはほぼ必須のプラグインです。ファイル名が日本語でも正しく処理されたり、日本語検索が正常に動作するようになります。

このプラグインを導入しないまま制作を進めると、想定外の不具合にハマる可能性があります。その原因が「日本語」だったりするため、最初に導入しておくことで余計なトラブルを避けられます。

EWWW Image OptimizerとFileBird Liteは、どちらもメディアに関するプラグインです。現時点ではまだ1つもメディアをアップロードしていません。つまり、プラグインを導入した後にアップロードするメディアすべてに自動的に適用されます。

もしメディアアップロード後にこれらのプラグインを導入すると、すでにアップロード済みのメディアに対して整理したり、WebPに変換したりする作業が必要になってしまいます。最初に入れておけば、そうした手間が一切かかりません。

インストール手順

1. プラグイン→新規追加を開く
2. 各プラグイン名で検索
3. 今すぐインストール→有効化をクリック

EWWW Image Optimizerの設定

このプラグインだけ、少し設定が必要です。

1. 設定→EWWW Image Optimizerを開く
2. 基本タブで以下をチェック
   • メタデータを削除にチェックを入れる
3. 変換タブを開く
   • WebP 変換 を有効化

変更を保存をクリックしてください。

メタデータを削除する理由

写真ファイルには、Exif情報と呼ばれるメタデータが記録されています。これには撮影日時、カメラの機種、撮影場所（GPS情報）などが含まれることがあります。

これらの情報がそのままWeb上に公開されると、プライバシーやセキュリティ上の問題につながる可能性があります。特にGPS情報が含まれていると、撮影場所が特定されてしまいます。

そのため、画像をアップロードする際に自動的にメタデータを削除する設定を有効にしておきます。

その他のプラグイン

• FileBird Lite: 現時点では特に設定する必要はありません。メディアをアップロードする際に、フォルダで整理できるようになります。
• WP Multibyte Patch: 設定は不要です。有効化するだけで日本語環境が最適化されます。

表示の確認

ここまでの設定が完了したら、実際にサイトを表示して確認してみましょう。

1. ブラウザで http://wpcafe.local を開く
2. 真っ白なページが表示されるはずです(index.phpが空のため)

これで、オリジナルテーマが正しく有効化され、WordPressが動作していることが確認できました。

今回のまとめ

今回は、ローカル環境でオリジナルテーマを作成し、WordPressサイトの基本設定を行いました。

実施したこと:

• Localでサイト(http://wpcafe.local)を作成
• 最小構成のオリジナルテーマを作成・有効化
• WordPressの初期設定(一般設定、表示設定、メディア設定)
• 必要なプラグインのインストールと設定
• サイトの表示確認

まだ真っ白なページですが、これが今後のすべての基盤となります。次回からは、実際にコンテンツを表示し、サイトの構造を作り込んでいきます。

次回予告

次回は、固定ページを複数作成し、ナビゲーションメニューを実装します。サイトの基本的な構造を整え、ページ間を移動できるようにしていきます。

実際に手を動かしながら、一歩ずつ進めていきましょう。ここから、サイトがどんどん形になっていく過程を楽しんでください。

この投稿をシェアする