【WPプラグイン配布】TOPページの投稿をカード表示する

はじめに
実装できる機能とデザイン
導入手順（2ステップ）
Geminiに出したプロンプト
まとめ
問い合わせ

はじめに

前回の記事では、AIを相棒にプラグインを開発した裏話をお届けしました。今回は、そのTOPの固定ページ用カード型カスタム投稿表示ができるプラグインの配布と使い方とコードの全貌を紹介します！
これを導入すれば、TOPページのカスタマイズがちょっとだけできます(汗)

実装できる機能とデザイン

トップページ用： 最新6〜8件（3〜4列×1〜2段）＋「もっと見る」ボタン
一覧ページ用： 3件〜（3〜4列×1段〜）
表示項目： アイキャッチ、タイトル、投稿日時、本文100文字
レスポンシブ： スマホでは自動で1列に切り替わります

導入手順（2ステップ）

プラグインをダウンロード

こちらからプラグインをダウンロードしてください。

Cocoonじゃなくても動作するように修正しました！と言ってもSWELLでしか試していませんが。。
SWELLも見た目がきれいですが、こちらのプラグインのような表示方法はできませんので、一度試してみてください。
たぶんどのテーマでも動作する・・・と思いますが（汗）動かなかったら、自分で修正してね♪

digital-onion-portal.php ダウンロード

WordPress管理画面からアップロードして有効化

淡路タマオ

かんたんにプラグインをインストールできるで！

WordPressの管理画面>プラグイン>プラグインのアップロード

自分流にプラグインをカスタマイズしたい場合は、WordPress管理画面のプラグイン>プラグインエディターで.phpを編集できます！いちいちレンタルサーバーへアクセスしなくても良いので、こっち使うと効率上がります。

コードの全貌も公開します！

コードがわかる方はこちらを自分で弄ってみてください。

淡路タマオ

ちなみに私は全くコードはわからんのやで！
はっきり言って、コードはチラッと見ただけ。
そんなん、わかからんでもプラグイン自作できるんやで！

digital-onion-portal.php (Version 10.0)

<?php
/*
Plugin Name: Digital Onion Custom Portal
Description: 投稿をトップページやアーカイブ一覧にカード型で表示できるプラグインです。
Version: 10.0
Author: Awaji_Tamao
*/

if (!defined('ABSPATH')) exit;

/** 1. 管理メニュー追加 **/
add_action('admin_menu', function() {
    add_menu_page('Portal設定', 'Portal設定', 'manage_options', 'do-portal-settings', 'do_portal_settings_page', 'dashicons-layout', 25);
});

add_action('admin_init', function() {
    register_setting('do-portal-group', 'do_top_cols');
    register_setting('do-portal-group', 'do_top_rows');
    register_setting('do-portal-group', 'do_archive_cols');
    register_setting('do-portal-group', 'do_archive_rows');
    register_setting('do-portal-group', 'do_archive_page_id');
    register_setting('do-portal-group', 'do_show_sidebar');
});

/** 2. 設定画面 **/
function do_portal_settings_page() {
    ?>
    <div class="wrap">
        <h1>Digital Onion Custom Portal 設定</h1>
        <form method="post" action="options.php">
            <?php settings_fields('do-portal-group'); ?>
            <table class="form-table">
                <tr><th>カラム数</th><td><input type="number" name="do_top_cols" value="<?php echo esc_attr(get_option('do_top_cols', 3)); ?>“></td></tr>
                <tr><th>表示行数</th><td><input type="number" name="do_top_rows" value="<?php echo esc_attr(get_option('do_top_rows', 2)); ?>“></td></tr>
            </table>
            <?php submit_button(); ?>
        </form>
    </div>
    <?php
}

