wordpressテンプレートでサイトタイトル画像をヘッダー管理画面からアップロードできるようにする
- 2012年09月01日
- 記事投稿
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;"> </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をレイアウトにあわせることで、表示が可能になった。
タイトル画像をアップロードしないときはテキスト表示になる。
そこに、タイトル画像を入れてみた。

上手く画像がアップロードされた。
サイトの表示は、

サイトタイトルが画像になっているぞ!
これで、管理画面より画像をアップロードするだけで、自分だけのオリジナルテンプレートが作れるようになった。
参考サイト様には感謝です。



