【Wordpress】カスタマイザーから画像とテキストを編集できるようにする方法

どうもイチタです！

この記事では、Wordpressの管理画面から直接、画像やテキストを編集できるように設定する方法を解説します。

今回は、下図にあるような、サイドバーの１.画像, 2.名前, 3.自己紹介をカスタマイズ画面に追加し、編集できるように設定していきます。

ここでは、functions.phpとsidebar.phpを編集していきます。

テーマカスタマイザーとは

テーマカスタマイザーとは、サイトのデザインなどを管理画面上から、変更できる機能のことです。

メニュー → 外観 → カスタマイズで入ることができます。

今回はデフォルトでは設定されてない、「プロフィール画像」「プロフィール」という項目を作り、プロフィール画像、名前、自己紹介をカスタマイザーから変更できるように設定していきます。

完成コード（function.phpとsidebar.php）

最初に完成コードがこちらです！

function.php

/** テーマカスタマイザー */
/* アクションフックの作成 */
function theme_customize($wp_customize){
/* セクションの作成 */
//プロフィール画像の編集
$wp_customize->add_section('profile_img_section',array(
  'title' => 'プロフィール画像', //セクションのタイトル
  'priority' => '121', //セクションの位置
  'description' => 'プロフィール画像を編集してください', //セクションの説明
));
//プロフィールの編集
$wp_customize->add_section('profile_text_section',array(
  'title' => 'プロフィール', //セクションのタイトル
  'priority' => '122', //セクションの位置
  'description' => 'プロフィール本文を編集してください', //セクションの説明
));
/* 設定項目の作成 */
//プロフィール画像
$wp_customize->add_setting('profile_img'); //設定項目を追加
$wp_customize->add_control(new WP_Customize_Image_Control($wp_customize,'profile_img',array(
  'label' => 'プロフィール画像', //設定項目のタイトル
  'section' => 'profile_img_section', //セクションのIDを指定
  'settings' => 'profile_img', //セッティングのIDを指定
  'description' => 'プロフィール画像を設定してください。' //設定項目の説明
)));
//プロフィール
//名前
$wp_customize->add_setting('profile_name',array(
  'default' => 'Name', //デフォルトで入るテキスト
  'type' => 'option', //入れておく
  'transport' => 'postMessage', //表示更新のタイミング。デフォルトは'refresh'で即時反映
));

$wp_customize->add_control('profile_name',array(
  'label' => '名前', //設定項目のタイトル
  'section' => 'profile_text_section', //セクションのIDを指定
  'setting' => 'profile_name', //セッティングのIDを指定
  'type' => 'text', //テキストを指定
));
//自己紹介
$wp_customize->add_setting('profile_text',array(
  'default' => 'Text', //デフォルトで入るテキスト
  'type' => 'option', //入れておく
  'transport' => 'postMessage', //表示更新のタイミング。デフォルトは'refresh'で即時反映
));
$wp_customize->add_control('profile_text',array(
  'label' => 'プロフィール文', //設定項目のタイトル
  'section' => 'profile_text_section', //セクションのIDを指定
  'setting' => 'profile_text', //セッティングのIDを指定
  'type' => 'textarea', //テキストエリアを指定
));
}
add_action('customize_register','theme_customize');

sidebar.php

<div class="wprofile-img">
<img src="<?php echo get_the_profile_img_url();?>" alt="プロフィール画像">
</div>
<div class="wprofile-name">
  <p><?php echo get_option('profile_name'); ?></p>
</div>
<div class="wprofile-content">
  <p><?php echo get_option('profile_text'); ?></p>
</div>

めちゃめちゃ長いコードになってしまいましたが、4つの項目に分けて解説しますので、お付き合いください、、、！

アクションフックの作成

funtions.php

/* アクションフックの作成 */ 
function theme_customize($wp_customize){
//ここに処理を記述する
}
add_action('customize_register','theme_customize');

アクションフック

カスタマイザーを作成する際には、customize_registerと、
add_action（アクションフック）という機能を使います。
フックとは、ある関数を特定のタイミングで呼び出すものです。
（フックにはアクションフックと、フィルターフックがあります。）
7行目では、customize_registerというフックに対して、
2行目で定義した関数theme_customize（）を登録しています。
つまり、function theme_customize($wp_customize){ }内に記述した処理を、
customize_registerというフックで、呼び出しています。

