WordPressの機能である「テーマカスタマイザー 」の紹介と実装方法を解説しました。 12月14日に金沢市内のITビジネスプラザ武蔵で、 「第2回 Fukui + Toyama 合同 WordPress Meetup」が開催されました。 主催者よりセッションを任され、 コルネ株式会社より大西・佐々木が二人三脚でセッション枠を努めることになりました。
テーマカスタマイザーに機能を追加しよう大西 政隆・佐々木 宏コルネ株式会社
View Slide
⾃⼰紹介Profile01大西 政隆Webデザイナー兼コーダーおおにし まさたかおおにし まさたか先日、Adobe MAX Japan に行ってきました。
⾃⼰紹介Profile01佐々木 宏ささき ひろしWebデザイナー兼コーダーささき ひろし先日から、週２回、英会話のレッスンを受けてます。大西 政隆Webデザイナー兼コーダーおおにし まさたかおおにし まさたか先日、Adobe MAX Japan に行ってきました。
⾃⼰紹介Profile01大西 政隆おおにし まさたかWordPress ユーザー佐々木 宏ささき ひろしWebデザイナー兼コーダーささき ひろし先日から、週２回、英会話のレッスンを受けてます。おおにし まさたかWordPress でサイト構築中
⾃⼰紹介Profile01佐々木 宏ささき ひろしサイト制作者ささき ひろしWordPress のことならお任せください大西 政隆おおにし まさたかWordPress ユーザーおおにし まさたかWordPress でサイト構築
セッションSession02では...おおにし まさたか管理画面からログインできましたおおにし まさたかサーバー契約して、なんとかWordPress をインストールすることができました。
セッションSession02では...おおにし まさたか「投稿」と「固定ページ」ってなにが違うの？おおにし まさたか外観にある「テーマ」ってなに？
セッションSession02では...おおにし まさたか外観にある「カスタマイズ」ってなに？おおにし まさたかそういえば、佐々木さんが「カスタマイズ」って便利な機能があるって言ってたな....
テーマカスタマイザーとは？About
テーマカスタマイザーとは？Aboutこの画⾯がテーマカスタマイザーです
テーマカスタマイザーとは？AboutWordPress3.4（約7年前）で追加された機能 Twenty Ten Twenty Eleven
テーマカスタマイザーとは？AboutWordPress3.4（約7年前）で追加された機能 Twenty Ten Twenty ElevenWordPressの管理画⾯上からリアルタイムに確認（ライブプレビュー）しながらサイトのデザインや表⽰内容を変更・修正できる機能となり、サイト制作に必要な専⾨知識がなくても、直感的な操作が可能となります。どんな機能なのか？
Function例えばどんな機能があるのか？Twenty Twenty（WordPress5.3）管理画⾯ ＞ 外観 ＞ カスタマイズサイト基本情報 ⾊テーマオプション カバーテンプレート背景画像 メニューウィジェット ホームページ設定追加CSS
Meritこの機能を使うメリット・注意点既に稼働しているWordPressのサイトをリニューアルする際稼働サイト 管理画⾯
Meritこの機能を使うメリット・注意点既に稼働しているWordPressのサイトをリニューアルする際稼働サイト 管理画⾯これら（テーマカスタマイザー）の設定値は、カスタマイズ画⾯で保存して公開ボタンを押した時に設定値がデータベースに保存されてしまう。
Troubleテーマに盛り込まれていない機能を追加したいプレビュー画面を見ながらトップページの「特集」記事一覧を表示したり非表示にしたりできますか？プレビュー画面を見ながらの「特集」記事一覧の見出しも変更できませんか？おおにし まさたかトップページの「ニュース」タイトル一覧の表示件数って変更できないの？こんな機能、実装してもらえませんか？
Troubleテーマに盛り込まれていない機能を追加したいプレビュー画面を見ながらトップページの「特集」記事一覧を表示したり非表示にしたりできますか？プレビュー画面を見ながらの「特集」記事一覧の見出しも変更できませんか？おおにし まさたかトップページの「ニュース」タイトル一覧の表示件数って変更できないの？私にお任せください
Troubleテーマに盛り込まれていない機能を追加したいプレビュー画面を見ながらトップページの「特集」記事一覧を表示したり非表示にしたりできますか？プレビュー画面を見ながらの「特集」記事一覧の見出しも変更できませんか？おおにし まさたかトップページの「ニュース」タイトル一覧の表示件数って変更できないの？おおにし まさたか大丈夫。カスタマイザーにスイッチを設け簡単に切り替える様にしましょう。わかりました。これもカスタマイザーで、文字が打てる様にしますね。ささき ひろしなるほど。記事の件数をカスタマイザー でコントロールしたいんですね。
Current Top Page現在のトップページ⼤⻄くんのサイトのトップページ、TwentyTwentyを使って、ニュース⼀覧を表⽰させています。今はこんな感じです。
Theme Customizer Fileテーマカスタマイザーのファイル設置ファイルがどこにあるかすぐわかる様に、customizeと⾔うディレクトリを作り、その中にtheme-customize.phpを⼊れます。このファイルは、functions.phpに読み込ませます。customize
Implementテーマカスタマイザーにオリジナルの項⽬を追加するtheme-customize.phpに、customize_registerと⾔うアクションフックを使って、機能を追加できる様にします。中に書いていくコードには、・セクション・セッティング・コントロールなどの関数が⽤意されおり、それらのコードを書いて⾏きます。theme-customize.phpfunctionmy_theme_customize_register($wp_customize){ ※この中に追加していく}add_action(ʻcustomize_registerʼ,ʻmy_theme_customize_registerʼ);
Constructionテーマカスタマイザーの構造customize_registeradd_sectionセクションcustomize_registerアクションフックを使った場合のイメージ図になります。中に配置できるものとして、メニューを表⽰させ、右側の項⽬を持たせられるセクション。項⽬を追加するために、セッティング、コントロールと⾔うものをセットで⼊れて⾏きます。セッティングは、初期値などの設定内容をデータベースに保存するための⽅法を設定します。コントロールは、カスタマイザーに配置する項⽬を作ったり、⼊⼒フォームなどのフィールドを設けたり、セクションとセッティングとの関連付けをしたりします。add_settingセッティングadd_controlコントロール追加項⽬1add_settingセッティングadd_controlコントロール追加項⽬2add_settingセッティングadd_controlコントロール追加項⽬3…
Implementテーマカスタマイザーにオリジナルの項⽬を追加する●セクションadd_section関数を使⽤します。引数として、my_theme_sectionと任意の⽂字列を設定します。パラメータは、・title・priority・descriptionなどtheme-customize.php$wp_customize->add_section(ʻmy_theme_sectionʼ,array(ʻtitleʼ=>ʻトップページʼ,←項⽬名ʻpriorityʼ=>40,←優先順位ʻdescriptionʼ=>ʻ『⼤⻄くん仕様項⽬』ʼ,←説明⽂));
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ʼ,←バリデーションチェック ));おおにし まさたかトップページにある「ニュース」記事一覧の表示件数は変更できないの？
Exercises「ニュース」記事⼀覧の表⽰件数の設定●サニタイズ・コールバック ／数値範囲付きの数値my_theme_sanitize_number_rangeと任意の⽂字列を設定します。コントロールのパラメーターに最⼩値と最⼤値を指定することで、制限を持たすことができます。通常、数値を直接⼊⼒する場合、無制限で数値が設定できてしまいますが、サニタイズコールバックを使⽤してそれを防ぐことがでtheme-customize.phpfunctionmy_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);}おおにし まさたかトップページにある「ニュース」記事一覧の表示件数は変更できないの？
Exercises「ニュース」記事⼀覧の表⽰件数の設定●コントロールadd_control関数を使⽤します。引数として、control_archive_numberと任意の⽂字列を設定します。パラメータは、・settings・label・section・typetheme-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ʼ,←上限数など ),));おおにし まさたかトップページにある「ニュース」記事一覧の表示件数は変更できないの？
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パラメーターはラジオボタンの選択肢になります。おおにし まさたか後々、期間限定でトップページに特集記事を表示させたい。
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におおにし まさたかついでにタイトルも変更したい...
Implementテーマカスタマイザー編集⽤ショートカットの設置クリックすると、該当の編集項⽬にジャンプします。
Implementテーマカスタマイザー編集⽤ショートカットの設置add_theme_support(ʻcustomize-selective-refresh-widgetsʼ);関数、⻘の部分を追加します。次に、⾚⾊のコードで対象となる要素IDやClassをselectorに設定し、ショートカットを表⽰するブロックを指定します。設定するとブロックの左上に表⽰されます。theme-customize.phpadd_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ʼ=>ʻ#featuredulʼ, )); $wp_customize->selective_refresh->add_partial(ʻmy_theme_options[archive_number]ʼ,array( ʻselectorʼ=>ʻ#newsulʼ, )); }
Implementテーマカスタマイザーにオリジナルの項⽬を追加する以上で、theme-customize.phpへ書き込むコードは終わりましたが、実は、これだけでは動きません。カスタマイザー画⾯では、フィールドが表⽰され、値を⼊⼒することもできますが、ライブプレビューが効かないし、反映もされません。テンプレートを使ってデータベースの値を取ってこないとダメんです。カスタマイザー管理画⾯ データベースサイトトップページライブプレビューデータ保存データを取りに⾏くデータを表⽰
theme-customize.phpfunctionmy_get_options($key=ʻʼ){ if(empty($key)) return; $options=get_option(ʻmy_theme_optionsʼ); if(empty($options[$key])) return; return$options[$key];}functionmy_the_options($key=ʻʼ){ echomy_get_options($key);}Implementテンプレートに反映させるための関数を準備するテンプレートに反映させるため、get_option関数に独⾃のmy_theme_options引数を登録。独⾃の関数を設定します。テンプレート側で、カスタマイザーの値を取得する場合、my_get_options(ʻarchive_numberʼ);関数を使います。カスタマイザーの値を表⽰させる場合、my_the_options(ʻarchive_numberʼ);関数を使います。
Built-in Functionsカスタマイザーの関数をテンプレートに組み込む要件内容がトップページということなので、front-page.phpを設置します。
Built-in Functionsカスタマイザーの関数をテンプレートに組み込む22⾏⽬で特集記事の表⽰⾮表⽰を判定します。26⾏⽬値がテキストフィールドに記⼊されていたら、値を表⽰します。27⾏⽬if(my_get_options(ʻcontent_activeʼ)if(!empty(my_get_options(ʻoriginTextʼ①②③
Built-in Functionsカスタマイザーの関数をテンプレートに組み込む74⾏⽬から81⾏⽬ナンバーフィールドの値を$pppに代⼊し、パラメータposts_per_pageに設定しています。$ppp=my_get_options(ʻarchive_numberʼ); $args=Array( ʻcategory_nameʼ=>ʻnewsʼ, ʻposts_per_pageʼ=>$ppp, ʻorderbyʼ=>ʻdateʼ, ʻorderʼ=>ʻDESCʼ④
Uploadeサーバーにファイルをアップロードする→
ご静聴ありがとうございました！大西 政隆・佐々木 宏コルネ株式会社
collne
n0bisuke2
mobilebiz
bbsakura
harunakano
ksasao
vfgpproject
tmiura
ueponx
kata0510
takusamar
takanorip
qx5k_iskw
palkan
cromwellryan
aarron
bluesmoon
akosma
3n
deanohume
thoeni
jlugia
lara
schacon
nonsquared