このページの本文へ

フロントエンドエンジニアのblog

有限会社Willさんいん

2025年の記事(6件)

TransmitMail でパスワード保護付きのメールフォームを作る

PHP で動作する汎用メールフォーム TransmitMail で、WordPress の機能にあるようなパスワード保護(パスワードを知ってる人だけが本文を閲覧可能)を設定して、パスワードを入れないとフォームが表示されない仕組みを作ってみました。

JavaScript で実装することもできますが、ブラウザのソースを見たらフォーム部分がわかりますし、デベロッパーツールでソースを編集してフォームを表示することもできてしまいます。

一方、TransmitMail は PHP で動作しますので、PHP で実装することにしました。PHP を使えばブラウザのソースには現れません。

“TransmitMail でパスワード保護付きのメールフォームを作る” の続きを読む »

Contact Form 7 でエラー時にフォームの先頭にスクロールするカスタマイズで、フォーカスも移動させる

WordPress のメールフォームプラグイン Contact From 7。デフォルトでは、送信ボタンを押下した時のエラーメッセージや送信完了などのメッセージはフォームの下に表示されます。

この応答メッセージをフォームの上に表示して、エラーがある場合にフォームの先頭にスクロールさせるというカスタマイズがあります。よく紹介されているのが次のようなものです。

まずフォームのソースで応答メッセージを表示するショーコード [response] をフォームの先頭に入れます。

[response]
(フォーム要素)
[submit "送信する"]

そして、バリデーションエラー時に発火するイベント wpcf7invalid を使ってエラーメッセージの要素 '.wpcf7-response-output' へスクロールさせます。

document.addEventListener('wpcf7invalid', function(event) {
	var position = $('.wpcf7-response-output').offset().top;
	$('html, body').animate({
		scrollTop: position
	}, 300);
}, false );

確かにこれで送信ボタン押下時にエラーがあると、フォームの先頭に表示したエラーメッセージにスクロールするのですが、このままではフォーカス移動の問題があります。

“Contact Form 7 でエラー時にフォームの先頭にスクロールするカスタマイズで、フォーカスも移動させる” の続きを読む »

マルチサイトの統合とページネーション

WordPress のマルチサイトで、複数のサイトの投稿を取得して一覧として表示したい場合があります。
このWillさんいんのサイトも然りで、10年前に WP Over Network というプラグインを使って実現したのですが、このプラグイン、既に12年もの間更新されていないのですね。
現在サイトのリニューアルを進めていますが、さすがにもうこのプラグインは使えないので、プラグインを使わないで実装することにしました。

今は ChatGPT というとても便利なツールがありますので、投稿をまとめて表示することは簡単に実装できたのですが、ページネーションでつまづきました。

“マルチサイトの統合とページネーション” の続きを読む »

MAMP のバーチャルホストの WordPress を iPhone で表示する

Mac の MAMP(Pro ではない)に設定している複数のバーチャルホストで開発している WordPress のサイトを他のデバイスで表示したい場合、同じネットワークにある Windows であれば Mac 側の Wi-Fi の IP アドレスを確認して、Windows の hosts ファイルに 192.168.1.23 local.example.com のように書けば Mac と同じく http://local.example.com/ で閲覧できます。
一方、iPhone や iPad で確認しようとする場合、iOS では hosts ファイルを書き換えることができません(“脱獄”すればできるのかもしれませんが)。

一つの方法として、Xcode に含まれている「Simulator」アプリを利用することで代用することができます。Simulator を使うメリットとしては、特に設定することなく母艦の Mac と同じ URL でアクセスすることができることと、様々な大きさのデバイスと iOS バージョンで試すことができる点ですが、デメリットは何と言っても画面の操作がおぼつかないことです。少なくとも macOS Sequoia 15 で搭載された「iPhoneミラーリング」アプリのような操作感であればよいのですが、Simulator は画面スクロールさえもぎこちないです。

で、なんとか実機の iPhone で表示させることができないか調べたところ、Web Design Leaves さんの記事「MAMP のローカルサイト(WordPress など)を iPhone などで表示」と Kureai.info さんの記事「MAMPローカル環境WordPressをiPhone他のデバイスで確認する」の2つの方法が見つかりました。
これらを参考に試してみて、私なりに確率できた方法を記録しておきます。

“MAMP のバーチャルホストの WordPress を iPhone で表示する” の続きを読む »

MAMP 6 から MAMP 7 へのアップデートでハマった

これまで MAMP 6.9 を使用していましたが、7月頃から PHP のバージョンが 7.4.33 の場合、WordPress のダッシュボードに「PHP の更新を推奨」という警告メッセージが表示されるようになりました。WordPress 6.8 の推奨の PHP バージョンが 8.3 以上になったためです。
MAMP 6.9 では PHP 8.2 までしか選べない(8.1 以上に設定するとダッシュボードには警告は出ないが、サイトヘルスには「おすすめの改善」として表示される)ので、最新の MAMP 7.2 にアップデートすることにしました。

実は、MAMP 7 は1年以上前にリリースされていて一度アップデートを試みたことがあるのですが、Apache が起動できず、MAMP が使えないと業務に差し支えるので元に戻したのでした。
今回少し余裕ができたので、一つ一つ手順を追ってアップデートしましたが、MAMP 7 はいろいろと初期設定が変わってるようで、MAMP 6 系のアップデート(MAMP のアップデートと再設定(Dropbox 共有、バーチャルホスト、etc.)のようにすんなりとはいきませんでした。

“MAMP 6 から MAMP 7 へのアップデートでハマった” の続きを読む »

Contact From 7 で Google reCAPTCHA をフォーム画面だけに表示する手軽な方法

この記事は2025年1月10日に書かれたものです。情報が古い可能性がありますのでご注意ください。

メールフォームのスパム対策として、最近は Google reCAPTCHA を導入することがあります。制限はありますが(2024年4月1日に月100万回から1万回と大幅に縮小された)、無料で利用できるので。

WordPress のメジャーなメールフォームプラグイン Contact Form 7 では、標準で Google reCAPTCHA を連携できるようになっています。Contact Form 7 のサブメニュー「インテグレーション」から「reCAPTCHA (v3)」の「インテグレーションのセットアップ」で、取得したサイトキーとシークレットキーを入力するだけでよいのですが、ここで設定するとサイト全体に reCAPTCHA バッジが表示されてしまいます。

“Contact From 7 で Google reCAPTCHA をフォーム画面だけに表示する手軽な方法” の続きを読む »