今回はWordPressの記事下に表示される「カテゴリー」や「投稿日」等のメタ情報を削除する方法や文字色を変えたりするカスタマイズを紹介していきます。TwentyTwelveの初期状態ではこのように記事下に表示されます。
この部分を削除する方法、それから削除はせずに文字色や文字の大きさを変更しています。
目次
メタ情報を削除する場合
この部分を削除する場合は2通りのやり方があります。
- 子テーマのスタイルシート(style.css)で表示を隠す。
- 子テーマの対応する箇所を削除する。
このブログで何度も書いてますが個人的にスタイルシートで隠すのが好きではないので、私の場合は直接対応するファイルを書き換えています。これはお好みで好きな方を選んで下さい。
子テーマのスタイルシート(style.css) で非表示にする方法
1番目のスタイルシート(style.css) で非表示にする場合は子テーマのスタイルシートに次の記述を追加します。
1 2 | /* メタ情報非表示 */ footer.entry-meta {display: none;} |
この1行を追加すれば記事下のメタ情報は表示されなくなります。
子テーマの「content.php」から対応する場所を削除
2番目の方法として子テーマの「content.php」から対応する場所を削除します。子テーマに「content.php」をコピーして追加しておいて下さい。メタ情報を表示するコードは「content.php」のこの部分です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <footer class="entry-meta"> <?php twentytwelve_entry_meta(); ?> <?php edit_post_link( __( 'Edit', 'twentytwelve' ), '<span class="edit-link">', '</span>' ); ?> <?php if ( is_singular() && get_the_author_meta( 'description' ) && is_multi_author() ) : // If a user has filled out their description and this is a multi-author blog, show a bio on their entries. ?> <div class="author-info"> <div class="author-avatar"> <?php /** This filter is documented in author.php */ $author_bio_avatar_size = apply_filters( 'twentytwelve_author_bio_avatar_size', 68 ); echo get_avatar( get_the_author_meta( 'user_email' ), $author_bio_avatar_size ); ?> </div><!-- .author-avatar --> <div class="author-description"> <h2><?php printf( __( 'About %s', 'twentytwelve' ), get_the_author() ); ?></h2> <p><?php the_author_meta( 'description' ); ?></p> <div class="author-link"> <a href="<?php echo esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ); ?>" rel="author"> <?php printf( __( 'View all posts by %s <span class="meta-nav">→</span>', 'twentytwelve' ), get_the_author() ); ?> </a> </div><!-- .author-link --> </div><!-- .author-description --> </div><!-- .author-info --> <?php endif; ?> </footer><!-- .entry-meta --> |
長い記述になってますがこの部分がメタ情報を出力するコードになりますので、この部分を削除する事でメタ情報は削除する事ができます。この部分を全部削除してもいいですが、一応最初の部分と最後の一文を残しておいた方が良いと思います。
1 | <footer class="entry-meta"> |
と
1 | </footer><!-- .entry-meta --> |
だけ残して中身を削除する事でメタ情報は表示されなくなります。
注意点として以前のカスタマイズで紹介した「コメントをどうぞ」の表示を「記事タイトル下」から記事下に持ってきている方は「コメントをどうぞ」の表示コードがこの部分に書かれていますので、この部分は残してもいいです。
1 | </footer><!-- .entry-meta --> |
この記述の直前に追加してあるはずです。
「コメントをどうぞ」を記事下に移動した方は赤で囲った部分は残しておいてもOKです。これでメタ情報の削除は完了です。
メタ情報の文字の色や大きさを変更する方法
メタ情報は削除したくないという方は文字の色や大きさ等をカスタマイズする事ができます。この部分は２つのパートに分かれています。赤と黒で囲ってある部分です。
この２つを変更する必要がありますので子テーマのスタイルシート(style.css) に次のコードを追加して下さい。まずは赤で囲った部分から。
1 2 3 4 5 6 7 | /* 赤で囲った部分 */ footer.entry-meta { margin-top: 24px; /* 記事との間隔 */ font-size: 14px; /* 文字の大きさ */ color: #000000; /* 文字の色 */ font-weight: bold; /* 必要あれば太字に */ } |
そしてこれが黒で囲った部分。
1 2 3 4 5 6 7 | /* 黒で囲った部分 */ .entry-meta a { font-size: 14px; /* 文字の大きさ */ color: #000000; /* 文字の色 */ font-weight: bold; /* 必要あれば太字に */ text-decoration: none; /* 下線がいらない場合に記述 */ } |
この黒で囲った部分というのはリンクになってますので、「カーソルが乗った時の色」や「訪問済みの色」も変更する事ができます。
1 2 3 4 | .entry-meta a:visited { color: #000000;} /* 訪問済みの色 */ .entry-meta a:hover{ color: #7a8285;} /* カーソルが乗った時の色 */ |
これでメタ情報のカスタマイズは終了です。
Sou様
コメントありがとうございます。この画像は別のやつ（無料ブログ）でした。画像貼る時に間違えてたようです。すみません、張り替えます！
毎度お世話になってます。
初歩的な質問で申し訳ないですが、当ブログではTwenty Twelveを使っています。
そこで、メタ情報なんですが、カテゴリーと投稿日しか表示されてません・・・
（コメント）を表示させたいのですが、どうすればよいのでしょうか？
ご教授ください><
まさき様
コメントありがとうございます。これは使われているテーマによって違ってくる部分なのですが、私も最終更新日の記述を記事下の方に入れているので書いてみますね。
あくまで１例なんですが、私の場合(Twenty Twelve)ではデフォルトのメタ情報を削除してます。こちらの記事で書いてます。
https://affiliate150.com/meta-infomation
content.phpでメタ情報を出力するコードを一度全部削除してから「カテゴリー」と「最終更新日」だけのメタ情報を追加してます。以下がカテゴリーと最終更新日のコードです。
最初にメタ情報を削除したコードのあった場所に上記コードを入れてる感じです。「br」の部分は改行するやつなので改行したくない場合には＜ｂｒ＞の部分は削除してOKです。
後はCSSで位置調整しています（右寄せ）。位置調整は好みですね。
もし上手くできない場合にはまさき様の使われているテーマを教えて下さい。
しげぞう様
はじめまして。まさきと申します。
いつもブログ拝見しています。
ひとつお伺いしたいのですが、
メタ情報に最終更新日を入れること（投稿日の後ろに）は可能なのでしょうか？
今色々と試しているのですが、上手く入らず困っております。
メタ情報への追加が困難でしたら、投稿記事右上などでも大丈夫です。
ご存知でしたら教えてください。
乃風様
返信ありがとうございます。この「編集」の部分はログインしている場合にしか表示されないと思いますので、あまり気にしなくてもOKなんですが、横に並べたいという場合には前回のコード（content.phpに追加したコード）の「p」タグを外せばいけると思います。
前回のコードが以下。
これの最初と最後の「pタグ」を外すのでこんな感じです。
これで試して見て下さい。