WordPressでゲーム攻略サイト「カスタムフィールドを作る」

WordPressを使ってゲーム攻略サイトのデータベースを構築しましょう。

この記事では、独自のキャラクターや武器のデータベースを作成する方法をご紹介します。まず、カスタム投稿タイプとカスタムフィールドを利用して、ゲーム内のキャラクターやアイテムの情報を保存・管理します。

次に、これらのデータを使って、任意のキャラクターや武器の比較を行うテーブルを表示する方法を学びます。さらに、CSVインポート機能を使って、効率的にデータをインポートする方法も解説します。

これらの手順を組み合わせることで、魅力的なゲーム攻略サイトを構築できるようになります。それでは、具体的な手順を見ていきましょう。

ChatGPTに生成してもらった基礎編：最初のページはこちら。

ChatGPT入門ガイド: これだけ知っておけばOK!

ChatGPT入門ガイドでは、AI会話エンジンの基本概念や使い方をわかりやすく解説。無料プランと有料プランの違いやAPI利用方法まで網羅。これであなたもChatGPTの達人へ！

buchikuma.xyz

2024.03.22

WordPressでゲームサイトのようなデータベースを作る方法

ChatGPTとの対話メモです。

最初に知っておくべき8個のポイント

GPT-4.0に抽出してもらっています。

1. ゲーム攻略記事の投稿: WordPressでカスタム投稿タイプを使用して、ゲーム攻略記事を投稿・管理できるように設定します。これにより、通常のブログ記事とは別にゲーム攻略記事を効果的に整理できます。
2. カテゴリーやタグの活用: ゲーム攻略記事を見つけやすくするために、カテゴリーやタグを活用して記事を整理します。ゲームのジャンルや攻略の種類などで分類して、ユーザーが情報を探しやすくします。
3. ユーザー投稿機能の追加: ゲーム攻略情報を共有するために、ユーザーが自由に投稿できる機能を設けることができます。これには、プラグインやカスタムコードを利用して実装することができます。
4. コメント機能の活用: 攻略情報に対するユーザーの意見や質問を受け付けるために、コメント機能を活用します。適切なモデレーションを行い、コミュニティの活性化に努めます。
5. ゲーム攻略動画の埋め込み: ゲーム攻略サイトでは、記事だけでなく動画も重要なコンテンツです。YouTubeなどの動画サービスから攻略動画を埋め込んで、ユーザーにわかりやすい情報提供ができます。
6. ゲーム攻略情報を探しやすい検索機能: ゲーム攻略サイトでは、ユーザーが求める情報を簡単に見つけられるように、検索機能を強化することが重要です。プラグインを使用して、高度な検索機能を実装しましょう。
7. データベースのバックアップ: ゲームサイトのデータベースを定期的にバックアップすることで、万が一のデータ喪失や不具合時に対応できます。バックアップは手動で行うか、プラグインを利用することができます。
8. データベースの最適化: 定期的にデータベースを最適化することで、パフォーマンスを向上させることができます。最適化は、プラグインを利用するか、SQLコマンドを使用して行います。

各項目の優先順位比較表

何から着手すべきか悩んだ時のために優先順位ややるべきことをまとめました。

以下の表は、ゲーム攻略サイトを構築する際に考慮すべき各項目について、準備の必要性、インストールすべきプラグイン、優先順位、構築難易度、および着手すべき順番を1〜10点で評価したものです。

項目	準備の必要性	インストールすべきプラグイン	優先順位	構築難易度
サーバーの選択	10	–	1	3
データベース設定	9	WP-DBManager	2	4
カスタム投稿タイプ設定	8	Custom Post Type UI	3	5
カテゴリー・タグ管理	8	–	4	3
ユーザー投稿機能	7	User Submitted Posts	5	6
コメント機能の活用	6	Disqus	6	3
攻略動画の埋め込み	7	–	7	2
高度な検索機能	7	Relevanssi	8	5
セキュリティ対策	9	Wordfence	9	4
デザイン・レイアウト調整	8	Elementor	10	5

この表を参考に、ゲーム攻略サイトの構築に取り組む際の準備と進め方について、優先順位や難易度を考慮しながら計画を立てていくことができます。各項目については、自分のスキルやニーズに応じて柔軟に調整してください。

データベース構築のためのフローチャート

以下に、WordPressを利用してゲーム攻略サイトを作成する際のフローチャートに含めるべき主要な項目を示します。

1. ドメインの取得
2. サーバー（Xserver）の契約
3. WordPressのインストール
4. サーバーへのデータベース作成
5. wp-config.phpの編集（データベース接続情報設定）
6. WordPress管理画面へのログイン
7. 必要なプラグインのインストール
8. テーマの選択・インストール
9. カスタム投稿タイプの設定
10. カテゴリー・タグの設定
11. ユーザー投稿機能の設定
12. コメント機能の設定
13. 動画埋め込み機能の設定
14. 検索機能の設定
15. セキュリティ対策の実施
16. サイトデザイン・レイアウトの調整
17. ゲーム攻略記事の作成・投稿
18. サイト公開
19. SEO対策
20. 定期的なデータベースのバックアップ・最適化

これらの項目を参考にして、フローチャートを作成し、スムーズにゲーム攻略サイトを立ち上げることができます。各項目の順序や詳細は、状況や要件に応じて適宜調整してください。

サーバーへのデータベース作成

Xserverを利用している場合、データベースの作成方法は次のようになります。

1. Xserverのコントロールパネルにログインします。ログイン情報は、契約時にメールで送られてきたものを使用してください。
2. コントロールパネルのトップ画面にある「データベース」セクションを見つけ、「MySQL」をクリックします。
3. 「新しいデータベースを作成」ボタンをクリックして、データベース作成画面に進みます。
4. データベース名を入力します。データベース名は、英数字で構成されている必要があります。例: “mygameguide_db”
5. データベースユーザー名を入力します。データベース名と同様に、英数字で構成されている必要があります。例: “mygameguide_user”
6. パスワードを入力します。このパスワードは、WordPressの設定ファイル（wp-config.php）で使用するため、忘れずにメモしておきましょう。強力なパスワードを使用することで、セキュリティを向上させることができます。
7. 入力が完了したら、「作成」ボタンをクリックしてデータベースを作成します。
8. データベースが作成されたことを確認し、データベース名、ユーザー名、パスワードをメモしておきます。

