WordPressのヘッダー管理画面からサイトタイトル画像をアップロードできるようにする

WordPressのテーマで、サイトのタイトルを画像で表示できたらと思うことはありませんか？
今回は、サイトのタイトル画像をヘッダー画像のように管理画面からアップロードできるようにする方法を紹介します。

WordPressは、ヘッダー画像をサポートしているテーマを利用していると、メニューに「ヘッダー」というメニューが追加され、カスタムヘッダーの管理ができるようになります。
このカスタムヘッダーの管理画面に、フォームを追加するには、「変更を保存」ボタンの直上にあるカスタムヘッダー管理画面内ただ１つの custom_header_options というフックが利用できます。

ただし、このフックポイントは、下図のようにenctype属性の指定がないフォームの内側にあるため、単にアップロードフォームを追加するだけでは、ファイルのアップロードはできません。

そこで、フックした関数内部で一旦フォームを閉じ、再度 enctype属性を付けたフォームを開始するようにします。

あとは、admin-headのページ固有のフックにて、ヘッダー画像のアップロード処理（wp-admin/custom-header.phpのstep_2メソッド）に倣って、アップロードされたファイルの登録処理を加えて完了です。
※ ヘッダー画像のような、サイズ調整機能は出来ないのであしからず。

define( 'SITE_TITLE_IMAGE_WIDTH', 300 );
define( 'SITE_TITLE_IMAGE_HEIGHT', 80 );

function site_title_image_form() {
	if ( $site_title_image_src = get_theme_mod( 'site_title_image' ) ) {
		$title_preview = '<div style="width: ' . SITE_TITLE_IMAGE_WIDTH . 'px; height: ' . SITE_TITLE_IMAGE_HEIGHT . 'px; background: url( ' . $site_title_image_src . ' ) no-repeat;">&nbsp;</div>';
	} else {
		$title_preview = '<p>サイトタイトル画像が設定されていません。</p>';
	}
?>
<?php wp_nonce_field( 'custom-header-options', '_wpnonce-custom-header-options' ); ?>

<?php submit_button( null, 'primary', 'save-header-options' ); ?>
</form>
<form enctype="multipart/form-data" method="post" action="<?php echo esc_attr( add_query_arg( 'step', 1 ) ) ?>">
<h3>サイトタイトル画像</h3>
<table class="form-table">
	<tbody>
		<tr>
			<th>プレビュー</th>
			<td><?php echo $title_preview; ?></td>
		</tr>
		<tr>
			<th>画像をアップロード</th>
			<td>
				<input type="file" sise="50" id="site_title" name="site_title" />
			</td>
		</tr>
		<tr>
			<th>画像をリセット</th>
			<td>
				<p>この操作を行うとサイトタイトル画像を削除します。変更した設定は復元できません。</p>
				<input type="submit" name="remove_site_title_image" id="remove_site_title_image" class="button" value="サイトタイトル画像を削除"  />
			</td>
		</tr>
	</tbody>
</table>
<?php
}
add_action( 'custom_header_options', 'site_title_image_form', 1000 );


function site_title_image_upload_process() {
	if ( isset( $_POST['remove_site_title_image'] ) ) {
		check_admin_referer( 'custom-header-options', '_wpnonce-custom-header-options' );
		remove_theme_mod( 'site_title_image' );
		return;
	} elseif ( isset( $_FILES['site_title'] ) ) {
		check_admin_referer( 'custom-header-options', '_wpnonce-custom-header-options');
	
		if ( ! current_theme_supports( 'custom-header-uploads' ) )
			wp_die( 'Cheatin&#8217; uh?' );
	
		$overrides = array('test_form' => false);
		$file = wp_handle_upload($_FILES['site_title'], $overrides );
	
		if ( isset($file['error']) )
			wp_die( $file['error'],  __( 'Image Upload Error' ) );
	
		$url = $file['url'];
		$type = $file['type'];
		$file = $file['file'];
		$filename = basename($file);
	
		// Construct the object array
		$object = array(
			'post_title' => $filename,
			'post_content' => $url,
			'post_mime_type' => $type,
			'guid' => $url
		);
		
		$id = wp_insert_attachment($object, $file);
		list( $width, $height, $type, $attr ) = getimagesize( $file );
	
		wp_update_attachment_metadata( $id, wp_generate_attachment_metadata( $id, $file ) );
	
		set_theme_mod( 'site_title_image', esc_url($url) );
	}
}

function add_upload_process_action() {
	global $custom_image_header;
	add_action( 'admin_head-' . $custom_image_header->page, 'site_title_image_upload_process' );
}
add_action( 'admin_menu', 'add_upload_process_action', 11 );

Twenty Tenでサイトタイトル画像を表示する場合のサンプルコードは、下記の通り。

				<<?php echo $heading_tag; ?> id="site-title">
					<span>
						<?php $style_attr = get_theme_mod( 'site_title_image' ) ? ' style="display: block; width: ' . SITE_TITLE_IMAGE_WIDTH . 'px; height: ' . SITE_TITLE_IMAGE_HEIGHT . 'px; background: url( ' . get_theme_mod( 'site_title_image' ) . ' ) no-repeat; text-indent: -9999px"' : ''; ?>
							<a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"<?php echo $style_attr;?>><?php bloginfo( 'name' ); ?></a>
					</span>
				</<?php echo $heading_tag; ?>>