/** 3. 記事表示ロジック **/
function do_render_logic($cols, $rows, $is_paged = false) {
    $paged = $is_paged ? max(1, get_query_var('paged'), get_query_var('page')) : 1;
    $query = new WP_Query(array('post_type' => ‘post’, ‘posts_per_page’ => $cols * $rows, ‘paged’ => $paged, ‘post_status’ => ‘publish’));
    $html = ‘<div class="do-grid">‘;
    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();
            $thumb = get_the_post_thumbnail_url(get_the_ID(), ‘medium’) ?: ‘https://via.placeholder.com/400×225’;
            $html .= sprintf(‘<a href="%s" class="do-card"><img alt decoding="async" src="%s" class="do-thumb"><div class="do-body"><div class="do-title">%s</div><span class="do-date">%s</span><div class="do-excerpt">%s</div></div></a>‘, get_permalink(), $thumb, get_the_title(), get_the_date(), wp_trim_words(get_the_excerpt(), 80));
        }
        wp_reset_postdata();
    }
    $html .= ‘</div>‘;
    return array(‘html’ => $html, ‘max’ => $query->max_num_pages, ‘paged’ => $paged);
}

/** 4. ショートコード **/
add_shortcode(‘custom_list_button’, function() {
    $res = do_render_logic(get_option(‘do_top_cols’, 3), get_option(‘do_top_rows’, 2));
    return ‘<div class="do-portal">‘.$res[‘html’].’</div>‘;
});

add_action(‘wp_head’, function() {
    echo ‘<style>.do-grid{display:flex;flex-wrap:wrap;gap:20px;}.do-card{width:calc(33.33% - 14px);background:#fff;border:1px solid #eee;border-radius:8px;overflow:hidden;text-decoration:none!important;color:#333!important;}.do-thumb{width:100%;aspect-ratio:16/9;object-fit:cover;}.do-body{padding:15px;}.do-title{font-weight:bold;margin-bottom:5px;}</style>‘;
});
?>

使い方：ショートコードを貼って、Portal設定を済ませるだけ！

淡路タマオ

簡単な設定だけ！かんたん日本語！誰でもできるで！

①ショートコードを貼る

表示したい場P所に以下のショートコードを貼り付けます。

トップページなどに6件表示したい場合 [custom_list_button]

投稿一覧ページ（all-posts）を作る場合 [custom_archive]

②Portal設定をササッと済ませる。

淡路タマオ

設定箇所はたったの5箇所！超かんたん！

以上！！

Geminiに出したプロンプト

私がGeminiに相談した初回プロンプトは以下です。

淡路タマオ

これで一旦プレビューして、少しずつ修正や追加したで。
でも初回だけでも、それっぽく仕上がったで！

プロンプト（クリックで展開します）

【前提】

テーマ： Cocoonを使ってます。
目的： 投稿一覧をオシャレな3カラムのカード型にしたい！

【作ってほしい機能】

見た目： 3列のカード型。中身は「アイキャッチ」「タイトル」「日付」「本文の抜粋（80文字くらい）」をセットにして。
スマホ対応： スマホで見たら自動で1列になるように、レスポンシブなCSSも入れてね。
ショートコード： 2パターン用意して。
- トップページ用ショートコード：最新記事を6件表示。下に「もっと見る」ボタンをつけて。
- 一覧ページ用ショートコード：記事を9件表示。下にページ番号（1, 2, 3…）をつけて。
【超重要】Cocoon対策： CocoonのCSSとケンカしてページ番号が縦に並んだり重なったりしないように、HTMLのクラス名は do-custom- みたいに独自のやつを使って。CSSには !important をガッツリつけて、Cocoonの干渉を物理的に弾き返してね。
固定ページ対応： 固定ページに貼って使うから、URLに ?paged=2 とかが付いてもちゃんと中身が切り替わるようにコードを組んで。

【出力形式】

これだけで動くPHPファイルを1枚まるごと出力して。

まとめ

このプラグインは、Cocoonの強力な機能を活かしつつ、デザインの自由度をさらに広げるために作りました。コードがわからない方でも、手順通りに進めれば自分専用のポータルサイトのような見た目が手に入ります。ぜひ試してみてください！

問い合わせ

※過去記事の誤報や削除依頼は随時受け付けております。