Twenty Twelve カスタマイズ
何点かTwentyTwelveのカスタマイズについてご質問をいただきましたのでここでまとめてみます。
目次
- 子テーマのつくりかた
- 他記事へのリンク
- アーカイブタイトル("カテゴリー別アーカイブ:")を変更
- 続きを読む → 削除
- 投稿日の位置 変更
- 「カテゴリー:」・「タグ:」を「Categories:」・「Tags:」と英語表記に
- 検索結果を抜粋ではなく「続きを読む」へ変更
- コメントを停止する
- "コメントは停止中です。"を非表示
- titleタグをカスタマイズ
子テーマのつくりかた
これは、テーマに関係なく共通です。
子テーマを作成しなくてもテーマ内のファイルを直接変更することによってカスタマイズはもちろん可能です。が、テーマをバージョンアップするたびに上書かれてしまうため再度各ファイルに対して変更を行う必要があります。
どちらを選ぶかは、ご自身の判断で行えばいい と個人的には思います。
変更手順
Twenty Twelveを例にすると、テーマの各種ファイルが以下のディレクトリにあると思います。
/wp-content/themes/twentytwelve (以下、「親テーマ」とします)
** 親テーマ - 子テーマを作成するもととなるテーマ(今回だとTwenty Twelve)
- 子テーマのディレクトリを作成 (例にとって、「twelve_child」とします。)
/wp-content/themes/twelve_child(以下、「子テーマ」とします) - ファイルstyle.cssをコピー
「親テーマ」から「子テーマ」へコピー - 「twelve_child」を「Twenty Twelve」の子であると認知させる
style.css@子テーマを以下のように変更してください。/* 変更前 */ /* Theme Name: Twenty Twelve ..... */
/* 変更後 */ /* Theme Name: twelve_child Template: twentytwelve ..... */ @import url('../twentytwelve/style.css');
これで、管理画面の「外観」→「テーマ」へすすむと"利用可能なテーマ"として「twelve_child」があらわれるので、有効化してください。
@import url('../twentytwelve/style.css');以下に記述していきます。
そうすることによって、
スタイルを変更しないものはインポートした既存のstyle.css@親テーマの設定を用いて、変更するものをstyle.css@子テーマで上書いていくようになります。
ちょっと特殊な
CSSの子テーマ化は完了したとして、次にテンプレートの子テーマ化を行います。CSS以外はカスタマイズしないということであれば必要ないです。
変更対象のファイルを親テーマディレクトリから子テーマディレクトリにファイルをコピーして、変更することでカスタマイズを行うことが可能です。
1ファイルだけ例外があります。functions.phpは、空ファイルで作成して、変更を行いたい部分だけを記述して下さい。(style.cssと同じ方式です。)
子テーマの作成方法の記事
IE用のCSS(ie.css)の子テーマ化
翻訳ファイルの子テーマ化
他記事にもTwenty Twelveのカスタマイズに関して投稿していますのでそちらも参考ください。
投稿者情報を表示/非表示に
投稿日・投稿者を非表示に
"コメントをどうぞ"(タイトル下)を消す
"Proudly powered by WordPress"をCopyrightに変更
アバターサイズの変更
共通
投稿タイトル(entry-title)を非表示にする
「編集(Edit)」リンクの非表示方法
"コメントを残す" 削除・文言を変更する方法
アーカイブタイトル("カテゴリー別アーカイブ:")を変更
// category.php <h1 class="archive-title"><?php printf( __( 'Category Archives: %s', 'twentytwelve' ), '<span>' . single_cat_title( '', false ) . '</span>' ); ?></h1>
「Category Archives: カテゴリー名」が出力されるので(実際は、翻訳されます)、目的のものに書き換えてください。
対象ファイルが異なりますが、他のアーカイブページも変更方法は同じです。
- 「タグ別アーカイブ:」→ tag.php
- 「年別アーカイブ:」「月別アーカイブ:」「日別アーカイブ:」→ archive.php
- 「作成者別アーカイブ:」→ author.php
- 「検索結果:」→ search.php
続きを読む → 削除
カテゴリーページ・タグページなども複数ページの内容を表示する部分は、(get_template_part( 'content', get_post_format() );)を呼び出します。
content.php39行目のContinue reading~をコメントアウトすることで削除されます。
// content.php <div class="entry-content"> <?php if(0){ // コメントアウト↓ ?> <?php the_content( __( 'Continue reading <span class="meta-nav">→</span>', 'twentytwelve' ) ); ?> <?php } // コメントアウト↑ ?> <?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'twentytwelve' ), 'after' => '</div>' ) ); ?> </div><!-- .entry-content -->
こちらの記事も参考に「続きを読む」をカスタマイズ
投稿日の位置 変更
Twenty Twelveでは、カテゴリー・タグ・投稿日・投稿者は<?php twentytwelve_entry_meta(); ?>でひとくくりで出力されます。
例として"タイトル"と"コメントをどうぞ"の間に移動させます。
もと(45行目)をコメントアウトして26行目にを挿入。
// content.php <?php endif; // is_single() ?> <footer class="entry-meta"> <?php twentytwelve_entry_meta(); ?> </footer><!-- .entry-meta --> <?php if ( comments_open() ) : ?>
CSS変更無しを前提にしていますので、footerのまま移動しています。気になる場合は、<div class="entry-meta">などとして、style.cssにdiv.entry-meta記述して下さい。
「カテゴリー:」・「タグ:」を「Categories:」・「Tags:」と英語表記に
翻訳先を変更する
この部分は、翻訳ファイルを使用して表示されています。ここを参考に以下のように追加すると可能です。
#: functions.php:352 msgid "This entry was posted in %1$s and tagged %2$s on %3$s<span class=\"by-author\"> by %4$s</span>." msgstr "Categories: %1$s | Tags: %2$s | 投稿日: %3$s | <span class=\"by-author\">投稿者: %4$s</span>" #: functions.php:354 msgid "This entry was posted in %1$s on %3$s<span class=\"by-author\"> by %4$s</span>." msgstr "Categories: %1$s | 投稿日: %3$s | <span class=\"by-author\">投稿者: %4$s</span>"
子テーマで変更
翻訳させずソースそのものを変更します。
functions.php@親テーマの function twentytwelve_entry_meta() をfucntions.php@子テーマにそのままコピーして以下の部分を変更することで可能です。
// twentytwelve_entry_meta() in functions.php function twentytwelve_entry_meta(){ //..... // Translators: 1 is category, 2 is tag, 3 is the date and 4 is the author's name. if ( $tag_list ) { $utility_text = __( 'Categories: %1$s | Tags: %2$s | 投稿日: %3$s | <span class=\"by-author\">投稿者: %4$s</span>', 'tt_child' ); } elseif ( $categories_list ) { $utility_text = __( 'Categories: %1$s | 投稿日: %3$s | <span class=\"by-author\">投稿者: %4$s</span>', 'tt_child' ); } else { $utility_text = __( 'This entry was posted on %3$s<span class="by-author"> by %4$s</span>.', 'twentytwelve' ); } //..... }
検索結果を抜粋ではなく「続きを読む」へ変更
content.phpを子テーマフォルダへ移動し、35行目のthe_excerptをコメントアウトして、the_contentへ変更を行います。
// content.php <?php if ( is_search() ) : // Only display Excerpts for Search ?> <div class="entry-summary"> <?php //the_excerpt(); ?> <?php the_content( __( 'Continue reading <span class="meta-nav">→</span>', 'twentytwelve' ) ); ?> </div><!-- .entry-summary --> <?php else : ?>
コメントを停止する
設定による停止
テンプレートを編集して停止
TwentyTwelveでは、標準では、以下の4つのページでコメントフォームが表示されるので、コメント欄出力部分をコメントアウトすることで、設定無しに停止・過去のコメントを非表示にすることができます。
- シングルページ (single.php)
- 固定ページのデフォルトテンプレート (page.php)
- 画像(メディア)ページ (image.php)
- (** 固定ページのテンプレート)全幅ページテンプレート、サイドバーなし(page-templates/full-width.php)
コメントを無効にしたいページ(.php)の以下の部分をコメントアウトして下さい。
<?php comments_template( '', true ); ?>
"コメントは停止中です。"を非表示
titleタグをカスタマイズ
Twenty Twelveでは、functions.php内のtwentytwelve_wp_titleでtitleタグを上書きしています。以下のように記述しているようです。
「サイトのタイトル」 | 「キャッチフレーズ」@メインページ
「ページのタイトル] | 「サイトのタイトル」@メインページ以外
シングルページにも「キャッチフレーズ」が付くように変更
ここで、メインページ以外のシングルページやその他のページにも末尾に「キャッチフレーズ」を付与するようにしました。
[ページのタイトル] | 「サイトのタイトル」 | 「キャッチフレーズ」
functions.php(子テーマ)に以下を追加して、is_homeだけでなく全てのページで「キャッチフレーズ」である$site_descriptionを追記しています。
add_action( 'after_setup_theme', 'my_twentytwelve_wp_title'); function my_twentytwelve_wp_title() { remove_filter( 'wp_title', 'twentytwelve_wp_title', 10, 2 ); add_filter( 'wp_title', 'cus_twentytwelve_wp_title', 10, 2 ); } function cus_twentytwelve_wp_title( $title, $sep ) { global $paged, $page; if ( is_feed() ) return $title; // Add the site name. $title .= get_bloginfo( 'name' ); $site_description = get_bloginfo( 'description', 'display' ); // if ( $site_description && ( is_home() || is_front_page() ) ) $title = "$title $sep $site_description"; // Add a page number if necessary. if ( $paged >= 2 || $page >= 2 ) $title = "$title $sep " . sprintf( __( 'Page %s', 'twentytwelve' ), max( $paged, $page ) ); return $title; }
関連記事
-
投稿タイトルのtitle属性を削除など Twenty Twelve 1.2での変更点
TwentyTwelveが1.1から1.2にアップデートされたので、いくつか変更点を洗ってみました。 (*全てを網羅しているわけではありません) 全ての変更部分は、こちらに記載されています。
-
スライダー・ギャラリー プラグイン
WordPressにギャラリーが実装できるプラグインをまとめてみました。 順番はオススメ順です。 Simple Responsive Slider #ショートコード #テンプレート #ウ
-
投稿タイトル(entry-title)を非表示にする
表題通り「投稿タイトルを表示しない」ことは、"投稿ページ"ではあまりないと思いますが、"固定ページ"では意外とあったりします。 編集画面でTitleを入力しないでおけば、それで済むのですが、ペー
-
Twenty Fourteenカスタマイズ用プラグインと派生テーマ
WordPressの現在のデフォルトテーマ「Twenty Fourteen」のカスタマイズに便利なプラグインと、「Twenty Fourteen」をもとに作成されたテーマのまとめです。 カスタマ
-
「最近のコメント」ウィジェットをカスタマイズ
「最近のコメント」ウィジェットは、サイトに投稿されたコメントを新しい日付順に表示してくれます。件数も「ウィジェット」ページで設定できます。(管理画面の「外観」→「ウィジェット」) (削除
-
Twenty Twelve "コメントをどうぞ"を消す
今回は「Twenty Twelve」で標準で投稿タイトル下に出力されるリンク"コメントをどうぞ"|"Leave a reply"を非表示にする方法を。(コメントやピンバックが1件の場合は"1件のフィー
-
アップグレードで「更新を展開しています... 」のままになった場合の対処のひとつ
久々に出会ったような気がするのでメモです。 ローカルのテスト環境でWordPressを3.7から3.8にアップグレードしようとしたところ、「更新を展開しています... 」で止まってしまい更新処理がす
-
"コメントを残す" 削除・文言を変更する方法
コメントフォームに表示される「コメントを残す」はWordPress標準で翻訳される要素です。テーマ側でカスタマイズしていない限り表示されます。 ここでは、この要素を削除したり、文言を変更する方法を紹
-
ie.cssの子テーマ化など Twenty Twelve 1.1での変更点
TwentyTwelveが1.0から1.1にアップデートされたので、勉強もかねていくつか変更点を洗ってみました。 ie.cssを外出し pubdateの削除 rel="generator"
-
アイキャッチにマウスオーバーすると投稿タイトルを表示
WordPressのフォーラムから定期的に流入があるため、対応をいくつか探ってみました。トピックは、「サムネイルにマウスオーバーするとタイトルが表示されるようにしたい」 ちなみに、投稿内のキャプ
Comment
[…] 詳しいやり方は、Twenty Twelve カスタマイズ | Think deeply, Do less, More effectiveに掲載されていた記事を参照しました。 […]
[...] 詳しいやり方は、Twenty Twelve カスタマイズ | Think deeply, Do less, More effectiveに掲載されていた記事を参照しました。 [...]