WordPressでテンプレートもプレビューを見ながら編集しよう

「トップの文言ちょっとだけ変えたいんだけど・・・」
テンプレートで直書きだから面倒！入れ込み担当にサクッとやってもらえたら・・・
でも設定項目にいちいち各項目を作るのはちょっと・・・
そんなときに簡単に変えられるようにWP_Customize_Managerを使ってプレビューを見ながら編集できるようにしましょう！

WordPressではトップなどテンプレートに組み込んである箇所を外観->カスタマイズからプレビューを見ながら編集することができます。
その実装はWP_Customize_Manager内の各メソッドを呼ぶことによって可能です。

手順

customize_registerにアクションフックを設定
add_panelでパネルを追加
add_sectionでセクション追加
add_settingで設定項目追加
add_controlでセクションと設定項目を結びつけ

順を追って見ていきましょう

まず各名称について、WordPressの管理画面、左のメニュー「外観」から「カスタマイズ」に行きます。
そのときの画面を下記の画像として説明していきます。

パネルというのがここでは「パネルタイトル」という項目になります。
セクションはここでは「サイトタイトルとキャッチフレーズ」と「固定フロントページ」ですね。
設定項目が「サイトのタイトル」、「キャッチフレーズ」となります。

パネルがセクションを内包し、セクションが設定項目を内包している感じですね。
例えば、パネルをクリックすればここと同じようにセクションがまた並んでいる形になっていて、そのセクションをクリックすると、設定項目が並んでいるようになっています。
ちなみにパネルを使わずに最初からセクションといったことも可能です。

コード

では具体的にコードを見ていきます。

/* 設定側 */
function theme_customize_register($wp_customize) {
    /* Panel */
    $wp_customize->add_panel( 'パネルID',
        array(
            'priority' => 30, // パネルの表示順
            'title' => __( 'パネルタイトル', 'テーマID' )
            )
        );

    /* Section */
    $wp_customize->add_section( 'セクションID' ,
        array(
            'title' => __( 'セクションタイトル', 'テーマID' ),
            'panel' => '親となるパネルID'
            )
        );

    /* Setting */
    $wp_customize->add_setting('設定ID',
        array(
            'default' => __('デフォルト文', 'テーマID')
            )
        );

    /* Control */
    $wp_customize->add_control( new WP_Customize_Control(
        $wp_customize,
        '紐付ける設定ID',
        array(
            'label'     => __('ラベル文', 'テーマID'),
            'section'   => '紐付けるセクションID',
            )
        )
    );
}
add_action( 'customize_register', 'theme_customize_register' );

上述した通り、add_panelでパネル、add_sectionでセクション、add_settingで設定項目、add_controlでセクションと設定項目の紐付けを行っています。

/* 取得側 */
$test = get_theme_mod('設定ID', __('デフォルト文', 'テーマID') );
echo esc_html($test);

取得側ではget_theme_modを用いて取得します。
ちなみにhtmlspecialcharsなどはかかっていない状態で取得されますので正しく表示されるようesc_htmlでフィルターしてあげるといいでしょう。

これでプレビューを見ながら編集することができるはずです！
CSSなんかもこの項目に含めることができたり、JSを使うことで更にリアルタイムにプレビューすることも可能みたいです。
どこまで実装するかは実装工数、運用のときを考えて計画的に！

参考

http://www.webopixel.net/wordpress/586.html
https://wpdocs.osdn.jp/%E3%83%86%E3%83%BC%E3%83%9E%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA_API
https://developer.wordpress.org/themes/advanced-topics/customizer-api/

WordPressで外観->カスタマイズからプレビューを見ながら編集する方法

WordPressでテンプレートもプレビューを見ながら編集しよう

手順

コード

参考