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

どうもイチタです!

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

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

ここでは、functions.phpsidebar.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には、設定項目のタイトルを記入します。
  • sectionsettingには、それぞれのIDを指定します。
  • プロフィールのtypeには、texttextareaを指定しています。

テーマへの反映

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>

 

画像を呼び出す

  • 画像を呼び出すにはget_the_key_url()を使います。
  • これは画像のurlを取得するための関数です。

テキストを呼び出す

  • テキストを呼び出すには、get_option( 'key' )を使います。
  • keyのところには、add_setting()で指定したキーを代入します。

これで完成です!

あとは、実際にカスタマイズ画面で、編集していきましょう!

おわりに

今回は、忘備録も兼ねて記事を書きました。

分かりづらい部分や、言いまわし・言葉の使い方が違う部分もあるかもしれませんが、暖かく見てもらえると嬉しいです。

こうやってブログを書くことで、もっと頑張らなければ!!という気持ちがこみ上げてきますね。

これからも、少しづつ更新していこうと思います。

最後まで読んでくださりありがとうございました。