ブルー・オレンジ・ピンクと選べるテーマ「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);
  • このエントリーをはてなブックマークに追加

関連記事

「続きを読む」(moreタグ)をカスタマイズ

WordPressではほとんどのテーマでは、複数の投稿を表示するアーカイブページ(カテゴリー別、タグ別、年月日別、作成者別など)ではmoreタグ(<!--more-->)を挿入することで、

テーブル実装プラグイン「TablePress」 + レスポンシブ対応

「TablePress」は、WordPressにテーブルを実装できるプラグインです。専用のレスポンシブ化のプラグインもリリースされています。ダウンロード デモ (PCの場合はブラウザの幅狭めてみたり

テーマ ブックマーク 2013

2012 フリーテーマ トップ 20 Top 20 Free WordPress Themes of 2012 http://ow.ly/wMGjZ ハイクオリティフリーテーマ 3月 20 Top

「最近のコメント」ウィジェットをカスタマイズ

「最近のコメント」ウィジェットは、サイトに投稿されたコメントを新しい日付順に表示してくれます。件数も「ウィジェット」ページで設定できます。(管理画面の「外観」→「ウィジェット」) (削除

Twenty Fifteen カスタマイズ

WordPress 4.1のデフォルトテーマである「Twenty Fifteen」は三世代前の「Twenty Twelve」に似たテーマで非常にシンプルなテーマにまとまっていますね。カスタマイズをまと

Twenty Fourteen "コメントをどうぞ"の非表示と変更方法

Twenty Fourteenでは、デフォルトで投稿ページと各アーカイブページの各投稿のメタ情報欄に「コメントをどうぞ」というコメントフォームへのリンクが設置されます。 それぞれ、コメントが0件の場

コメントフォーム・リストのカスタマイズ

コメント投稿部分は、基本的にはどのテーマでも同じフォームを出力してテーマのstyle.cssで外観を変えています。コメントフォーム欄をカスタマイズするには、プラグインもしくはフックを用いてカスタマイズ

Twenty Twelve カスタマイズ

何点かTwentyTwelveのカスタマイズについてご質問をいただきましたのでここでまとめてみます。 目次 子テーマのつくりかた 他記事へのリンク アーカイブタイトル("カテゴリー別アーカ

アバターサイズの変更など Twenty Twelve 1.3での変更点

Twenty Twelve 1.3 での変更点 アバターサイズの設定ロジック変更 ヘッダ画像の設定ロジック変更 全ての変更点はこちら Changes from twentytwel

投稿タイトルのtitle属性を削除など Twenty Twelve 1.2での変更点

TwentyTwelveが1.1から1.2にアップデートされたので、いくつか変更点を洗ってみました。 (*全てを網羅しているわけではありません) 全ての変更部分は、こちらに記載されています。

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

    PAGE TOP ↑