Twenty Fifteen カスタマイズ

WordPress 4.1のデフォルトテーマである「Twenty Fifteen」は三世代前の「Twenty Twelve」に似たテーマで非常にシンプルなテーマにまとまっていますね。カスタマイズをまとめて投稿します。「コレはどうすんの?」というのをコメントなどでいただけたらこちらの投稿に追記していこうと思っています。

目次

  • 子テーマ作成方法
  • メタ情報 twentyfifteen_entry_meta「投稿日」「投稿者」など
  • "proudly powered ~"を非表示
  • コメント欄削除

また、Twenty Fifteen用のプラグインもいくつかリリースされているようです。

子テーマ作成方法

Twenty Fifteenのテーマのテンプレートファイルは/wp-content/themes/twentyfifteenに配置されています。これを親テーマといいます。(カスタマイズもとのテーマ)
ここでも述べましたが、子テーマを作成しなくてもテーマ内のファイルを直接変更することでカスタマイズはもちろん可能ですが、テーマをバージョンアップするたびに上書かれてしまうため再度各ファイルに対して変更を行う必要があります。
どちらを選ぶかは、ご自身の判断で行えばいい と個人的には思います。

子テーマ用のディレクトリ(フォルダ)を作成

まず、子テーマ用のディレクトリ(フォルダ)を作成して下さい。名前はなんでもいいです。この投稿では"fifteen-child"とします。
/wp-content/themes/fifteen-child
親テーマ下にあるstyle.cssを子テーマにコピーして、コメント内のTheme NameとTemplateを記述します。Theme Nameはわかりやすい名前で自由に、Templateは"twentyfifteen"として下さい。
これで、twentyfifteenを親テーマとして、"Twenty Fifteen Child"という子テーマが作成できます。あとは@import以降にスタイルの変更部分のみを追記していくことで上書きをしていきます。

/* 変更前 */
/*
Theme Name: Twenty Fifteen
........
*/
/*  /wp-content/themes/fifteen-child/style.css */
/*
Theme Name: Twenty Fifteen Child
Template: twentyfifteen
.....
*/
@import url('../twentyfifteen/style.css');

/* 以降に変更したいスタイルのみを追記していく */
....

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

テンプレートの子テーマ化

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

メタ情報 twentyfifteen_entry_meta

Twenty Fifteenでは「投稿」ページに「投稿日(更新日)」「投稿者」「カテゴリ」「タグ」などが、「メディア」ページでは、画像の縦横サイズが表示されます。これらは、twentyfifteen_entry_metaという関数が一手に引き受けて出力を行っており、非表示にする場合は、子テーマのfunnctions.phpで関数の内容を上書きするかスタイルシート(style.css)を設定することで実現できます。
**「更新日」は「投稿日」と異なる場合のみ(HTMLが)出力されますが、表示は隠されます。

スタイルシートで非表示

表示は隠れますがHTMLには出力されます。

/*  /wp-content/themes/fifteen-child/style.css */
.sticky-post {  	display: none;} /*"注目"を非表示 */
.posted-on {    	display: none;} /*「投稿日」を非表示 */
.byline {       	display: none;} /*「投稿者」を非表示 */
.cat-links {    	display: none;} /*「カテゴリー」を非表示 */
.tags-links {   	display: none;} /*「タグ」を非表示 */
.comments-link {	display: none;} /*「コメントをどうぞ」「~件のコメント」を非表示 */

twentyfifteen_entry_metaをオーバーライドして非表示

まずそのまま子テーマのfunctions.phpにペーストし、非表示にしたい該当箇所を削除して下さい。場所は下のコードのコメント参考にして下さい。

/* オリジナル:/wp-content/themes/twentyfifteen/inc/template-tags.php
/*  /wp-content/themes/fifteen-child/functions.php に追記*/
/**
 * Prints HTML with meta information for the categories, tags.
 *
 * @since Twenty Fifteen 1.0
 */
