WordPressのSelective Refreshはpreviewだけで決めず保存後のheaderを確認する

Customizerでsite titleやtaglineを変えるとき、previewの一部だけを更新して確認できる仕組みがあります。Selective Refreshです。ただし、previewに表示されたことだけでheaderの変更を完了にしません。保存後の公開page、mobile表示、logoとの関係を確認します。

WordPress 4.5 Beta 2の公式案内は、core themeのtitleとtaglineでSelective Refresh supportが有効になり、shift-clickでcontrolへfocusできることを説明しています。同版は開発中のsoftwareであり、本番siteではなくtest siteで試すよう案内されています。

Selective Refreshが便利なのは、Customizerのpreviewで、変えた項目と表示される場所を行き来しやすい点です。しかし、previewで一部が変わることと、保存後にすべての公開pageで同じ表示になることは別です。headerはthemeのtemplate、menu、logo、site title、pageごとの条件が重なりやすい場所です。変更した文字がpreviewで見えたとしても、記事pageだけに古いtitleが残る、mobileでlogoと重なるという問題は別に確認します。

shift-clickでcontrolへ移れることも、設定を探すための助けです。設定項目へすぐ戻れるからといって、どの設定が表示を決めているかは自動で分かりません。themeがsite titleをどこへ出しているか、logo画像を使う場合にtitleを隠すか、header以外のtitle表示があるかを確認します。操作が早くなっても、設定とtemplateの役割まで一つにはなりません。

previewで見えることと公開pageで確かめることを分ける

themeがsite titleをlogo画像の代わりに表示する場合と、logoの補助として表示する場合では、確認する場所が違います。themeのtemplateにtitleが二つ出るなら、Customizerの設定だけを直しても解決しません。

headerに同じsite titleが二度出る場合、文字を空にして隠す判断を急ぎません。どちらがWordPressの設定から出ている文字か、どちらがthemeに固定されている文字かを先に調べます。固定された文字を残したまま設定だけを変えると、画面によってsite名が違う状態になることがあります。表示を一つにしたいなら、設定を変える場所とtemplateを直す場所を分けて決めます。

taglineも、画面に出ていればよいわけではありません。長いtaglineがmobileで二行、三行になれば、menu buttonや本文の入口を下へ押し出すことがあります。site titleとtaglineを同時に変えると、どちらが重なりの原因か分かりません。文字数が異なる案を確認するときも、一項目ずつ保存し、行が増えたときのheaderの高さを見ます。

headerの変更は一つずつ保存する

headerにはlogo、site title、tagline、menu、検索窓などが集まります。複数の項目を同時に変えると、崩れた理由を追えません。変更する項目を一つへ絞り、保存後に同じpageを開きます。

保存後の確認では、ログイン中の画面だけを見ない方が安全です。管理者用のbarが出ている画面と、読者が開く画面ではheaderの高さやmenuの位置が違うことがあります。公開URLを別のwindowで開き、logo、site title、tagline、menuが意図した順で見えるかを確認します。cacheがあるsiteなら、保存直後の表示が古い状態でないかも見ます。

headerは全pageへ出るため、smallな変更でも影響範囲が広くなります。トップpageではよく見えても、記事pageだけに異なるheader templateが使われていることがあります。固定page、一覧page、404 pageのように、templateが変わるpageを代表として選びます。すべてのURLを開くより、headerの構造が違うpageを一件ずつ見る方が、確認する理由を説明できます。

1. test siteでCustomizerを開く。
2. site titleかtaglineのどちらか一つだけを変更する。
3. previewでheaderの表示位置を確認する。
4. 保存後にトップ、記事、固定pageを開く。
5. mobile幅でもmenuを開き、titleやlogoが操作を妨げないかを見る。

headerの変更を外部へ頼む場合は、WordPressの設定だけでなく、themeのtemplateを誰が直すかを分けます。管理画面で変えられる文字と、themeへ書かれた表示は同じではありません。

依頼の前に、変更したいものを「logo画像」「site title」「tagline」「menu名」「templateに固定された文字」へ分けます。これを分けずに「headerを直す」と伝えると、管理画面の設定だけが変わり、themeに残った文字やmobileのlayoutが直らないことがあります。作業が終わったら、どの設定を変え、どのfileを直し、どのURLで確認したかを受け取ります。

部分更新をheader全体の保証にしない

Selective Refreshはpreviewの一部を更新するための仕組みです。logo画像、menu、custom CSS、別のtemplateまで正しく反映されることを代わりに確認してくれるものではありません。headerの目的は、site名を見せるだけでなく、利用者がmenuや本文へ進める状態を保つことです。

mobileでheaderを確認するときは、menuを開いた後も見ます。閉じた状態でlogoとtitleが収まっていても、menuを開くとtitleが隠れる、linkが下へ押し出される、閉じる操作が押せないという問題があります。headerを変更したら、topから本文を読む、menuを開く、別pageへ移動する、戻るという流れを通します。表示が正しくても操作を止めるheaderは、公開できる状態とは言えません。

最初の一手は、headerに表示される要素を紙へ書き、WordPressの設定で変わるものとthemeのtemplateで決まるものを分けることです。そのうえで一つずつ保存して確認します。