Twenty Twelve カスタマイズ

何点かTwentyTwelveのカスタマイズについてご質問をいただきましたのでここでまとめてみます。

目次

  • 子テーマのつくりかた
  • 他記事へのリンク
  • アーカイブタイトル("カテゴリー別アーカイブ:")を変更
  • 続きを読む → 削除
  • 投稿日の位置 変更
  • 「カテゴリー:」・「タグ:」を「Categories:」・「Tags:」と英語表記に
  • 検索結果を抜粋ではなく「続きを読む」へ変更
  • コメントを停止する
  • "コメントは停止中です。"を非表示
  • titleタグをカスタマイズ

子テーマのつくりかた

これは、テーマに関係なく共通です。
子テーマを作成しなくてもテーマ内のファイルを直接変更することによってカスタマイズはもちろん可能です。が、テーマをバージョンアップするたびに上書かれてしまうため再度各ファイルに対して変更を行う必要があります。
どちらを選ぶかは、ご自身の判断で行えばいい と個人的には思います。

変更手順

Twenty Twelveを例にすると、テーマの各種ファイルが以下のディレクトリにあると思います。
/wp-content/themes/twentytwelve (以下、「親テーマ」とします)
** 親テーマ - 子テーマを作成するもととなるテーマ(今回だとTwenty Twelve)

  1. 子テーマのディレクトリを作成 (例にとって、「twelve_child」とします。)
    /wp-content/themes/twelve_child(以下、「子テーマ」とします)
  2. ファイルstyle.cssをコピー
    「親テーマ」から「子テーマ」へコピー
  3. 「twelve_child」を「Twenty Twelve」の子であると認知させる
    style.css@子テーマを以下のように変更してください。

    /*  変更前 */
    /*
    Theme Name: Twenty Twelve
    .....
    */
    /*  変更後 */
    /*
    Theme Name: twelve_child
    Template: twentytwelve
    .....
    */
    @import url('../twentytwelve/style.css');
    
  4. これで、管理画面の「外観」→「テーマ」へすすむと"利用可能なテーマ"として「twelve_child」があらわれるので、有効化してください。

style.css@子テーマは、現在あるスタイル設定は消して変更するもののみを
@import url('../twentytwelve/style.css');以下に記述していきます。
そうすることによって、
スタイルを変更しないものはインポートした既存のstyle.css@親テーマの設定を用いて、変更するものをstyle.css@子テーマで上書いていくようになります。

ちょっと特殊な

CSSの子テーマ化は完了したとして、次にテンプレートの子テーマ化を行います。CSS以外はカスタマイズしないということであれば必要ないです。
変更対象のファイルを親テーマディレクトリから子テーマディレクトリにファイルをコピーして、変更することでカスタマイズを行うことが可能です。
1ファイルだけ例外があります。functions.phpは、空ファイルで作成して、変更を行いたい部分だけを記述して下さい。(style.cssと同じ方式です。)


アーカイブタイトル("カテゴリー別アーカイブ:")を変更

// 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">&rarr;</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">&rarr;</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;
}

参考:Overriding twentytwelve_wp_title in a child theme

  • このエントリーをはてなブックマークに追加

関連記事

no image

投稿タイトル(entry-title)を非表示にする

表題通り「投稿タイトルを表示しない」ことは、"投稿ページ"ではあまりないと思いますが、"固定ページ"では意外とあったりします。 編集画面でTitleを入力しないでおけば、それで済むのですが、ペー

Twitterのツイートボタンの設置

Twitterのツイートボタンの設置はプラグインを使用しなくても容易に実装できるようです。 ソーシャルボタン設置のプラグインはこちらにいちおうまとめています。 Tweetボタンの設置コード 公式

Twenty Twelve "コメントをどうぞ"を消す

今回は「Twenty Twelve」で標準で投稿タイトル下に出力されるリンク"コメントをどうぞ"|"Leave a reply"を非表示にする方法を。(コメントやピンバックが1件の場合は"1件のフィー

ie.cssの子テーマ化など Twenty Twelve 1.1での変更点

TwentyTwelveが1.0から1.1にアップデートされたので、勉強もかねていくつか変更点を洗ってみました。 ie.cssを外出し pubdateの削除 rel="generator"

Twenty Fifteen テーマ用フォント "Noto" / "Inconsolata"の使用を止

TwentyFifteenでは、テーマ用のフォントとして「Noto」と「Inconsolata」というフォントをGoogleフォントから引っ張ってきて使用されるようです。 ちなみにどのようなフォント

jQueryをCDNから読み込む

WordPressではデフォルトでjQueryライブラリが同梱されています。この記事では、それをやめて、CDNから読み込み、使用する方法を解説します。 WordPress 3.6 3.9 4.0

no image

パーマリンク・スラッグなどURL カスタマイズ

管理画面からの設定 管理画面の「設定」→「パーマリンク設定」で以下の設定が可能です。 共通設定 色々なタグの組み合わせで、URLをカスタマイズできます。 パーマリンク設定の画面に利用可

アバターサイズの変更など Twenty Twelve 1.3での変更点

Twenty Twelve 1.3 での変更点 アバターサイズの設定ロジック変更 ヘッダ画像の設定ロジック変更 全ての変更点はこちら Changes from twentytwel

no image

ソーシャルボタン設置 プラグイン

各種メジャーなソーシャルメディアボタンを設置できるプラグイン WP Social Bookmarking Light 国産プラグイン。国産ゆえ、はてなボタンの設置も可能 ダウンロード Twe

「All in One SEO Pack」を代替するための準備

「All in One SEO Pack」は、SEO対策に必要な基本的な設定を行ってくれるプラグインです。とある事情で、無効化することになったので代替を行いました。特に問題があるわけではなく、特殊なこ

Comment

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

    PAGE TOP ↑