function twentyfifteen_entry_meta() {

    // 上部に表示される"注目" (ここから) 「この投稿を先頭に固定表示」にチェックして投稿すると付与される。
    if ( is_sticky() && is_home() && ! is_paged() ) {
        printf( '<span class="sticky-post">%s</span>', __( 'Featured', 'twentyfifteen' ) );
    }

    // 投稿フォーマットを表示 (ここから) 「標準」以外 (「アサイド」「画像」「動画」「引用」「リンク」「ギャラリー」「ステータス」「音声」「チャット」)
    $format = get_post_format();
    if ( current_theme_supports( 'post-formats', $format ) ) {
        printf( '<span class="entry-format">%1$s<a href="%2$s">%3$s</a></span>',
            sprintf( '<span class="screen-reader-text">%s </span>', _x( 'Format', 'Used before post format.', 'twentyfifteen' ) ),
            esc_url( get_post_format_link( $format ) ),
            get_post_format_string( $format )
        );
    }

    // 「投稿日」・「更新日」 @投稿ページ/メディアページ (ここから)
    if ( in_array( get_post_type(), array( 'post', 'attachment' ) ) ) {
        $time_string = '<time class="entry-date published updated" datetime="%1$s">%2$s</time>';

        if ( get_the_time( 'U' ) !== get_the_modified_time( 'U' ) ) {
            $time_string = '<time class="entry-date published" datetime="%1$s">%2$s</time><time class="updated" datetime="%3$s">%4$s</time>';
        }

        $time_string = sprintf( $time_string,
            esc_attr( get_the_date( 'c' ) ),
            get_the_date(),
            esc_attr( get_the_modified_date( 'c' ) ),
            get_the_modified_date()
        );

        printf( '<span class="posted-on"><span class="screen-reader-text">%1$s </span><a href="%2$s" rel="bookmark">%3$s</a></span>',
            _x( 'Posted on', 'Used before publish date.', 'twentyfifteen' ),
            esc_url( get_permalink() ),
            $time_string
        );
    }

    // 「投稿者」「カテゴリー」「タグ」 @投稿ページ
    if ( 'post' == get_post_type() ) {
        // 投稿者表示 (ここから)
        if ( is_singular() || is_multi_author() ) {
            printf( '<span class="byline"><span class="author vcard"><span class="screen-reader-text">%1$s </span><a class="url fn n" href="%2$s">%3$s</a></span></span>',
                _x( 'Author', 'Used before post author name.', 'twentyfifteen' ),
                esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ),
                get_the_author()
            );
        }// 投稿者表示 (ここまで)
        // カテゴリー表示 (ここから)
        $categories_list = get_the_category_list( _x( ', ', 'Used between list items, there is a space after the comma.', 'twentyfifteen' ) );
        if ( $categories_list && twentyfifteen_categorized_blog() ) {
            printf( '<span class="cat-links"><span class="screen-reader-text">%1$s </span>%2$s</span>',
                _x( 'Categories', 'Used before category names.', 'twentyfifteen' ),
                $categories_list
            );
        }// カテゴリー表示 (ここまで)
        // タグ表示 (ここから)
        $tags_list = get_the_tag_list( '', _x( ', ', 'Used between list items, there is a space after the comma.', 'twentyfifteen' ) );
        if ( $tags_list ) {
            printf( '<span class="tags-links"><span class="screen-reader-text">%1$s </span>%2$s</span>',
                _x( 'Tags', 'Used before tag names.', 'twentyfifteen' ),
                $tags_list
            );
        }// タグ表示 (ここまで)
    }

    // 「画像サイズ(横 x 縦)」表示 @メディアページ
    if ( is_attachment() && wp_attachment_is_image() ) {
        // Retrieve attachment metadata.
        $metadata = wp_get_attachment_metadata();

        printf( '<span class="full-size-link"><span class="screen-reader-text">%1$s </span><a href="%2$s">%3$s &times; %4$s</a></span>',
            _x( 'Full size', 'Used before full size attachment link.', 'twentyfifteen' ),
            esc_url( wp_get_attachment_url() ),
            $metadata['width'],
            $metadata['height']
        );
    }
    // "コメントをどうぞ"、"~件のコメント"表示 @「シングルページ」でなく「パスワード保護」されておらず、「コメント入力可(もしくは1件以上のコメントあり)」の場合
    if ( ! is_single() && ! post_password_required() && ( comments_open() || get_comments_number() ) ) {
        echo '<span class="comments-link">';
        comments_popup_link( __( 'Leave a comment', 'twentyfifteen' ), __( '1 Comment', 'twentyfifteen' ), __( '% Comments', 'twentyfifteen' ) );
        echo '</span>';
    }
}

