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

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

関連記事

折りたたみ要素やタブなどをショートコードで実装できるプラグイン「Arconix Shortcodes」

「Arconix Shortcodes」は、投稿内にショートコードでいろいろな要素を実装できるプラグインです。ダウンロードはこちらからできます。ダウンロード・解凍してpluginsディレクトリにアップ

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

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

no image

「最近の投稿」ウィジェット カスタマイズ

目次 ウィジェットを削除 標準の設定 特定のカテゴリーに属する投稿を除外 カスタマイズ プラグイン 「最近の投稿」ウィジェットを削除 「最近の投稿」ウィジェット

ブルー・オレンジ・ピンクと選べるテーマ「Bouquet」をカスタマイズ

プレビューはこちら ダウンロード 目次 ヘッダー画像の高さを変更 アイキャッチをアップロード h1タグがやたら多いので最適化 画像をレスポンシブ対応 フォント「Sorts Mill

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

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

Twenty Fourteen 「投稿日」や"先頭固定表示"を非表示

日付を表示する部分は、全てtwentyfourteen_posted_onに集約されています。該当部分をコメントアウトしたかたちで子テーマのfunctions.phpに追加して下さい。 「投稿日

ツールチップ実装プラグイン「WordPress Tooltip」

「WordPress Tooltip」は、WordPressにツールチップを実装できるプラグインです。jQueryプラグイン「TipTip」を組み込んでいます。プラグインページの対応バージョンは古めで

Lightbox (画像ポップアップ) プラグイン

WordPressで使用できるLightbox(画像ポップアップ)プラグインのまとめ ひとまずインストール・有効化するだけで使用可能です。(3.7/3.8/3.9) blueimp lig

jQueryをCDNから読み込む

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

多言語化プラグイン「qTranslate」

ブログを多言語化しようと思い、プラグイン「qTranslate」を導入してみました。 General Settingsで使用する言語を選択する ★使用する言語を選択 管理画面「設定」⇒「Lang

Comment

Message

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

*

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

PAGE TOP ↑