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

関連記事

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

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

ログイン画面・機能をカスタマイズ

CSSを変更してスタイル変更 ログイン画面用のCSSを用意して子テーマとして使用します。変更したい部分だけを記述して下さい。 // オリジナル /wp-admin/css/login.min.

Twenty Thirteen テーマ用フォント "Source Sans Pro" / "Bitter"の使用を止

TwentyThirteenでは、テーマ用のフォントとして「Source Sans Pro」と「Bitter」というフォントをGoogleフォントから引っ張ってきて使用されるようです。 ちなみにどの

「All in One SEO Pack」を代替するための準備

「All in One SEO Pack」は、SEO対策に必要な基本的な設定を行ってくれるプラグインです。とある事情で、無効化することになったので代替を行いました。特に問題があるわけではなく、特殊なこ

「カレンダー」ウィジェット カスタマイズ・プラグイン

目次 カレンダー移動をajax遷移させるようにする 営業日・休業日を色分けして表示 ページやウィジェットにgoogleカレンダーを追加 カレンダーウィジェットをajax遷移させるよ

RSS/Atomフィード カスタマイズ

RSSフィードのカスタマイズ 標準で出力されるフィード WordPressの各種ページで出力されるフィードは以下になると思います。 投稿:投稿のフィード @全てのページ サイトのコメント:

no image

投稿タイトル(entry-title)を非表示にする

表題通り「投稿タイトルを表示しない」ことは、"投稿ページ"ではあまりないと思いますが、"固定ページ"では意外とあったりします。 編集画面でTitleを入力しないでおけば、それで済むのですが、ペー

Tumblrの投稿をウィジェットに表示できる「Tumblr Widget」

このブログでは、サイドバーウィジェットに「Tumblr」に投稿したブックマーク一覧を表示させています。プラグインは「Tumblr Widget」を使用しています。ダウンロード 「This plugi

ツールチップ実装プラグイン「WordPress Tooltip」

「WordPress Tooltip」は、WordPressにツールチップを実装できるプラグインです。jQueryプラグイン「TipTip」を組み込んでいます。プラグインページの対応バージョンは古めで

Twenty Fifteen カスタマイズ

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

Message

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

*

PAGE TOP ↑