WordPress ContactForm7 select の先頭の空白 option のテキストを変更したい

6億年ぶりに WordPress 案件をやっています。
Contact Form 7 の select をカスタマイズするメモ。

include_blank で追加される空の項目のテキストを変更したい

Contact Form 7 でフォームを作る際に 空の項目をドロップダウンメニューの先頭に追加する。 (include_blank) オプションを選ぶと先頭に <option value="">---</option> が追加されます。この HTML は固定値でショートコードからテキストを変更することができそうにありません。

wpcf7_form_elements filter を使って Contact Form 7 が出力する DOM をカスタマイズできる

functions.php に wpcf7_form_elements というフィルターを追加します

<?php // functions.php
function my_wpcf7_form_elements($html) {
  $text = '選択してください';
  $html = str_replace('<option value="">---</option>', '<option class="placeholder" value="" disabled selected>' . $text . '</option>', $html);
  return $html;
}

add_filter('wpcf7_form_elements', 'my_wpcf7_form_elements');

wpcf7_form_elements フィルターに渡される引数はまるっと フォームパーツの DOM が入っているので、変更したい箇所を力技で replace しています。 変更後の option に disabled と selected 属性を追加することで最初だけ選ばれているけど変更すると選べなくなるので placeholder 的な挙動にすることができます。

デフォルト状態 👇 選択後

いいかんじになりました！
おわり₍ ᐢ. ̫ .ᐢ ₎

---

[参考]

• css - How to change the style of a <select> after an option has been selected? - Stack Overflow
• コピペでOK！CSS セレクトボックス（select option）のカスタマイズ方法

最後に Contact Form 関係の記事書いたの5年前じゃん…

WordPress「Contact Form 7」基本ガイド

「selector infected WIXOSS」BD-BOX<初回仕様版> [Blu-ray]

selector WIXOSS 救いがなくてとても好き…

WordPress SSL 化のメモ

化石のような WordPress サイトのアップデート案件があり付随して SSL 化されてなかったので SSL 化したのでログとしてのメモ。

1. テーマ内にハードコーディングされている URI を修正する

OGP設定や CDN などテーマ内にハードコーディングされている http から始まる URI があれば https 始まりに修正する。サイト内で参照しているパスであれば / 始まりに変更しておく方が今後の取り回しが楽になりそう。

2. 管理画面で http な URI が入力されている箇所を修正する

2-1. 一般設定 WordPress のアドレス・サイトアドレスを修正

WordPress アドレス と サイトアドレス を https から始まる URI に変更して保存

2-2. [Optional] メディアのアップロード先を変更している場合はフルパスを修正する

ファイルアップロード > ファイルへの完全な URL パス を https から始まる URI に変更して保存

3. 投稿などに含まれる URI の置き換え

投稿など Database に保存されているコンテンツ内に http から始まるものがあれば https に置き換える。 全てのコンテンツを目視で確認するのは大変なので search-regex というプラグインを使うのが楽。

4. http から始まる URI でアクセスされた場合に https にリダイレクトさせる

SSL 化前の http から始まるアドレスでアクセスされた場合に https に自動的にリダイレクトするようにする。
WordPress を設置しているサイトの root の .htaccess に下記を追加する

.htaccess

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>

⚠ リダイレクトの設定は WordPress のルールより先に書かないと上手く動作しない

https にリダイレクトするルールは WordPress が出力するルールより先に記述されていないと https にリダイレクトされないので注意が必要

.htaccess

# WordPress のルールより先に https へのリダイレクト設定のルールを書く
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>

# BEGIN WordPress
<IfModule mod_rewrite.c>
...

WordPress は構造上アクセスを root の index.php に送って Routing しているので、先に WordPress の index.php へのリダイレクトルールがあると https へのリダイレクトが上手く動作せず、先に https へのリダイレクトルールが有る場合は先に https にリダイレクトさせた URI を index.php に渡して WordPress のルーティングさせるので上手く動作する。という認識です。(正確ではないかもです)

これで SSL 化されてない WordPress の SSL 化対応を行なうことができました。
テーマ内の JS や CSS など発見が難しい所にハードコーディングされた URI があると結構ハマりどころなので、極力 / 始まりの URL を使ったり WordPress の設定から URI が生成できる hooks ・メソッドを使っておくのが良さそうだと思いました。

更新やメンテナンスをせずに何年もたったサイトを一気にアップデートするのはメンテせずに築年数のたった家を一気にリフォームするようなもので工数・金額もかかってしまいますから、サイト管理者の方はホントランニングコストかけてでも定期的にメンテした方が良いと思います… (本当にお願いします…)

おわり

---

[参考]

