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

10 comments

今回は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です。これでメタ情報の削除は完了です。

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

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

この２つを変更する必要がありますので子テーマのスタイルシート(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;} /* カーソルが乗った時の色 */

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

おすすめのASP

⇒もしもアフィリエイトの登録や使い方

サイトのアクセスアップや稼ぐためにおすすめの無料レポート

個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。

【無料】キーワード選定に特化した無料教材＆動画「キーワード無双」

【期間限定無料】一億円ブロガーの電子書籍「自由な人生を手に入れる教科書」

ブログの更新はこちらから