次に、WordPressの設定ファイル（wp-config.php）にデータベース接続情報を設定します。

1. ファイル管理ツールやFTPクライアントを使って、サーバー上のWordPressフォルダにアクセスします。
2. 「wp-config-sample.php」ファイルを「wp-config.php」にリネームします。
3. 「wp-config.php」ファイルを開いて編集します。
4. 以下の部分を先ほど作成したデータベースの情報に置き換えます。

sql

define('DB_NAME', 'データベース名');
define('DB_USER', 'ユーザー名');
define('DB_PASSWORD', 'パスワード');
define('DB_HOST', 'localhost');

例:

sql

define('DB_NAME', 'mygameguide_db');
define('DB_USER', 'mygameguide_user');
define('DB_PASSWORD', 'your_password');
define('DB_HOST', 'localhost');

5. 編集が完了したら、「wp-config.php」ファイルを保存し、サーバーにアップロードします。

ゲーム攻略サイトにおけるデータベースとは

ゲーム攻略サイトにおけるデータベースは、サイト上で管理・表示される情報を保存・整理するための仕組みです。データベースには、記事、カテゴリー、タグ、ユーザー情報、コメントなど、サイト運営に関連するデータが格納されます。

以下に、ゲーム攻略サイトにおけるデータベースで管理される主要なデータの例を挙げます。

1. 攻略記事: ゲーム攻略に関するテキストや画像、動画などの情報が含まれます。各記事は、特定のゲームや攻略のカテゴリーに関連付けられ、サイト上で整理されます。
2. カテゴリー: 攻略記事を分類するためのラベルです。ゲームのジャンルや攻略の種類など、共通のテーマに基づいて記事をグループ化することができます。
3. タグ: カテゴリーと同様に、記事を分類するためのラベルですが、より細かいキーワードに基づいて記事を関連付けることができます。
4. ユーザー情報: サイトの管理者や投稿者、登録メンバーの情報が格納されます。ユーザー名、パスワード、メールアドレス、役割などのデータが含まれます。
5. コメント: 訪問者が記事に対して投稿するコメントの情報です。コメントの内容、投稿者名、投稿日時などのデータが管理されます。
6. カスタム投稿タイプ: サイト運営に必要な独自のコンテンツタイプを作成・管理するための仕組みです。例えば、ゲーム攻略記事を通常のブログ記事とは別に管理するために利用できます。

データベースは、これらの情報を効率的に保存・取り出し・検索するための重要な役割を果たしています。適切なデータベース管理によって、ゲーム攻略サイトの運営をスムーズに行い、ユーザーにとって使いやすいサイトを構築できます。

当サイトのゲーム情報をまとめやすくする方法

というわけで、一般的な部分から、「このサイトをどうするか」について考えていこうと思います。

私がゲーム攻略サイトに期待する機能

• キャラクターや武器などのゲーム内アイテムのステータスをデータベースに保存
• データベース内のキャラクターのデータをランキング形式で比較できる
• 表形式で表示されたWebページ上のデータに対して、ユーザー側からもキャラクターや武器のデータをソートできる機能がある
• ユーザーが再度ページに訪問したときにも利用できるように、保存できるようにキャッシュされる
• ゲーム用のマップを画像で投稿した際に、アイコンなどを表示して情報を追記できる構造にする

実際にできることと手法

以下の手順で、指定されたデータベース機能を持つゲーム攻略サイトを構築できます。

1. ゲーム内アイテムのデータベース構築: WordPressでカスタム投稿タイプとカスタムフィールドを使用して、キャラクターや武器などのゲーム内アイテムのステータスを保存できるようにします。これにより、独自のアイテムデータを効率的に管理できます。
2. データのランキング表示: データベースからアイテムのステータスを取得し、ランキング形式で表示するために、カスタムクエリを使用してデータをソートします。これにより、ユーザーにランキング情報を提供できます。
3. 表形式でのデータソート機能: 表形式で表示されたデータをユーザーがソートできるようにするために、JavaScriptライブラリ（例: DataTables）を導入します。これにより、ユーザーは好みに応じて表のデータをソートできます。
4. キャッシュ機能: ユーザーが再度ページに訪問したときにも利用できるように、キャッシュ機能を導入します。WordPress向けのキャッシュプラグイン（例: WP Super Cache, W3 Total Cache）を利用することで、キャッシュの管理が容易になります。
5. マップ画像への情報追記: ゲーム用のマップ画像にアイコンなどを表示して情報を追記するために、JavaScriptライブラリ（例: Leaflet, OpenLayers）を使用してインタラクティブな地図を作成します。これにより、ユーザーは画像上にアイコンを配置して情報を追記できるようになります。

これらの手順に従って、指定されたデータベース機能を持つゲーム攻略サイトを構築することができます。必要に応じて、追加のカスタマイズやプラグインの導入を行うことで、より使いやすく魅力的なサイトに仕上げることができます。

ゲーム内アイテムのデータベース構築

以下に、WordPressでゲーム内アイテムのデータベース構築を行うためのフローチャートを示します。

1. カスタム投稿タイプの作成:
   1.1. functions.phpファイルを開き、新しいカスタム投稿タイプを登録する関数を作成します。
   1.2. ‘init’アクションフックに関数を追加します。
2. カスタムフィールドの追加:
   2.1. カスタムフィールドを管理するプラグインをインストールします（例: Advanced Custom Fields）。
   2.2. プラグインを使って、カスタム投稿タイプに関連するカスタムフィールドを作成します（例: キャラクター名、HP、攻撃力、防御力など）。
3. カスタム投稿タイプとカスタムフィールドの表示:
   3.1. single-{custom-post-type}.phpテンプレートファイルを作成し、カスタム投稿タイプの表示をカスタマイズします。
   3.2. カスタムフィールドの値を取得し、テンプレートに表示します。