• WordPressの常時SSL化では、.htaccessの順序に注意！ | Cherry Pie Web
• 301リダイレクトとは？必要な理由や設定方法、注意点など徹底解説！｜SEOラボ
• WordPressサイトをhttpからhttpsにSSL化する方法【対応手順を丁寧に説明】 | creive(クリーブ)
• Search Regex – WordPress プラグイン | WordPress.org 日本語
• URIとは？「URL」と「URI」の違いを解説！｜ferret

1冊ですべて身につくWordPress入門講座

魔法のリノベ ： 1 (ジュールコミックス)

Docker WordPress コンテナから MySQL コマンドが使いたい

三畳紀ぶりに WordPress の案件があって触ってます。
20世紀みたいに PHP 環境を local に作るのつらすぎるので docker を使ってい環境構築していたのですが、WordPress のコンテナから mysql コマンドが使えなかったので使えるようにしたメモ

Docker WordPress 環境構築

公式のチュートリアルにある構成を利用する

docker-compose.yml

version: '3'
services:
   mysql:
     image: mysql:5.7
     volumes:
       - ./docker/mysql/data:/var/lib/mysql
     restart: always
     environment:
       MYSQL_ROOT_PASSWORD: ${DB_ROOT_PASSWORD}
       MYSQL_DATABASE: ${DB_DATABASE}
       MYSQL_USER: ${DB_USER}
       MYSQL_PASSWORD: ${DB_PASSWORD}

   wordpress:
     depends_on:
       - mysql
     image: wordpress:latest
     ports:
       - "8000:80"
     restart: always
     volumes:
      - ./app/public:/var/www/html
     environment:
       WORDPRESS_DB_HOST: mysql:3306
       WORDPRESS_DB_USER: ${DB_USER}
       WORDPRESS_DB_PASSWORD: ${DB_PASSWORD}

cf. クィックスタート: Compose と WordPress — Docker-docs-ja 20.10 ドキュメント

配布されている wordpress イメージには mysql コマンドが含まれてないっぽくコンテナ内から接続を試みても command not fount: mysql になってしまう

$ docker compose up -d
$ docker compose exec wordpress mysql -h mysql -u root -p
command not found: mysql

mysql-client をコンテナにインストールすればOK

depends_on で database のコンテナとは接続できているので、単純に mysql コマンドが使えるようにすれば良いっぽい
wordpress コンテナに mysql-client をインストールするように変更する

docker-compose.yml

   wordpress:
     depends_on:
       - mysql
-    image: wordpress:latest
+    build:
+      context: "./docker/wordpress"
+      dockerfile: "Dockerfile"
     ports:
       - "8000:80"
     restart: always
     volumes:
      - ./app/public:/var/www/html
     environment:
       WORDPRESS_DB_HOST: mysql:3306
       WORDPRESS_DB_USER: ${DB_USER}
       WORDPRESS_DB_PASSWORD: ${DB_PASSWORD}

./docker/wordpress/Dockerfile

FROM wordpress:latest
# Install MySQL client
RUN apt-get update && apt-get install -y sudo less default-mysql-client

cf. installing mysql client on docker php - Super User

⚠

• mysql-client だとインストールできなかった。どうやら default-mysql-client が正しいっぽい。 mariadb-client にすればインストールできるという記事もあったが MySQL を使っているので default-mysql-client をインストールするようにした
• apt-get ではなく apt を使うべきという記事も見かけたが wordpress のコンテナでは apt コマンドが使えなかったのと、apt から apt-get が推奨に戻っているっぽかったので apt-get を使用した。(この辺りは知識不足です)

動作確認

Docker コンテナを再ビルドして wordpress コンテナから mysql コマンドでデータベースに接続できれば OK

$ docker compose build
$ docker compose up -d
$ docker compose exec wordpress mysql -h mysql -u root -p
Enter password: $DB_ROOT_PASSWORD
MySQL [(none)]> 

₍ ᐢ. ̫ .ᐢ ₎ できた！
Docker 便利なのですがインフラとか環境構築系の知識が付け焼き刃なのでいつもハマってしまいます… 1年ほどコード書いてなかった期間もあったのでことごとく忘れてるし… ちからが欲しい…

---

[参考]

• クィックスタート: Compose と WordPress — Docker-docs-ja 20.10 ドキュメント
• installing mysql client on docker php - Super User
• can not install mysql-client with in docker container - Stack Overflow
  • 「E: Package 'mysql-client' has no installation candidate」のエラー解決方法
• Dockerfile に apt, apt-get, source コマンドを書く時のTips | cloud.config Tech Blog

たった1日で基本が身に付く! Docker/Kubernetes超入門

WordPress 本格Webサイト構築パーフェクトマスター [第2版] (Perfect Master 185)

りぶはあと 抱き枕 プレミアムねむねむアニマルズ クジラのカナロア Lサイズ(全長約61cm) ふわふわ もちもち 48768-63