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

関連記事

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

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

Twenty Eleven カスタマイズ

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

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

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

ウィジェット関連のカスタマイズ・プラグイン

リンクマネージャー WordPress 3.5バージョンアップ以降にリンクマネージャーを追加するには以下のフィルタを設定もしくはプラグインをインストールして下さい。 プラグイン Link M

「カテゴリー」ウィジェット カスタマイズ

「カテゴリー」ウィジェットは、管理画面ではあまりカスタマイズできません。必要であれば、フックやプラグインを用いて表示設定などの変更を行うことができます。 目次 「カテゴリー」ウィジェットの追加

Twenty Twelve サイトタイトルをテキストから画像に置き換え

ページトップに表示されるサイトタイトルをデフォルトのテキストから画像に変更します。 あらかじめ、管理画面のメディアライブラリから画像をアップロードしているもしくは別の場所に保存しているそのファイルの

RSS/Atomフィード カスタマイズ

RSSフィードのカスタマイズ 標準で出力されるフィード WordPressの各種ページで出力されるフィードは以下になると思います。 投稿:投稿のフィード @全てのページ サイトのコメント:

コメントフォーム・リストのカスタマイズ

コメント投稿部分は、基本的にはどのテーマでも同じフォームを出力してテーマのstyle.cssで外観を変えています。コメントフォーム欄をカスタマイズするには、プラグインもしくはフックを用いてカスタマイズ

「All in One SEO Pack」を代替するための準備

「All in One SEO Pack」は、SEO対策に必要な基本的な設定を行ってくれるプラグインです。とある事情で、無効化することになったので代替を行いました。特に問題があるわけではなく、特殊なこ

独自のCSSやJSを読み込む

WordPressで、プラグインではなく自作したりダウンロードしてきたCSSやJS(プラグイン)を読み込んだりするケースがあると思います。今回は、その際の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

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

*

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

    PAGE TOP ↑