WordPress functions.php

画像を 1 つ差し替えるだけのつもりだった

このブログで、テーマのページビルダーで作った固定ページの画像を差し替えていたときのことです。直したいのは画像 1 つだけだったので、編集画面の HTML を取ってきて、その中のフォームの値をそのまま送り、画像の欄だけを変えて保存しました。

ところが、保存したあとに公開ページを開くと、部品がほとんど消えて、本文がなくなっていました。フォームの値は全部そろえて送ったつもりでしたが、ページビルダーの保存には、それだけでは足りないものがあったのです。

部品の並びは、編集画面のスクリプトが作る

テーマのページビルダーは、行・セル・部品の組み合わせでページを作ります。保存のときには、部品ごとの中身のほかに、「どのセルに、どの部品が、どの順で入っているか」を表す欄も一緒に送ります。この並びの欄は、編集画面で動くスクリプトが、画面の上の部品の並びを読み取って作り直しています。

今回はブラウザで編集画面を開かず、取ってきた HTML のフォームをそのまま送ったので、スクリプトが動かず、並びの欄が空のまま保存されました。部品の中身は送られていても、どのセルに入るかが分からないので、公開ページには出てこなくなったというわけです。

リビジョンからは戻せなかった

WordPress には、保存のたびに前の内容を残すリビジョンの機能があります。ただ、リビジョンに残るのはタイトルや本文などの投稿そのものの欄で、カスタムフィールド（投稿のメタ）は残りません。ページビルダーの中身は投稿のメタに入っているので、リビジョンを開いても前の部品は入っておらず、ここからは戻せませんでした。

戻し方

手元には、本番から複製した作業環境があり、その DB に同じページの前の中身が残っていました。そこで、作業環境の DB からそのページのページビルダーの中身を取り出し、それを元に、部品の中身と並びの欄を全部入力して保存し直し、元のページに戻しました。

部品が消えるときは、php.ini の max_input_vars（1 回の送信で受け取る入力の数の上限）をこえて、後ろの入力が捨てられていることもあります。そこで、こちらもあわせて見直し、本番の値（10000）が今回の原因ではないことも確認しました。

そのあとのやり方

この件のあと、ページビルダーの記事を直すときは、次の手順にしました。

1. 戻せる元があるかを先に確認する

直す前に、作業環境の DB にその記事の中身が残っているかを確認します。リビジョンからは戻せないので、戻せる元がないまま直さないようにしています。

2. ブラウザで編集画面を開いて、更新を 1 回押す

ページビルダーの記事は、プログラムからフォームを送って保存しません。ブラウザで編集画面を開き、直したい欄を書き換えて、「更新」を 1 回だけ押します。保存の途中でもう一度押さないように、押したら保存が終わるまで待ちます。

3. 保存の前と後で、部品の数と画像の数を比べる

直す前に公開ページを開いて、部品の数と画像の数をメモしておきます。保存したあとに同じページで数え直し、数が変わっていないか（減っていないか）を比べます。数えるのは、ブラウザの開発者ツールのコンソールで次のコードを動かすだけです。

(() => {
    const rows = document.querySelectorAll('.tcd-pb-row').length;
    const widgets = document.querySelectorAll('.tcd-pb-widget').length;
    const images = document.querySelectorAll('.tcd-pb-row img').length;
    console.log('rows:', rows, 'widgets:', widgets, 'images:', images);
})();

このクラスの名前は、使っているテーマで出している HTML に合わせます。今回のテーマでは、作業環境の公開ページの HTML で、行に tcd-pb-row、部品に tcd-pb-widget のクラスが付いていることを確認しました（あるページでは、行が 2、部品が 9 でした）。テーマによってクラスの名前が違うことがあるので、開発者ツールで部品の HTML を見てから使ってください。

気をつけること

• ページビルダーやカスタムフィールドの中身は、リビジョンに残りません。直す前に、DB のバックアップや本番から複製した作業環境など、戻せる元があるかを確認しておきます
• 編集画面のスクリプトが値を作ってから送るフォームは、プログラムから同じ値を送っても、同じようには保存されません。ページビルダーに限らず、管理画面で保存するものはブラウザで操作するのが安全です
• 部品が多い記事で、作業環境だけ保存がおかしいときは、php.ini の max_input_vars が本番より小さくないかも確認します

まとめ

• テーマのページビルダーは、セルごとの部品の並びを編集画面のスクリプトが作るので、フォームをプログラムから送ると部品が消えることがある
• ページビルダーの中身は投稿のメタに入るので、リビジョンからは戻せない。本番から複製した作業環境の DB の中身を元に戻した
• 直すときは、戻せる元を確認してから、ブラウザの編集画面で「更新」を 1 回押す
• 保存の前と後で、公開ページの部品の数と画像の数をコンソールで数えて比べる

参考

• Revisions（wordpress.org）
• wp_save_post_revision()（developer.wordpress.org）
• 実行時設定 max_input_vars（php.net）
• Document.querySelectorAll()（MDN）