MENU
Wordpress制作を学ぶためのブログ
Nino-Blog
Nino-Blog
  1. ホーム
  2. wordpress
  3. テーマ作り
  4. 【自作テーマ】wordpressカスタマイザーに項目を追加する

【自作テーマ】wordpressカスタマイザーに項目を追加する

2025 1/28
wordpress テーマ作り
2021年7月3日2025年1月28日

皆さんこんにちは
wordpressのカスタマイズをしていて「全然wordpressの強みを活かせていない」
と感じたことはありませんか?

そもそもWordpressの強みはサイトの運営者が誰であろうが簡単にサイトを構築できるという点だと思います。

wordpressを学び自作テーマを作る際に自分好みのテーマを作ることはできますが、「柔軟性」を持たせてテーマを作ることは結構難易度が高くなります。

今日はwordpressの「カスタマイザー」に項目を追加して柔軟な機能を追加したいと思います。

ちなみにカスタマイザーとは以下のことです。

でははじめて行きます。

\ NinoBlogのサービス紹介です! /

実績100件以上!集客できるホームページ制作します SEO対策とデザインで集客力UP!更新可能なホームページを!
目次

完成図

画面左のカスタマイズ項目がテーマカスタマイザーです。
右にトップページが映し出され左側のカスタマイザーに画像を設定することで右側に反映されます。
今回はスライダー3枚分のと画像中央にある文字列をカスタマイザーに追加したいと思います。

手順

  1. functions.phpにコードを記述
  2. functions.phpに画像のURLを出力する関数を作成
  3. カスタマイザーと関連付ける場所で関数を呼び出す
  4. 動作確認

ととても簡単に実装できる。

では順を追って説明していきます

functions.phpにコードを記述

まずはfunctions.phpに以下のコードを記述する。
今回は画像が3枚、テキストが3箇所ありますので長々としたコードとなっていますが、1枚目2枚目3枚目共に同じコードの繰り返しですので実装する際は好みの枚数に合わせてください。

 /* テーマカスタマイザーを追加する
---------------------------------------------------------- */
add_action( 'customize_register', 'theme_customize' );
function theme_customize($wp_customize){

	//スライダーというセクションの追加
	$wp_customize->add_section( 'slider-img', array(
		'title' => 'スライダー', //セクションのタイトル
		'priority' => 60, //セクションの位置
		'description' => '画像をアップロードしてください。', //セクションの説明
	));

    //1枚目の画像追加
		$wp_customize->add_setting( 'slider_image1'); //設定項目を追加
		$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'slider_image1', array(
			'label' => 'スライダー画像', //設定項目のタイトル
			'section' => 'slider-img', //セクションのID
			'settings' => 'slider_image1', //設定項目のID
			'description' => 'スライダー画像を設定してください。', //設定項目の説明
    )));
    //1枚目の画像のテキストを追加
    $wp_customize->add_setting('slider_text1',[
      'default' => 'Enjoy Rich'
    ]);
    $wp_customize->add_control('slider_text1', [
      'label' => 'スライダーの文字列',
      'section' => 'slider-img'
    ]);

    //2枚目の画像追加
    $wp_customize->add_setting( 'slider_image2' ); //設定項目を追加
		$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'slider_image2', array(
			'label' => 'スライダー画像',
			'section' => 'slider-img',
			'settings' => 'slider_image2',
			'description' => 'スライダー画像を設定してください。',
		)));
    //2枚目の画像のテキストを追加
    $wp_customize->add_setting('slider_text2',[
      'default' => 'Enjoy Rich'
    ]);
    $wp_customize->add_control('slider_text2', [
      'label' => 'スライダーの文字列',
      'section' => 'slider-img'
    ]);

    //3枚目の画像追加
    $wp_customize->add_setting( 'slider_image3' ); //設定項目を追加
		$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'slider_image3', array(
			'label' => 'スライダー画像',
			'section' => 'slider-img',
			'settings' => 'slider_image3',
			'description' => 'スライダー画像を設定してください。',
		)));
    //3枚目の画像のテキストを追加
    $wp_customize->add_setting('slider_text3',[
      'default' => 'Enjoy Rich'
    ]);
    $wp_customize->add_control('slider_text3', [
      'label' => 'スライダーの文字列',
      'section' => 'slider-img'
    ]);
}}

コードをfunctions.phpに追記したらサイトを確認をしてみましょう。
管理画面→カスタマイズで確認ができます。

すると、以下のように「スライダー」のカスタマイズ項目が増えているかと思います。


上の画像のようになればOKです。

画像のURLを出力する関数を作成

では次に画像のURLを出力する関数を作って行きます。

カスタマイズ項目を追加できましたが、まだ画像の変更が反映されません。
それは、スライダー内で設定した画像のURLが右画面に写っているページの画像リンクに反映されていないからです。

