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

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

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

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

「WordPressのヘッダー管理画面からサイトタイトル画像をアップロードできるようにする」への3件のフィードバック

  1. はじめまして。
    そのままコピペさせていただいたのですが、一度、画像を登録した後にサイトタイトル画像の方の保存をクリックすると「ファイルをアップロードできませんでした。」というメッセージになってしまいます。
    画像を選択しなおした場合やヘッダー画像の方をクリックした場合は大丈夫なのですが、何も操作せずにサイトタイトル画像の方の保存をクリックすると上記のメッセージが出てしまいます。もし原因がわかればご教授していただきたいです。

コメントを残す

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