カスタム投稿タイプを作成しショートコードでお知らせ欄を作る方法

通常のブログ記事とお知らせ記事を完全に分けたい場合は、カスタム投稿タイプを作成するのが最適です。
以下の手順で専用お知らせ欄を作成できます。

1 functions.php にコードを追加

//-------------------------------------------
// カスタム投稿タイプ「custom_news」を作成
//-------------------------------------------
if ( ! function_exists('create_custom_news_post_type') ) {
    function create_custom_news_post_type() {
        $labels = array(
            'name' => 'お知らせ',
            'singular_name' => 'お知らせ',
            'add_new_item' => '新規お知らせを追加',
            'edit_item' => 'お知らせを編集',
            'menu_name' => 'お知らせ',
        );

        $args = array(
            'labels' => $labels,
            'public' => true,
            'has_archive' => true, // アーカイブページを作る場合
            'show_in_rest' => true,
            'supports' => array('title','editor','thumbnail','excerpt'),
            'menu_position' => 5,
            'menu_icon' => 'dashicons-megaphone',
            'rewrite' => array('slug' => 'custom-news'),
        );

        register_post_type('custom_news', $args);
    }
}
add_action('init', 'create_custom_news_post_type');


// 表示するショートコードを作成
function display_custom_news($atts) {
    $atts = shortcode_atts(array(
        'posts' => 5
    ), $atts, 'custom_news');

    $query = new WP_Query(array(
        'post_type' => 'custom_news',
        'posts_per_page' => intval($atts['posts']),
        'orderby' => 'date',
        'order' => 'DESC'
    ));

    $output = '<div class="custom-news">';
    if ($query->have_posts()) {
        $output .= '<ul>';
        while ($query->have_posts()) {
            $query->the_post();
            $output .= '<li>';
            $output .= '<span class="news-date">' . get_the_date('Y.m.d') . '</span> ';
            $output .= '<a href="' . get_permalink() . '">' . get_the_title() . '</a>';
            $output .= '</li>';
        }
        $output .= '</ul>';
    } else {
        $output .= '<p>お知らせはありません。</p>';
    }
    $output .= '</div>';

    wp_reset_postdata();
    return $output;
}
add_shortcode('custom_news', 'display_custom_news');


// カスタムタクソノミー「news_category」を作成
if ( ! function_exists('create_news_taxonomy') ) {
    function create_news_taxonomy() {
        $labels = array(
            'name' => 'お知らせカテゴリ',
            'singular_name' => 'お知らせカテゴリ',
            'search_items' => 'カテゴリを検索',
            'all_items' => 'すべてのカテゴリ',
            'edit_item' => 'カテゴリを編集',
            'update_item' => 'カテゴリを更新',
            'add_new_item' => '新しいカテゴリを追加',
            'menu_name' => 'お知らせカテゴリ',
        );

        register_taxonomy(
            'news_category',      // タクソノミー名
            'custom_news',        // 対象の投稿タイプ
            array(
                'hierarchical' => true, // カテゴリー形式
                'labels' => $labels,
                'show_ui' => true,
                'show_in_rest' => true,
                'rewrite' => array('slug' => 'news-category'),
            )
        );
    }
}
add_action('init', 'create_news_taxonomy');
  

記事内で表示する場合：

[custom_news posts="5"]
  

2 汎用CSS

/* -----------------------------
 * カスタム投稿タイプ「custom_news」のスタイル
 * ----------------------------- */

.custom-news {
  background-color: #f9f9f9;    /* 背景色を薄いグレーに */
  border-radius: 6px;           /* 角を丸くする */
  padding: 12px;                /* 内側の余白 */
  font-family: sans-serif;       /* フォント */
  font-size: 0.9em;             /* 文字サイズ（タイトル基準） */
  line-height: 1.3;             /* 行間 */
  max-width: 600px;             /* 最大幅 */
  margin-bottom: 20px;          /* 下に余白 */
}

/* ulのリセット */
.custom-news ul {
  list-style: none;             /* デフォルトのリストマーカーを消す */
  padding: 0;                   /* 内側余白を消す */
  margin: 0;                    /* 外側余白を消す */
}

/* liの基本スタイル */
.custom-news li {
  display: flex;                /* 横並びに配置 */
  justify-content: space-between; /* 両端揃え */
  align-items: center;          /* 縦中央揃え */
  padding: 6px 0;               /* 上下の余白を少し狭める */
  border-bottom: 1px solid #ddd; /* 下線で区切り */
}

/* 最後のliは下線なし */
.custom-news li:last-child {
  border-bottom: none;
}

/* 日付表示 */
.custom-news .news-date {
  color: #666;                  /* 薄いグレー */
  font-size: 0.8em;             /* 小さめ文字 */
  flex-shrink: 0;               /* 縮まない */
  margin-right: 12px;           /* 右余白 */
  white-space: nowrap;          /* 改行されない */
}

/* リンク */
.custom-news a {
  color: #0073aa;               /* 青系リンク色 */
  text-decoration: none;        /* 下線なし */
  flex-grow: 1;                 /* 残り幅を占める */
}

/* ホバー時のリンク */
.custom-news a:hover {
  text-decoration: underline;   /* 下線表示 */
}
  

3 完成イメージ

4 まとめ

• カスタム投稿タイプ「custom_news」でブログ記事と完全に分離
• ショートコード [custom_news] でどのページでも表示可能
• 汎用CSSでどのテーマでも使える