wordpress 4.7 になりテーマカスタマーザーがさらに便利になりました
テーマ作成者にとっては、対応しなければならないことも増え地味に大変です (^_^;)
WP4.7 で追加された機能は結構たくさんあり公式テーマの Twenty Seventeen をみると動画をヘッダーに表示出来たり、ソーシャルリンクでSVGアイコンが使われたり、カラー設定で彩度を指定出来たりと盛りだくさんです
その中でも、カスタマイザーでの操作性を向上する編集ショートカット機能がテーマを作る場合にはこれから外せない機能になりそうなので設定するためのポイントを紹介します
編集ショートカットとは、下記画像のペンのアイコンをクリックするとその設定項目が表示されてフォーカスが移動するという機能です
テーマカスタマイザー
WordPress テーマにテーマカスタマイザーを使用すれば、テーマにオプション設定やカラー設定を設けることが出来て、簡単にカスタマイズできるようになります
その為の基本的な設定方法は、以前ブログを書きましたので下記記事を参照してください
WordPress テーマカスタマイザーの使い方
セルティスラボ
編集ショートカットを設置してみる
まずは、WP4.7のテスト環境を作り自作の WordPress テーマでどうなるか確認してみましょう
作成しているテーマが WordPress 標準機能を使って作られていれば、何もしなくともメニューやカスタムロゴの横に編集ショートカットが表示されるかもしれません
まったく表示されないこともありますが、少しコードを追加するだけで表示されるようになると思います
取り合えず下記記事を読んでみて下さい
Visible Edit Shortcuts in the Customizer Preview
Make WordPress Coreカスタマイザー全体の情報としては下記も参考になります
Theme Options – The Customizer API | Theme Developer Handbook | WordPress Developer Resources
WordPress Developer Resources正直なところ、英語の情報ばかりでわかりにくく結構苦労します (^_^;)
編集ショートカット機能とは、選択項目のみを更新（Selective Refresh Partials）する為の Ajax による実装であり、それをラップして Ajax を意識させないようにしているものです
テーマで対応すべき項目としては大きく分けて3つに分かれます
- ウィジェット
- メニュー
- カスタムオプション
ウィジェットの編集ショートカット
ウィジェットで編集ショートカットをサポートするのは簡単です
テーマを作成しているなら function.php で既に様々な add_theme_support 関数による設定を行っていると思いますが、そこに下記のコードを追加するだけでOKです
// Indicate widget sidebars can use selective refresh in the Customizer.(WP4.7) add_theme_support( 'customize-selective-refresh-widgets' );
※ウィジェットによっては、コンストラクターで明示的に ‘customize_selective_refresh’ => true と指定しているものもありますが、このような指定がなくとも WP_Widgetから継承したウィジェットならこの設定により自動的に customize_selective_refresh が有効化されるようです
カスタマイザーのプレビューでウィジェット横にペンのアイコンが表示されたでしょうか
メニューの編集ショートカット
次はメニューです
何もしなくてもOKという場合もありますが、私の作成したテーマではダメでした (^_^;)
うまくいかない場合は、先ほど紹介した記事で、メニュー構築に wp_nav_menu 関数を使っているか、wp_nav_menu の引数で echo に false を指定していないか確認する旨の記述があります
確認してみると wp_nav_menu の引数で echo に false を指定してました。ちょっと理由があってそうしていたわけですが、関連するコードを若干修正して echo を true にしたら編集ショートカットが表示されました (^^)
カスタムオプションの編集ショートカット
カスタムオプションでは、ウィジェットやメニューのように暗黙的に有効になることはありません
ウィジェットやメニューでは暗黙の内に設定してくれていたものを明示的に設定する必要があります
例として、サイトタイトルとディスクリプションの表示です
$wp_customize->get_setting( 'blogname' )->transport = 'postMessage';
$wp_customize->get_setting( 'blogdescription' )->transport = 'postMessage';
if ( isset( $wp_customize->selective_refresh ) ) {
$wp_customize->selective_refresh->add_partial( 'blogname', array(
'selector' => '.site-title',
'container_inclusive' => false,
'render_callback' => function() { bloginfo( 'name' ); },
) );
$wp_customize->selective_refresh->add_partial( 'blogdescription', array(
'selector' => '.site-description',
'container_inclusive' => false,
'render_callback' => function() { bloginfo( 'description' ); },
) );
}
これは、紹介記事にあるように簡単に実装できました
重要なポイントは3点です
- selective_refresh->add_partial で対象となる要素IDやClassを selector に設定
- transport で postMessage を使う
- selective_refresh->add_partial で selector に指定した要素を書き換える関数を render_callback に設定
※処理の詳細は追いかけきれませんでした。主要なコードは class-wp-customize-partial.php, customize-control.js だと思うのですが推測を含めて言ってしまうと、編集ショートカット機能を実現するためにDOM構造を操作して特定の規則に合わせてマークアップする必要があり、php からの echo 出力を ob_start で補足してから加工して ob_get_clean で出力するために echo が使われる必要があったり、Ajaxを使うためにPOST通信や要素を特定するための id や class の与え方に一定の規則があるような感じがします
応用してみる
先ほど紹介したポイントを押さえれば、そのほかの設定にも同じように編集ショートカットをつけられますが意外に情報がなく試行錯誤しながらソーシャルアイコンに編集ショートカットをつけてみた例を紹介します
ページのフッターにソーシャルアイコンを表示しているのですが、そのうちの Twitter アイコンに編集ショートカットをつけてみました
ソーシャルアイコンはPHP側でこのような処理で表示しています
function celtis_s_sns_icons() {
global $celtis_s_theme_options;
$sites = array (
'twitter' => $celtis_s_theme_options['twitter_url'],
'facebook' => $celtis_s_theme_options['facebook_url'],
'googleplus' => $celtis_s_theme_options['googleplus_url'],
'rss' => get_bloginfo('atom_url'),
);
echo '<ul class="social-icons">';
foreach( $sites as $key => $value ) {
$url = esc_url($value);
if(!empty($url)){
echo '<li id="' . esc_attr( $key ) . '-icon"><a target="_blank" href="' . $url . '"></a></li>';
}
}
echo '</ul>';
}
ul リストを使い各SNS設定が行われていたら li 要素で出力しています
この処理は、元々はその都度 echo で出力していなくて一度ワーク変数に ul データ全体を構築してから出力していたのですが、echo でその都度出力しないとダメなようです。また、li 要素も class でなく id で判別できるようにする必要があるみたいです
※class と id の使い分けルールがあるのかないのかもよくわからないのでうまくいかない場合は id で指定させてみて下さい
この Twitter アイコン部に編集ショートカットをつけるコードか次のようになります
該当部分のみ抜粋
if ( isset( $wp_customize->selective_refresh ) ) {
$wp_customize->selective_refresh->add_partial( 'celtis_s_theme_options[twitter_url]', array(
'selector' => '.social-icons #twitter-icon',
'container_inclusive' => false,
'render_callback' => function() { return '<a target="_blank" href="' . esc_url($celtis_s_theme_options['twitter_url']) . '"></a>'; },
) );
}
//twitter
$wp_customize->add_setting('celtis_s_theme_options[twitter_url]', array( 'default' => $default['twitter_url'], 'type' => 'option', 'sanitize_callback' => 'esc_url_raw', 'transport' => 'postMessage' ));
$wp_customize->add_control( 'celtis_s_theme_options[twitter_url]', array(
'label' => __('Twitter URL', 'celtis_s'),
'section' => 'celtis_s_socials',
'settings' => 'celtis_s_theme_options[twitter_url]',
'type' => 'text'
));
selector で ‘.social-icons #twittew-icon’ で要素を特定して、その部分を Ajax により書き換える為の処理を render_callback に定義します
また、add_setting で忘れずに transport で postMessage を指定してください
これで同じように facebook や Google+ の処理も追加すれば各々編集ショートカットを表示することが出来ます
ただ、このやり方では編集ショートカットアイコンの塊が表示されてしまいます
メニューでは大元のメニューに編集ショートカットが表示され各項目ごとにペンのアイコンが表示されているわけではありません
出来れば同じようにしたい (・・?
でもメニュー構造とソーシャルアイコンでは構造が違っているしなんとかならないか
再び、メニュー処理のコードを追ってみようとしたが追いきれず、ふと、設定を設けていないRSSアイコンの表示を活用できるのではと閃きました
そうです。RSSアイコンの表示は get_bloginfo(”atom_url) を使って表示させているのでURLを設定する入力エリアを設けていないのですが、編集ショートカットを表示する為だけに入力の hidden エリアをダミーで定義すればいけるんじゃない
そうすれば、各SNSアイコンに編集ショートカットを設けなくても1つのダミーのショートカットで対象となるSNSアイコン表示設定が表示されるのでは
できました。アイコン別にフォーカスを設定することは出来ませんがこれで十分です (^^)/
こんな感じで最小限の設定のみ行えばOKでした
該当部分のみ抜粋
$wp_customize->selective_refresh->add_partial( 'blogatom_url', array(
'selector' => '.social-icons #rss-icon',
) );
$wp_customize->add_setting('blogatom_url', array( 'default' => '', 'type' => 'option', 'sanitize_callback' => '' ));
$wp_customize->add_control( 'blogatom_url', array(
'section' => 'celtis_s_socials',
'settings' => 'blogatom_url',
'type' => 'hidden'
));
結局、編集ショートカットを表示させるのに必要なのは selector 設定のみでOKみたいです
後は、ダミーの入力エリアなので、section にSNSアイコン設定のセクション名、type に ‘hidden’ をセットするだけです。Ajaxによる書き換えもないので render_callback や transport の postMessage 指定も不要です
WordPress 4.7で追加された テーマカスタマイザーの編集ショートカットの設定について簡単に紹介いたしました
