前回の記事では、子テーマを利用したテーマのカスタマイズについて、ご紹介しました。今回からは、WordPressの公式テーマであるTwentyTwelveを例にカスタマイズしていく方法について、ご説明したいと思います。
サイトのデザインで、まず目に入るのは、やはりヘッダー周りでしょう。TwentyTwelveでは、上から順番に、
・サイトのタイトル（テキスト）
・メニュー
・ヘッダー画像
となっていますので、これを、
・ヘッダー画像（サイトのタイトルロゴ）
・メニュー
に変更してみたいと思います。
TwentyTwelveでは、この様なレイアウトです。
これを以下の様に変更します。
header.phpを変更して表示の順番を変えるのが簡単な方法です。
TwentyTwelveのheader.phpの36行目付近は以下の様になっています。
|
36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
<header id="masthead" class="site-header" role="banner"> <hgroup> <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1> <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2> </hgroup> <nav id="site-navigation" class="main-navigation" role="navigation"> <h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3> <a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a> <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?> </nav><!-- #site-navigation --> <?php $header_image = get_header_image(); if ( ! empty( $header_image ) ) : ?> <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo esc_url( $header_image ); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a> <?php endif; ?> </header><!-- #masthead --> |
ヘッダーイメージの記述を最初に移動します。
|
36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
<header id="masthead" class="site-header" role="banner"> <?php $header_image = get_header_image(); if ( ! empty( $header_image ) ) : ?> <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo esc_url( $header_image ); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a> <?php endif; ?> <hgroup> <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1> <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2> </hgroup> <nav id="site-navigation" class="main-navigation" role="navigation"> <h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3> <a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a> <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?> </nav><!-- #site-navigation --> </header><!-- #masthead --> |
外観->ヘッダーの設定で、「ヘッダー画像上にテキストを表示する。」のチェックを外せば設定は終了です。
Sponsored Link
