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

関連記事

Twenty Twelve "Proudly powered by WordPress"をCopyrightに変更

標準でページの最下部に表示される"Proudly ~"を変更します。 子テーマフォルダにfooter.phpをコピーし、以下のように編集を行ってください。リンクを外して、表示部分を書き換えるだけです

ie.cssの子テーマ化など Twenty Twelve 1.1での変更点

TwentyTwelveが1.0から1.1にアップデートされたので、勉強もかねていくつか変更点を洗ってみました。 ie.cssを外出し pubdateの削除 rel="generator"

独自のCSSやJSを読み込む

WordPressで、プラグインではなく自作したりダウンロードしてきたCSSやJS(プラグイン)を読み込んだりするケースがあると思います。今回は、その際のCSSやJSファイルの使用方法をまとめてみまし

「Contact Form 7」 メッセージの送信に失敗~

この修正はWordPress 3.5で行われているようです。(~3.4.2) Contact Form 7で以下のエラーメッセージが出る場合は、確認してみて下さい。 「メッセージの送信に失敗

no image

ソーシャルボタン設置 プラグイン

各種メジャーなソーシャルメディアボタンを設置できるプラグイン WP Social Bookmarking Light 国産プラグイン。国産ゆえ、はてなボタンの設置も可能 ダウンロード Twe

開発やテストに便利なプラグイン

開発やカスタマイズに使えそうなプラグインを集めてみました。 テーマのカスタマイズには、使用中のテンプレートファイルなどを表示してくれると便利ですね。個人的には、テーマ開発の際に、実行しているSQ

ナビゲーションメニューに検索フォームを追加

メニュー内に検索フォームを追加したいという問い合わせをいただいたので試してみました。 メニューのつくられかた まずは、WordPressでメニューがつくられる手順を説明します。 箱をつく

Twenty Fourteen カスタマイズ

「Twenty Fourteen」はWordPress 3.8のデフォルトテーマです。TwentyThirteenから彩りもガラッとかわってますね。個人的には、すごく好きなデザイン。 Twent

no image

「編集(Edit)」リンクの非表示方法

ログインした状態で投稿ページを開くと投稿内や各コメントに各編集ページへリンクしてくれる「編集」リンクが表示されます。(繰り返し言いますが、自サイトにログインしているユーザにしか見えません。) こ

no image

Google+ プラスワン(+1)ボタンの設置

Google+の+1ボタンの設置はプラグインを使用しなくても容易に実装できるようです。ソーシャルボタン設置のプラグインはこちらにいちおうまとめています。 プラスワン(+1)ボタンの設置コード 公式

Message

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

*

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

PAGE TOP ↑