テーマカスタマイザーに機能を追加しよう

WordPressの機能である「テーマカスタマイザー 」の紹介と実装方法を解説しました。
12月14日に金沢市内のITビジネスプラザ武蔵で、
「第2回 Fukui + Toyama 合同 WordPress Meetup」が開催されました。
主催者よりセッションを任され、
コルネ株式会社より大西・佐々木が二人三脚でセッション枠を努めることになりました。

Transcript

1. テーマカスタマイザーに機能を追加しよう 大西 政隆・佐々木 宏 コルネ株式会社
2. ⾃⼰紹介 Profile 01 大西 政隆 Webデザイナー兼コーダー おおにし　まさたか おおにし　まさたか 先日、Adobe MAX Japan に行ってきました。
3. ⾃⼰紹介 Profile 01 佐々木 宏 ささき ひろし Webデザイナー兼コーダー ささき　ひろし 先日から、週２回、英会話のレッスンを受けてます。 大西 政隆 Webデザイナー兼コーダー おおにし　まさたか おおにし　まさたか 先日、Adobe MAX Japan に行ってきました。
4. ⾃⼰紹介 Profile 01 大西 政隆 おおにし　まさたか WordPress ユーザー 佐々木 宏 ささき ひろし Webデザイナー兼コーダー ささき　ひろし 先日から、週２回、英会話のレッスンを受けてます。 おおにし　まさたか WordPress でサイト構築中
5. ⾃⼰紹介 Profile 01 佐々木 宏 ささき ひろし サイト制作者 ささき　ひろし WordPress のことならお任せください 大西 政隆 おおにし　まさたか WordPress ユーザー おおにし　まさたか WordPress でサイト構築
6. セッション Session 02 では... おおにし　まさたか 管理画面からログインできました おおにし　まさたか サーバー契約して、なんとかWordPress を インストールすることができました。
7. セッション Session 02 では... おおにし　まさたか 「投稿」と「固定ページ」ってなにが違うの？ おおにし　まさたか 外観にある「テーマ」ってなに？
8. セッション Session 02 では... おおにし　まさたか 外観にある「カスタマイズ」ってなに？ おおにし　まさたか そういえば、佐々木さんが 「カスタマイズ」って便利な機能があるって 言ってたな....
9. テーマカスタマイザーとは？ About
10. テーマカスタマイザーとは？ About この画⾯がテーマカスタマイザーです
11. テーマカスタマイザーとは？ About WordPress
    3.4（約7年前）
    で追加された機能 Twenty Ten Twenty Eleven
12. テーマカスタマイザーとは？ About WordPress
    3.4（約7年前）
    で追加された機能 Twenty Ten Twenty Eleven WordPress
    の管理画⾯上からリアルタイムに確認（ライブプレビュー）しながら
    サイトのデザインや表⽰内容を変更・修正できる機能となり、
    サイト制作に必要な専⾨知識がなくても、直感的な操作が可能となります。 どんな機能なのか？
13. Function 例えばどんな機能があるのか？ Twenty Twenty（WordPress5.3） 管理画⾯ ＞ 外観 ＞ カスタマイズ サイト基本情報 ⾊ テーマオプション カバーテンプレート 背景画像 メニュー ウィジェット ホームページ設定 追加CSS
14. Merit この機能を使うメリット・注意点 既に稼働している
    WordPress
    のサイトをリニューアルする際 稼働サイト 管理画⾯
15. Merit この機能を使うメリット・注意点 既に稼働している
    WordPress
    のサイトをリニューアルする際 稼働サイト 管理画⾯ これら（テーマカスタマイザー）の設定値は、カスタマイズ画⾯で
    保存して公開ボタンを押した時に
    設定値がデータベースに保存されてしまう。
16. Trouble テーマに盛り込まれていない機能を追加したい プレビュー画面を見ながら トップページの「特集」記事一覧を 表示したり非表示にしたりできますか？ プレビュー画面を見ながらの 「特集」記事一覧の見出しも変更できませんか？ おおにし　まさたか トップページの「ニュース」タイトル一覧の 表示件数って変更できないの？ こんな機能、実装してもらえませんか？
17. Trouble テーマに盛り込まれていない機能を追加したい プレビュー画面を見ながら トップページの「特集」記事一覧を 表示したり非表示にしたりできますか？ プレビュー画面を見ながらの 「特集」記事一覧の見出しも変更できませんか？ おおにし　まさたか トップページの「ニュース」タイトル一覧の 表示件数って変更できないの？ 私にお任せください
18. Trouble テーマに盛り込まれていない機能を追加したい プレビュー画面を見ながら トップページの「特集」記事一覧を 表示したり非表示にしたりできますか？ プレビュー画面を見ながらの 「特集」記事一覧の見出しも変更できませんか？ おおにし　まさたか トップページの「ニュース」タイトル一覧の 表示件数って変更できないの？ おおにし　まさたか 大丈夫。 カスタマイザーにスイッチを設け 簡単に切り替える様にしましょう。 わかりました。 これもカスタマイザーで、 文字が打てる様にしますね。 ささき　ひろし なるほど。 記事の件数をカスタマイザー で コントロールしたいんですね。
19. Current Top Page 現在のトップページ ⼤⻄くんのサイトのトップページ、
    TwentyTwenty
    を使って、
    ニュース⼀覧を表⽰させています。
    今はこんな感じです。
