概要

新着情報の下に、スクロールしないお知らせ欄が別途欲しいというご要望があり、1万円でオプション作業として行った事例です。

• 案件名　東文中醫クリニック・新橋
• URL　https://tbtcm.jp/

CPT UI＞新規投稿タイプを追加

任意の内容を入れる。下記は例。

投稿タイプスラッグ *　news02
複数形のラベル *　お知らせ投稿②
単数形のラベル *　おしらせ投稿2

index.phpの更新

ファイル：index.php

表示したい箇所に以下の内容を追加。

<?php
$args = array(
‘post_type’ => ‘news02’, /* カスタム投稿名が「news02」の場合 */
‘posts_per_page’ => 10, /* 表示する数 */
); ?>

<?php $my_query = new WP_Query( $args ); ?>

<section class=”box2 top_news notice”>
<div class=”top_box”>
<h3 class=”tit01″>お知らせ<span>NOTICE</span></h3>
<ul>

<?php while ( $my_query->have_posts() ) : $my_query->the_post(); ?>

<!– ▽ ループ開始 ▽ –>

<li class=”notice_list”>
<h4><?php the_title(); ?><i class=”notice_date”><?php the_time( get_option( ‘date_format’ ) ); ?></i></h4>
<p><?php the_content(); ?></p>
</li>

<!– △ ループ終了 △ –>

<?php endwhile; ?>

</ul>
</div>
</section>

<?php wp_reset_postdata(); ?>

cssを追加

ファイル：style.css

/*==================================================================

$notice

==================================================================*/
.notice li.notice_list{
margin-bottom: 24px;
}
.notice h4{
display: block;
margin-left: 0;
font-size: 18px;
font-family: “游ゴシック体”, “Yu Gothic”, YuGothic, “ヒラギノ角ゴ ProN W3”, “Hiragino Kaku Gothic ProN”, “メイリオ”, “Meiryo”, Osaka, “ＭＳ Ｐゴシック”, “MS PGothic”;
color: #00913A;
font-weight: bold;
}
.notice .notice_date{
margin-left: 8px;
font-size: 12px;
color: #ccc;
font-style: normal;
}