wordpressのカスタマイザーに項目を追加する方法「画像」

wordpressのカスタマイザーにオリジナルの項目を追加して、ライブプレビューを確認しながらテーマを編集する方法を解説していきます。

追加できる項目は

画像
テキスト
色

がありますが、今回は「画像」を中心に解説いていきます。

テーマカスタマイザーにオリジナル項目を追加できるようになることで、オリジナルテーマを制作する時にスライドショーやアピールエリアを作り、表示するものを簡単に変更できるようになるので作ることのできる幅が広がります。

この記事を読んで、ぜひ、作り方をマスターしてください。

FTPを使わずに既存のテーマに追加する方法
カスタマイザーにオリジナル項目を追加する方法
複数の項目を追加したい場合

FTPを使わずに既存のテーマに追加する方法

既存の使用しているテーマへ実装する方法もオリジナルテーマを作る時もコードの内容は一緒ですので先に既存テーマのどこに記載すればいいのかを説明します。

今回行うことは基本２つのphpファイルを変更することでできます。

画像を表示させたいphpファイル
function.phpファイル

FTPを使用せずに既存テーマをwordpressから変更するには「外観」→「テーマエディタ」から変更することができます。ーーー①

サイドメニューから「テーマのための関数、function.php」を選択します。ーーーー②

画像を表示させたいphpファイルは③のエリアにある「編集するテーマを選択」から「お使いのテーマ名＋child」となっていると思いますので「お使いのテーマ名」を選択し、そこから編集すべきファイルを探して編集してください。

カスタマイザーにオリジナル項目を追加する方法

上記を読めばどこにコードを追加捨て場いいかわかったはずですのいよいよ追加するコードの内容に入ります。

ここで理解して置くべき概念は４つあります。

function　「関数」
section　「セクション」
setting　「セッティング」
control　「コントロール」

function

追加する処理をまとめるものです。

section

カスタマイズを開いてはじめに表示される部分に項目を表示するためのものです。

setting

sectionで作った項目にcontrolで作った内容を表示させるためのものです。

control

section内に表示させる内容を決める部分です。

これらを組み合わせてコードを記載していきます

phpファイル

add_action( 'customize_register', 'customize_name' );

1	add_action( 'customize_register', 'customize_name' );

はじめに処理追加を宣言します。

「customize_name」の部分にお好きな名前を記入してください。

function.php

add_action( 'customize_register', 'customize_name' );
function customize_name($wp_customize){
	// ここに処理を記載します
}

add_action( 'customize_register', 'customize_name' );

function customize_name($wp_customize){

// ここに処理を記載します

}

function内に処理を記載します。

function名はcustomize_name部分と同じ名前にしてください。

function.php

add_action( 'customize_register', 'customize_name' );
function customize_name($wp_customize){
	$wp_customize->add_section( 'original_img', array(
		'title' => 'オリジナル項目', //セクションのタイトル
		'priority' => 200, //セクションの位置
		'description' => '画像をアップロードしてください。', //セクションの説明
	));
}

add_action( 'customize_register', 'customize_name' );

function customize_name($wp_customize){

$wp_customize->add_section( 'original_img', array(

'title' => 'オリジナル項目', //セクションのタイトル

'priority' => 200, //セクションの位置

'description' => '画像をアップロードしてください。', //セクションの説明

));

}

function内にsectionを作ります。

original_imgの部分をお好きな名前に変更してください。

それぞれの項目はコメントの通りです。

セクションの位置ですが、デフォルトで入っている項目の位置が２００以内となっているので末尾に追加したければ２００以上とすれば良いです。

入っている項目はテーマごとに違いますので、各自テーマのfunctionから調べて任意の位置に入るように調整してください。

数字が大きい方が後ろにきます。

function.php

add_action( 'customize_register', 'customize_name' );
function customize_name($wp_customize){
	$wp_customize->add_section( 'original_img', array(
		'title' => 'オリジナル項目', //セクションのタイトル
		'priority' => 200, //セクションの位置
		'description' => '画像をアップロードしてください。', //セクションの説明
	));

        $wp_customize->add_setting( 'img' ); //設定項目を追加
}

add_action( 'customize_register', 'customize_name' );

function customize_name($wp_customize){

$wp_customize->add_section( 'original_img', array(

'title' => 'オリジナル項目', //セクションのタイトル

'priority' => 200, //セクションの位置

'description' => '画像をアップロードしてください。', //セクションの説明

));

$wp_customize->add_setting( 'img' ); //設定項目を追加

}

