ブルー・オレンジ・ピンクと選べるテーマ「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);
関連記事
-
-
投稿記事から「(ログイン)ユーザー名」がバレるのを防ぐ
ここ最近、アカウント乗っ取りやセキュリティ事故関連のニュースが相次いでいますが、WordPressで制作されたサイトも標的に会っているようです。一般的な手法としては「ブルートフォースアタック」という手
-
-
head内に出力される要素を整理
Wordpressを使用していくうちに、head内がカオスな状態になっていくきますよね。そこで、そういう状態になったものをスッキリさせていこうという試みをやっていこうと思います。 削除方法 取り急
-
-
パーマリンク・スラッグなどURL カスタマイズ
管理画面からの設定 管理画面の「設定」→「パーマリンク設定」で以下の設定が可能です。 共通設定 色々なタグの組み合わせで、URLをカスタマイズできます。 パーマリンク設定の画面に利用可
-
-
ログイン画面・機能をカスタマイズ
CSSを変更してスタイル変更 ログイン画面用のCSSを用意して子テーマとして使用します。変更したい部分だけを記述して下さい。 // オリジナル /wp-admin/css/login.min.
-
-
Pocketボタンの設置
日本のブログでは、4大SNS(Twitter, はてな, Facebook, Google+)に加えて最近では、Pocket(以前は、Read it later)もよく見かけますよね。追加してみました
-
-
titleタグ(wp_title) カスタマイズ
SEO対策を行う際に、titleタグは重要な要素だと言われています。 「サイトのタイトル」、「キャッチフレーズ」(site_description)、「カテゴリー名」など色々と組み合わせてみることが
-
-
アップグレードで「更新を展開しています... 」のままになった場合の対処のひとつ
久々に出会ったような気がするのでメモです。 ローカルのテスト環境でWordPressを3.7から3.8にアップグレードしようとしたところ、「更新を展開しています... 」で止まってしまい更新処理がす
-
-
「固定ページ」ウィジェット カスタマイズ
「固定ページ」ウィジェットは、そのままではありますが、固定ページの一覧をウィジェットに表示してくれます。 カスタマイズは、管理画面よりいくつかできるようです。 目次 特定の(固定)ページ
-
-
「最近の投稿」ウィジェット カスタマイズ
目次 ウィジェットを削除 標準の設定 特定のカテゴリーに属する投稿を除外 カスタマイズ プラグイン 「最近の投稿」ウィジェットを削除 「最近の投稿」ウィジェット
-
-
Twenty Twelve 投稿者情報を表示/非表示に
TwentyTwelveでは、投稿ページごとに投稿者の情報を掲載することができます。他のテーマでも同様だと思います。こんな感じです。ここでは、掲載と削除の方法について記載します。 表示方法 「