【WordPress】静的HTMLをWordPress化する方法を徹底解説

HTML・CSSで作成したWebサイトを、WordPressで管理できるようにしたいと考えていませんか？

静的HTMLをWordPress化することで、HTMLを直接編集しなくても、管理画面から記事の投稿やコンテンツの更新ができるようになります。

ただし、WordPress化するには、HTMLファイルの分割やPHPへの変換、WordPress独自の関数の組み込みなどが必要です。

この記事では、無料のローカル開発ツール「Local」を使用して、静的HTMLをWordPress化する方法を初心者向けに解説します。

こんな人にオススメ！

静的HTMLで作成したWebサイトをWordPress化したい方
HTML・CSSを使ってWordPressのオリジナルテーマを作成したい方
WordPress化に必要なファイル構成やPHPの書き方を知りたい方
WordPress化の具体的な手順を初心者向けに学びたい方

既存のHTMLサイトをWordPressのオリジナルテーマとして構築したい方は、ぜひ参考してみてね！

📖目次に戻る

テーマを作成・有効化する

静的HTMLをWordPress化するには、まずオリジナルテーマを作成し、WordPress上で有効化する必要があります。

テーマ用のフォルダを作成し、必要なファイルを配置することで、WordPressの管理画面からテーマを認識・有効化できるようになります。

まずは、WordPressテーマの作成から有効化までの手順を解説するよ！

📖目次に戻る

step
1Localにテーマを用意

まず、WordPress化する静的HTMLのファイル一式を、Localのテーマディレクトリ（wp-content/themes/）に配置します。

その際、ファイルを格納するフォルダ名は、任意のテーマ名に変更してください。

例えば、テーマ名を example にする場合、以下のような構成になります。

wp-content/
└── themes/
    └── example/
        ├── index.html
        ├── css/
        ├── js/
        └── images/

step
2テーマを作る

次に、WordPressのテーマ情報を設定するために、テーマフォルダの直下にstyle.cssというファイルを作成し、以下のコードを記述します。

既存のHTMLサイトで使用しているCSSファイルとは別に作成してください。

/*
 Theme Name: sample-theme
 Description: サンプルテーマです。
 Version: 1.0
 */

それぞれの項目の意味は以下のとおりです。

Theme Name：テーマ名（任意の名前を設定）
Description：テーマの説明
Version：テーマのバージョン

このうち、必須項目は Theme Name のみです。その他の項目は必要に応じて設定してください。

なお、既存のCSSファイルもstyle.cssという名前の場合は、ファイル名を変更するなどして、同じフォルダ内で重複しないようにしましょう。

step
3WordPressの初期設定をする

テーマを有効化する前に、WordPressの基本的な設定を確認しておきましょう。

▶︎ 管理画面の日本語設定

WordPressの管理画面が英語になっている場合は、「Settings」→「General」→「Site Language」から「日本語」を選択し、変更を保存します。

すでに日本語になっている場合は、変更する必要はありません。

▶︎ パーマリンクの設定

続いて、管理画面の「設定」→「パーマリンク」を開き、「投稿名」を選択して変更を保存します。

これにより、投稿ページのURLが以下のようなシンプルな構造になります。

https://example.com/sample-post/

また、カテゴリーをURLに含めたい場合は、「カスタム構造」を選択し、以下を入力します。

/%category%/%postname%/

この場合、URLは以下のようになります。

https://example.com/news/sample-post/

ただし、カテゴリーを変更するとURLも変わる可能性があるため、注意が必要です。

特に理由がなければ「投稿名」の設定で問題ありません。

また、固定ページのみで構成されるサイトでは、カテゴリーを含むカスタム構造を設定する必要はありません。

既存サイトをWordPress化する場合は、元のURL構造を維持できるように設定しよう!

📖目次に戻る

静的HTMLをWordPressで表示する

WordPressテーマの準備ができたら、次は静的HTMLをWordPress上で表示できるようにします。

HTMLファイルをPHPファイルに変更し、CSS・JavaScript・画像のパスを修正することで、元のWebサイトのデザインや動きを再現していきます。

step
1HTMLファイルをPHPに変更する

まず、テーマフォルダ内のindex.htmlをindex.phpに変更します。