カスタム投稿タイプの作成

以下に、WordPressでゲーム内アイテムのデータベース構築を行うためのフローチャートを示します。

1. カスタム投稿タイプの作成:
   1.1. functions.phpファイルを開き、新しいカスタム投稿タイプを登録する関数を作成します。
   1.2. ‘init’アクションフックに関数を追加します。
2. カスタムフィールドの追加:
   2.1. カスタムフィールドを管理するプラグインをインストールします（例: Advanced Custom Fields）。
   2.2. プラグインを使って、カスタム投稿タイプに関連するカスタムフィールドを作成します（例: キャラクター名、HP、攻撃力、防御力など）。
3. カスタム投稿タイプとカスタムフィールドの表示:
   3.1. single-{custom-post-type}.phpテンプレートファイルを作成し、カスタム投稿タイプの表示をカスタマイズします。
   3.2. カスタムフィールドの値を取得し、テンプレートに表示します。

キャラクター情報を管理するデータベース

例題: キャラクター情報を管理するデータベースを作成します。

1. カスタム投稿タイプの作成:

functions.phpファイルに以下のコードを追加します。

php

function create_character_post_type() {
    $args = array(
        'public' => true,
        'label'  => 'キャラクター',
        'supports' => array('title', 'editor', 'thumbnail')
    );
    register_post_type('character', $args);
}
add_action('init', 'create_character_post_type');

2. カスタムフィールドの追加:

Advanced Custom Fieldsプラグインをインストールし、以下のカスタムフィールドを作成します。

• キャラクター名 (character_name)
• HP (hp)
• 攻撃力 (attack)
• 防御力 (defense)

3. カスタム投稿タイプとカスタムフィールドの表示:

single-character.phpファイルを作成し、以下のようにカスタムフィールドの値を表示します。

php

<?php
get_header();
if (have_posts()) :
    while (have_posts()) : the_post(); ?>
        <h1><?php the_title(); ?></h1>
        <p>キャラクター名: <?php the_field('character_name'); ?></p>
        <p>HP: <?php the_field('hp'); ?></p>
        <p>攻撃力: <?php the_field('attack'); ?></p>
        <p>防御力: <?php the_field('defense'); ?></p>
    <?php endwhile;
endif;
get_footer();

キャラクターごとにIDなどを指定する

キャラクターごとに投稿ID（post ID）を使用してデータを呼び出すことができます。投稿IDを指定することで、特定のキャラクターに関連するデータを取得できます。以下に、カスタム投稿タイプ「キャラクター」から投稿IDを使ってデータを取得する方法を示します。

php

// キャラクターの投稿IDを指定
$character_post_id = 123;

// タイトル（キャラクター名）を取得
$character_name = get_the_title($character_post_id);

// カスタムフィールドから各ステータスを取得
$hp = get_field('hp', $character_post_id);
$attack = get_field('attack', $character_post_id);
$defense = get_field('defense', $character_post_id);

// 取得したデータを表示
echo "キャラクター名: " . $character_name . "<br>";
echo "HP: " . $hp . "<br>";
echo "攻撃力: " . $attack . "<br>";
echo "防御力: " . $defense . "<br>";

このコードを使用することで、指定した投稿IDに関連するキャラクターのデータを取得して表示できます。投稿IDは、WordPress管理画面で各キャラクター投稿の編集画面から確認できます。また、特定の条件でキャラクターを検索する場合は、WP_Queryを使用して複数のキャラクター情報を取得することもできます。

ヘッダーにソート機能

複数のキャラクターをテーブル内でまとめて表示し、ヘッダーにソート機能を持たせるには以下の手順が必要です。

1. キャラクター情報を取得する
2. テーブルを作成し、キャラクター情報を表示する
3. DataTablesなどのJavaScriptライブラリを導入してソート機能を追加する

以下に詳細な手順とサンプルコードを示します。

1. キャラクター情報を取得する:

WP_Queryを使用して、カスタム投稿タイプ「キャラクター」から全てのキャラクター情報を取得します。

php

$args = array(
    'post_type' => 'character',
    'posts_per_page' => -1
);
$characters_query = new WP_Query($args);

2. テーブルを作成し、キャラクター情報を表示する:

取得したキャラクター情報をHTMLテーブルに表示します。

html

<table id="characters-table">
    <thead>
        <tr>
            <th>キャラクター名</th>
            <th>HP</th>
            <th>攻撃力</th>
            <th>防御力</th>
        </tr>
    </thead>
    <tbody>
        <?php
        if ($characters_query->have_posts()) :
            while ($characters_query->have_posts()) : $characters_query->the_post();
                $hp = get_field('hp');
                $attack = get_field('attack');
                $defense = get_field('defense');
                ?>
                <tr>
                    <td><?php the_title(); ?></td>
                    <td><?php echo $hp; ?></td>
                    <td><?php echo $attack; ?></td>
                    <td><?php echo $defense; ?></td>
                </tr>
            <?php endwhile;
        endif;
        wp_reset_postdata();
        ?>
    </tbody>
</table>

3. DataTablesなどのJavaScriptライブラリを導入してソート機能を追加する:

DataTablesライブラリを導入し、テーブルにソート機能を追加します。まず、DataTablesのCSSとJavaScriptファイルを読み込んでください。これは、wp_enqueue_styleおよびwp_enqueue_scriptを使用して、WordPressのfunctions.phpファイルに追加できます。

php

function add_datatables_assets() {
    wp_enqueue_style('datatables', 'https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css');
    wp_enqueue_script('datatables', 'https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js', array('jquery'), '1.11.3', true);
}
add_action('wp_enqueue_scripts', 'add_datatables_assets');

そして、テーブルに適用するためにDataTablesを初期化するJavaScriptコードを追加します。

html

<script>
jQuery(document).ready(function() {
    jQuery('#characters-table').DataTable();
});
</script>

