1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. WordPress
  6. »
  7. WordPress管理画面のテーマカスタマイザーに独自の項目を追加。

WordPress管理画面のテーマカスタマイザーに独自の項目を追加。

WordPressみたいに私自身の人生もカスタムできたらいいのに。@It_is_Rです。

WordPressのカスタマイズは、公開しているサイトだけではありません。
管理画面をカスタマイズすることで、サイトのカスタマイズ(色の変更や、画像の変更など)がとても楽にできるようになります。

今回はテーマカスタマイザーを自分好みにアレンジする方法を紹介します。

目次
  1. テーマカスタマイザーとは
  2. テーマカスタマイザーの項目について
  3. デフォルトの項目を追加
  4. オリジナルの項目を追加する
  5. 既存の項目に設定を追加
  6. まとめ

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

まず、テーマカスタマイザーと聞いてもピンとこない方もいるかもしれません。
テーマカスタマイザーは、WordPressのテーマカスタマイズ画面です。
WordPressにログインし、「外観」 → 「カスタマイズ」と進んだ先にある画面です。
wordpress

こちらがその画面です。
wordpress

テーマカスタマイザーの項目について

テーマカスタマイザーの項目は、使っているテーマによって異なります。
また同じテーマを使っていても、カスタマイズによって項目を変更している場合もあります。

こちらは追加した項目を省いた状態の画面です。
wordpress

デフォルトの項目を追加

まずは、WordPressにデフォルトで備わっている機能を追加していきます。

ウィジェット項目を追加

ウィジェット項目を作成するには、以下のソースをfunctions.phpに追加します。
widgets_initフックを使用します。

functions.php

function mytheme_widgets_init() {
	register_sidebar( array(
		'name' => 'ウィジェット',
		'id' => 'sidebar',
	) );
}
add_action( 'widgets_init', 'mytheme_widgets_init' );

ウィジェット項目が追加されました。
wordpress

色、ヘッダー画像の項目を追加

色、ヘッダー画像の項目を追加するには、カスタムヘッダーサポートを有効にする必要があります。

functions.php

add_theme_support( 'custom-header' );

「色」、「ヘッダー画像」の項目が表示されました。
wordpress

ただ、このままでは色やヘッダー画像を設定した場合でも、反映されません。
反映させるにはテーマをそれなりに変更しなければなりません。

その方法は、また別の記事で紹介します。

背景画像の項目を追加

背景画像の項目を追加するには、カスタム背景のサポートを有効にします。

functions.php

add_theme_support( 'custom-background' );

「背景画像」の項目が有効になりました。
wordpress

オリジナルの項目を追加する

オリジナルの項目を追加するには、add_section(), add_setting(), add_control()を使います。

今回は例として、パンくずリストの区切り文字を設定する項目を作成してみました。

functions.php

function mytheme_register ( $wp_customize ) {

	//パンくずリスト項目を作成
	$wp_customize->add_section( 'mytheme_breadcrumb' , array(
		'title' => 'パンくずリスト',
	) );

	//パンくずリストの設定(データベースに設定を追加)
	$wp_customize->add_setting( 'mytheme_options[sep]', array(
		'default' => '»',
		'type' => 'option',
	) );

	//項目内のラベルなどの設定と、紐付け
	$wp_customize->add_control( 'mytheme_set_breadcrumb', array(
		'label' => '区切り文字',
		'section' => 'mytheme_breadcrumb',
		'settings' => 'mytheme_options[sep]',
	) );
}
add_action( 'customize_register' , 'mytheme_register' );

パンくずリストの項目が追加されました。
wordpress

さらに、パンくずリストの項目で設定した区切り文字を取得してみます。
取得にはget_option()を使います。

$options = get_option( 'mytheme_options' );
echo esc_html($options['sep']);

このように取得できます。
wordpress

後はパンくずリストの機能さえ作れば、簡単に区切り文字を変更することができます。
パンくずリストの作り方はこちらに書いております。
【WordPress】パンくずリストをプラグイン無しで自作する方法

既存の項目に設定を追加

既存の項目に設定を追加する方法もあります。

先ほどの場合だと、add_control()のsectionをadd_section()で自作したmytheme_breadcrumbにしていますが、今回は項目を作らないので、add_section()を使う必要はありません。

どの項目に設定を追加するには、add_control()で設定します。

今回は例として、「サイト基本情報」の項目に、AMPページ用のロゴを設定する機能を追加してみます。

functions.php

