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

関連記事

no image

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

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

titleタグ(wp_title) カスタマイズ

SEO対策を行う際に、titleタグは重要な要素だと言われています。 「サイトのタイトル」、「キャッチフレーズ」(site_description)、「カテゴリー名」など色々と組み合わせてみることが

多言語化プラグイン「qTranslate」

ブログを多言語化しようと思い、プラグイン「qTranslate」を導入してみました。 General Settingsで使用する言語を選択する ★使用する言語を選択 管理画面「設定」⇒「Lang

"コメントを残す" 削除・文言を変更する方法

コメントフォームに表示される「コメントを残す」はWordPress標準で翻訳される要素です。テーマ側でカスタマイズしていない限り表示されます。 ここでは、この要素を削除したり、文言を変更する方法を紹

管理画面のCSSをカスタマイズ

管理画面のスタイルを変更したくなったので、カスタマイズしてみました。一例として以下を取り上げてみます。 「投稿一覧」の画面でカスタムフィールドが追加されていくと、そんなに幅が必要のないところが長くな

Twenty Twelve "コメントをどうぞ"を消す

今回は「Twenty Twelve」で標準で投稿タイトル下に出力されるリンク"コメントをどうぞ"|"Leave a reply"を非表示にする方法を。(コメントやピンバックが1件の場合は"1件のフィー

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

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

Twenty Twelve 投稿者情報を表示/非表示に

TwentyTwelveでは、投稿ページごとに投稿者の情報を掲載することができます。他のテーマでも同様だと思います。こんな感じです。ここでは、掲載と削除の方法について記載します。 表示方法 「

no image

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

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

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

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

Message

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

*

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

    PAGE TOP ↑