webデザイン・コーディングに役立つ情報、WordPressカスタムに使えるHTML・CSSコピペ用コード、Canva無料テンプレートなどをご紹介します♩

ちいさなwebデザインブログCHIIWEBLG

静的サイトにWPのお問い合わせフォームのみを追加

静的サイトにWordPressのフォームだけを設置したい
この記事を書いている人
Marie

Marie

  • フリーランスwebデザイナー&講師
  • 2児ママ
  • 制作会社・インハウスデザイナーを経験し独立
  • オンラインwebデザイン教室ちいウェブ運営
  • 仕事の合間の息抜きに植物を育てています♡
  • スプラ・DIY・将棋がすき

静的サイトにお問い合わせフォームをつけたい場合、いくつか選択肢があります。

今回は、その選択肢の1つである、”WordPressのお問い合わせフォームプラグインを利用し、お問い合わせフォームを追加する”方法を紹介します。

静的ページにWordPressの関数を利用する方法があります。

それはこちらの記事でも紹介しています。

この方法を利用し、HTML(静的サイト)の一部分に、お問い合わせフォームを持ってきます。

WordPressをインストール

まずは、以下のような構造で、WordPressをインストールしたとします。

index.htmlやその他のHTMLファイルと同じ場所に、新しくWordPress用のフォルダを作成してインストールした場合↑のような構造になりますね。

今回は、contact.htmlにお問い合わせフォームを設置したいと考えています。

そこで、contact.htmlに、WordPressの関数を利用する為の記述を一番最初に入れます。

WordPress記事を表示させたいhtmlファイルをPHP化

「contact.html」ファイルの拡張子をphpに変更してください。

「contact.php」に書き直せばOKです。

WordPressの記述を使うという宣言文を追加

次に、「このファイルにWordPressで使われるタグを同じように使えるようにするよ」という決まった宣言文を書きます。

<?php require('wp/wp-load.php'); ?>

これをcontact.phpの一番上に追加してください。

ファイルの一番最初に貼り付け

これは、インストールしたWordPressファイルの中の、wp-load.phpを読み込んでいる記述なので、場所をしっかり示してください。

wpというフォルダの中のwp-load.phpファイルという形になっているので、WordPressを別の名前のフォルダに入れた場合は書き換えてください。

また、今回の例の場合、contact.phpから見て、wpフォルダは同じ場所にあるのでこれで問題ありませんが、もしも別の場所にあれば、しっかりパスを指定してあげてください。

これで準備が整いました。

WordPressでお問い合わせフォームを作成する

お問い合わせフォームをWordPress側で用意します。

プラグインをインストールし、お問い合わせフォームを作成してください。

私はよくContact Form 7というプラグインを利用しています。

Contact Form 7の使い方は今回は割愛しますので、ググってみてください。

たくさんの記事が見つかると思います。

お問い合わせフォーム用ショートコードを設置する

Contact Form 7では、ショートコードをフォームを出したい場所に記入します。

その他のプラグインも大体そうじゃないかと。

今回は、phpファイルに直接コードを設置しますので、以下のように書いてください。

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

これでフォームが指定した場所に設置できます。

注意点

今回の方法では、簡単にフォームを設置できますが、WordPressをインストールしているにも関わらず、フォームしか利用していないことになります。

また、ドメイン/wpというURLには、WordPressサイトが存在する形となります。

CSSはサイト側で用意しておく必要があります。

この場合は、WordPressのテーマは関係がないので注意が必要です。

いいなと思ったら
TAPしてね♡↓

コメントする

CAPTCHA


コメントは承認後に表示されます。

関連記事

更新通知を受け取る

不定期更新の為、更新お知らせを受け取りたい方は
ご登録ください^^

更新通知以外のメールは
お送りしませんのでご安心ください。