20. Theme Customizer File テーマカスタマイザーのファイル設置 ファイルがどこにあるかすぐわかる様に、
    customize
    と⾔うディレクトリを作り、
    その中に
    theme-customize.php
    を
    ⼊れます。
    このファイルは、
    functions.php
    に読み込ませます。 customize
21. Implement テーマカスタマイザーにオリジナルの項⽬を追加する theme-customize.php
    に、
    customize_register
    と⾔うアクションフック を使って、機能を追加できる様にします。
    中に書いていくコードには、
    ・セクション
    ・セッティング
    ・コントロール
    などの関数が⽤意されおり、
    それらのコードを書いて⾏きます。 theme-customize.php function
    my_theme_customize_register(
    $wp_customize
    )
    {
    
            ※この中に追加していく
    
    }
    add_action(
    ʻcustomize_registerʼ,
    ʻmy_theme_customize_
    registerʼ
    );
22. Construction テーマカスタマイザーの構造 customize_register add_section セクション customize_register
    アクションフックを使った場合 のイメージ図になります。
    中に配置できるものとして、
    メニューを表⽰させ、右側の項⽬を持たせられるセ クション。
    項⽬を追加するために、セッティング、コントロー ルと⾔うものをセットで⼊れて⾏きます。
    セッティングは、
    初期値などの設定内容をデータベースに保存するた めの⽅法を設定します。
    コントロールは、
    カスタマイザーに配置する項⽬を作ったり、⼊⼒ フォームなどのフィールドを設けたり、セクションと セッティングとの関連付けをしたりします。
    
    add_setting セッティング add_control コントロール 追加項⽬1 add_setting セッティング add_control コントロール 追加項⽬2 add_setting セッティング add_control コントロール 追加項⽬3 …
23. Implement テーマカスタマイザーにオリジナルの項⽬を追加する •セクション
    
    add_section
    関数を使⽤します。
    引数として、
    my_theme_section
    と任意の⽂字列を
    設定します。
    パラメータは、
    ・title
    ・priority
    ・description
    など theme-customize.php $wp_customize->add_section(
    
    
    
    
    
    ʻmy_theme_sectionʼ,
    array(
    
    
    
    
    
    ʻtitleʼ
    
    
    
    
    
    
    
    
    
    
    
    
    =>
    
    
    ʻトップページʼ,
    
    
    
    ←
    項⽬名
    
    
    
    
    
    ʻpriorityʼ
    
    
    
    
    
    
    
    =>
    
    
    40,
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    ←
    優先順位
    
    
    
    
    
    ʻdescriptionʼ
    
    
    =>
    
    
    ʻ『⼤⻄くん仕様項⽬』ʼ,
    
    ←
    説明⽂
    
    
    
    
    
    )
    );
24. Exercises 「ニュース」記事⼀覧の表⽰件数の設定 •セッティング
    
    add_setting
    関数を使⽤します。
    引数として、
    my_theme_options[archive_number]
    と
    任意の⽂字列を設定します。
    パラメータは、
    ・default
    ・type
    ・transport
    ・sanitize_callback
    など theme-customize.php $we_customize->add_setting(
      ʻmy_theme_options[archive_number]ʼ,
    array(
      ʻdefaultʼ
    =>
    ʼ10ʼ,
    
    ←
    初期値
      ʻtypeʼ
    =>
    ʻoptionʼ,
    
    ←
    データベースに保存
      ʻsanitize_callbackʼ
    =>
    ʻmy_theme_sanitize_number_
      rangeʼ,
    
    ←
    バリデーションチェック
      )
    ); おおにし　まさたか トップページにある「ニュース」記事一覧の 表示件数は変更できないの？
