Twenty Fifteen カスタマイズ
WordPress 4.1のデフォルトテーマである「Twenty Fifteen」は三世代前の「Twenty Twelve」に似たテーマで非常にシンプルなテーマにまとまっていますね。カスタマイズをまとめて投稿します。「コレはどうすんの?」というのをコメントなどでいただけたらこちらの投稿に追記していこうと思っています。
目次
- 子テーマ作成方法
- メタ情報 twentyfifteen_entry_meta「投稿日」「投稿者」など
- "proudly powered ~"を非表示
- コメント欄削除
- テーマ用フォント "Noto" / "Inconsolata"の使用を止
- 投稿タイトル(entry-title)を非表示にする
- 「編集(Edit)」リンクの非表示方法
- "コメントを残す" 削除・文言を変更する方法
また、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 × %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 ); ?>
関連記事
-
テーマ 「Responsive」 カスタマイズ
デモ | ダウンロード 目次 投稿日 非表示 作成者 非表示 "Responsive Theme powered by WordPress" 削除 投稿日 非表示 オリ
-
コメント欄停止・コメント削除
WordPressでは標準でコメント機能が付いてきます。この投稿ではコメント機能の停止や既に投稿されたコメントを削除する方法を紹介します。 設定による停止方法 新規の投稿に関してコメントを停止
-
条件を付けて訪問時に開くポップアップを実装できる「WordPress Popup」
「WordPress Popup」は、ユーザの訪問時にポップアップを開くように実装できるプラグインです。それぞれ条件によって開くかどうかを設定することができます。 ダウンロード / サンプル イン
-
画像マウスオーバーでキャプションを表示
メディアをアップロードした際に、「キャプション」項目にテキストを設定された画像を挿入した場合はキャプションショートコードが生成され、ページ内の各画像下にその設定したテキストが表示されます。 今回
-
JSやCSSに自動で付与されるバージョン番号を非表示に
Wordpressでは、JSやCSSがロードされる際にlinkタグやscriptタグ内にWordpressやプラグインもしくはスクリプトそのもののバージョン番号が付与されます。「?ver=」で検索して
-
ウィジェット関連のカスタマイズ・プラグイン
リンクマネージャー WordPress 3.5バージョンアップ以降にリンクマネージャーを追加するには以下のフィルタを設定もしくはプラグインをインストールして下さい。 プラグイン Link M
-
投稿タイトル(entry-title)を非表示にする
表題通り「投稿タイトルを表示しない」ことは、"投稿ページ"ではあまりないと思いますが、"固定ページ"では意外とあったりします。 編集画面でTitleを入力しないでおけば、それで済むのですが、ペー
-
Twenty Thirteen テーマ用フォント "Source Sans Pro" / "Bitter"の使用を止
TwentyThirteenでは、テーマ用のフォントとして「Source Sans Pro」と「Bitter」というフォントをGoogleフォントから引っ張ってきて使用されるようです。 ちなみにどの
-
「カテゴリー」ウィジェット カスタマイズ
「カテゴリー」ウィジェットは、管理画面ではあまりカスタマイズできません。必要であれば、フックやプラグインを用いて表示設定などの変更を行うことができます。 目次 「カテゴリー」ウィジェットの追加
-
テーマ ブックマーク 2013
2012 フリーテーマ トップ 20 Top 20 Free WordPress Themes of 2012 http://ow.ly/wMGjZ ハイクオリティフリーテーマ 3月 20 Top
Comment
[…] Fifteenのデザインや設定・カスタマイズ方法 | PresentNote」 「WordPress – Twenty Fifteen カスタマイズ」 「人気の「Twenty […]
助かりました。 Twenty Fifteen カスタマイズ http://t.co/GJiQkZ5X2h
WordPressのデフォルトテーマ最新はシンプルで良さげ。 / Twenty Fifteen カスタマイズ http://t.co/HTKq33c8xy
Twenty Fifteen カスタマイズ http://t.co/e8czgkB8kS
はじめまして。
Twenty Fifteenでのご質問なのですが、フッター部分の「Proudly powered by WordPress」をCopyright表記に変更したいのですが、どのように書き換えてどのようにしたら良いのか分からず、教えて頂きたくコメントさせて頂きました。お忙しい所申し訳ございませんが、宜しくお願い致します。
けん さん、コメントありがとうございます。
ご質問のCopyright表記ですがオリジナルのものを消して、以下のようにfooter.phpを書きかえてみて下さい。あと、リンクと表記は置き換えて下さい。(ここでは、http://kwski.net/ と けん)
お忙しい中、ご丁寧に教えて頂き感謝しております。
早速教えて頂いたとおりに書き換えたら変更することが出来ました。
本当にありがとうございました。
助かりました。
また分からない事などが出てきた場合はご質問させてください。
よろしくお願いします。