「静的HTMLのサイトをWordPressで動かしたいけど、PHPって難しそう…」
そんなふうに感じていませんか？
実は、HTMLの基本が分かっていれば、WordPress化（テーマ化）は意外と簡単です。
本記事では、Webデザイナーが「手を動かして理解できる」ように、
HTMLをWordPressテーマに変えるためのPHP実践ステップをわかりやすく解説します。
目次
まず理解しておきたい「WordPressテーマの仕組み」
WordPressは、HTMLファイルを分割してPHPで呼び出す仕組みになっています。
つまり、テンプレートの再利用化・動的化をPHPで行うわけです。
たとえば、HTMLでこう書いていた部分を👇
<header>
<h1>My Portfolio</h1>
<nav>…</nav>
</header>
WordPressではこう書き換えます👇
<?php get_header(); ?>
これで、全ページで共通のヘッダーを呼び出せるようになります。
これが「PHPでHTMLを動かす」というイメージです。
HTMLをWordPress化する基本の5ステップ
| ステップ | 内容 | ファイル名 |
|---|---|---|
| ① | テーマフォルダを作成 | /wp-content/themes/mytheme/ |
| ② | index.php を作る | メインテンプレート |
| ③ | HTMLを分割する | header.php / footer.php / sidebar.php |
| ④ | PHPタグを差し替える | get_header()などを挿入 |
| ⑤ | style.cssを用意 | テーマ情報を記述 |
ステップ①：テーマフォルダを作成する
WordPressのインストールフォルダ内にある/wp-content/themes/ の中に、好きなフォルダ名でテーマを作ります。
例）
/wp-content/themes/mydesign/
この中に index.php と style.css があれば、WordPressはテーマとして認識します。
ステップ②：HTMLをindex.phpにコピーする
既存のHTMLファイル（例：index.html）を開いて、その内容をWordPressの index.php に貼り付けます。
まずは静的な状態でOKです。
ステップ③：HTMLを分割してPHPで呼び出す
WordPressでは、ヘッダーやフッターを共通化します。
分割するファイル例
- header.php（ヘッダー部分）
- footer.php（フッター部分）
- sidebar.php（サイドメニューなど）
HTMLの構造がこのような場合👇
<html>
<head>…</head>
<body>
<header>…</header>
<main>…</main>
<footer>…</footer>
</body>
</html>
これを以下のように分けます👇
| ファイル | 内容 |
|---|---|
| header.php | <html><head>〜<header>〜</header> |
| footer.php | <footer>〜</footer></body></html> |
| index.php | <main>〜</main> の部分 |
なぜ <main> は index.php に書くの？
WordPressのテーマは、ページの構造をパーツ化してPHPで組み立てる仕組みになっています。
| 役割 | ファイル | 内容 |
|---|---|---|
| ヘッダー部分 | header.php | <head>〜<header> など |
| フッター部分 | footer.php | <footer>〜</html> |
| メインコンテンツ | index.php | <main> の中身（投稿ループなど） |
つまり <main> は「ページごとに変わる部分」なので、固定要素（ヘッダーやフッター）ではなく、index.phpに置くのが正解です。
ステップ④：PHPタグで呼び出す
分割したHTMLをPHP関数で呼び出します。
<?php get_header(); ?>
<main>
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<h2><?php the_title(); ?></h2>
<?php the_content(); ?>
<?php endwhile; ?>
<?php endif; ?>
</main>
<?php get_footer(); ?>
これで、ヘッダーとフッターが自動で読み込まれ、
投稿内容が動的に表示されます。
ステップ⑤：style.cssでテーマ情報を設定
style.css の先頭に以下のようなテーマ情報を書きます👇
/*
Theme Name: MyDesign
Author: Shin
Description: WebデザイナーのためのWordPressテーマ
Version: 1.0
*/
これで、WordPressの管理画面「外観 ＞ テーマ」で選択できるようになります。
実践応用：HTMLからWordPress化するときのポイント
| よくあるHTML記述 | WordPressでの書き方 |
|---|---|
<title>サイト名</title> | <title><?php bloginfo('name'); ?></title> |
<a href="about.html"> | <a href="<?php echo home_url('/about/'); ?>"> |
<img src="images/logo.png"> | <img src="<?php echo get_template_directory_uri(); ?>/images/logo.png"> |
| フッターの年号 | © <?php echo date('Y'); ?> MySite |
✅ WordPress化では「絶対パス→動的パス」に変えるのが重要なポイントです。
まとめ：PHPは「書く」より「置き換える」感覚でOK
WebデザイナーにとってのPHPは、プログラミングではなく“再利用のための仕組み”です。
書くというより「HTMLをPHPタグに置き換える」だけ。
難しいコードを覚えなくても、テーマ化は十分可能です。
WordPress化の第一歩として、まずは1ページでも「動かしてみる」。
それが、PHP理解への最短ルートです。
Webデザイナーが覚えるべきfunctions.php入門｜テーマを進化させる魔法のファイル
「HTMLをWordPress化できた！でも、もっと自由にデザインをコントロールしたい」
そんなときに登場するのが functions.php（ファンクションズ・ピーエイチピー）。
WordPressテーマに“魔法”をかけるファイルともいわれ、CSSやJSの読み込み、メニュー追加、アイキャッチ設定などを自在に操れるようになります。
この記事では、Webデザイナーが実際に使えるfunctions.phpの基本と活用法をわかりやすく紹介します。
functions.phpとは？その役割を簡単に
functions.php は、WordPressテーマの中で「機能や設定を追加する」ためのファイルです。
たとえば：
- CSSやJavaScriptを読み込む
- メニューやアイキャッチを有効化する
- 管理画面に独自機能を追加する
というような処理を、プラグインなしでテーマ側で行えるのが特徴です。
基本の書き方とルール
- ファイル名は必ず「functions.php」
- テーマフォルダの直下に置く
- 冒頭に必ず
<?phpを書く（閉じタグは不要）
<?php
// functions.phpのサンプル
function mytheme_setup() {
add_theme_support('post-thumbnails'); // アイキャッチ画像を有効化
}
add_action('after_setup_theme', 'mytheme_setup');
よく使うfunctions.phpの実用例（デザイナー向け）
| 機能 | コード例 | 効果 |
|---|---|---|
| 🎨 アイキャッチ有効化 | add_theme_support('post-thumbnails'); | 投稿ページにサムネイル設定が可能に |
| 🧭 ナビメニュー登録 | register_nav_menus(['main' => 'メインメニュー']); | 管理画面でメニューを編集可能に |
| 💅 CSS読み込み | wp_enqueue_style('style', get_stylesheet_uri()); | style.cssを正しく読み込む |
| ⚙️ JS読み込み | wp_enqueue_script('main', get_template_directory_uri().'/js/main.js'); | JSファイルを読み込む |
| 🔖 カスタムロゴ対応 | add_theme_support('custom-logo'); | サイトロゴを管理画面から変更できる |
コードの意味
たとえば、CSS読み込みのコード👇
function my_enqueue_styles() {
wp_enqueue_style('main', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'my_enqueue_styles');
これは「テーマが読み込まれるときに style.css を呼び出す」という命令。
WordPressではこのように「関数＋アクションフック」で処理を追加します。
functions.phpでできる“デザインの拡張例”
| 実現したいこと | コードの例 | 効果 |
|---|---|---|
| カスタム投稿タイプ追加 | register_post_type('works', [...]); | 作品ページなど独自投稿を作れる |
| サムネイルサイズ変更 | add_image_size('thumb', 300, 300, true); | 切り抜きサイズを指定できる |
| OGP画像の自動設定 | function ogp_tag(){...} | SNSでのシェア時にサムネ表示 |
| 管理画面ロゴ変更 | function custom_login_logo(){...} | ログイン画面をブランド化 |
| Webフォント読み込み | wp_enqueue_style('google-font', 'URL'); | Google Fontsの導入 |
💬 これらをfunctions.phpに追加するだけで、サイト全体がぐっと柔軟に！
⚠️ 注意：functions.phpでよくあるエラー
| 症状 | 原因 | 対処法 |
|---|---|---|
| 画面が真っ白になる | セミコロン;忘れや波括弧}抜け | FTPでファイルを修正またはコメントアウト |
| 関数名の重複エラー | 同名関数が他テーマ・プラグインと競合 | 関数名にプレフィックスを付ける（例：mytheme_enqueue_scripts） |
| 反映されない | キャッシュや記述位置の問題 | ブラウザキャッシュ削除・Ctrl+F5で更新 |
デザイン視点でのおすすめ活用ポイント
- functions.phpで管理できると、コードがスッキリする。
→<head>内に直接CSSやJSを書かずに済む。 - テーマ機能を「プラグイン化」できる感覚。
→ 軽い機能追加なら、外部プラグインに頼らずに済む。 - 子テーマで安全にテストする。
→ 親テーマのfunctions.phpを直接編集せず、
/wp-content/themes/child-theme/functions.phpに記述すればOK。
まとめ｜functions.phpは“裏からデザインを支える魔法のファイル”
functions.phpは、デザインの自由度を一段階上げるツールです。
Webデザイナーにとっては「プログラムを書く場所」ではなく、デザインを制御する設定ファイルと考えると理解しやすいでしょう。
✅ CSSやJSを正しく読み込める
✅ メニュー・ロゴ・アイキャッチを柔軟に設定できる
✅ WordPressテーマの品質が一気に上がる
次の一歩として、functions.phpに「自分のテーマ専用の処理」を少しずつ加えていきましょう。
