生成AIを活用して学習用レトロゲームサイト構築するためのWordPress準備

本ページは広告が含まれています。気になる広告をクリック頂けますと、サーバ運営費になります(^^

レトロゲームサイト構築
ゲームの管理：『カスタム投稿タイプ』
ゲーム一覧ページ（ポータル）のテンプレート作成
ゲーム一覧ページ（ポータル）のテンプレート作成
プラグインのインストール
ゲームを追加する
ゲームへアクセス！

レトロゲームサイト構築

生成AIの学習がてら、webサイトゲームを作っています。

学習の記録としてゲームも公開していくので、その準備として、wordpressへの公開準備をしているところです。作成しているゲームはこんな感じです。

ゲームの管理：『カスタム投稿タイプ』

『ゲーム』という専用の投稿タイプを新設

子テーマのfunctions.phpにカスタム投稿タイプとタクソノミーを登録

function create_game_post_type() {
    // カスタム投稿タイプ「ゲーム」を登録
    register_post_type('game',
        array(
            'labels' => array(
                'name' => __('ゲーム'),
                'singular_name' => __('ゲーム')
            ),
            'public' => true,
            'has_archive' => true, // 一覧ページを有効化
            'supports' => array('title', 'editor', 'thumbnail'), // タイトル、本文、アイキャッチ画像を利用
            'menu_icon' => 'dashicons-games', // 管理画面のアイコン
            'rewrite' => array('slug' => 'games'), // URLのスラッグ
        )
    );

    // ゲーム用のカスタムタクソノミー「ジャンル」を登録
    register_taxonomy(
        'genre', // タクソノミー名
        'game',  // ゲーム投稿タイプに紐付け
        array(
            'label' => 'ジャンル',
            'hierarchical' => true, // カテゴリー形式（階層あり）
            'public' => true,
            'show_ui' => true,
            'show_in_rest' => true, // Gutenbergエディタで利用可能に
        )
    );
}
add_action('init', 'create_game_post_type');

すると、メニューの中にゲームが現れる

ゲーム一覧ページ（ポータル）のテンプレート作成

子テーマフォルダの中に

archive-game.php　という新規ファイルを作成しテンプレート化

<?php get_header(); ?>

<div class="container">
    <header class="page-header">
        <h1>レトロゲームコーナー</h1>
    </header>

    <div class="game-list">
        <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
            <article class="game-item">
                <a href="<?php the_permalink(); ?>">
                    <?php if (has_post_thumbnail()) : ?>
                        <?php the_post_thumbnail('medium'); // アイキャッチ画像を表示 ?>
                    <?php endif; ?>
                    <h2><?php the_title(); ?></h2>
                </a>
            </article>
        <?php endwhile; endif; ?>
    </div>
</div>

<?php get_footer(); ?>

ゲーム一覧ページ（ポータル）のテンプレート作成

子テーマフォルダに single-game.php という名前で新規ファイルを作成します。これがゲームのメインページになります。

<?php get_header(); ?>

<div class="container">
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
        <article class="game-content">
            <header class="game-header">
                <h1><?php the_title(); ?></h1>
            </header>

            <!-- ゲーム本体の埋め込み -->
            <div class="game-container">
                <?php
                // ACFプラグインで作成した 'game_url' フィールドからURLを取得
                $game_url = get_field('game_url');
                if ($game_url):
                ?>
                    <iframe src="<?php echo esc_url($game_url); ?>"></iframe>
                <?php else: ?>
                    <p>ゲームを読み込めません。</p>
                <?php endif; ?>
            </div>

            <!-- ゲーム情報（遊び方など） -->
            <div class="game-info">
                <h2>遊び方</h2>
                <?php the_content(); // WordPressの本文部分を表示 ?>
            </div>

            <!-- SNSシェアボタン -->
            <div class="game-share">
                <h2>このゲームをシェアする</h2>
                <a href="https://twitter.com/share?url=<?php the_permalink(); ?>&text=<?php the_title(); ?>で遊んだよ！" target="_blank">Xでシェア</a>
                <!-- 他のSNSボタンも同様に追加 -->
            </div>

            <!-- ランキング表示エリア -->
            <div id="ranking-area">
                <h2>ランキング</h2>
                <!-- ランキングはJavaScriptでここに表示されます -->
            </div>
        </article>
    <?php endwhile; endif; ?>
</div>

<?php get_footer(); ?>