WordPressのちょこっとレシピ（その４）

ちょこっとレシピその４。最終回です。
最後は、WordPressのお問い合わせフォームでおなじみのプラグイン『Contact form 7』を静的サイトで使ってみたいと思います。

【目次】
その１）静的サイトとWordPressを共存させるための前準備
その２）お知らせページにWordPressの投稿記事を表示
その３）TOPページにWordPressの投稿記事を表示
その４）お問い合わせフォームをWordPressのContact form 7で作る

WordPressにContact form 7を準備する

まずはいつも通り、WordPressにContact form 7をインストールし、コンタクトフォーム画面を作成しましょう。
プラグインのインストール方法やフォームの作成方法はここでは省略したいと思います。（分からない方は、 "Contact form 7 使い方" などで検索してみてくださいね。たくさんの方が分かりやすくまとめて下さってます。）

コンタクトフォームが作成できたら、ショートコードをコピーしてメモなどに控えておきます。

お問い合わせフォームの静的ページを用意する

今回使用したソースは、お問い合わせページも用意されていなかったので、「お問い合わせページ」を新規作成します。

その２で「お知らせページ」を新規作成した時と同様に、sample.htmlをコピーしてcontact.htmlというファイル名に変更します。メインコンテンツの部分に Contact form 7 のフォームを表示するため、不要なコードは削除します。
また、「お問い合わせ」メニューのリンクはcontact.htmlに変更しておきましょう。

作成したcontact.htmlを開くと下記のような状態です。

なお、今回はトップを静的ページ（index.html）にしたいので、index.htmlをルートディレクトリ直下に戻します。また、ルートディレクトリ直下の.htaccessは下記のように記述しておきます。

Action myphp-script /php.cgi
AddHandler myphp-script .php .html

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /wp/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /wp/index.php [L]
</IfModule>

これでトップがindex.htmlに戻りました。

静的ページの先頭でwp-load.phpを読み込む

contact.htmlでPHPを実行可能とするために、お馴染みのコードを１行目に追記します。

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

Contact Form 7のショートコードを埋め込む

コンタクトフォームを表示したい箇所に、控えておいた Contact Form 7 のショートコードを埋め込みます。下記のように記述してください。

<?php echo do_shortcode( '作成した Contact Form 7 のショートコード' ); ?>

実際に入れるとこんな感じです。

これでお問い合わせページにContact Form 7が表示されるかと思います。実際に見てみましょう。

出てますね！では、早速お問い合わせしてみましょう。

フォームに上記のように入力して、いざ送信！
・・・待てど暮らせどメールが届きません。
メールが届かないのでは全く意味がありませんね。この問題を解決しましょう。

「wp_head」「wp_footer」を読み込む

メールが送れないのは Contact Form 7 のcssとjsが読み込めていないことが原因でした。contact.html内に「wp_head」「wp_footer」を追記することで必要なcssとjsを読み込みましょう。

・wp_head の追記
 head の閉じタグの直前に入れてください。

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

・wp_footer の追記
 body の閉じタグの直前に入れてください。

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

この状態で再度contact.htmlを見てみましょう。

デザインが崩れてしまいました。
wp_head で不要なcssも読み込んでいるため、このようになっています。この時は Twenty Twenty のテーマを使っており、Twenty Twentyのcssも読み込んでいたため、背景がベージュ色でボタンが赤色となってしまいました。

一つ一つcssを直していくのは大変なので、不要なcssは読み込まないようにしましょう。

wp_headの不要なコードを削除

まず、削除するcssを確認します。
Chromeのデベロッパーツールを開いてどのようなcssが読まれているか見てみます。
headタグ内にたくさん書かれていますが、今回消したいのは Twenty Twenty のcssなので、"Twenty Twenty"と書かれているcssだけ消せばOKです。
さがすと下記３つのcssがみつかりました。

<link rel="stylesheet" id="twentytwenty-style-css" href="http://test.kaori21.net/wp/wp-content/themes/twentytwenty/style.css?ver=1.0" media="all">
<style id="twentytwenty-style-inline-css">…</style>
<link rel="stylesheet" id="twentytwenty-print-style-css" href="http://test.kaori21.net/wp/wp-content/themes/twentytwenty/print.css?ver=1.0" media="print">

試しにデベロッパーツール上で上記cssを消してみましょう。
消したい行を選んだ状態でDelete elementをすると一時的にcssを消してくれます。消した後、デザイン崩れが直っているようであれば不要なcssと判断できるかと思います。

【補足】
3行目の「twentytwenty-print-style-css」は印刷時のcssになります。画面の印刷プレビューで確認するとcssの有無でデザインが変わることが確認できます。

不要なcssが特定できたら、実際に消す作業に入ります。
WordPressのfunction.phpに下記コードを追記します。
※function.phpを編集する時は必ずbackupを取ってください。失敗すると二度とWordPressが立ち上がらなくなる可能性もありますので…

function my_delete_plugin_files() {
　wp_dequeue_style('不要なcssのハンドル名');
}
add_action( 'wp_enqueue_scripts', 'my_delete_plugin_files' );

ハンドル名は、ID名から「-css」を除いたものになります。
今回の場合は以下のように記述しました。

function my_delete_plugin_files() {
　wp_dequeue_style('twentytwenty-style');
　wp_dequeue_style('twentytwenty-style-inline');
　wp_dequeue_style('twentytwenty-print-style');
}
add_action( 'wp_enqueue_scripts', 'my_delete_plugin_files' );

追記後、ファイルを更新したら完成です。

では、改めてcontact.htmlを開いて、フォームからお問い合わせしてみましょう。

デザイン崩れが直ってることを確認！

フォームに入力後、送信ボタンを押すと、前はうんともすんとも言わなかったのが、今回はサンキューメッセージが表示されました。

そしてメールの方は・・・

無事に届きました！これにてようやく完成です。
（届いてない人は迷惑メールフォルダも確認してみてください）

-------

今回はWordPressのちょこっとレシピということで、静的ページにWordPressを組み込む方法をお伝えしました。
Web制作をしていると意外と使う手法だと思うので、この記事が少しでもお役に立てれば幸いです。

今後もWordPressのちょこっとレシピを発信していきたいと思います。

-------------------------------

参考にさせていただいたサイト

【HTML・PHP】静的HTMLサイトにcontactform7を埋め込む方法

wp_headの不要なコードを削除する方法をまとめました

**

今日は以上です。

Twitterではブログに書いていないこともつぶやいているので、ぜひフォローしてください。
https://twitter.com/HAMA3san

ストリートアカデミーで毎月講座を開催中。
https://www.street-academy.com/steachers/198346

note専用コミュニティへの招待について

https://note.mu/hamasan918/n/ne4d98f9db9ec

note専用コミュニティ、作成しました。コミュニティでは質問などを受け付けています。毎月500円となります。