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 ); ?>
関連記事
-
Google+ プラスワン(+1)ボタンの設置
Google+の+1ボタンの設置はプラグインを使用しなくても容易に実装できるようです。ソーシャルボタン設置のプラグインはこちらにいちおうまとめています。 プラスワン(+1)ボタンの設置コード 公式
-
ログイン画面・機能をカスタマイズ
CSSを変更してスタイル変更 ログイン画面用のCSSを用意して子テーマとして使用します。変更したい部分だけを記述して下さい。 // オリジナル /wp-admin/css/login.min.
-
ナビゲーションメニューに検索フォームを追加
メニュー内に検索フォームを追加したいという問い合わせをいただいたので試してみました。 メニューのつくられかた まずは、WordPressでメニューがつくられる手順を説明します。 箱をつく
-
Twitterのツイートボタンの設置
Twitterのツイートボタンの設置はプラグインを使用しなくても容易に実装できるようです。 ソーシャルボタン設置のプラグインはこちらにいちおうまとめています。 Tweetボタンの設置コード 公式
-
投稿記事から「(ログイン)ユーザー名」がバレるのを防ぐ
ここ最近、アカウント乗っ取りやセキュリティ事故関連のニュースが相次いでいますが、WordPressで制作されたサイトも標的に会っているようです。一般的な手法としては「ブルートフォースアタック」という手
-
Twenty Fourteen カスタマイズ
「Twenty Fourteen」はWordPress 3.8のデフォルトテーマです。TwentyThirteenから彩りもガラッとかわってますね。個人的には、すごく好きなデザイン。 Twent
-
Twenty Fourteen "コメントをどうぞ"の非表示と変更方法
Twenty Fourteenでは、デフォルトで投稿ページと各アーカイブページの各投稿のメタ情報欄に「コメントをどうぞ」というコメントフォームへのリンクが設置されます。 それぞれ、コメントが0件の場
-
Tumblrの投稿をウィジェットに表示できる「Tumblr Widget」
このブログでは、サイドバーウィジェットに「Tumblr」に投稿したブックマーク一覧を表示させています。プラグインは「Tumblr Widget」を使用しています。ダウンロード 「This plugi
-
テーマ 「Responsive」 カスタマイズ
デモ | ダウンロード 目次 投稿日 非表示 作成者 非表示 "Responsive Theme powered by WordPress" 削除 投稿日 非表示 オリ
-
head内に出力される要素を整理
Wordpressを使用していくうちに、head内がカオスな状態になっていくきますよね。そこで、そういう状態になったものをスッキリさせていこうという試みをやっていこうと思います。 削除方法 取り急
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/ と けん)
お忙しい中、ご丁寧に教えて頂き感謝しております。
早速教えて頂いたとおりに書き換えたら変更することが出来ました。
本当にありがとうございました。
助かりました。
また分からない事などが出てきた場合はご質問させてください。
よろしくお願いします。