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

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

関連記事

管理画面のCSSをカスタマイズ

管理画面のスタイルを変更したくなったので、カスタマイズしてみました。一例として以下を取り上げてみます。 「投稿一覧」の画面でカスタムフィールドが追加されていくと、そんなに幅が必要のないところが長くな

no image

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

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

投稿タイトルのtitle属性を削除など Twenty Twelve 1.2での変更点

TwentyTwelveが1.1から1.2にアップデートされたので、いくつか変更点を洗ってみました。 (*全てを網羅しているわけではありません) 全ての変更部分は、こちらに記載されています。

no image

アップグレードで「更新を展開しています... 」のままになった場合の対処のひとつ

久々に出会ったような気がするのでメモです。 ローカルのテスト環境でWordPressを3.7から3.8にアップグレードしようとしたところ、「更新を展開しています... 」で止まってしまい更新処理がす

テーマ 「Responsive」 カスタマイズ

デモ | ダウンロード 目次 投稿日 非表示 作成者 非表示 "Responsive Theme powered by WordPress" 削除 投稿日 非表示 オリ

Twenty Twelve "Open Sans"の使用を止

「Twenty Twelve」では、"スペシャルフォント"ということで「Open sans」を特別にロードしているようです。今のところ使うつもりがないのでリンクしないようにしました(必要になれば戻せば

no image

テーマ ブックマーク 2014

有料 技術系・ガジェットサイトテーマ 30 Blog & Magazine Style WordPress Themes for Tech & Gadget Sites

Google Code Prettifyを使用してソースコードを表示をしてくれる「Prettify Code Syntax」

Prettify Code Syntaxは、WordPressでGoogle Code Prettifyを使用してソースコードを表示してくれるプラグインです。 プラグインダウンロード Google

JSやCSSに自動で付与されるバージョン番号を非表示に

Wordpressでは、JSやCSSがロードされる際にlinkタグやscriptタグ内にWordpressやプラグインもしくはスクリプトそのもののバージョン番号が付与されます。「?ver=」で検索して

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

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

Comment

Message

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

*

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

    PAGE TOP ↑