WordPress 4.7のCustomizer edit shortcutsはselective refreshが動く場所から確認する

WordPress 4.7のCustomizerでは、preview内に編集できる場所を示すedit shortcutsが表示されます。iconが見えることだけで対応を判断しません。shortcutは、設定と結び付いたselective refresh partialがある場所で使われます。shortcutを押す、設定を変える、previewが該当部分だけ更新する、保存後の公開画面を確認するところまで試します。

iconは、編集できる設定とpreviewの領域の関係を見せるものです。見た目を飾る印ではありません。shortcutが正しい設定へ移動しても、値を変えたあとに別の領域が更新されたり、previewが全体再読み込みで崩れたりするなら、設定とpartialの対応を確認します。

shortcutが表示されないことだけを不具合と決める必要もありません。色、余白、複数の領域へ同時に影響する設定は、画面上の一か所と結び付けにくいことがあります。そのような設定へiconを無理に置くと、編集する人はどこまで変わるのかを誤解します。shortcutを使う場所は、設定を替えたときにどの内容が変わるかを画面上で説明できる場所に絞ります。

逆に、titleやmenuのように一つの領域を替える設定でshortcutが見つからないときは、iconだけを追加して終わらせません。settingの値がthemeの出力へ渡っているか、partialのselectorが実際のHTMLに合っているか、render callbackが必要な内容を返しているかを順に確認します。表示するための設定と、previewを更新するための設定は、同じ名前に見えても別の確認が必要です。

icon、設定、partial、公開画面を別に確かめる

説明用の仮例として、site titleを独自HTMLで出すthemeを考えます。shortcutを押して設定画面へ移動できても、titleを変えたときにpreviewが更新されなければ、編集する人は保存後の見え方を判断しにくくなります。iconの配置、設定値の反映、公開画面の出力は別に確認します。

site titleや説明文のような独自optionでは、設定をpostMessageで扱い、対応するpartialを登録する必要があります。partialがない設定にはshortcutは出ません。色やレイアウトのように一つの場所へ対応しない設定へ、無理にiconを出す必要もありません。何を編集できるかを明示するための機能なので、画面上の領域と設定が一対一に対応する場所から確認します。

説明用の仮例で、headerにsite title、説明文、電話番号をまとめて出すthemeを考えます。site titleだけのpartialを作り、電話番号まで同じselectorへ含めると、titleを替えたときに関係のない領域まで更新されることがあります。反対にselectorが狭すぎれば、見出しの一部だけが残ります。shortcutを押した先のcontrolと、値を替えたときに更新されるHTMLの範囲を比べ、どの設定がどの領域を持つかを決めます。

previewで表示が変わっても、保存される値が正しいとは限りません。文字を入力してpreviewが更新されたあと、保存し、Customizerを閉じて公開pageを開きます。再びCustomizerを開いたときにも同じ値が入っているかを確認します。previewは編集中の見え方を確認する場所であり、公開された内容の確認を省く場所ではありません。

menuとwidgetは独自の呼び出し方を確認する

widgetはthemeがselective refreshを対応させていれば使えます。menuは通常のwp_nav_menu()を使う場合に対応しますが、custom nav menu walkerを使う、echoをfalseにする、別の方法でmenuを出すthemeでは追加の確認が必要です。標準機能があるからといって、独自の出力まで同じように更新されるとは限りません。

menuを確認するときは、表示する項目だけでなく、場所も分けて見ます。headerとfooterで同じmenuを出しているthemeなら、shortcutがどちらの設定へ導くか、項目を替えたときに両方のpreviewがどう変わるかを確認します。menu locationを別にしているなら、header用の操作がfooterへ反映されないことも確認します。menuの名前が同じでも、表示する場所と利用者が見ている画面は別です。

widgetも、previewの更新だけを確認して終わらせません。widgetに入れたlink、画像、短い文が、保存後の公開画面で読めるかを確かめます。テーマ独自のwrapperやCSSによって、Customizer内では見えても小さな画面で重なる場合があります。shortcutのiconが便利でも、本文のlinkや問い合わせbuttonを覆えば、公開画面では使いにくくなります。

最初は一つの設定だけで確認します。

1. site title、menu、widgetのうち一つを選ぶ。
2. preview内のshortcutを押し、意図した設定画面へ移動するか確認する。
3. 値を変え、該当部分だけがpreviewへ反映されるか確認する。
4. 保存後の公開画面で、同じ内容になっているか確認する。
5. iconが本文やbuttonへ重ならないかを、画面幅を替えて確認する。

最初の一手は、代表する一設定を選ぶことです。その設定のshortcut、partial、公開画面が対応してから、ほかの領域へ広げます。

確認を依頼する場合は、「shortcutを付ける」とだけ伝えません。対象のsetting、対応するpreviewの領域、変更したときに見たい動き、確認する画面幅を渡します。themeを直す人と、公開内容を確認する人が別なら、保存後にどのURLを開くかも決めます。iconの見た目を整える作業と、設定が利用者の意図どおり反映することを確認する作業は別です。