sectionで作った項目にcontrolで作った内容を表示させるためsettingを用意します。

imgの部分をお好きな名前に変更してください。

function.php

add_action( 'customize_register', 'customize_name' );
function customize_name($wp_customize){
	$wp_customize->add_section( 'original_img', array(
		'title' => 'オリジナル項目', //セクションのタイトル
		'priority' => 200, //セクションの位置
		'description' => '画像をアップロードしてください。', //セクションの説明
	));

        $wp_customize->add_setting( 'img' ); //設定項目を追加
		$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'img', array(
			'label' => '画像1', //設定項目のタイトル
			'section' => 'original_img', //追加するセクションのID
			'settings' => 'img', //追加する設定項目のID
			'description' => '画像1を設定してください。', //設定項目の説明
		)));
}

add_action( 'customize_register', 'customize_name' );

function customize_name($wp_customize){

$wp_customize->add_section( 'original_img', array(

'title' => 'オリジナル項目', //セクションのタイトル

'priority' => 200, //セクションの位置

'description' => '画像をアップロードしてください。', //セクションの説明

));

$wp_customize->add_setting( 'img' ); //設定項目を追加

$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'img', array(

'label' => '画像1', //設定項目のタイトル

'section' => 'original_img', //追加するセクションのID

'settings' => 'img', //追加する設定項目のID

'description' => '画像1を設定してください。', //設定項目の説明

)));

}

section内に表示させる内容を決めるためcontrolを作ります。

「new WP_Customize_Image_Control( $wp_customize, ‘img’, array(」

の部分のimgの部分をsettingでつけた名前に変更してください。

追加するセクションのIDをとはsectionでつけた名前です。

追加する設定項目のIDとはsettingでつけた名前です。

これでカスタマイザーに項目を追加することができました。

function.phpでの編集作業は終了です。

画像を表示させたいphpファイルを編集する

カスタマイザーからセットした画像を出力するためのコードを画像を表示させたいphpファイルに追加します。

name.php

get_theme_mod( 'img' );

1	get_theme_mod( 'img' );

こちらのコードを画像を表示させたい箇所に追加することで実装できます。

imgの部分をsettingでつけた名前に変更してください。

これで画像がデスクトップ上で表示されたはずです。

複数の項目を追加したい場合

同じsection内に複数の項目をセットしたい場合は単純にsettingとcontrolのコードをセットして名前を変更すれば良いです。

function.php

add_action( 'customize_register', 'theme_customize' );
function theme_customize($wp_customize){
	$wp_customize->add_section( 'original_img', array(
		'title' => 'オリジナル項目', //セクションのタイトル
		'priority' => 200, //セクションの位置
		'description' => '画像をアップロードしてください。', //セクションの説明
	));

    $wp_customize->add_setting( 'img' ); //設定項目を追加
    $wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'img', array(
        'label' => '画像1', //設定項目のタイトル
        'section' => 'original_img', //追加するセクションのID
        'settings' => 'img', //追加する設定項目のID
        'description' => '画像1を設定してください。', //設定項目の説明
    )));
    $wp_customize->add_setting( 'img2' ); //2つ目の設定項目を追加
    $wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'img2', array(
        'label' => '画像2', //設定項目のタイトル
        'section' => 'original_img', //追加するセクションのID
        'settings' => 'img2', //追加する設定項目のID
        'description' => '画像2を設定してください。', //設定項目の説明
    )));
}

add_action( 'customize_register', 'theme_customize' );

function theme_customize($wp_customize){

$wp_customize->add_section( 'original_img', array(

'title' => 'オリジナル項目', //セクションのタイトル

'priority' => 200, //セクションの位置

'description' => '画像をアップロードしてください。', //セクションの説明

));

$wp_customize->add_setting( 'img' ); //設定項目を追加

$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'img', array(

'label' => '画像1', //設定項目のタイトル

'section' => 'original_img', //追加するセクションのID

'settings' => 'img', //追加する設定項目のID

'description' => '画像1を設定してください。', //設定項目の説明

)));

$wp_customize->add_setting( 'img2' ); //2つ目の設定項目を追加

$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'img2', array(

'label' => '画像2', //設定項目のタイトル

'section' => 'original_img', //追加するセクションのID

'settings' => 'img2', //追加する設定項目のID

'description' => '画像2を設定してください。', //設定項目の説明

)));

}

name.php

get_theme_mod( 'img' );
get_theme_mod( 'img2' );

1 2	get_theme_mod( 'img' ); get_theme_mod( 'img2' );