今回はWordPressの記事下に表示される「カテゴリー」や「投稿日」等のメタ情報を削除する方法や文字色を変えたりするカスタマイズを紹介していきます。TwentyTwelveの初期状態ではこのように記事下に表示されます。
この部分を削除する方法、それから削除はせずに文字色や文字の大きさを変更しています。
メタ情報を削除する場合
この部分を削除する場合は2通りのやり方があります。
- 子テーマのスタイルシート(style.css)で表示を隠す。
- 子テーマの対応する箇所を削除する。
このブログで何度も書いてますが個人的にスタイルシートで隠すのが好きではないので、私の場合は直接対応するファイルを書き換えています。これはお好みで好きな方を選んで下さい。
子テーマのスタイルシート(style.css) で非表示にする方法
1番目のスタイルシート(style.css) で非表示にする場合は子テーマのスタイルシートに次の記述を追加します。
/* メタ情報非表示 */ footer.entry-meta {display: none;}
この1行を追加すれば記事下のメタ情報は表示されなくなります。
子テーマの「content.php」から対応する場所を削除
2番目の方法として子テーマの「content.php」から対応する場所を削除します。子テーマに「content.php」をコピーして追加しておいて下さい。メタ情報を表示するコードは「content.php」のこの部分です。
<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 -->
長い記述になってますがこの部分がメタ情報を出力するコードになりますので、この部分を削除する事でメタ情報は削除する事ができます。この部分を全部削除してもいいですが、一応最初の部分と最後の一文を残しておいた方が良いと思います。
<footer class="entry-meta">
と
</footer><!-- .entry-meta -->
だけ残して中身を削除する事でメタ情報は表示されなくなります。
注意点として以前のカスタマイズで紹介した「コメントをどうぞ」の表示を「記事タイトル下」から記事下に持ってきている方は「コメントをどうぞ」の表示コードがこの部分に書かれていますので、この部分は残してもいいです。
</footer><!-- .entry-meta -->
この記述の直前に追加してあるはずです。
「コメントをどうぞ」を記事下に移動した方は赤で囲った部分は残しておいてもOKです。これでメタ情報の削除は完了です。
メタ情報の文字の色や大きさを変更する方法
メタ情報は削除したくないという方は文字の色や大きさ等をカスタマイズする事ができます。この部分は2つのパートに分かれています。赤と黒で囲ってある部分です。
この2つを変更する必要がありますので子テーマのスタイルシート(style.css) に次のコードを追加して下さい。まずは赤で囲った部分から。
/* 赤で囲った部分 */ footer.entry-meta { margin-top: 24px; /* 記事との間隔 */ font-size: 14px; /* 文字の大きさ */ color: #000000; /* 文字の色 */ font-weight: bold; /* 必要あれば太字に */ }
そしてこれが黒で囲った部分。
/* 黒で囲った部分 */ .entry-meta a { font-size: 14px; /* 文字の大きさ */ color: #000000; /* 文字の色 */ font-weight: bold; /* 必要あれば太字に */ text-decoration: none; /* 下線がいらない場合に記述 */ }
この黒で囲った部分というのはリンクになってますので、「カーソルが乗った時の色」や「訪問済みの色」も変更する事ができます。
.entry-meta a:visited { color: #000000;} /* 訪問済みの色 */ .entry-meta a:hover{ color: #7a8285;} /* カーソルが乗った時の色 */
これでメタ情報のカスタマイズは終了です。
コメント
Sou様
コメントありがとうございます。この画像は別のやつ(無料ブログ)でした。画像貼る時に間違えてたようです。すみません、張り替えます!
毎度お世話になってます。
初歩的な質問で申し訳ないですが、当ブログではTwenty Twelveを使っています。
そこで、メタ情報なんですが、カテゴリーと投稿日しか表示されてません・・・
(コメント)を表示させたいのですが、どうすればよいのでしょうか?
ご教授ください><
まさき様
コメントありがとうございます。これは使われているテーマによって違ってくる部分なのですが、私も最終更新日の記述を記事下の方に入れているので書いてみますね。
あくまで1例なんですが、私の場合(Twenty Twelve)ではデフォルトのメタ情報を削除してます。こちらの記事で書いてます。
https://affiliate150.com/meta-infomation
content.phpでメタ情報を出力するコードを一度全部削除してから「カテゴリー」と「最終更新日」だけのメタ情報を追加してます。以下がカテゴリーと最終更新日のコードです。
最初にメタ情報を削除したコードのあった場所に上記コードを入れてる感じです。「br」の部分は改行するやつなので改行したくない場合には<br>の部分は削除してOKです。
後はCSSで位置調整しています(右寄せ)。位置調整は好みですね。
もし上手くできない場合にはまさき様の使われているテーマを教えて下さい。
しげぞう様
はじめまして。まさきと申します。
いつもブログ拝見しています。
ひとつお伺いしたいのですが、
メタ情報に最終更新日を入れること(投稿日の後ろに)は可能なのでしょうか?
今色々と試しているのですが、上手く入らず困っております。
メタ情報への追加が困難でしたら、投稿記事右上などでも大丈夫です。
ご存知でしたら教えてください。
乃風様
返信ありがとうございます。この「編集」の部分はログインしている場合にしか表示されないと思いますので、あまり気にしなくてもOKなんですが、横に並べたいという場合には前回のコード(content.phpに追加したコード)の「p」タグを外せばいけると思います。
前回のコードが以下。
これの最初と最後の「pタグ」を外すのでこんな感じです。
これで試して見て下さい。
そういうことだったのですね。お返事の内容そのものにも、えらく感動しました。ありがとうございました。
早速その操作を行ってみたのですが、上手くいきました。(^^♪ ただ、日付の後に表示される「編集」という文字だけが改行されてしまいました。これを今まで通りに日付の直ぐ後にもっていきたい。どのように操作したらいいのでしょうか? よろしくお願いします。
乃風様
コメントありがとうございます。本来この部分の編集をするには親テーマのfunctions.phpを編集する必要があります。親テーマの編集になるので、親テーマがバージョンアップ(更新)する度にこの部分を修正する必要がありますので、面倒ですね。
なので、別の方法を考えてみました。functions.phpではなくて、子テーマの「content.php」を編集していきます。
子テーマのcontent.phpから次の記述を探します。
この記述を削除して代わりに以下のコードを追加。
これを追加して保存してみて下さい。後はブログを表示させて確認をお願いします。
ご無沙汰しております、しげぞうさん。乃風です。(^^♪
私のウェブサイト上で、投稿日にカーソルを合わせると、時刻がお化けのように「スーッ!」と表示されるのですが、その時刻を表示させないようにするにはどうしたらいいのでしょうか?
しげぞう様
こんにちは!本当にありがとうございました!!
すご~~いッ!!瞬即!!完了!!!
本当は消し去りたい所ですが、見えなきゃいいか!でした!
どのファイルが掌握してて何がなんだか分らないのでほんとに立ち直れなくなります…
ありがとう!本当にありがとうございます。テーマも違うのに…
知り合いに聞いても小難しく言われて分けわかんない状況が…続いてて
もう、いい加減に予測しろ!って感じですが…ごめんなさい。
ありがとうございました。
どうぞ、これからも宜しくお願いします。
okinagatarashi様
いつもありがとうございます。メタ情報ですね。これはスタイルシートに次の記述を追加すれば非表示にできると思います。
一度試してみて下さい。それで反映されない場合には再度コメント頂けると助かります。
しげぞう様
こんにちは!いつお世話になります。
HELP!ですが・・・
出来ればお手をお貸し頂けると、幸せます。
の投稿ですがここの記述で試みましたがダメでした…スタイルで消す方です…
25/03/2016
Filed under: All Items,Bowl,Laquer ware “JAPAN”,Provido from Japan
Tags: food, japan, wasyoku
の部分が見えなく出来たら助かります。
宜しくお願いします。