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をレイアウトにあわせることで、表示が可能になった。
タイトル画像をアップロードしないときはテキスト表示になる。
そこに、タイトル画像を入れてみた。
上手く画像がアップロードされた。
サイトの表示は、
サイトタイトルが画像になっているぞ!
これで、管理画面より画像をアップロードするだけで、自分だけのオリジナルテンプレートが作れるようになった。
参考サイト様には感謝です。