25. Exercises 「ニュース」記事⼀覧の表⽰件数の設定 •サニタイズ・コールバック
     ／数値範囲付きの数値
    
    my_theme_sanitize_number_range
    と
    任意の⽂字列を設定します。
    コントロールのパラメーターに最⼩値と最⼤ 値を指定することで、
    制限を持たすことができます。
    通常、数値を直接⼊⼒する場合、無制限で数 値が設定できてしまいますが、サニタイズ コールバックを使⽤してそれを防ぐことがで theme-customize.php function
    my_theme_sanitize_number_range(
    $number,
    $setting
    )
    {
     $number
    =
    absint(
    $number
    );
     $atts
    =
    $setting->manager->get_control(
    $setting->id
    )
     ->input_attrs;
     $min
    =
    (
    isset(
    $atts[ʻminʼ]
    )
    ?
    $atts[ʻminʼ]
    :
    $number
    );
     $max
    =
    (
    isset(
    $atts[ʻmaxʼ]
    )
    ?
    $atts[ʻmaxʼ]
    :
    $number
    );
     $step
    =
    (
    isset(
    $atts[ʻstepʼ]
    )
    ?
    $atts[ʻstepʼ]
    :
    1
    );
     return
    (
    $min
    <=
    $number
    &&
    $number
    <=
    $max
    &&
    
     is_int(
    $number
    /
    $step
    )
    ?
    $number
    :
    $setting->default
    );
    } おおにし　まさたか トップページにある「ニュース」記事一覧の 表示件数は変更できないの？
26. Exercises 「ニュース」記事⼀覧の表⽰件数の設定 •コントロール
    
    add_control
    関数を使⽤します。
    引数として、
    control_archive_number
    と任意の⽂字列を 設定します。
    パラメータは、
    ・settings
    ・label
    ・section
    ・type
    theme-customize.php $wp_customize->add_control(
     ʻcontrol_archive_numberʼ,
    array(
     ʻsettingsʼ
    =>
    ʻmy_theme_options[archive_number]ʼ,
    ←
    セッティング名
     ʻlabelʼ
    =>
    ʻ新着記事の表⽰件数:ʼ,
    ←
    ラベル名
     ʻsectionʼ
    =>
    ʻmy_theme_sectionʼ,
    ←
    セクションを指定
     ʻtypeʼ
    =>
    ʻnumberʼ,
    ←
    フォームの種類を指定
     ʻpriorityʼ
    =>
    1,
    ←
    項⽬順位
     ʻinput_attrsʼ
    =>
    array(
      ʻstepʼ
    =>
    ʻ1ʼ,
    ʼminʼ
    =>
    ʻ0ʼ,
    ʼmaxʼ
    =>
    ʼ20ʼ,
    ←
    上限数など
     ),
    )); おおにし　まさたか トップページにある「ニュース」記事一覧の 表示件数は変更できないの？
27. Construction テーマカスタマイザーの構造 customize_register add_section セクション customize_register
    アクションフックを使った場合 のイメージ図になります。
    中に配置できるものとして、
    メニューを表⽰させ、右側の項⽬を持たせられるセ クション。
    項⽬を追加するために、セッティング、コントロー ルと⾔うものをセットで⼊れて⾏きます。
    セッティングは、
    初期値などの設定内容をデータベースに保存するた めの⽅法を設定します。
    コントロールは、
    カスタマイザーに配置する項⽬を作ったり、⼊⼒ フォームなどのフィールドを設けたり、セクションと セッティングとの関連付けをしたりします。
    
    add_setting セッティング add_control コントロール 追加項⽬1 add_setting セッティング add_control コントロール 追加項⽬2 add_setting セッティング add_control コントロール 追加項⽬3 …
28. Exercises 「特集記事コンテンツの表⽰⾮表⽰」の設定 •セッティングとコントロール theme-customize.php $we_customize->add_setting(
    
    ʻmy_theme_options[content_active]ʼ,
    array(
    
    ʻtransportʼ
    
    
    
    
    =>
    ʻrefreshʼ,
    
    ʻdefaultʼ
    
    
    
    
    
    
    
    
    =>
    ʻnothingʼ,
    
    ʻtypeʼ
    
    
    
    
    
    
    
    
    
    
    
    
    =>
    ʻoptionʼ,
    
    )
    );
    
    $wp_customize->add_control(
    
    ʻmy_theme_options_content_activeʼ,
    array(
    
    ʻsettingsʼ
    
    
    
    
    
    
    
    
    
    
    =>
    ʻmy_theme_options[content_active]ʼ,
    
    ʻtypeʼ
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    =>
    ʻradioʼ,
    
    ʻsectionʼ
    
    
    
    
    
    
    
    
    
    
    
    
    =>
    ʻmy_theme_sectionʼ,
    
    ʻpriorityʼ
    
    
    
    
    
    
    
    
    
    
    
    
    =>
    2,
    
    ʻlabelʼ
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    =>
    ʻコンテンツ表⽰:ʼ,
    
    ʻchoicesʼ
    
    
    
    
    
    
    
    
    
    
    
    =>
    array(
    
    ʻnothingʼ
    
    
    
    
    
    
    
    =>
    ʻ表⽰しないʼ,
    
    ʻexpressionʼ
    
    
    
    =>
    ʻ表⽰するʼ,
    
    ),
    
    )
    );
    
    コンテンツの表⽰⾮表⽰は
    ラジオボタンで切り替えますので、
    コントロール側のパラメーターの
    type
    に
    radio
    を設定します。
    choices
    パラメーターはラジオボタンの
    選択肢になります。
    
    
    
    
    
    おおにし　まさたか 後々、期間限定で トップページに特集記事を表示させたい。