sample-theme/
├── index.php
├── style.css
└── assets/
    ├── css/
    ├── js/
    └── img/

WordPressのクラシックテーマでは、index.phpが基本となるテンプレートファイルです。

ファイルを変更したら、WordPressの管理画面から「外観」→「テーマ」を開き、作成したテーマを有効化しましょう。

この時点では、デザインが崩れていると思うけど、次の手順で修正するから安心してね！

step
2CSS・JavaScript・画像のパスを修正する

静的HTMLでは、CSSや画像を相対パスで指定していることが一般的です。

しかし、WordPress化するとページのURL構造が変わるため、そのままではファイルを読み込めない場合があります。

そこで、get_template_directory_uri()を使用して、テーマフォルダのURLを取得します。

例えば、CSSファイルの読み込みは以下のように変更します。

<link rel="stylesheet" href="assets/css/style.css">

<link rel="stylesheet" href="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/css/style.css">

JavaScriptも同様に変更します。

<script src="assets/js/main.js"></script>

<script src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/js/main.js"></script>

画像ファイルについても、同じ方法でパスを修正します。

<img src="assets/img/sample.webp" alt="">

<img src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/img/sample.webp" alt="">

これで、WordPressのテーマフォルダ内にあるファイルを読み込めるようになります。

なお、CSS・JavaScriptの読み込みは、後ほどfunctions.phpを使用する方法に変更します。

ここでは、まず元のWebサイトが正しく表示されることを確認しよう！

CSS・SCSS内の画像パスを確認する

CSSやSCSSで背景画像を指定している場合は、画像のパスも確認しておきましょう。

例えば、以下のような記述です。

background-image: url("../img/sample.webp");

CSS内の相対パスは、実際に読み込まれるCSSファイルの場所を基準に解決されます。

そのため、WordPress化に伴ってCSSや画像の配置場所を変更した場合は、パスの修正が必要になることがあります。

SCSSを使用している場合は、最終的に出力されるCSSファイルの配置場所を基準に確認しよう！

サイトタイトルを表示する

続いて、WordPressの管理画面で設定したサイトタイトルを表示できるようにします。

サイト名をHTMLに直接記述している場合は、以下のように変更します。

変更前

<h1>サンプルサイト</h1>

変更後

<h1><?php bloginfo('name'); ?></h1>

bloginfo('name')は、WordPressに登録されているサイトタイトルを取得して表示する関数です。

管理画面の**「設定」→「一般」→「サイトのタイトル」**から変更した内容が反映されます。

ブラウザのタブに表示される<title>タグについては、後ほどfunctions.phpで設定するよ！

サイトのキャッチフレーズを表示する

サイトにキャッチフレーズがある場合は、bloginfo('description')を使用します。

変更前

<p>サイトのキャッチフレーズ</p>

変更後

<p><?php bloginfo('description'); ?></p>

これにより、管理画面の**「設定」→「一般」→「キャッチフレーズ」**に入力した内容が表示されます。

サイトタイトルとキャッチフレーズを組み合わせることも可能です。

<h1><?php bloginfo('name'); ?></h1>
<p><?php bloginfo('description'); ?></p>

なお、キャッチフレーズが不要なサイトでは、この設定を行う必要はありません。

トップページへのリンクを設定する

ヘッダーのロゴなど、トップページに移動するリンクにはhome_url()を使用します。

変更前

<a href="index.html">HOME</a>

変更後

<a href="<?php echo esc_url( home_url('/') ); ?>">HOME</a>

home_url('/')は、WordPressサイトのトップページのURLを取得する関数です。

ヘッダーのロゴやナビゲーションなど、トップページへ移動する箇所に設定しておきましょう。

bodyタグにbody_class()を追加する

次に、<body>タグにbody_class()を追加します。

変更前

<body>

変更後

<body <?php body_class(); ?>>

body_class()は、表示しているページに応じて、WordPressが自動的にCSSクラスを付与する関数です。

例えば、トップページや投稿ページなど、それぞれのページに応じたクラスが追加されます。

これにより、ページごとに異なるCSSを適用しやすくなります。

WordPressに必要な関数を追加する

