Twenty Twelve カスタマイズ

n__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

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

関連記事

WordPress カレンダー プラグイン

「カレンダー」ウィジェット カスタマイズ・プラグイン

目次 カレンダー移動をajax遷移させるようにする 営業日・休業日を色分けして表示 ページやウィジェットにgoogleカレンダーを追加 カレンダーウィジェットをajax遷移させるよ

wp-dark-lo-1024x768

head内に出力される要素を整理

Wordpressを使用していくうちに、head内がカオスな状態になっていくきますよね。そこで、そういう状態になったものをスッキリさせていこうという試みをやっていこうと思います。 削除方法 取り急

n__twenty-twelve

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

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

1094

テーブル実装プラグイン「TablePress」 + レスポンシブ対応

「TablePress」は、WordPressにテーブルを実装できるプラグインです。専用のレスポンシブ化のプラグインもリリースされています。ダウンロード デモ (PCの場合はブラウザの幅狭めてみたり

TwentyFourteen

Twenty Fourteenカスタマイズ用プラグインと派生テーマ

WordPressの現在のデフォルトテーマ「Twenty Fourteen」のカスタマイズに便利なプラグインと、「Twenty Fourteen」をもとに作成されたテーマのまとめです。 カスタマ

no image

スライダー・ギャラリー プラグイン

WordPressにギャラリーが実装できるプラグインをまとめてみました。 順番はオススメ順です。 Simple Responsive Slider #ショートコード #テンプレート #ウ

wp-dark-lo-1024x768

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

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

TwentyFourteen

Twenty Fourteen クレジットを非表示・変更方法

Twenty Fourteenにも最下部に「Proudly powered by WordPress」というコピーライトが表示されます。それを削除もしくは変更するには、footer.phpを編集して行

wp-dark-lo-1024x768

画像マウスオーバーでキャプションを表示

メディアをアップロードした際に、「キャプション」項目にテキストを設定された画像を挿入した場合はキャプションショートコードが生成され、ページ内の各画像下にその設定したテキストが表示されます。 今回

n__1092

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

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

Comment

Message

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


*

PAGE TOP ↑