カスタマイザー項目の追加

今回は、Wordpressのカスタマイザーの設定方法をメモしていきます。

カスタマイザーは、事前に画像やテキストなど入る場所が決まっていて定期的に変更がある箇所に設定しておくと便利な機能となっています。

カスタマイザー項目を追加するには、function.php内に下記のように、定義を追加していきます。

$wp_customizeは、Wodrpressのカスタマイザーの事で、add_actionで新しくカスタマイザーにmy_customizeの定義を追加するというものになります。ここでは、my_customizeという名の定義名にしていますが分かりやすい定義名にすると管理しやすいです。

次に定義を追加していきます。

自分が定義したカスタマイザーをまとめるためにパネルを用意していきます。add_panelでパネルを追加していきます。パネル名はMneko_panelと設定し、arrayでタイトルと配列を設定します。

セクションを追加

パネル内にセクション(項目)を追加していきます。add_sectionで、セクションの追加が行えます。セクション名Mneko_sectionと設定し、arrayでタイトルとどのパネルに入れるか、配列、説明など追加していきます。

セッティングとコントロールの追加

セクション内に画像を追加するための設定とコントロールを追加します。今回は、リサイズ機能を追加したいためWP_Customize_Cropped_Image_Controlを使用しましたが、WP_Customize_Image_Controlでも画像追加設定が行えます。

リサイズ定義を追加

Mneko_resize_setting_topは、リサイズ用の定義の名前です。リサイズ定義は、下記のように記述致します。

カスタマイザー項目の追加定義は、完成しましたが、これだけでは、表示されません。

表示用定義を追加

下記のように表示用の定義を設定する必要があります。

get_theme_modでsetting名の値を読み取ります。その後、function名のMneko_setting_image_resize01とget_the_logo_image_urlでそれぞれ画像と画像URLを出力できるようになります。

実際に、出力したいページに下記の様に追加すると表示されるようになります。

if get_the_logo_image_urlで、画像追加がある場合の条件分枝を設定しています。echo Mneko_setting_image_resize01()でリサイズされた画像を出力しています。定義で、事前に画像タグを追加するように設定していますので、タグでを書かなくても良い状態になっています。

カスタマイザー項目には、他にもテキストやチェックボックス、ラジオボックスなどいろいろありますが、苦戦した画像リサイズ設定だけ制作メモに残しました。