セクションの追加

functions.php

/* セクションの作成 */
//プロフィール画像の編集
$wp_customize->add_section('profile_img_section',array(
  'title' => 'プロフィール画像', //セクションのタイトル
  'priority' => '121', //セクションの位置
  'description' => 'プロフィール画像を編集してください', //セクションの説明
));

//プロフィールの編集
 $wp_customizeー>add_section('profile_text_section',array( 
'title' => 'プロフィール', //セクションのタイトル 
'priority' => '122', //セクションの位置 
'description' => 'プロフィール本文を編集してください', //セクションの説明 ));

セクション

セクションとは、カスタマイズ画面の最初のページに表示される項目のことです。
ここでは「プロフィール」と「プロフィール画像」のことを指します。
セクションを追加する際はadd_section()を使います。
ここではprofile_img_sectionと、profile_text_sectionとしました。
priorityはセクションの位置を決めるもので、数字が大きいほど下に表示されます。
200以上にしておけば、デフォルトよりも下に表示されます。

priorityの設定は詳しくは下記の記事に詳しく書いてあります。

https://dainashiyesterday.com/post-4246/

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

functions.php

/* セッティングの作成 */
//プロフィール画像
$wp_customize->add_setting('profile_img',array{
  'type' => 'option', //入れておく 
  'transport' => 'postMessage', //表示更新のタイミング。デフォルトは'refresh'で即時反映
));
$wp_customize->add_control(new WP_Customize_Image_Control($wp_customize,'profile_img',array(
  'label' => 'プロフィール画像', //設定項目のタイトル
  'section' => 'profile_img_section', //セクションのIDを指定
  'settings' => 'profile_img', //セッティングのIDを指定
  'description' => 'プロフィール画像を設定してください。' //設定項目の説明
)));

//プロフィール
//名前
$wp_customize->add_setting('profile_name',array(
  'default' => 'Name', //デフォルトで入るテキスト
  'type' => 'option', //入れておく
  'transport' => 'postMessage', //表示更新のタイミング。デフォルトは'refresh'で即時反映
));
$wp_customize->add_control('profile_name',array(
  'label' => '名前', //設定項目のタイトル
  'section' => 'profile_text_section', //セクションのIDを指定
  'setting' => 'profile_name', //セッティングのIDを指定
  'type' => 'text', //テキストを指定
));
//自己紹介
$wp_customize->add_setting('profile_text',array(
  'default' => 'Text', //デフォルトで入るテキスト
  'type' => 'option', //入れておく
  'transport' => 'postMessage', //表示更新のタイミング。デフォルトは'refresh'で即時反映
));
$wp_customize->add_control('profile_text',array(
  'label' => 'プロフィール文', //設定項目のタイトル
  'section' => 'profile_text_section', //セクションのIDを指定
  'setting' => 'profile_text', //セッティングのIDを指定
  'type' => 'textarea', //テキストエリアを指定
));

セッティング

セッティングでは、add_setting()でセクションの設定を行います。
defaultでは、あらかじめ入れておくテキストを指定できます。
必要ない場合は、このパラメータを記載する必要はありません。
typeにはoptionと入力しておきます。
transportには、postMessageと入力しておくことで、公開ボタンを押すまで変更が適応されないよう設定できます。

コントロール

コントロールでは、add_control()で実際に操作する設定項目を追加していきます。
labelには、設定項目のタイトルを記入します。
sectionとsettingには、それぞれのIDを指定します。
プロフィールのtypeには、textとtextareaを指定しています。

テーマへの反映

sidebar.php

<div class="wprofile-img"> 
　<img src="<?php echo get_the_profile_img_url();?>" alt="プロフィール画像"> 
</div>
<div class="wprofile-name"> 
　<p><?php echo get_option('profile_name'); ?></p> 
</div>
<div class="wprofile-content">
 <p><?php echo get_option('profile_text'); ?></p>
</div>

画像を呼び出す