このページの本文へ

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

有限会社Willさんいん

“WordPress” カテゴリの記事(51件)

Welcart の受注データにURLパラメータを反映する

WordPress のネットショップ構築プラグイン Welcart を使用しているショッピングサイトで、複数の施設に置いたQRコードからサイトにアクセスしてもらい、そのまま注文いただいた際に、どの施設からのアクセスによる注文かがわかるように出来ないかという相談がありました。

とりあえず思いついた方法は2つ。

  1. QRコードのURLに施設ごとに固有のパラメータを埋め込む。→ しかし、どうやってそのパラメータと注文を紐つけるか?
  2. 注文画面で施設名または施設コードを選択してもらう。→ お客様に選択してもらう手間が発生するし、必ずしもQRコードからの注文ばかりではなく任意項目なので選択されない可能性もある。

というわけで、1. のパラメータを埋め込む方法で、パラメータの値をカート画面から注文画面まで引き継ぎ、受注データに反映させることができないか、方法を探ることにしました。

“Welcart の受注データにURLパラメータを反映する” の続きを読む »

先頭固定表示に期限を設定する(プラグイン非使用)

WordPress には先頭固定表示という機能があります。特定の記事を投稿一覧の先頭に固定表示する機能で、重要なお知らせ等を目立たせることができます。

便利な機能ですが、これを指定した日付で自動で解除するというような表示期限を設定する機能はありません。PublishPress Future というプラグインを使用すればこれを実現できますが、このプラグインは非公開や削除、カテゴリー変更といった投稿の様々なステータス変更をスケジューリングするもので機能が多く、今回は先頭固定表示に期限を設定したいだけなので、このプラグインは使用せず、ChatGPT とやりとりしながら、カスタムフィールドと PHP で実現することにしました。

“先頭固定表示に期限を設定する(プラグイン非使用)” の続きを読む »

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

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 をフォーム画面だけに表示する手軽な方法” の続きを読む »

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

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

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

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

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

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

Gutenberg の不要ブロックを非表示にする方法 … PHP と JavaScript の併用に落ち着く

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

WordPress のブロックエディタ Gutenberg の不要なブロックを非表示にする方法として以下のような手段がありますが、いろいろ試して PHP と JavaScript の併用して制御する方法に落ち着きました(半分妥協)。

  • 「設定」の「表示ブロック」で制御する
  • プラグイン「Disable Gutenberg Blocks – Block Manager」を使う
  • PHP で制御する(ホワイトリスト形式)
  • JavaScript で制御する(ホワイトリスト形式/ブラックリスト形式)

まず、「設定」の「表示ブロック」で制御する方法は、ユーザー毎に設定しなければならないこと、設定を知っている人なら誰でも変更できるので使おうと思えば使えてしまうことから却下。

プラグインを使う方法は、埋め込み系のブロックを個別に非表示にすることができないのと、多数のサイトを管理している場合に WordPress のアップデートでブロックが追加されるなどしたとき、それぞれのサイトにログインしてプラグインの設定画面を開いてを再設定するのが面倒。(PHP や JavaScript を編集するのも面倒ですが、コピペできるのでプラグインより多少は楽かと。)

PHP で制御する方法も埋め込み系のブロックを個別に非表示にすることができず、唯一、埋め込み系のブロックを個別に非表示にできて、不要なブロックを指定するブラックリスト形式にもできる JavaScript で制御する方法に決定!と思ったのですが…。

“Gutenberg の不要ブロックを非表示にする方法 … PHP と JavaScript の併用に落ち着く” の続きを読む »

Gutenberg で説明リストを使うためのプラグインを WP-Yomigana から Simple Definition LIst Blocks に変更

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

WordPress のブロックエディタ Guteberg で説明リスト(dl, dt, dd)を使用するために、以前から WP-Yomigana プラグインを利用していましたが、このプラグインで dt や dd タグを追加するための操作が不可解になってきたので、Simple Definition List Blocks プラグインに入れ替えました。

元々 WP-Yomigana は、ブロックエディタが登場するずっと前から TinyMCE のプラグインとして利用していたもので、本来は ruby タグを挿入するボタンを追加することが目的のプラグインですが、付随機能として注釈(small)、引用(q)、引用元(cite)、そして定義リスト※1(dl, dt, dd)を入力するボタンも追加できるようになっており、この定義リストの機能のみを使っていたのでした。

“Gutenberg で説明リストを使うためのプラグインを WP-Yomigana から Simple Definition LIst Blocks に変更” の続きを読む »

PublishPress Future プラグインのアップデートによるバグと日本語化ファイル

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

PublishPress Future」は WordPress の記事に有効期限を設定して自動で非公開にしたり、カテゴリーを変更したりすることができるプラグインで、いくつかのサイトで利用しています。

元は「Post Expirator」という名前のプラグインでしたが、2021年12月に ver 2.7.0 へのアップデートに合わせて開発者が変更となり、名前も「PublishPress Future」に変更されました。

その後も何度かアップデートを重ね、2023年6月に ver 3.0.0 となったのですが、この時にいくつかの問題が発生しました。

ちなみに、私は WordPress 本体やプラグインをアップデートする際は、まずローカルサーバのテストサイトでアップデートしてみて、動作等問題がないかを確認してから運用中のサイトにアップデートを行なっています。なので、自動更新の設定は有効にしていません。

私がテストサイトで確認した問題は以下の4つです。

“PublishPress Future プラグインのアップデートによるバグと日本語化ファイル” の続きを読む »

1 2 3 6