サイトロゴ画像とヘッダー画像に対応するカスタムヘッダー

WordPress > サイトロゴ画像とヘッダー画像に対応するカスタムヘッダー

ワードプレテーマで比較的新しいデフォルトテーマの中には、「カスタムロゴ」というカスタマイズ機能が備わっており、これはヘッダー上にロゴ画像表示させる機能なのですが、これを改良してロゴ画像をアップロードするとデフォルトで表示されているテキストタイトルと入れ替わるように変更します。

デフォルトテーマtwentysixteenの場合、外観→カスタマイズ→サイト基本情報で任意のロゴ画像をアップロードすることが出来ます。

画像をアップロードするとトリミング画面が表示されます。
サイトタイトルとロゴ画像を分けて捉えるのであればこれでも良いと思うのですが、デフォルトのテキストタイトルに替わって表示させる画像をロゴ画像と捉えるとシックリこない部分でもあり、画像編集ソフトなどで予めサイズも考慮し作成してある画像を使用する場合、新たにトリミング作業が生じることは稀なはずです。

トリミング作業を済ませると確かにロゴ画像が表示されますが、どうせならタイトルテキストと入れ替わる形で表示されてくれれば・・・と、お感じになってる方もいらっしゃるのではないでしょうか?

そこでロゴ画像をアップロードすると自動的にテキストタイトルと入れ替わって表示され、ロゴ画像を削除すると従来のテキストタイトルが表示されるようにします。

ロゴ画像のアップロードにより、デフォルトで表示されるテキストタイトルに替わってロゴ画像が表示されます。

これを可能にするにはfunctionsファイル内に下記を加えます。
翻訳用のテキストドメイン「templatefactory001」はご使用テーマのものに変更してください。
流れとしては従来のカスタムロゴ機能は残したまま、新たにロゴ画像アップロード領域を設けます。

/*
 * Logo Image.
 */
define('LOGO_SECTION', 'logo_section');
define('LOGO_IMAGE_URL', 'logo_image_url');
function themename_theme_customizer($wp_customize)
{
	$wp_customize->add_section(LOGO_SECTION, array(
		'title' => __('Site Logo', 'templatefactory001'),
		'priority' => 10,
		'description' => __('Image Settings', 'templatefactory001')
	));
	
	$wp_customize->add_setting(LOGO_IMAGE_URL, array(
		'sanitize_callback' => 'esc_url_raw'
	));
	
	$wp_customize->add_control(new WP_Customize_Image_Control($wp_customize, LOGO_IMAGE_URL, array(
		'label' => __('Image upload', 'templatefactory001'),
		'section' => LOGO_SECTION,
		'settings' => LOGO_IMAGE_URL,
		'description' => __('When you upload the image will be replaced with the site title text To 40px or less height', 'templatefactory001')
	)));
}
add_action('customize_register', 'themename_theme_customizer');

function get_the_site_logo()
{
	return esc_url(get_theme_mod(LOGO_IMAGE_URL));
}

headerファイル内のテキストタイトルを表示する箇所を下記に変更します。class属性は適宜、変更してご使用ください。

<?php
if ( get_the_site_logo() ): ?>
<h1 class='site-logo'><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><img src='<?php echo get_the_site_logo(); ?>' alt='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>'></a></h1>
<?php else : ?>
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
<?php endif; ?>

ロゴ画像の設定が行われていればロゴ画像を表示させ、されていなければデフォルトのテキストタイトルを表示します。
適宜、CSSでロゴ画像の位置決めを行ってください。
よくお解りにならない場合は、テンプレートファクトリーで無料配布しているワードプレステーマをご参考にしてください。テンプレートファクトリーのワードプレステーマはすべてこの仕様になっております。