function mytheme_register ( $wp_customize ) {
 
	//AMPページ用のロゴの設定(データベースに設定を追加)
	$wp_customize->add_setting('mytheme_options[amp_logo]', array(
		'default' => '',
		'type' => 'option',
	));
 
	//項目内のラベルなどの設定と、紐付け
	$wp_customize->add_control( new WP_Customize_Image_Control(
		$wp_customize,
		'mermaid_header_amp_logo_image', array(
			'label' => 'AMPページロゴ画像',
			'section' => 'title_tagline',
			'settings' => 'mytheme_options[amp_logo]',
			'description' => 'ロゴ画像を設定してください。',
		)
	));
}
add_action( 'customize_register' , 'mytheme_register' );

この場合ですと、add_control()sectionに、title_taglineが指定されています。
これが「サイト基本情報」の項目に設定を追加するということになります。

実際にはこのように表示されます。
wordpress

AMPページの作成とそれなりの設定をしなければ、AMPページロゴ画像を読み込んでも機能しないのでご注意ください。

また、add_control()sectionに指定できるものは以下のものがあります。

title_tagline : サイト基本情報
colors : 色
header_image : ヘッダー画像
background_image : 背景画像
static_front_page : ホームページ設定

さらに、今回は画像をアップロードする機能を使いたかったので、WP_Customize_Image_Control()を使っています。その他、色を選択する機能や、日付や時間を入力する機能などあります。
テキストを入力する機能や、ラジオボタン機能などを使いたい場合は、これらのクラスを指定しなくても使えます。

まとめ

テーマカスタマイザーをカスタムする基本を紹介してみました。
今回はテキスト入力と、画像のアップロードしか触れていませんが、他にも機能があります。また、add_setting()add_control()add_section()などの使い方なども含めて、次回以降の記事で徐々に紹介していければと思います。

スポンサードリンク

関連コンテンツ

オススメ記事

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。文字の大きさを設定する。

こんにちわ。美しいものほど濁って見える@It_is_Rです。 今回もFC2ブログの最強カスタマイズを始めていこうと思います。 今回は文字の大きさや色など、ブログ内の文字の設定をしていきます。初

enchant.jsのロード画面を、好きな画像に変更する方法。

今日は爆睡していました。@It_is_Rです。 enchant.jsのロード画面はカッコわるいなとずっと思っていました。「あ、これenchant.jsで作ったんだな」って思われてしまうじゃないで

画像を表示するよ

JavaScriptで画像を表示してみよう! 小学生からのプログラミング入門

みなさんこんにちは。今日もプログラミングの勉強をはじめていきましょう。 前回、「JavaScriptで今月の残り日数を計算してみよう! 小学生からのプログラミング入門」では、JavaScrip

java

Javaのクラスとメソッドの違いとは?ゲーム風に解説。

この頃小説を読んでいなく、何か読みたいなと思っている@It_is_Rです。 Javaを勉強し始めたばかりの人は、何やら難しい単語に混乱する人も多いでしょう。その中で、クラスとメソッドって一体何が

小学生からのプログラミング入門。プログラミングってなぁに?

小学校でプログラミングを勉強しなくてはいけないことになり、「プログラミングなんてやったことないし、そもそもプログラミングってなんなんだろう」と思う方も多いのではないでしょうか。 といっても、「

HTML CSS

CSSでの円の作り方と、その上下左右中央に文字を表示する方法

サイトを作る時、円形のパーツを作りたい時ってよくありますよね。 円はCSSで簡単に作ることができます。 さらに今回はCSSで作成した円の中央に文字を置く方法も紹介します。 CSSでの

【Android Studio】 GridLayout の使い方。複雑なレイアウトを表現する方法

スマホの充電がいつの間にか無くなっている@It_is_Rです。 Androidアプリ開発、10回目となりました。 前回、様々なレイアウトの使い方を紹介しましたが、今回はその中でもちょっと難しい

webpack-dev-serverの基本的な使い方と設定方法の詳しい解説

あとで見ようとブラウザのタブを開きすぎて、どれがどれだか分からなくなる@It_is_Rです。 webpack-dev-serverを使えば、とても簡単にwebpackでの開発サーバーを立ち上げる

WordPress|特定カテゴリーに属する記事を一覧表示させる方法!!

今まで、何度かに分けて書いた記事でも、その一覧がなかったので見にくいなーと思っていた@It_is_Rです。 昨日、記事の一覧表示をするショートコードを作って、記事の一覧が欲しい記事にだけ貼り付けてみ

ショートコード

BEMによるCSS設計の方法を解説。命名規則から使い方まで。

完璧を求めすぎて、平均以下な@It_is_Rです。 CSSは比較的簡単なものですが、CSS設計をしっかりしておかなければ、余分なコードが多くなったり、後から修正が大変になったりしてこまることにな

コメントをどうぞ!(コメントは承認後に反映されます)

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です