これで、キャラクター情報が表示されるテーブルにソート機能が追加されます。ユーザーは各列のヘッダーをクリックして、キャラクター名、HP、攻撃力、防御力の各ステータスに基づいて昇順または降順で並べ替えることができます。

上記の手順に従って、ソート機能を持つキャラクター情報のテーブルを作成できます。DataTablesライブラリは、ページネーションや検索機能など、テーブルにさらに強力な機能を追加することもできます。必要に応じて、DataTablesのドキュメントを参照して、テーブルのカスタマイズを行ってください。

テーブル内で順位づけを表示する

保存されているすべてのキャラクターのデータを参照し、HPや攻撃力で順位づけして表示するには、以下の手順が必要です。

1. キャラクター情報を取得し、ソートする
2. 順位付けしたキャラクター情報を表示する

以下に詳細な手順とサンプルコードを示します。

1. キャラクター情報を取得し、ソートする:

WP_Queryを使用して、カスタム投稿タイプ「キャラクター」から全てのキャラクター情報を取得し、PHPでソートします。

php

$args = array(
    'post_type' => 'character',
    'posts_per_page' => -1
);
$characters_query = new WP_Query($args);

$characters = array();

if ($characters_query->have_posts()) :
    while ($characters_query->have_posts()) : $characters_query->the_post();
        $characters[] = array(
            'id' => get_the_ID(),
            'name' => get_the_title(),
            'hp' => get_field('hp'),
            'attack' => get_field('attack'),
            'defense' => get_field('defense')
        );
    endwhile;
endif;
wp_reset_postdata();

// HPでソート
usort($characters, function($a, $b) {
    return $b['hp'] <=> $a['hp'];
});

2. 順位付けしたキャラクター情報を表示する:

順位付けしたキャラクター情報をHTMLテーブルに表示します。

html

<table>
    <thead>
        <tr>
            <th>順位</th>
            <th>キャラクター名</th>
            <th>HP</th>
            <th>攻撃力</th>
            <th>防御力</th>
        </tr>
    </thead>
    <tbody>
        <?php
        $rank = 1;
        foreach ($characters as $character) :
            ?>
            <tr>
                <td><?php echo $rank++; ?></td>
                <td><?php echo $character['name']; ?></td>
                <td><?php echo $character['hp']; ?></td>
                <td><?php echo $character['attack']; ?></td>
                <td><?php echo $character['defense']; ?></td>
            </tr>
        <?php endforeach; ?>
    </tbody>
</table>

これで、キャラクター情報がHPで順位付けされたテーブルが表示されます。攻撃力や防御力でソートする場合は、usort()関数内のソート条件を変更してください。

この方法で、保存されているすべてのキャラクターのデータを参照し、HPや攻撃力などのステータスで順位づけして表示することができます。

実際に、当サイトに適応させる

実践編です。

実際にカスタム投稿タイプでテンプレートを作成する

例えば、キャラクター、アイテム、武器の3つのカスタム投稿タイプを作成する場合、次のような手順で実装できます。

1. functions.phpにregister_post_type()関数を使用して、キャラクター、アイテム、武器のカスタム投稿タイプをそれぞれ作成します。
2. 各カスタム投稿タイプに対応するテンプレートファイル（例：single-character.php、single-item.php、single-weapon.php）を作成します。これらのファイルでは、それぞれのカスタム投稿タイプに応じたデザインや機能を実装できます。
3. 各カスタム投稿タイプに対して、必要なメタボックスを追加します。これにより、独立した投稿ページでカスタムフィールドの入力が行えるようになります。

この方法で、異なるデータに対してそれぞれのテンプレートを作成し、投稿時に選択して利用することができます。また、カスタム投稿タイプごとに異なるカスタムフィールドを設定することも可能です。

functions.phpにregister_post_type()関数を使用してカスタム投稿タイプを作る

以下のコードは、functions.phpに記述して、キャラクター、アイテム、武器のカスタム投稿タイプをそれぞれ作成する例です。

php

// カスタム投稿タイプの登録
function create_custom_post_types() {
  // キャラクター
  register_post_type('character', [
    'labels' => [
      'name' => 'キャラクター',
      'singular_name' => 'キャラクター',
      'add_new' => '新規追加',
      'add_new_item' => 'キャラクターを追加',
      'edit_item' => 'キャラクターを編集',
    ],
    'public' => true,
    'supports' => ['title', 'editor', 'thumbnail'],
    'menu_position' => 5,
    'has_archive' => true,
  ]);

  // アイテム
  register_post_type('item', [
    'labels' => [
      'name' => 'アイテム',
      'singular_name' => 'アイテム',
      'add_new' => '新規追加',
      'add_new_item' => 'アイテムを追加',
      'edit_item' => 'アイテムを編集',
    ],
    'public' => true,
    'supports' => ['title', 'editor', 'thumbnail'],
    'menu_position' => 5,
    'has_archive' => true,
  ]);

  // 武器
  register_post_type('weapon', [
    'labels' => [
      'name' => '武器',
      'singular_name' => '武器',
      'add_new' => '新規追加',
      'add_new_item' => '武器を追加',
      'edit_item' => '武器を編集',
    ],
    'public' => true,
    'supports' => ['title', 'editor', 'thumbnail'],
    'menu_position' => 5,
    'has_archive' => true,
  ]);
}

add_action('init', 'create_custom_post_types');

このコードでは、register_post_type()関数を使ってキャラクター、アイテム、武器のカスタム投稿タイプを定義し、create_custom_post_types()という関数にまとめています。それぞれのカスタム投稿タイプには、投稿タイプ名（例：キャラクター）、シングル投稿名（例：キャラクター）、新規追加ボタンのラベル（例：新規追加）、編集ページのラベル（例：キャラクターを編集）などのラベル情報を設定しています。

最後に、add_action()関数を使って、initアクションフックにcreate_custom_post_types()関数を登録しています。これにより、WordPressが初期化される際に、カスタム投稿タイプが登録されるようになります。

各カスタム投稿タイプに対応するテンプレートファイルを作成

