先日、外注先にHTMLファイルでランディングページを作っていただいたのですが、そのファイルを設置したいサイトはWordPressでできています。しかも、お問い合わせフォームはContact Form 7を使っているので、できればページ内にフォームも埋め込みたい。そんなときに、WordPressにHTMLファイルを「埋め込んだ」方法を共有したいと思います。

HTMLで作成されたページをWordPressの固定ページにする方法

一言で説明すると、HTMLファイルをテーマのページテンプレート化するという話です。具体的には、下記の手順でHTMLのファイルを固定ページで表示できるようにしました。

1. WordPressで空の固定ページを作成してタイトルとパーマリンクだけ設定する
2. ランディングページのHTMLファイルの拡張子を「.php」に変更
3. その際、ファイル名を作成したパーマリンクに合わせて「page-{パーマリンク}.php」に変更
4. phpファイルをFTPサーバーの使用中のテーマフォルダの中にアップ
5. 空の固定ページを表示して、アップしたphpファイルが表示されていることを確認
6. スタイルシートや画像などのフォルダも将来的な管理を考えながら任意の場所にアップ
7. phpファイルのスタイルシートや画像のURLをファイル編集で一括置換
8. スタイルシート内で指定されているbackgroundの画像URLを一括置換
9. ページテンプレートとして必要なタグの埋め込み
10. スタイルシートの調整

上記のうち、今回ポイントになった部分を抜粋してお話します。

必要なタグの埋め込み

問合せフォームのショートコードの埋め込み

phpファイルの中にショートコードを埋め込むときは、下記のようにします。

<?php echo do_shortcode('[ショートコード]'); ?>

ただし、これだけだとフォームがちゃんと機能してくれません。フォームを機能させるためのphpやJavaScriptが読み込まれていないからです。そのため、プラグインを有効化するための下記のコードを埋め込みます。

wp_head();の追加

head要素の中に下記のコードを入れます。

<?php wp_head(); ?>

wp_footer();の追加

</body>タグの直前あたりに下記のコードを入れます。

<?php wp_footer(); ?>

これでフォームが機能してくれるようになりますが、今度はテーマのスタイルシートも一緒に読み込まれる影響で、デザインが多少崩れてしまうことがあるので、最後にこれを調整しましょう。

以上が、HTMLファイルのページをテーマのページテンプレート化する方法でした。