ブルー・オレンジ・ピンクと選べるテーマ「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( '←', 'Previous post link', 'bouquet' ) . '</span> %title' ); ?> <?php next_post_link( '<div class="nav-next">%link</div>', '%title <span class="meta-nav">' . _x( '→', '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">←</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">→</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);
関連記事
-
-
ie.cssの子テーマ化など Twenty Twelve 1.1での変更点
TwentyTwelveが1.0から1.1にアップデートされたので、勉強もかねていくつか変更点を洗ってみました。 ie.cssを外出し pubdateの削除 rel="generator"
-
-
投稿タイトルのtitle属性を削除など Twenty Twelve 1.2での変更点
TwentyTwelveが1.1から1.2にアップデートされたので、いくつか変更点を洗ってみました。 (*全てを網羅しているわけではありません) 全ての変更部分は、こちらに記載されています。
-
-
独自のCSSやJSを読み込む
WordPressで、プラグインではなく自作したりダウンロードしてきたCSSやJS(プラグイン)を読み込んだりするケースがあると思います。今回は、その際のCSSやJSファイルの使用方法をまとめてみまし
-
-
Google+ プラスワン(+1)ボタンの設置
Google+の+1ボタンの設置はプラグインを使用しなくても容易に実装できるようです。ソーシャルボタン設置のプラグインはこちらにいちおうまとめています。 プラスワン(+1)ボタンの設置コード 公式
-
-
開発やテストに便利なプラグイン
開発やカスタマイズに使えそうなプラグインを集めてみました。 テーマのカスタマイズには、使用中のテンプレートファイルなどを表示してくれると便利ですね。個人的には、テーマ開発の際に、実行しているSQ
-
-
パーマリンク・スラッグなどURL カスタマイズ
管理画面からの設定 管理画面の「設定」→「パーマリンク設定」で以下の設定が可能です。 共通設定 色々なタグの組み合わせで、URLをカスタマイズできます。 パーマリンク設定の画面に利用可
-
-
Twenty Thirteen テーマ用フォント "Source Sans Pro" / "Bitter"の使用を止
TwentyThirteenでは、テーマ用のフォントとして「Source Sans Pro」と「Bitter」というフォントをGoogleフォントから引っ張ってきて使用されるようです。 ちなみにどの
-
-
「カレンダー」ウィジェット カスタマイズ・プラグイン
目次 カレンダー移動をajax遷移させるようにする 営業日・休業日を色分けして表示 ページやウィジェットにgoogleカレンダーを追加 カレンダーウィジェットをajax遷移させるよ
-
-
Twenty Twelve 投稿者情報を表示/非表示に
TwentyTwelveでは、投稿ページごとに投稿者の情報を掲載することができます。他のテーマでも同様だと思います。こんな感じです。ここでは、掲載と削除の方法について記載します。 表示方法 「
-
-
サイトのキャプチャをショートコードで生成してくれる「Browser Shots」
外部のサイトを紹介する際にそのサイトのキャプチャが添えられているとイメージがつかみやすくなりクリックのモチベーションが上がるような気がします。 今回は、ショートコード一行でサイトのスクリーンショット