WordPressの機能やプラグインを正しく動作させるために、以下の3つの関数も追加しておきましょう。

headタグの終了直前

<?php wp_head(); ?>
</head>

bodyタグの開始直後

<body <?php body_class(); ?>>
<?php wp_body_open(); ?>

bodyタグの終了直前

<?php wp_footer(); ?>
</body>

これらは、WordPressが必要なコードを出力するための重要な関数です。

特にwp_head()とwp_footer()は、後ほどfunctions.phpからCSS・JavaScriptを読み込む際にも使用されます。

JavaScriptの動作を確認する

最後に、WordPress上でJavaScriptが正常に動作しているか確認しましょう。

ブラウザの開発者ツールを開き、「Console」にエラーが表示されていないかチェックします。

特に、jQueryを使用している場合は注意が必要です。

WordPressに付属するjQueryは、通常$をそのまま使用できない設定になっています。

そのため、以下のような記述は動作しない場合があります。

変更前

$(function() {
  // 処理
});

変更後

jQuery(function($) {
  // 処理
});

このように記述すると、関数内で$を使用できるようになります。

なお、jQueryが読み込まれていない場合は、この変更だけでは動作しません。必要なライブラリが読み込まれているかも確認してください。

また、「DevTools failed to load source map」という警告が表示される場合があります。

これはソースマップの読み込みに関する警告で、必ずしもJavaScriptの動作に影響するものではありません。

まずはファイルのパスや読み込み状況を確認し、必要に応じて原因を調べましょう。

ここまで完了したら、WordPress上で元のWebサイトのデザインや動きが再現されているか確認します。

問題なく表示できたら、次はfunctions.phpを使用して、CSS・JavaScriptの読み込み方法を整理していきます。

これで、カスタムフィールドの入力ができるようになったよ！次の項で、入力方法について見てみよう！

📖目次に戻る

カスタムフィールドの入力

次に、表示されたカスタムフィールドに「名前」(キー)と「値」を入力します。

既に他のフィールドで「名前」が入力されている場合は、ドロップダウンメニューから選択が可能です。

新たに「名前」を入力したい場合は、「新規入力」ボタンをクリックしてから入力します。

フィールドを追加する場合は、入力欄下の「カスタムフィールドを追加」ボタンをクリックしましょう。

「値」のみ入力して、「名前」を入力しない場合はエラーになってしまうから注意しようね！

📖目次に戻る

カスタムフィールドの取得と表示

カスタムフィールドに入力された内容は、「post_meta」というデータとして、データベースに保存されます。

そして、この「post_meta」の内容を表示させるには、主に以下のような関数を記述して取得し、表示します。

関数	役割	利用箇所
get_post_meta()	投稿ID と名前(キー) を指定して値を取得	どこでも可
get_post_custom()	投稿ID を指定して全ての名前(キー)と値を配列で取得	どこでも可
post_custom()	名前(キー)を指定して値を取得	ループ内

引用元：WordPress.org日本語版

※the_meta関数 (全ての名前と値を表示する関数)は、Wordpress.orgでは廃止されましたとあります。
代わりにget_post_metaを使用しましょう。（引用元：WordPress.org）

実際に使用する場合は、取得される値をエスケープ処理してから表示しようね！

それでは、一つずつ見ていこう！

📖目次に戻る

get_post_meta 関数

投稿ID と 名前(キー) を指定して値を取得する場合は、get_post_meta関数を使用します。

get_post_meta( $post_id , $key , $single );

$post_id (整数)	カスタムフィールドの値を取得したい投稿のID。[必須]
$key (文字列)	取得したい値の名前(キー)。初期値：''
$single (真偽値)	何も指定しない(またはfalseを指定する)と配列、 trueを指定すると単一の値を返す。初期値：false

図のようなカスタムフィールドを入力している投稿（ID = 212）があるとします。

カスタムフィールドの「カロリー」に設定した値のみを取得して表示する場合は、任意の箇所で次のように記述します。

wordpressのカスタムフィールドのget_post_meta関数の説明

<?php
$meta = get_post_meta( 212 , 'カロリー' , true );
echo esc_html($meta);
?>

HTMLとしては、以下のように表示されます。

500