29. Exercises 「特集記事コンテンツの表⽰⾮表⽰」の設定 •セッティングとコントロール theme-customize.php $we_customize->add_setting(
    
    ʻmy_theme_options[content_active]ʼ,
    array(
    
    ʻtransportʼ
    
    
    
    
    =>
    ʻrefreshʼ,
    
    ʻdefaultʼ
    
    
    
    
    
    
    
    
    =>
    ʻnothingʼ,
    
    ʻtypeʼ
    
    
    
    
    
    
    
    
    
    
    
    
    =>
    ʻoptionʼ,
    
    )
    );
    
    $wp_customize->add_control(
    
    ʻmy_theme_options_content_activeʼ,
    array(
    
    ʻsettingsʼ
    
    
    
    
    
    
    
    
    
    
    =>
    ʻmy_theme_options[content_active]ʼ,
    
    ʻtypeʼ
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    =>
    ʻradioʼ,
    
    ʻsectionʼ
    
    
    
    
    
    
    
    
    
    
    
    
    =>
    ʻmy_theme_sectionʼ,
    
    ʻpriorityʼ
    
    
    
    
    
    
    
    
    
    
    
    
    =>
    2,
    
    ʻlabelʼ
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    =>
    ʻコンテンツ表⽰:ʼ,
    
    ʻchoicesʼ
    
    
    
    
    
    
    
    
    
    
    
    =>
    array(
    
    ʻnothingʼ
    
    
    
    
    
    
    
    =>
    ʻ表⽰しないʼ,
    
    ʻexpressionʼ
    
    
    
    =>
    ʻ表⽰するʼ,
    
    ),
    
    )
    );
    
    コンテンツの表⽰⾮表⽰は
    ラジオボタンで切り替えますので、
    コントロール側のパラメーターの
    type
    に
    radio
    を設定します。
    choices
    パラメーターはラジオボタンの
    選択肢になります。
    
    
    
    
    
    おおにし　まさたか 後々、期間限定で トップページに特集記事を表示させたい。
30. Exercises 「⾒出しの表⽰」の設定 •セッティングとコントロール theme-customize.php $wp_customize->add_setting(
    
    ʻmy_theme_options[originText]ʼ,
    array(
    
    ʻdefaultʼ
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    =>
    ʻ特集記事ʼ,
    
    ʻtransportʼ
    
    
    
    
    
    
    
    
    
    
    
    
    
    =>
    ʻrefreshʼ,
    
    ʻsanitize_callbackʼ
    
    
    =>
    ʻsanitize_text_fieldʼ,
    
    ʻtypeʼ
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    =>
    ʻoptionʼ,
    
    )
    );
    
    $wp_customize->add_control(
    
    ʻmy_theme_options_origin_textʼ,
    array(
    
    ʻsettingsʼ
    
    
    =>
    ʻmy_theme_options[originText]ʼ,
    
    ʻlabelʼ
    
    
    
    
    
    
    =>
    ʻコンテンツのタイトル:ʼ,
    
    ʻsectionʼ
    
    
    
    =>
    ʻmy_theme_sectionʼ,
    
    'type'
    
    
    
    
    
    
    
    =>
    'text',
    
    'priority'
    
    
    
    =>
    3,
    
    )
    ); タイトル表⽰では
    セッティングの
    sanitize_callback
    を
    sanitize_text_field
    にする。
    コントロール側のパラメーターの
    type
    に
    おおにし　まさたか ついでにタイトルも変更したい...
31. Implement テーマカスタマイザー
    編集⽤ショートカットの設置 クリックすると、該当の編集項⽬にジャンプ します。
