ブルー・オレンジ・ピンクと選べるテーマ「Bouquet」をカスタマイズ

プレビューはこちら ダウンロード

目次

• ヘッダー画像の高さを変更
• アイキャッチをアップロード
• h1タグがやたら多いので最適化
• 画像をレスポンシブ対応
• フォント「Sorts Mill Goudy」を読み込まないようにする

ヘッダー画像の高さ(サイズ)を変更

デフォルトでは、ヘッダー画像は、高さが1100px、幅が180pxになっています。
以下の例は幅を360pxに変更しています。

add_filter( 'bouquet_custom_header_args', 'my_header_height');
function my_header_height( $header_args){
    $header_args['height'] = 360;
	return $header_args;
}

アイキャッチをアップロード

このテーマはデフォルトではアイキャッチ画像を対応させていませんでしたので、以下のコードを子テーマのfunctions.phpに追加して下さい。これでアイキャッチ画像を投稿できるようになります。

add_action( 'after_setup_theme', 'my_bouquet_setup' );
function my_bouquet_setup(){
    add_theme_support( 'post-thumbnails' );
}

h1タグがやたら多いので最適化

このテーマはh1タグを多用しすぎで、デフォルトで4つほど、そしてウィジェットのタイトルもh1タグで囲われています。ただ、SEO的にh1タグの数については、いろいろと議論があるようですが、このテーマでは「それはないだろ」という箇所にh1タグがあるため、変更を行いました。
スタイルには影響しないようなので、全てpタグにすることとしました。

ナビゲーションメニュー

header.phpを子テーマディレクトリにコピーして、45行目のMenuの要素をh1タグからpタグに変更して下さい。

// [子テーマフォルダ]/header.php
<?php if(0) { // コメントアウト?>
                <h1 class="menu-toggle section-heading"><?php _e( 'Menu', 'bouquet' ); ?></h1>
<?php }       // コメントアウト?>
                <p class="menu-toggle section-heading"><?php _e( 'Menu', 'bouquet' ); ?></p>

次に子画面でのトグル用のスクリプトの変更が必要です。8行目を変更。

// [子テーマフォルダ]/js/navigation.js
//      button    = container.getElementsByTagName( 'h1' )[0], // 変更前
        button    = container.getElementsByTagName( 'p' )[0],  // 変更後

最後に変更したnavigation.jsを読み込むようにします。

// [子テーマフォルダ]/functions.php
function bouquet_scripts_for_nav() {
    wp_deregister_script( 'bouquet-navigation');
    wp_enqueue_script( 'bouquet-navigation', get_stylesheet_directory_uri() . '/js/navigation.js', array(), '20120206', true);
}
add_action( 'wp_enqueue_scripts', 'bouquet_scripts_for_nav');

コンテンツナビゲーションメニュー

次の記事・前の記事へのリンクのタイトルがh1タグに囲われています。
次のコードをそのまま子テーマのfunctions.phpに追加して下さい。

// [子テーマフォルダ]/functions.php
function bouquet_content_nav( $nav_id ) {
    global $wp_query;

    ?>
    <nav id="<?php echo $nav_id; ?>">
        <p class="assistive-text section-heading"><?php _e( 'Post navigation', 'bouquet' ); ?></p>

    <?php if ( is_single() ) : // navigation links for single posts ?>

        <?php previous_post_link( '<div class="nav-previous">%link</div>', '<span class="meta-nav">' . _x( '&larr;', 'Previous post link', 'bouquet' ) . '</span> %title' ); ?>
        <?php next_post_link( '<div class="nav-next">%link</div>', '%title <span class="meta-nav">' . _x( '&rarr;', 'Next post link', 'bouquet' ) . '</span>' ); ?>

    <?php elseif ( $wp_query->max_num_pages > 1 && ( is_home() || is_archive() || is_search() ) ) : // navigation links for home, archive, and search pages ?>

        <?php if ( get_next_posts_link() ) : ?>
        <div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">&larr;</span> Older posts', 'bouquet' ) ); ?></div>
        <?php endif; ?>

        <?php if ( get_previous_posts_link() ) : ?>
        <div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">&rarr;</span>', 'bouquet' ) ); ?></div>
        <?php endif; ?>

    <?php endif; ?>

    </nav><!-- #<?php echo $nav_id; ?> -->
    <?php
}

ウィジェットタイトル

以下のコードをそのまま子テーマのfunctions.phpに追記して下さい。

// [子テーマフォルダ]/functions.php
function my_bouquet_widgets_init() {
    register_sidebar( array(
        'name'          => __( 'Sidebar 1', 'bouquet' ),
        'id'            => 'sidebar-1',
        'description'   => __( 'Drag widgets here to activate the sidebar.', 'bouquet' ),
        'before_widget' => '<aside id="%1$s" class="widget %2$s">',
        'after_widget'  => "</aside>",
        'before_title'  => '<p class="widget-title">',  // タイトルの開始タグ
        'after_title'   => '</p>',                      // タイトルの終了タグ
    ) );
}
add_action( 'init', 'my_bouquet_widgets_init', 11);

画像をレスポンシブ対応

以下を子テーマのstyle.cssに追記して下さい。

// [子テーマフォルダ]/style.css
.entry-content img, .post-format-content img {
    max-width: 100%;
    height: auto;
}

フォント「Sorts Mill Goudy」を読み込まないようにする

「Sorts Mill Goudy」は、アルファベット用の美しいフォントです。
サイトタイトルや投稿タイトルに設定されています。使用しない場合は、以下のコードを子テーマのfunctions.phpに追加して下さい。

function dequeue_sorts_mill_goudy() {
    wp_dequeue_style( 'sorts-mill-goudy');
}
add_action( 'wp_enqueue_scripts', 'dequeue_sorts_mill_goudy', 100);

Related

「続きを読む」(moreタグ)をカスタマイズ Twenty Ten カスタマイズ 投稿タイトルのtitle属性を削除など Twenty Twelve 1.2での変更点 RSS/Atomフィード カスタマイズ テーマ 「Responsive」 カスタマイズ テーブル実装プラグイン「TablePress」 + レスポンシブ対応 パーマリンク・スラッグなどURL カスタマイズ Google Code Prettifyを使用してソースコードを表示をしてくれる「Prettify Code Syntax」