"proudly powered ~"を非表示

最下段に表示される"proudly powered by wordpress"を非表示にする方法です。
どのテーマでもそうですが、twentyfifteen_creditsは、あらかじめ定義されているアクションフックではなくユーザが自由に定義できるように準備されているようです。

CSSで表示

#colophon {
    display: none;
}

子テーマ

// /wp-content/themes/fifteen-child/footer.php
<?php if(0) { // "proudly powered ~"を非表示?>
     <footer id="colophon" class="site-footer" role="contentinfo">
          <div class="site-info">
               <?php
                    /**
                    * Fires before the Twenty Fifteen footer text for footer customization.
                    *
                    * @since Twenty Fifteen 1.0
                    */
                    do_action( 'twentyfifteen_credits' );
               ?>
               <a href="<?php echo esc_url( __( 'https://wordpress.org/', 'twentyfifteen' ) ); ?>"><?php printf( __( 'Proudly powered by %s', 'twentyfifteen' ), 'WordPress' ); ?></a>
          </div><!-- .site-info -->
     </footer><!-- .site-footer -->
<?php } ?>

コメント欄停止・コメント削除

TwentyFifteenでは、標準では、以下の3つのページでコメントフォームが表示されます。コメント欄出力部分をコメントアウトすることで、設定無しに停止・過去のコメントを非表示にすることができます。設定で行う場合はコチラ

  • シングルページ (single.php)
  • 固定ページのデフォルトテンプレート (page.php)
  • 画像(メディア)ページ (image.php)

コメントを無効にしたいページ(.php)の以下の部分をコメントアウトして下さい。

<?php //comments_template( '', true ); ?>
  • このエントリーをはてなブックマークに追加

関連記事

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

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

Twenty Twelve 投稿日・投稿者を非表示に

TwentyTwelveのちょっとした部分をカスタマイズする方法を紹介していきます。 また、子テーマで出力部分を変更する際に、翻訳が必要な部分//_()の部分がでてきますので、以下の投稿も参考に

no image

アイキャッチにマウスオーバーすると投稿タイトルを表示

WordPressのフォーラムから定期的に流入があるため、対応をいくつか探ってみました。トピックは、「サムネイルにマウスオーバーするとタイトルが表示されるようにしたい」 ちなみに、投稿内のキャプ

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

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

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

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

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

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

no image

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

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

Twenty Eleven カスタマイズ

目次 author-info 消す 作成者(投稿者)を消す 投稿者情報を表示しない proudly powered by wordpressのリンクをコピーライトに変更

「続きを読む」(moreタグ)をカスタマイズ

WordPressではほとんどのテーマでは、複数の投稿を表示するアーカイブページ(カテゴリー別、タグ別、年月日別、作成者別など)ではmoreタグ(<!--more-->)を挿入することで、

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

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

Comment

  1. はじめまして。
    Twenty Fifteenでのご質問なのですが、フッター部分の「Proudly powered by WordPress」をCopyright表記に変更したいのですが、どのように書き換えてどのようにしたら良いのか分からず、教えて頂きたくコメントさせて頂きました。お忙しい所申し訳ございませんが、宜しくお願い致します。

    • けん さん、コメントありがとうございます。
      ご質問のCopyright表記ですがオリジナルのものを消して、以下のようにfooter.phpを書きかえてみて下さい。あと、リンクと表記は置き換えて下さい。(ここでは、http://kwski.net/ と けん)

      // オリジナル (消す)
                  <a href="<?php echo esc_url( __( 'https://wordpress.org/', 'twentyfifteen' ) ); ? rel="nofollow">"><?php printf( __( 'Proudly powered by %s', 'twentyfifteen' ), 'WordPress' ); ?></a>
      // Copyright表記 (同じところに追記)
                  <a href="<?php echo esc_url( __( 'http://kwski.net/', '' ) ); ? rel="nofollow">">
                      <?php printf( __( 'Copyright &copy; %s All Rights Reserved.', '' ), 'けん' ); ?></a>
      
    • お忙しい中、ご丁寧に教えて頂き感謝しております。

      早速教えて頂いたとおりに書き換えたら変更することが出来ました。
      本当にありがとうございました。
      助かりました。

      また分からない事などが出てきた場合はご質問させてください。
      よろしくお願いします。

Message

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

*

PAGE TOP ↑