32. Implement テーマカスタマイザー
    編集⽤ショートカットの設置 add_theme_support(
    ʻcustomize- selective-refresh-widgetsʼ
    );
    関数、⻘ の部分を追加します。
    次に、
    ⾚⾊のコードで対象となる要素
    ID
    や
    Class
    を
    selector
    に設定し、
    ショートカットを表⽰するブロックを指定 します。
    設定するとブロックの左上に表⽰されま す。
    
    theme-customize.php add_theme_support(
    ʻcustomize-selective-refresh-widgetsʼ
    );
    
    
    
    if
    (
    isset(
    $wp_customize->selective_refresh
    )
    )
    {
    
    
    $wp_customize->selective_refresh->add_partial(
    ʻmy_theme_options[originText]ʼ,
    array(
    
    ʻselectorʼ
    =>
    ʻ#featuredʼ,
    
    )
    );
    
    
    $wp_customize->selective_refresh->add_partial(
    ʻmy_theme_options[content_active]ʼ,
    array(
    
    ʻselectorʼ
    =>
    ʻ#featured
    ulʼ,
    
    )
    );
    
    
    $wp_customize->selective_refresh->add_partial(
    ʻmy_theme_options[archive_number]ʼ,
    array(
    
    ʻselectorʼ
    =>
    ʻ#news
    ulʼ,
    
    )
    );
    
    
    }
33. Implement テーマカスタマイザーにオリジナルの項⽬を追加する 以上で、
    theme-customize.php
    へ書き込むコー ドは終わりましたが、
    実は、
    これだけでは動きません。
    カスタマイザー画⾯では、フィールドが表 ⽰され、値を⼊⼒することもできますが、
    ライブプレビューが効かないし、反映も されません。
    テンプレートを使ってデータベースの値を 取ってこないとダメんです。 カスタマイザー
    管理画⾯ データベース サイト
    トップページ ライブ
    プレビュー データ保存 データを取りに⾏く データを
    表⽰
34. theme-customize.php function
    my_get_options(
    $key
    =
    ʻʼ
    )
    {
    
    if
    (
    empty(
    $key
    )
    )
    
    return;
    
    
    $options
    =
    get_option(
    ʻmy_theme_optionsʼ
    );
    
    
    if
    (
    empty(
    $options[
    $key
    ]
    )
    )
    
    return;
    
    
    return
    $options[
    $key
    ];
    }
    
    function
    my_the_options(
    $key
    =
    ʻʼ
    )
    {
    
    echo
    my_get_options(
    $key
    );
    } Implement テンプレートに反映させるための関数を準備する テンプレートに反映させるため、
    get_option
    関数に独⾃の
    my_theme_options
    引数を登録。
    独⾃の関数を設定します。
    
    テンプレート側で、
    カスタマイザーの値を取得する場合、
    my_get_options(
    ʻarchive_numberʼ
    );
    
    関数を使います。
    カスタマイザー
    の値を表⽰させる場合、
    my_the_options(
    ʻarchive_numberʼ
    );
    
    関数を使います。
35. Built-in Functions カスタマイザーの関数をテンプレートに組み込む 要件内容がトップページということなので、 front-page.php
    を設置します。
36. Built-in Functions カスタマイザーの関数をテンプレートに組み込む 22⾏⽬
    
    
    
    
    
    
    で特集記事の表⽰⾮表⽰を判定します。
    
    26⾏⽬
    
    
    
    
    
    
    値がテキストフィールドに記⼊されていたら、値を表⽰しま す。
    27⾏⽬
    
    
    
    <?php
    if
    (
    my_get_options(
    ʻcontent_activeʼ
    )
    <?php
    if
    (
    !empty(my_get_options(
    ʻoriginTextʼ
    
    <?php
    my_the_options(
    ʻoriginTextʼ
    );
    ?> ① ② ③
37. Built-in Functions カスタマイザーの関数をテンプレートに組み込む 74⾏⽬から81⾏⽬
    
    
    
    
    
    
    
    
    
    ナンバーフィールドの値を
    $ppp
    に代⼊し、
    パラメータ
    posts_per_page
    に設定しています。
    <?php
    
    
    
    $ppp
    =
    my_get_options(
    ʻarchive_
    
    
    
    numberʼ
    );
    
    $args
    =
    Array(
    
    ʻcategory_nameʼ
    =>
    ʻnewsʼ,
    
    ʻposts_per_pageʼ
    =>
    $ppp,
    
    ʻorderbyʼ
    =>
    ʻdateʼ,
    
    ʻorderʼ
    =>
    ʻDESCʼ
    ④
38. Uploade サーバーにファイルをアップロードする →
39. ご静聴
    ありがとうございました！ 大西 政隆・佐々木 宏 コルネ株式会社