ご覧の通り、第三引数にtrueを指定しているため、単一の値として「500」が表示されていますね。

第三引数に何も指定しない（またはfalseを指定した）場合は、配列になるから、表示する時は$meta[0]と記述してね！（値を複数指定していない場合）

📖目次に戻る

get_post_custom 関数

投稿ID を指定して全ての名前(キー)と値を配列で取得したい場合は、get_post_custom関数を使用します。

get_post_custom( $post_id );

$post_id (整数)

カスタムフィールドの値を取得したい投稿のID。初期値：現在の投稿ID
（存在しないIDを指定した場合は、結果として空文字が返される）

図のようなカスタムフィールドを入力している投稿（ID = 212）があるとします。

カスタムフィールドの全ての値を表示する場合は、任意の場所で次のように記述します。

wordpressのカスタムフィールドのget_post_meta関数の説明

<?php
$meta = get_post_custom( );
foreach($meta as $name => $values) {
if(!(preg_match("/^_/", $name))){
echo esc_html($name).'：';
foreach($values as $value) {
echo esc_html($value) .'<br> ';
}
}
}
?>

HTMLとしては、以下のように表示されます。

商品名：ミートスパゲッティ<br> 料金：780<br> カロリー：500<br>

名前（キー）と値が全て表示されていますね。

なお、get_post_custom関数では、カスタムフィールドの名前（キー）と値が連想配列で返るため、foreach文で一つずつ値を取り出す必要があります。

foreach文の中で、さらにforeach文を書いている理由は、値も配列だからだよ！

また、図のように何も処理をせずに表示すると _（アンダースコア）から始まるキーが表示されてしまうため、正規表現※で除外しています。

※テキストのパターンを記述し、テキストの中から特定の文字列パターンを検索、抽出、置換、または操作するための手法のこと。

wordpressのget_post_custom関数で正規表現で除外をしない場合

今回は、 _（アンダースコア）から始まるキーを除外したいので、foreach文内の最初のif文で、preg_mach関数を使用して以下のように記述しています。

if(!(preg_match("/^_/", $name))){}

preg_mach関数では、第一引数に「正規表現パターン」、第二引数に「検索対象の文字列」を指定します。

つまり、正規表現パターン /^_/ は、文字列 $name が _（アンダースコア）で始まるかどうかをチェックしています。

そして、if 文の !（否定演算子）を含めることで、$nameが「最初に _（アンダースコア）で始まらない場合」という条件を表しています。

📖目次に戻る

post_custom 関数

ループ内で、名前(キー)を指定して値を取得する場合は、post_custom関数を使用します。

post_custom( $key );

$key (文字列)

カスタムフィールドの取得したい値の名前（キー）。初期値：''
（存在しない名前を指定した場合も、結果として空文字が返される）

図のようなカスタムフィールドを入力している投稿（ID = 212）があるとします。

カスタムフィールドの商品名の値を表示したい場合は、任意の場所で次のように記述します。

wordpressのカスタムフィールドのget_post_meta関数の説明

<?php
$meta = post_custom('商品名');
echo esc_html($meta);
?>

HTMLとしては、以下のように表示されます。

ミートスパゲッティ

名前「商品名」に設定した値「ミートスパゲッティ」が表示されていますね。

もし、名前の入力欄がチェックボックスやラジオボタンなどを利用し、値が複数ある場合は配列で返ってくる場合は、値が配列として返るので次のように記述しましょう。

<?php
$meta = post_custom('商品名');
if($meta) {
foreach($meta as $value) {
echo esc_html($value);
}
}
?>

これで、カスタムフィールドの基本的な表示方法はわかったかな！

📖目次に戻る

最後に

今回は、カスタムフィールドの基本的な使い方について解説しました。

カスタムフィールドは奥が深く、プラグインを使用することで、画像を追加したりチェックボックスを設定することも可能です。

ぜひ、この色々な使い方を試して見てくださいね！

WordPressについて、他にも詳しく知りたい方は他の記事もチェックしてみて下さい！

: WordPress
WordPressの基本的な使い方について解説した記事一覧ページです。イラストを交えてやさしく解説していますので、ぜひご覧ください。
続きを見る

最後までお読みいただき、ありがとうございました！