ブルー・オレンジ・ピンクと選べるテーマ「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);
関連記事
-
-
テーマ 「Responsive」 カスタマイズ
デモ | ダウンロード 目次 投稿日 非表示 作成者 非表示 "Responsive Theme powered by WordPress" 削除 投稿日 非表示 オリ
-
-
「続きを読む」(moreタグ)をカスタマイズ
WordPressではほとんどのテーマでは、複数の投稿を表示するアーカイブページ(カテゴリー別、タグ別、年月日別、作成者別など)ではmoreタグ(<!--more-->)を挿入することで、
-
-
Twenty Twelve "Open Sans"の使用を止
「Twenty Twelve」では、"スペシャルフォント"ということで「Open sans」を特別にロードしているようです。今のところ使うつもりがないのでリンクしないようにしました(必要になれば戻せば
-
-
「カレンダー」ウィジェット カスタマイズ・プラグイン
目次 カレンダー移動をajax遷移させるようにする 営業日・休業日を色分けして表示 ページやウィジェットにgoogleカレンダーを追加 カレンダーウィジェットをajax遷移させるよ
-
-
Twenty Twelve 投稿日・投稿者を非表示に
TwentyTwelveのちょっとした部分をカスタマイズする方法を紹介していきます。 また、子テーマで出力部分を変更する際に、翻訳が必要な部分//_()の部分がでてきますので、以下の投稿も参考に
-
-
投稿記事から「(ログイン)ユーザー名」がバレるのを防ぐ
ここ最近、アカウント乗っ取りやセキュリティ事故関連のニュースが相次いでいますが、WordPressで制作されたサイトも標的に会っているようです。一般的な手法としては「ブルートフォースアタック」という手
-
-
Twenty Fourteen カスタマイズ
「Twenty Fourteen」はWordPress 3.8のデフォルトテーマです。TwentyThirteenから彩りもガラッとかわってますね。個人的には、すごく好きなデザイン。 Twent
-
-
投稿タイトル(entry-title)を非表示にする
表題通り「投稿タイトルを表示しない」ことは、"投稿ページ"ではあまりないと思いますが、"固定ページ"では意外とあったりします。 編集画面でTitleを入力しないでおけば、それで済むのですが、ペー
-
-
Twenty Fifteen カスタマイズ
WordPress 4.1のデフォルトテーマである「Twenty Fifteen」は三世代前の「Twenty Twelve」に似たテーマで非常にシンプルなテーマにまとまっていますね。カスタマイズをまと
-
-
Twenty Eleven カスタマイズ
目次 author-info 消す 作成者(投稿者)を消す 投稿者情報を表示しない proudly powered by wordpressのリンクをコピーライトに変更







