Blog

テーマカスタマイザーでロゴ画像を設定できるようにする方法

2017.03.23 2020.10.25 WordPress

以前、テーマカスタマイザーで画像をアップロードする方法についてご紹介しました。

関連記事

テーマカスタマイザーで画像をアップロードできるようにする方法

今回はそれを利用して、WordPressテーマにロゴ画像を設定する機能を追加する手順をご紹介していきたいと思います。

テーマカスタマイザーで画像をアップロードできるようにする

functions.phpでアクションフックを作成し、テーマカスタマイザーに画像をアップロードする機能を追加します。

functions.php
/* テーマカスタマイザー
---------------------------------------------------------- */
add_action( 'customize_register', 'theme_customize' );

function theme_customize($wp_customize){

	//ロゴ画像
	$wp_customize->add_section( 'logo_section', array(
		'title' => 'ロゴ画像', //セクションのタイトル
		'priority' => 59, //セクションの位置
		'description' => 'ロゴ画像を使用する場合はアップロードしてください。画像を使用しない場合はタイトルがテキストで表示されます。', //セクションの説明
	));

		$wp_customize->add_setting( 'logo_url' );
		$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'logo_url', array(
			'label' => 'ロゴ画像',//セッティングのタイトル
			'section' => 'logo_section', //セクションID
			'settings' => 'logo_url', //セッティングID
			'description' => 'ロゴ画像を設定してください。', //セッティングの説明
		)));
}

テーマカスタマイザーにセクションを追加し、そのセクションの中にセッティング(設定項目)を作成します。

priority(セクションの位置)の値によって、WordPress管理画面の外観→カスタマイズ画面でのセクションの表示位置を指定できます。

サイトタイトルとキャッチフレーズ 20
色 40
ヘッダー画像 60
背景画像 80
ナビゲーション 100
固定フロントページ 120

画像URLを呼び出す関数を作成する

テーマカスタマイザーで画像をアップロードすると、画像のURLがデータベース格納されます。

その画像URLを呼び出すための関数を作成しておくことで、テンプレートファイルで手軽に画像URLを呼び出すことができるようになります。

functions.phpに下記のように追記してください。

関数を作成せずにテンプレートファイルの方からget_theme_mod関数で呼び出すと、変更があった場合にテーマ内のすべての箇所を修正する必要が出てきます。

ここで関数を作成しておけば、変更したい場合にはこの箇所のみを修正すればよくなります。

functions.php
/* テーマカスタマイザーで設定された画像のURLを取得
---------------------------------------------------------- */
//ロゴ画像
function get_the_logo_url(){
	return esc_url( get_theme_mod( 'logo_url' ) );
}

WordPressテーマのテンプレートファイルを編集する

ここまででWordPressにロゴ画像をアップロードする機能を追加できました。

次に、アップロードしたごろ画像をWordPressに表示させるため、テンプレートファイルを編集します。

ロゴ画像を表示させたい箇所となると、多くの場合サイトタイトル部分になるかと思いますので、その前提で話を進めていきたいと思います。

ここで考えておきたいのは、ロゴ画像が設定されていないときの表示

関連記事

テーマカスタマイザーでロゴ画像を設定できるようにする方法

です。

ロゴ画像の設定は必須という前提でテーマを作成するのもいいですが、使い勝手としてはあまりいいとは言えません。

やはり、下記のような仕様にしておいた方がいいでしょう。

  • ロゴ画像が設定されている場合にはタイトル部分にロゴ画像を表示
  • ロゴ画像が設定されていない場合には、サイトタイトルをテキストで表示

画像とテキストの条件分岐

上記の仕様を実現するため、画像が設定されている場合とされていない場合で条件分岐させます。

PHP
<?php $logo_url = get_the_logo_url('logo_url'); ?> //変数logo_urlを宣言
<?php if($logo_url): ?> //変数logo_urlに値が入っていれば

	//画像がアップロードされていれば、ここの内容が表示される

<?php else: ?>//変数logo_urlの値が空なら

	//画像がアップロードされていなければ、ここの内容が表示される

<?php endif; ?>

あとは、条件分岐した際の表示内容をそれぞれ記述すれば大丈夫です。

PHP
<?php $logo_url = get_the_logo_url('logo_url'); ?> //変数logo_urlを宣言
<?php if($logo_url): ?> //変数logo_urlに値が入っていれば

	<div class="logo"><a href="<?php echo home_url( '/' ); >"><img src="<?php echo get_the_logo_url(); ?>" alt="<?php bloginfo('name'); ?>" /></a></div>

<?php else: ?>//変数logo_urlの値が空なら
	<div class="title"><a href="<?php echo home_url( '/' ); >"><?php bloginfo('name'); ?></a></div>

<?php endif; ?>