Tarokenlog

Contact

【WordPress】カテゴリー毎にクラスをつけてスタイリングをする方法【コピぺでOK】

WordPressでサイトを作っていると、投稿一覧に「ブログ」「お知らせ」のようにカテゴリーを表示することがあると思います。

カテゴリー別にクラスをつけてスタイリングしたい時に、使える方法を紹介します。

こんな感じになるはずです。


表示したいところに以下のコードをコピぺ

ある程度の説明はコメントでしています。

<div class="news">
            <?php 
            $args = array(
                'post_type' => 'post', //投稿を表示
                'posts_per_page' => 6, //表示する件数
            );
            $the_query = new WP_Query( $args );
            if ( $the_query->have_posts() ) :
            ?>
            <ul>
                <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
                <li>
                    <p class="date"><i class="fa fa-calendar-o" aria-hidden="true"></i><?php the_date();?></p> //投稿日を表示
                    <?php $cat = get_the_category(); $cat = $cat[0]; {
                      echo '<p class="' . $cat->category_nicename . 'cat" />'; //カテゴリー名＋catというクラスをつけてあげます
                     } ?>
                    <?php the_category(','); ?></p> //カテゴリー名の表示
                    <a href="<?php the_permalink() ?>" class="post-titles"><i class="fa fa-caret-right" aria-hidden="true"></i><?php the_title(); ?></a> //投稿記事のタイトル表示(リンクも)
                </li>
                <?php endwhile; ?>
            </ul>
            <?php endif; ?>
</div>

カテゴリーのスラッグ名をクラス名としてつけています。
なのでカテゴリーのスラッグ名を確認してください。
＊今回は「blog」「news」をカテゴリーのスラッグで設定しています。

また、投稿日の前にFontawesomeのカレンダーアイコンを入れています。
投稿記事タイトルの前にもFontawesomeのアイコンを入れています。

いらない場合は削除してください。
いる場合はFontawesomeを読み込んでください。

Font Awesome

PC：スタイリング

.news {
    margin: 30px 0;
    padding: 5% 10%;
    background: #f5f5f5;
}

.news ul li {
    margin-bottom: 15px;
}

.date {
    display: inline-block;
    width: 150px;
}

.blogcat, .newscat {
    display: inline-block;
    width: 100px;
}

.post-titles {
    color: #333;
    display: inline-block;
    width: 60%;
}

.blogcat a {
    padding: 5px 10px;
    background: #fc5185;
    color: #fff;
    border-radius: 8px;
    font-size: 12px;
}

.newscat a {
    padding: 5px 10px;
    background: #3fc1c9;
    color: #fff;
    border-radius: 8px;
    font-size: 12px;
}

SP：スタイリング

.news {
        margin: 15px 0;
    }

    .date, .blogcat, .newscat {
        width: 100%;
    }

    .post-titles {
        width: 100%;
        margin-top: 5px;
    }

以上です。

必要に応じてカスタマイズ・スタイリングしてみてください。

同じ日付の投稿日が表示されない場合は、【WordPress】日付が表示されない時の対処法・日付の表示方法を試してみてください。

短い備忘録メモでした(^^)/


Posted

in

Tags:

, ,