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

WordPress のブロックエディタで PDF ファイルを挿入する場合、ファイルブロックを使用しますが、デフォルトで object 要素によるインライン埋め込み表示となり、さらにテキストリンクの横にダウンロードボタンまでもが表示されます。インライン埋め込み表示はピクセルで高さを指定できますが、そのままではスマホ表示で見にくいので別途レスポンシブ対応させる必要がありますし、テキストリンクがあるのでダウンロードボタンも不要です。

一般的にただのテキストリンクにしたい場合が多いと思うのですが、PDF を挿入するたびにいちいちブロックの設定を変更するのも面倒ですし、案件によっては PDF のサムネイル画像を表示して PDF ファイルにリンクさせたい場合もあります。

そこで、ファイルブロックのデフォルト設定の変更と、リンク付きのサムネイルを挿入する独自ブロックを作成してみました。サムネイルは、PDF をメディアファイルにアップロードした際に WordPress で自動で生成される1ページ目のサムネイルを利用します。ついでに、PDF のサムネイルをアイキャッチ画像に設定できるようにしました。

“ブロックエディタでの PDF の挿入－ファイルブロックのデフォルト設定とサムネイルの利用” の続きを読む »

WordPress のメールフォームプラグイン Contact Form 7 では、送信完了メッセージが画面遷移なしで同一ページに表示されるのが標準の仕様です。簡単な送信完了メッセージの場合はそのままで構わないのですが、案件によっては送信完了ページ表示させるカスタマイズを加えることがよくあります。

多くのブログ等で紹介されているように、固定ページで送信完了ページを作成し、送信ボタンを押した際にこれに遷移させるというものですが、そのままでは送信完了ページに直アクセスで表示することができてしまいます。

例えば、アンケートフォームに回答を送信してもらったら、送信完了ページで資料をダウンロードできるというような用途の場合、送信完了ページへの直アクセスはできないようにしておく必要がありますし、サイト内検索や Google 検索等からもヒットしないようにしておく必要があります。そのような用途でなくても、直アクセスは避けたいものです。

“Contact From 7 で送信完了ページを作成した場合のアクセス制限” の続きを読む »

汎用メールフォーム TransmitMail で、サイトやフォームのタイトル等の固定テキストを、フォームのテンプレートとかメールのタイトルや本文など、随所に使用することがあります。

実際にとあるフォームを元にして似たようなタイトルの新たなフォームを作成した際、あちらこちらに修正漏れがありました。（歳かな？）

そこで、ChatGPT に相談しながら設定ファイルに独自変数を追加してテンプレート内で使えるようにしてみました。

“TransmitMail で独自変数を追加する” の続きを読む »

WordPress の多言語化プラグイン Bogo の言語スイッチャーですが、言語コードのアルファベット順に表示されます。例えば、日本語、英語、中国語、ポルトガル語、タガログ語の5言語の場合、次のような順序になります。

1. 英語（en_US）
2. 日本語（ja）
3. ポルトガル語（pt_BR）
4. タガログ語（tl）
5. 中国語（zh_CN）

これを任意の順序で表示させたい場合、よく紹介されているのは CSS の order プロパティで順序を指定する方法ですが、これでは HTML 上の順序は変わらないため、スクリーンリーダー等では HTML の順序のまま読み上げてしまい、視覚的な表示順序と一致しなくなります。

そこで、CSS を使用せず、PHP によって HTML 上の出力順序そのものを変更する方法です。よくある国旗を非表示にする方法と合わせて紹介します。

“Bogo の言語スイッチャーの並び順（アクセシビリティ対応）” の続きを読む »

5月20日に WordPress 7.0 がリリースされました。WordPress 7.0 では、AIと連携できる「コネクタ」が導入されたほか、ブロックエディタではブロック単位で追加CSSを設定できたり、ブロックをビューポートに応じて非表示にできたり、他にもいくつかの機能が追加されています。

更新後に一目で変わったとわかるのは管理画面のUIで、ボタンやリンクの配色が鮮やかになりました。さらに、ボタン等の余白が大きくなり、画面遷移の動作がスムーズになっています。

この鮮やかな配色が馴染まない場合はプローフィール設定で従来の配色に戻すことができます。
一方で、クラシックエディタの「公開」メタボックスの投稿日編集フィールド等、一部の表示が崩れていて調整が必要になりました。

※現在クラシックエディタは使用しない方向ですが、カスタム投稿タイプで本文欄を非表示とした場合に各メタボックスが強制的にクラシックエディタのUIになりますので、案件によってはブロックエディタとクラシックエディタが混在することがあります。

“WordPress 7.0 の管理画面UIの調整” の続きを読む »

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

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

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

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

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

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

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

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

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

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

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

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

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

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