wordpressの技術情報をメモしたサイトです。

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

wordpressテンプレート制作でサイトタイトル画像をヘッダー管理画面から簡単にUPできるようにする覚え書きです。

参考サイトは、こちら>>

wordpressにはヘッダー画像を管理画面からUPできる機能があります。

それにこちらの参考サイトによると

wp-admin/custom-header.phpに以下のphpコードを付け足せばよいのかな

ということで、custom-header.phpの一番下に以下のコードをコピペした。

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>
<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" 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’ 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 );

すると、上手く表示された。

テンプレートのheader.phpの設定は、

この参考サイトと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; ?>>

とした。

あとはstyle.cssをレイアウトにあわせることで、表示が可能になった。

タイトル画像をアップロードしないときはテキスト表示になる。

そこに、タイトル画像を入れてみた。

上手く画像がアップロードされた。

サイトの表示は、

サイトタイトルが画像になっているぞ!

これで、管理画面より画像をアップロードするだけで、自分だけのオリジナルテンプレートが作れるようになった。

参考サイト様には感謝です。