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; }
関連記事
-
プラグイン関連のJSやCSSの読み込みをフィルター
プラグインをインストールしていくとheadやfooter内がCSSやJSで溢れていきます。できるだけ、自分で書けるものに関しては、余計なコールが少なくなるので可能な場合はそうしていますが(そうもいかず
-
Twenty Twelve "Open Sans"の使用を止
「Twenty Twelve」では、"スペシャルフォント"ということで「Open sans」を特別にロードしているようです。今のところ使うつもりがないのでリンクしないようにしました(必要になれば戻せば
-
Tumblrの投稿をウィジェットに表示できる「Tumblr Widget」
このブログでは、サイドバーウィジェットに「Tumblr」に投稿したブックマーク一覧を表示させています。プラグインは「Tumblr Widget」を使用しています。ダウンロード 「This plugi
-
テーマ ブックマーク 2013
2012 フリーテーマ トップ 20 Top 20 Free WordPress Themes of 2012 http://ow.ly/wMGjZ ハイクオリティフリーテーマ 3月 20 Top
-
Twenty Eleven カスタマイズ
目次 author-info 消す 作成者(投稿者)を消す 投稿者情報を表示しない proudly powered by wordpressのリンクをコピーライトに変更
-
「続きを読む」(moreタグ)をカスタマイズ
WordPressではほとんどのテーマでは、複数の投稿を表示するアーカイブページ(カテゴリー別、タグ別、年月日別、作成者別など)ではmoreタグ(<!--more-->)を挿入することで、
-
Twenty Ten カスタマイズ
Twenty Tenのカスタマイズについてのまとめです。 目次 コンテンツナビゲーション 非表示 「投稿日」を非表示 「作成者(投稿者)」を非表示 "コメントをどうぞ"("leave a
-
テーブル実装プラグイン「TablePress」 + レスポンシブ対応
「TablePress」は、WordPressにテーブルを実装できるプラグインです。専用のレスポンシブ化のプラグインもリリースされています。ダウンロード デモ (PCの場合はブラウザの幅狭めてみたり
-
テーマ ブックマーク 2014
有料 技術系・ガジェットサイトテーマ 30 Blog & Magazine Style WordPress Themes for Tech & Gadget Sites
-
Twenty Twelve "コメントをどうぞ"を消す
今回は「Twenty Twelve」で標準で投稿タイトル下に出力されるリンク"コメントをどうぞ"|"Leave a reply"を非表示にする方法を。(コメントやピンバックが1件の場合は"1件のフィー
Comment
[…] 詳しいやり方は、Twenty Twelve カスタマイズ | Think deeply, Do less, More effectiveに掲載されていた記事を参照しました。 […]
[...] 詳しいやり方は、Twenty Twelve カスタマイズ | Think deeply, Do less, More effectiveに掲載されていた記事を参照しました。 [...]