画像のURLを出力するは以下の通りです。

 /* テーマカスタマイザーで設定された画像のURLを取得する関数
// ---------------------------------------------------------- */
function get_the_logo_img_url(){
	return esc_url( get_theme_mod( 'slider_image1' ) );
}
function get_the_logo_img_url_1(){
	return esc_url( get_theme_mod( 'slider_image2' ) );
}
function get_the_logo_img_url_2(){
	return esc_url( get_theme_mod( 'slider_image3' ) );
}

上記の関数を表示ページの画像リンクに貼ることによって画像のURLを出力する事ができます。

関数を表示ページの画像リンクで呼び出す

カスタマイザーで設定した画像のURLを取得する関数を作成できましたので、次は表示画像のリンクで関数を呼び出します。
今回の私のTopページはfront-page.phpに記述しておりますのでそちらに記述します。
また、今回画像のタイトルも一緒に紐付けを行います。

<div class="swiper-slide">
  //変数を作り変更された際の画像テキスト情報とデフォルトのテキスト情報を書き込みます。
  <?php $slider_text1 = get_theme_mod('slider_text1', 'Enjoy Rich');?>
   //反映させたいスライダーテキストのソースを書いている場所で変数を出力します。
  <div class="hero__title"><?php echo $slider_text1;?></div>
    //imgタグのsrc内で画像URLの関数を発動させます。
    <img src="<?php echo get_the_logo_img_url(); ?>" alt="" />
  </div>
  <div class="swiper-slide">
  //変数を作り変更された際の画像テキスト情報とデフォルトのテキスト情報を書き込みます。
    <?php $slider_text2 = get_theme_mod('slider_text2', 'Fantastic');?>
  //反映させたいスライダーテキストのソースを書いている場所で変数を出力します。
  <div class="hero__title"><?php echo $slider_text2;?></div>
   //imgタグのsrc内で画像URLの関数を発動させます。
    <img src="<?php echo get_the_logo_img_url_1(); ?>" alt="" />
  </div>
  <div class="swiper-slide">
  //変数を作り変更された際の画像テキスト情報とデフォルトのテキスト情報を書き込みます。
    <?php $slider_text3 = get_theme_mod('slider_text3', 'Experience');?>
  //反映させたいスライダーテキストのソースを書いている場所で変数を出力します。
    <div class="hero__title"><?php echo $slider_text3;?></div>
   //imgタグのsrc内で画像URLの関数を発動させます。
    <img src="<?php echo get_the_logo_img_url_2(); ?>" alt="" />
  </div>
</div>

見辛くなってしまいましたが、やっていることはとてもシンプルで繰り返しです。
以上でコードの記述が終了しました。
カスタマイザーで確認してみましょう。
カスタマイザーが右側の画像やテキストに紐付いていることでしょう。

最後に

自分個人専用のテーマを作る際にはこの機能はなくても問題ありませんが、
誰かの依頼や、仕事となった際にヘッダーの画像変更などを直接ベタ書きとなると初心者の方にはハードルが高いです。

wordpressは誰でも簡単に操作ができるという強みがありますのでそこを活かす為にもこのカスタマイザーでの機能追加を覚えておくと便利でしょう。

Nino-BLOGのサービス紹介

実績100件以上!集客できるホームページ制作します SEO対策とデザインで集客力UP!更新可能なホームページを!
Wordpressの修正・カスタマイズを代行します 画像や文章の追加・修正・ページの追加・アップデートなど
wordpress テーマ作り
二宮 旬平
WEBデザイナー
はじめましてWEBデザイナーの二宮と申します。
このサイトでは、Wordpressについて実際に手を動かしながら学べるよう日々投稿を行なっております。
HP制作実績はこちらから
キーワード検索
人気記事
  • 【完全解説】WordPressでヘッダーを自作してみよう!(コーポレートサイト編)
    5430
  • 【コピペOK】ContactFrom7でお問い合わせフォームを設置する方法
    5147
  • 【超簡単】ContactForm7でお問い合わせ確認画面を設置してみよう
    4287
  • 【自作テーマ開発】_s(underscores)でオリジナルブログサイトを作ろう!
    2409
  • 【WordPress自作テーマ開発③】トップページを作ろう
    2324
カテゴリー
  • SEO対策
  • wordpress
    • テーマ作り
  • カスタマイズ
  • ニュース
  • ライティング
  • ライフハック
  • 副業
  • 未分類
  • 資格
アーカイブ
  • 2023年7月 (3)
  • 2023年2月 (3)
  • 2022年4月 (1)
  • 2022年2月 (1)
  • 2022年1月 (7)
  • 2021年10月 (1)
  • 2021年9月 (3)
  • 2021年8月 (8)
  • 2021年7月 (2)
  • 2021年2月 (9)
  • 2021年1月 (5)
↓Nino-blogのサービス紹介
実績100件以上!集客できるホームページ制作します SEO対策とデザインで集客力UP!更新可能なホームページを!
目次
  • HOME
  • プライバシーポリシー
  • 免責事項
  • お問い合わせ

© 2020 nino-blog

目次