PHPファイルの作り方

WordPress内で新しいPHPファイルを作成するには、以下の手順に従ってください。

1. WordPressのインストールディレクトリにアクセスします。通常、FTPクライアント（FileZillaなど）を使って、サーバーに接続し、WordPressのファイルが置かれているディレクトリを開きます。
2. 新しいPHPファイルを作成したい場所（例：テーマフォルダ内やプラグインフォルダ内）に移動します。たとえば、現在使用中のテーマフォルダ内に新しいPHPファイルを作成する場合は、/wp-content/themes/your-theme/ディレクトリに移動します。「your-theme」は現在使用中のテーマ名に置き換えてください。
3. FTPクライアントを使って、新しいPHPファイルを作成します。例えば、new-file.phpという名前のファイルを作成する場合は、右クリックして「新しいファイルを作成」を選択し、ファイル名を入力します。
4. 新しいPHPファイルを開いて、必要なコードを記述します。最初に、<?phpというタグを入力して、PHPコードが記述されていることを明示します。その後、必要なPHPコードを記述していきます。
5. 作成したPHPファイルを保存して、WordPressのテーマやプラグイン内で利用できるようにします。例えば、テーマのfunctions.phpファイルから新しいPHPファイルを読み込むには、require_onceやincludeなどの関数を使ってファイルをインクルードします。以下は、functions.phpファイルからnew-file.phpを読み込む例です。

phpCopy coderequire_once get_template_directory() . '/new-file.php';

これで、新しいPHPファイルが作成され、WordPressのテーマやプラグイン内で利用できるようになります。

それぞれのテンプレートに沿ったPHPファイルの記述

それぞれのカスタム投稿タイプに対応するテンプレートファイルを作成するために、以下の手順に従ってください。

1. まず、現在使用中のテーマフォルダ内に、各カスタム投稿タイプ用のテンプレートファイルを作成します。例えば、single-character.php、single-item.php、single-weapon.phpといったファイルを作成してください。
2. 各テンプレートファイルに、以下のようなコードを追加して、共通のヘッダーとフッターを読み込みます。

phpCopy code<?php get_header(); ?>

// ここにカスタム投稿タイプに応じたコンテンツを表示するコードを追加します。

<?php get_footer(); ?>

3. 各カスタム投稿タイプに応じたコンテンツを表示するコードを追加します。例えば、single-character.phpファイルでは、キャラクターのアイコン、HP、MP、攻撃力、防御力、スピードのパラメータ、説明文、およびスキル情報を表示するコードを記述します。以下は、single-character.phpでキャラクター情報を表示する例です。

phpCopy code<?php get_header(); ?>

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <h1><?php the_title(); ?></h1>
    <div class="character-icon">
        <?php the_post_thumbnail(); ?>
    </div>
    <div class="character-parameters">
        <p>HP: <?php echo get_post_meta(get_the_ID(), 'hp', true); ?></p>
        <p>MP: <?php echo get_post_meta(get_the_ID(), 'mp', true); ?></p>
        <p>攻撃力: <?php echo get_post_meta(get_the_ID(), 'attack', true); ?></p>
        <p>防御力: <?php echo get_post_meta(get_the_ID(), 'defense', true); ?></p>
        <p>スピード: <?php echo get_post_meta(get_the_ID(), 'speed', true); ?></p>
    </div>
    <div class="character-description">
        <?php the_content(); ?>
    </div>
    <div class="character-skills">
        <?php
        $skills = get_post_meta(get_the_ID(), 'skills', true);
        if (!empty($skills)) :
            foreach ($skills as $skill) :
        ?>
                <h2><?php echo $skill['name']; ?></h2>
                <p>使用MP: <?php echo $skill['mp_cost']; ?></p>
                <p>技の威力: <?php echo $skill['power']; ?></p>
                <p>説明: <?php echo $skill['description']; ?></p>
        <?php
            endforeach;
        endif;
        ?>
    </div>
<?php endwhile; endif; ?>

<?php get_footer(); ?>

