Twenty Fifteen カスタマイズ

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

目次

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

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

An error occurred while parsing your RSS feed. Check that it's a valid XML file.

子テーマ作成方法

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 ); ?>
  • このエントリーをはてなブックマークに追加

関連記事

no image

Pocketボタンの設置

日本のブログでは、4大SNS(Twitter, はてな, Facebook, Google+)に加えて最近では、Pocket(以前は、Read it later)もよく見かけますよね。追加してみました

"コメントを残す" 削除・文言を変更する方法

コメントフォームに表示される「コメントを残す」はWordPress標準で翻訳される要素です。テーマ側でカスタマイズしていない限り表示されます。 ここでは、この要素を削除したり、文言を変更する方法を紹

no image

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

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

no image

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

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

no image

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

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

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

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

Twenty Twelve カスタマイズ

何点かTwentyTwelveのカスタマイズについてご質問をいただきましたのでここでまとめてみます。 目次 子テーマのつくりかた 他記事へのリンク アーカイブタイトル("カテゴリー別アーカ

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

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

no image

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

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

プラグイン関連のJSやCSSの読み込みをフィルター

プラグインをインストールしていくとheadやfooter内がCSSやJSで溢れていきます。できるだけ、自分で書けるものに関しては、余計なコールが少なくなるので可能な場合はそうしていますが(そうもいかず

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 ↑