WordPressのメタ情報「カテゴリー」や「投稿日」をカスタマイズ

今回はWordPressの記事下に表示される「カテゴリー」や「投稿日」等のメタ情報を削除する方法や文字色を変えたりするカスタマイズを紹介していきます。TwentyTwelveの初期状態ではこのように記事下に表示されます。

メタ情報-1

この部分を削除する方法、それから削除はせずに文字色や文字の大きさを変更しています。

スポンサーリンク
スマートフォン買取

メタ情報を削除する場合

この部分を削除する場合は2通りのやり方があります。

  1. 子テーマのスタイルシート(style.css)で表示を隠す。
  2. 子テーマの対応する箇所を削除する。

このブログで何度も書いてますが個人的にスタイルシートで隠すのが好きではないので、私の場合は直接対応するファイルを書き換えています。これはお好みで好きな方を選んで下さい。

子テーマのスタイルシート(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 -->

この記述の直前に追加してあるはずです。
コメント-3

「コメントをどうぞ」を記事下に移動した方は赤で囲った部分は残しておいてもOKです。これでメタ情報の削除は完了です。

メタ情報の文字の色や大きさを変更する方法

メタ情報は削除したくないという方は文字の色や大きさ等をカスタマイズする事ができます。この部分は2つのパートに分かれています。赤と黒で囲ってある部分です。

メタ情報-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;} /* カーソルが乗った時の色 */

これでメタ情報のカスタマイズは終了です。

WordPressのメタ情報「カテゴリー」や「投稿日」をカスタマイズ”に10件のコメントがあります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

  1. しげぞう 投稿作成者

    まさき様

    コメントありがとうございます。これは使われているテーマによって違ってくる部分なのですが、私も最終更新日の記述を記事下の方に入れているので書いてみますね。

    あくまで1例なんですが、私の場合(Twenty Twelve)ではデフォルトのメタ情報を削除してます。こちらの記事で書いてます。

    https://affiliate150.com/meta-infomation

    content.phpでメタ情報を出力するコードを一度全部削除してから「カテゴリー」と「最終更新日」だけのメタ情報を追加してます。以下がカテゴリーと最終更新日のコードです。

    <p>カテゴリー : <?php the_category( ' | ' ); ?><br>	
    最終更新日:<?php the_modified_date('Y/m/d') ?></p>

    最初にメタ情報を削除したコードのあった場所に上記コードを入れてる感じです。「br」の部分は改行するやつなので改行したくない場合には<br>の部分は削除してOKです。

    後はCSSで位置調整しています(右寄せ)。位置調整は好みですね。

    .entry-meta p {
     text-align:right;
     line-height:2em;
     font-size:100%;
     margin: 0 0 24px;
    }
    
    .entry-meta a {
      text-decoration: underline;
      font-weight: bold;
      color: #0066cc;
      line-height:24px;
    }

    もし上手くできない場合にはまさき様の使われているテーマを教えて下さい。

  2. まさき

    しげぞう様

    はじめまして。まさきと申します。
    いつもブログ拝見しています。

    ひとつお伺いしたいのですが、
    メタ情報に最終更新日を入れること(投稿日の後ろに)は可能なのでしょうか?
    今色々と試しているのですが、上手く入らず困っております。
    メタ情報への追加が困難でしたら、投稿記事右上などでも大丈夫です。
    ご存知でしたら教えてください。

  3. 乃風

    うまくいきました。ありがとうございました。些細なことですが、なんかすごくうれしかったです。(^^♪ (^_-)-☆ \(^o^)/

    実は下記のコメントを送信したその後に、ログイン中だけのことだと、偶然気づいたんです。だから、方法がなければ、そのままでもいいかなぁ~・・・と思っておりました。

  4. しげぞう 投稿作成者

    乃風様

    返信ありがとうございます。この「編集」の部分はログインしている場合にしか表示されないと思いますので、あまり気にしなくてもOKなんですが、横に並べたいという場合には前回のコード(content.phpに追加したコード)の「p」タグを外せばいけると思います。

    前回のコードが以下。

    <p>カテゴリー : <?php the_category( ' | ' ); ?><?php echo ' | 投稿日 : '; ?><?php the_time('Y年n月j日'); ?></p>

    これの最初と最後の「pタグ」を外すのでこんな感じです。

    カテゴリー : <?php the_category( ' | ' ); ?><?php echo ' | 投稿日 : '; ?><?php the_time('Y年n月j日'); ?>

    これで試して見て下さい。

  5. 乃風

    そういうことだったのですね。お返事の内容そのものにも、えらく感動しました。ありがとうございました。

    早速その操作を行ってみたのですが、上手くいきました。(^^♪ ただ、日付の後に表示される「編集」という文字だけが改行されてしまいました。これを今まで通りに日付の直ぐ後にもっていきたい。どのように操作したらいいのでしょうか? よろしくお願いします。

  6. しげぞう 投稿作成者

    乃風様

    コメントありがとうございます。本来この部分の編集をするには親テーマのfunctions.phpを編集する必要があります。親テーマの編集になるので、親テーマがバージョンアップ(更新)する度にこの部分を修正する必要がありますので、面倒ですね。

    なので、別の方法を考えてみました。functions.phpではなくて、子テーマの「content.php」を編集していきます。

    子テーマのcontent.phpから次の記述を探します。

    <?php twentytwelve_entry_meta(); ?>

    この記述を削除して代わりに以下のコードを追加。

    <p>カテゴリー : <?php the_category( ' | ' ); ?><?php echo ' | 投稿日 : '; ?><?php the_time('Y年n月j日'); ?></p>

    これを追加して保存してみて下さい。後はブログを表示させて確認をお願いします。

  7. 乃風

    ご無沙汰しております、しげぞうさん。乃風です。(^^♪

    私のウェブサイト上で、投稿日にカーソルを合わせると、時刻がお化けのように「スーッ!」と表示されるのですが、その時刻を表示させないようにするにはどうしたらいいのでしょうか?

  8. okinagatarashi

    しげぞう様
    こんにちは!本当にありがとうございました!!
    すご~~いッ!!瞬即!!完了!!!

    本当は消し去りたい所ですが、見えなきゃいいか!でした!
    どのファイルが掌握してて何がなんだか分らないのでほんとに立ち直れなくなります…
    ありがとう!本当にありがとうございます。テーマも違うのに…
    知り合いに聞いても小難しく言われて分けわかんない状況が…続いてて
    もう、いい加減に予測しろ!って感じですが…ごめんなさい。
    ありがとうございました。
    どうぞ、これからも宜しくお願いします。

  9. しげぞう 投稿作成者

    okinagatarashi様

    いつもありがとうございます。メタ情報ですね。これはスタイルシートに次の記述を追加すれば非表示にできると思います。

    .entry-meta {
        display: none;
    }

    一度試してみて下さい。それで反映されない場合には再度コメント頂けると助かります。

  10. okinagatarashi

    しげぞう様
    こんにちは!いつお世話になります。

    HELP!ですが・・・
    出来ればお手をお貸し頂けると、幸せます。

    の投稿ですがここの記述で試みましたがダメでした…スタイルで消す方です…

    25/03/2016

    Filed under: All Items,Bowl,Laquer ware “JAPAN”,Provido from Japan

    Tags: food, japan, wasyoku

    の部分が見えなく出来たら助かります。
    宜しくお願いします。