“WordPress” カテゴリの記事（49件）

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

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

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 で表示する” の続きを読む »

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

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

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

イベント等の開催日を Advanced Custom Fields (ACF) の日付選択フィールドで作成し、この開催日をを使って年月別のアーカイブページを作りたい。そして更に、その月別リストを年単位で開閉表示させたいと考えました。

通常の月別アーカイブの月別リストを年単位で開閉表示させる方法は、「WordPressの月別アーカイブを年単位で開閉させる *Ateitexe」に書かれていましたので、これを参考にさせていただきました。

一方、カスタムフィールドの日付から月別アーカイブを作成する方法は、「カスタムフィールドに入力した日付で月別絞り込み＆アーカイブページの整形 | oku-log」等で説明されていますが、今回は月別リストの開閉表示をしたかったので、オリジナルで実装してみることにしました。

“カスタムフィールドの日付フィールドで年毎に折りたたみ可能な月別リストとアーカイブページを作成” の続きを読む »