4. 同様に、single-item.phpと`single-weapon.phpファイルに、アイテムや武器の情報を表示するためのコードを追加します。以下は、single-item.phpでアイテム情報を表示する例です。

phpCopy code<?php get_header(); ?>

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <h1><?php the_title(); ?></h1>
    <div class="item-icon">
        <?php the_post_thumbnail(); ?>
    </div>
    <div class="item-description">
        <?php the_content(); ?>
    </div>
    <div class="item-location">
        <p>取得場所: <?php echo get_post_meta(get_the_ID(), 'location', true); ?></p>
    </div>
<?php endwhile; endif; ?>

<?php get_footer(); ?>

そして、single-weapon.phpで武器情報を表示する例です。

php

<?php get_header(); ?>

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <h1><?php the_title(); ?></h1>
    <div class="weapon-icon">
        <?php the_post_thumbnail(); ?>
    </div>
    <div class="weapon-parameters">
        <p>HP: <?php echo get_post_meta(get_the_ID(), 'hp', true); ?></p>
        <p>MP: <?php echo get_post_meta(get_the_ID(), 'mp', true); ?></p>
        <p>攻撃力: <?php echo get_post_meta(get_the_ID(), 'attack', true); ?></p>
        <p>防御力: <?php echo get_post_meta(get_the_ID(), 'defense', true); ?></p>
        <p>スピード: <?php echo get_post_meta(get_the_ID(), 'speed', true); ?></p>
    </div>
    <div class="weapon-description">
        <?php the_content(); ?>
    </div>
<?php endwhile; endif; ?>

<?php get_footer(); ?>

これで、各カスタム投稿タイプに対応するテンプレートファイルが完成し、それぞれのキャラクター、アイテム、武器のデータを表示できるようになります。

ただし、このコードは例であり、実際のサイトに応じてデザインや機能をカスタマイズする必要があります。また、カスタムフィールドのデータを保存するために、先に説明したメタボックスの追加やデータ保存のコードもfunctions.phpに追記しておく必要があります。

メタボックスを作成する

以下のコードは、それぞれのカスタム投稿タイプに必要なメタボックスを追加する方法を示しています。このコードをfunctions.phpに追記してください。

まず、メタボックスを追加する関数を定義します。

php

function add_custom_meta_boxes() {
    // キャラクター用のメタボックス
    add_meta_box('character_info', 'キャラクター情報', 'character_info_callback', 'character', 'normal', 'high');

    // アイテム用のメタボックス
    add_meta_box('item_info', 'アイテム情報', 'item_info_callback', 'item', 'normal', 'high');

    // 武器用のメタボックス
    add_meta_box('weapon_info', '武器情報', 'weapon_info_callback', 'weapon', 'normal', 'high');
}
add_action('add_meta_boxes', 'add_custom_meta_boxes');

次に、各メタボックスのコールバック関数を定義します。これらの関数では、メタボックス内に表示されるフォーム要素を定義します。

php

// キャラクター用メタボックスのコールバック関数
function character_info_callback($post) {
    wp_nonce_field(basename(__FILE__), 'character_info_nonce');

    $hp = get_post_meta($post->ID, 'hp', true);
    $mp = get_post_meta($post->ID, 'mp', true);
    // 以下、他のフィールドについても同様に記述していきます。

    // HTMLコードを出力
    echo '<label for="hp">HP: </label>';
    echo '<input type="number" name="hp" id="hp" value="' . esc_attr($hp) . '" />';
    echo '<br />';
    echo '<label for="mp">MP: </label>';
    echo '<input type="number" name="mp" id="mp" value="' . esc_attr($mp) . '" />';
    // 以下、他のフィールドについても同様に記述していきます。
}

// アイテム用メタボックスのコールバック関数
function item_info_callback($post) {
    wp_nonce_field(basename(__FILE__), 'item_info_nonce');

    $location = get_post_meta($post->ID, 'location', true);

    // HTMLコードを出力
    echo '<label for="location">取得場所: </label>';
    echo '<input type="text" name="location" id="location" value="' . esc_attr($location) . '" />';
}

// 武器用メタボックスのコールバック関数
function weapon_info_callback($post) {
    wp_nonce_field(basename(__FILE__), 'weapon_info_nonce');

    $hp = get_post_meta($post->ID, 'hp', true);
    $mp = get_post_meta($post->ID, 'mp', true);
    // 以下、他のフィールドについても同様に記述していきます。

    // HTMLコードを出力
    echo '<label for="hp">HP: </label>';
    echo '<input type="number" name="hp" id="hp" value="' . esc_attr($hp) . '" />';
    echo '<br />';
    echo '<label for="mp">MP: </label>';
    echo '<input type="number" name="mp" id="mp" value="' . esc_attr($mp) . '" />';
    // 以下、他のフィールドについても同様に記述していきます。
}

最後に、投稿が保存されるときにカスタムフィールドの値が保存されるようにするために、save_postアクションフックに関数を登録します。

phpCopy codefunction save_custom_meta_boxes($post_id) {
    // 各メタボックスのnonceチェック
    if (!isset($_POST['character_info_nonce']) || !wp_verify_nonce($_POST['character_info_nonce'], basename(__FILE__))
        || !isset($_POST['item_info_nonce']) || !wp_verify_nonce($_POST['item_info_nonce'], basename(__FILE__))
        || !isset($_POST['weapon_info_nonce']) || !wp_verify_nonce($_POST['weapon_info_nonce'], basename(__FILE__))) {
        return;
    }

    // 自動保存時はスキップ
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
        return;
    }

    // 権限チェック
    if (!current_user_can('edit_post', $post_id)) {
        return;
    }

    // キャラクター情報の保存
    if (isset($_POST['hp'])) {
        update_post_meta($post_id, 'hp', $_POST['hp']);
    }
    if (isset($_POST['mp'])) {
        update_post_meta($post_id, 'mp', $_POST['mp']);
    }
    // 以下、他のフィールドについても同様に記述していきます。

    // アイテム情報の保存
    if (isset($_POST['location'])) {
        update_post_meta($post_id, 'location', $_POST['location']);
    }

    // 武器情報の保存
    if (isset($_POST['hp'])) {
        update_post_meta($post_id, 'hp', $_POST['hp']);
    }
    if (isset($_POST['mp'])) {
        update_post_meta($post_id, 'mp', $_POST['mp']);
    }
    // 以下、他のフィールドについても同様に記述していきます。
}
add_action('save_post', 'save_custom_meta_boxes');

以上のコードをfunctions.phpに追記することで、各カスタム投稿タイプに対して必要なメタボックスが追加され、それぞれの投稿ページでカスタムフィールドの入力が行えるようになります。

どこに追記すべき？

functions.phpはWordPressテーマ内にあるものに追記してください。functions.phpはテーマに関連するカスタム機能やフックを追加するのに適した場所です。

ただし、テーマを更新したり、別のテーマに切り替えた場合、functions.phpに追加したコードが失われる可能性があります。したがって、以下の方法のいずれかを検討してください。

1. 子テーマを作成し、その子テーマのfunctions.phpに追記することで、テーマの更新や切り替えによる影響を受けずに済みます。子テーマは親テーマの変更なしにカスタマイズを行うための機能です。
2. カスタム機能を実装するためのプラグインを作成し、その中にコードを追加することもできます。この方法は、テーマとは独立して機能を追加・管理できるため、テーマの変更や更新があっても機能が失われません。

いずれの方法を選んでも、コードの保持と整理に役立ちます。どちらかを選択して、適切な場所にコードを追記してください。

functions.php内でコードを追加する場所には、特定のルールはありませんが、一般的には以下のような配慮を行います。

1. 既存のコードと競合しないように、他の関数やフックと間をあけてコードを追記します。
2. 追加するコードの目的や機能に応じて、適切な場所に追記することが推奨されます。例えば、カスタム投稿タイプやカスタムタクソノミーを追加する場合、それらのコードを一か所にまとめると、後で見直しや修正が容易になります。
3. コードを追加する際に、そのコードが何を行うものかわかるようにコメントを記載すると、後でコードを見直す際に役立ちます。

ヘッダーやフッターといった特定の場所にコードを追加する必要はありません。ただし、関数やフックが上から下へと実行されるため、依存関係がある場合には、依存するコードよりも前に追記してください。

最後に、functions.phpのコードが多くなってくると、管理が難しくなることがあります。その場合、関数や機能ごとにファイルを分割し、functions.phpからrequire_once()やinclude()を使って読み込むことで、コードの整理が容易になります。

テーブルを作成し、キャラクター情報を表示

データ入力完了。次に、テーブルとして表示させるための方法を考えていきます。

キャラクターA, B, Cのステータスを表示するテーブルを作成する手順は以下の通りです。

1. 新しいWordPressページを作成します。例えば、「キャラクター一覧」というタイトルでページを作成します。
2. 作成したページに、以下のようなHTMLテーブルを追加します。

html

<table>
  <thead>
    <tr>
      <th>キャラクター名</th>
      <th>HP</th>
      <th>MP</th>
      <th>攻撃力</th>
      <th>防御力</th>
      <th>スピード</th>
      <th>説明文</th>
    </tr>
  </thead>
  <tbody>
    <!-- キャラクターのデータが入る部分 -->
  </tbody>
</table>

3. functions.php に以下のようなカスタム関数を追加して、キャラクターのデータを取得する関数を作成します。

php

function get_character_data() {
  $args = array(
    'post_type' => 'character', // カスタム投稿タイプ「character」を指定
    'posts_per_page' => -1, // 全てのキャラクターを取得
  );

  $characters = new WP_Query($args);

  $character_data = array();
  if ($characters->have_posts()) {
    while ($characters->have_posts()) {
      $characters->the_post();
      $character_data[] = array(
        'name' => get_the_title(),
        'hp' => get_post_meta(get_the_ID(), 'hp', true),
        'mp' => get_post_meta(get_the_ID(), 'mp', true),
        'attack' => get_post_meta(get_the_ID(), 'attack', true),
        'defense' => get_post_meta(get_the_ID(), 'defense', true),
        'speed' => get_post_meta(get_the_ID(), 'speed', true),
        'description' => get_post_meta(get_the_ID(), 'description', true),
      );
    }
  }
  wp_reset_postdata();

  return $character_data;
}

4. 作成したページのテーマファイル（例：page-character-list.php）に、以下のようなPHPコードを追加して、先ほど作成した関数を呼び出し、テーブルにデータを埋め込みます。

php

<?php
  $character_data = get_character_data();
  foreach ($character_data as $character) {
    echo '<tr>';
    echo '<td>' . esc_html($character['name']) . '</td>';
    echo '<td>' . esc_html($character['hp']) . '</td>';
    echo '<td>' . esc_html($character['mp']) . '</td>';
    echo '<td>' . esc_html($character['attack']) . '</td>';
    echo '<td>' . esc_html($character['defense']) . '</td>';
    echo '<td>' . esc_html($character['speed']) . '</td>';
    echo '<td>' . esc_html($character['description']) . '</td>';
    echo '</tr>';
  }
?>

次に、page-character-list.phpファイルに、以下のようなPHPコードを追加して、先ほど作成した関数を呼び出し、テーブルにデータを埋め込みます。

まず、関数を作成してfunctions.phpに追加します：

php

function get_characters_data() {
    $args = array(
        'post_type' => 'character',
        'post_status' => 'publish',
        'posts_per_page' => -1,
    );
    $characters_query = new WP_Query($args);

    $characters_data = array();
    if ($characters_query->have_posts()) {
        while ($characters_query->have_posts()) {
            $characters_query->the_post();
            $characters_data[] = array(
                'name' => get_the_title(),
                'hp' => get_post_meta(get_the_ID(), 'hp', true),
                'mp' => get_post_meta(get_the_ID(), 'mp', true),
                'attack' => get_post_meta(get_the_ID(), 'attack', true),
                'defense' => get_post_meta(get_the_ID(), 'defense', true),
                'speed' => get_post_meta(get_the_ID(), 'speed', true),
                'description' => get_post_meta(get_the_ID(), 'description', true),
            );
        }
        wp_reset_postdata();
    }
    return $characters_data;
}

そして、page-character-list.phpに以下のコードを追加します：

php

<?php
/* Template Name: Character List */

get_header();

$characters = get_characters_data();
?>
<div class="container">
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>HP</th>
                <th>MP</th>
                <th>Attack</th>
                <th>Defense</th>
                <th>Speed</th>
                <th>Description</th>
            </tr>
        </thead>
        <tbody>
            <?php foreach ($characters as $character): ?>
                <tr>
                    <td><?php echo $character['name']; ?></td>
                    <td><?php echo $character['hp']; ?></td>
                    <td><?php echo $character['mp']; ?></td>
                    <td><?php echo $character['attack']; ?></td>
                    <td><?php echo $character['defense']; ?></td>
                    <td><?php echo $character['speed']; ?></td>
                    <td><?php echo $character['description']; ?></td>
                </tr>
            <?php endforeach; ?>
        </tbody>
    </table>
</div>
<?php get_footer(); ?>

このコードにより、キャラクターリストページにテーブルが表示され、キャラクターの情報が一覧で表示されます。テーブルのデザインやスタイルを調整するには、CSSを適用してください。

任意のキャラクターを選択してテーブルを作成する

任意のキャラクター3人を選択してテーブルとして情報を表示するためには、以下の手順を踏みます。

1. 任意のキャラクターのIDを取得します。
2. 取得したIDを使用して、キャラクターのデータを取得します。
3. 取得したデータをテーブル形式で表示します。

例えば、「おすすめの3キャラクター比較」という記事を作成する際、キャラクターのIDが 10, 20, 30 だと仮定します。これらのキャラクターのデータを取得するために、以下のような関数をfunctions.phpに追加します。

php

function get_selected_characters_data($character_ids) {
    $args = array(
        'post_type' => 'character',
        'post_status' => 'publish',
        'post__in' => $character_ids,
    );
    $characters_query = new WP_Query($args);

    $characters_data = array();
    if ($characters_query->have_posts()) {
        while ($characters_query->have_posts()) {
            $characters_query->the_post();
            $characters_data[] = array(
                'name' => get_the_title(),
                'hp' => get_post_meta(get_the_ID(), 'hp', true),
                'mp' => get_post_meta(get_the_ID(), 'mp', true),
                'attack' => get_post_meta(get_the_ID(), 'attack', true),
                'defense' => get_post_meta(get_the_ID(), 'defense', true),
                'speed' => get_post_meta(get_the_ID(), 'speed', true),
                'description' => get_post_meta(get_the_ID(), 'description', true),
            );
        }
        wp_reset_postdata();
    }
    return $characters_data;
}

記事ページのテーマファイル（例：single-recommended-character-comparison.php）に、以下のようなコードを追加します。

php

<?php
/* Template Name: Recommended Character Comparison */

get_header();

$selected_character_ids = array(10, 20, 30); // 任意のキャラクターのIDを指定
$characters = get_selected_characters_data($selected_character_ids);
?>
<div class="container">
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>HP</th>
                <th>MP</th>
                <th>Attack</th>
                <th>Defense</th>
                <th>Speed</th>
                <th>Description</th>
            </tr>
        </thead>
        <tbody>
            <?php foreach ($characters as $character): ?>
                <tr>
                    <td><?php echo $character['name']; ?></td>
                    <td><?php echo $character['hp']; ?></td>
                    <td><?php echo $character['mp']; ?></td>
                    <td><?php echo $character['attack']; ?></td>
                    <td><?php echo $character['defense']; ?></td>
                    <td><?php echo $character['speed']; ?></td>
                    <td><?php echo $character['description']; ?></td>
                </tr>
            <?php endforeach; ?>
        </tbody>
    </table>
</div>
<?php get_footer(); ?>

このコードでは、指定したキャラクターのIDを使用して、それぞれのキャラクターのデータを取得し、テーブル形式で表示しています。

single-recommended-character-comparison.phpというテーマファイルを作成し、上記のコードを追加します。そして、WordPress管理画面から新しい記事を作成し、「おすすめの3キャラクター比較」というタイトルを付けます。記事の右側にある「テンプレート」の設定から、「Recommended Character Comparison」というテンプレートを選択して記事を公開します。

これで、作成された記事ページには、選択したキャラクターのデータがテーブル形式で表示されるようになります。任意のキャラクターを比較する場合は、$selected_character_idsの配列に適切なキャラクターIDを設定してください。

まとめ：「WordPressのカスタムフィールド」についての体験談

この項目はChatGPTの出力を待ちながら、考えたことや他の方の意見などを参考にしながら、いろいろなメモを書いておきます。

「WordPressのカスタムフィールド」できることメモ

これは本当のメモ。

• これは仮に出来上がったとしても、手入力になるならやらないだろうな、と予感
• データ入力方法を工夫することと、テーブル作成に関してもID抽出して自動で組み上がるくらいにしないと実用性は薄そう
• 攻略サイトを見ているとIDから表が生成されているみたいなので、近いところまでは来ている予感
• 辞書型、wiki型のページを作成するならやっておいて損はないけど、今後、個人で辞書型情報サイトを作るメリットは果たして。

今後やりたいことメモ

こちらもメモ。

• APIを利用できるまでのPython基礎編
• ブログ運営に役立ちそうなChatGPTの利用方法
• 情報収集した内容を踏まえてブログ記事に投稿する手順
• 正規表現を利用した有効な検索方法をChatGPTに生成させる
• 毎日チェックすべき情報をまとめるツール作成（おそらくPython）
• 毎日のやることをChatGPTに相談できる（秘書化）
• WordPressの記事をデータベース化してユーザーに任意の情報を抽出・操作できるサイト構造を目指す
• データ検索機能（キャラ名を入力するとデータテーブルがそれだけになる、的な）

「WordPressのカスタムフィールド」に関する口コミや評判

SNS情報のメモです。

WordPressのカスタムフィールドに関する情報

Twitter検索用のリンクはこちら。

WordPressいじるのに最強すぎるChatGPT。適当な聞き方でも👍
カスタム投稿3つ、そのうちの１つにpdfのカスタムフィールド追加して、それぞれ別のarchive.phpで一覧作ってって言ったらやってくれた。
これ私が上司から言われたら指示はスラックでくれって言った挙句に作業は次の日😘私いらないw

— mido@千葉の行政書士 (@wan_wan_leo) April 4, 2023

独学でWordPressサイトを制作した中小企業の経営者に「次はこれを学んだら重宝しますよ」とおすすめしたいのは下記4つです。

カスタムフィールド
再利用ブロック
ショートコード
function.php

— fujimori / HRSolutions Inc. / 社労士＆士業のWeb集客とDXを支援 (@hrsolutions_j) March 14, 2023

「WordPressのカスタムフィールド」に関するよくある質問

ChatGPTに関する記事リスト

当サイトでひたすらChatGPTに出力させて記事錬成しているリストはこちらになります。

ChatGPTやAIに関する記事リスト

ブログ更新を自動化させるためにChatGPTの使いかたや生成系AIの技術進歩を勉強するために記事を作成しています。

• ChatGPT入門ガイド: これだけ知っておけばOK!
• ChatGPT課金決める！驚きのポイント5選
• ChatGPTプロンプト攻略: 効果的な会話術
• AI応答最適化術！驚くべき効果的な使い方
• 応用事例: ChatGPTを活用した実践的なプロジェクトとアイデア
• ChatGPTトラブル解決！簡単対処法&サポートガイド
• ChatGPTの使用における倫理的な配慮と制限事項
• GPT-4活用術! ChatGPTの秘密と可能性
• ChatGPTの著作権・商標問題を解説：注意すべき点と対策
• ChatGPT APIを使って情報収集する
• ChatGPTでブログはどのように変わるのか？
• ChatGPTに「検索順位」について相談する