静的HMMLに「Contact Form 7」を埋め込む方法を解説!

WordPress

WordPressの「Contact Form 7」を静的HMMLに埋め込む方法を解説します。

静的HMMLに簡易フォームを導入したい人は、ぜひ参考にしてみてください。

静的HMMLに「Contact Form 7」を埋め込む方法

【手順.1】「.htaccess」を作成し、コードを追加

↓「.html」内でPHPを実行させるために「.htaccess」を作成し、以下のコードを追加してください。

AddHandler fcgid-script .html

今回、使用するサーバーはエックスサーバーです。使用しているサーバーによって多少、記述する内容が変わりますので、ご注意ください。

この「.htaccess」は後でサーバーにアップしますので、保管しておいてください。

「.htaccess」の編集前に必ずバックアップを取っておいてください。

【手順.2】「Contact Form 7」を表示させる「静的HMML」を作成する

「Contact Form 7」を表示させる「静的HMML」を作成します。

ファイル名wp-contactform7-html.html
アップロードするフォルダWordPressのインストールフォルダ

↓htmlに記述するコードは以下になります。

<?php require('./wp-load.php'); ?>
<!DOCTYPE html>
<html lang="ja">
<head>
<?php wp_head(); ?>
</head>

<body>

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

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

「contactform7のショートコード」にはご自身のショートコードを入れてください。

1行目の「require(‘./wp-load.php’);」でWordPressの関数を読み込む設定をしています。

WordPressのインストールフォルダと同じ階層に「html」と「.htaccess」を置くなら、このままで問題ありません。

フォルダが変わるのであれば、パスを設定を変更してください。

【手順.3】「html」と「.htaccess」をサーバーにアップロード

作成した「wp-contactform7-html.html」と「.htaccess」をサーバーにアップロードします。

↓今回は、WordPressのインストールフォルダと同じ階層です。

【手順.4】最後にコンタクトフォームの表示確認

実際にアップした「wp-contactform7-html.html」を確認すると、無事「Contact Form 7」は表示されてました。

  • WordPressの静的HMMLに「Contact Form 7」を埋め込む方法の「デモ」はコチラ

最後に

私は実際にWordPressとhtmlが混在しているサイトの修正をした時に、上記の作業を経験しました。あまり活用する機会はないかもしれませんが、覚えておいて損はないです。

以上「静的HMMLに「Contact Form 7」を埋め込む方法を解説!」でした!

それではまた。

コメント