MENU
  1. ホーム
  2. 未分類
  3. ChatGPTにSnow Monkeyをカスタマイズしてもらった話

ChatGPTにSnow Monkeyをカスタマイズしてもらった話

未分類

1. はじめに

この記事は Snow Monkey / unitone Advent Calendar 2024 20日目の記事です。

今回は、WordPressテーマ「Snow Monkey」をChatGPTの力を借りてカスタマイズした経験について共有します。

この記事では、私がどのような課題を抱え、ChatGPTにどのように依頼し、試行錯誤を経てカスタマイズを実現したのかをまとめてみます。

Snow Monkey は非常に高機能で柔軟なテーマですが、特定のカスタマイズにはどうしてもコーディングが必要な場面があります。私自身、ハードルの高さを感じることもありましたが、ChatGPTを活用することで問題解決が驚くほどスムーズに進みました。

さらに、フォーラムでの質問に頼らずに済んだため、開発者の工数削減にも貢献できたのではないかと感じています。これが結果的にSnow MonkeyやUnitoneのアップデート速度を加速させることにつながれば最高ですね！
ぜひ、みなさんも生成AIを活用してみてください。

この記事がSnow Monkeyユーザーやカスタマイズに挑戦している方々の参考になれば幸いです。それでは、本題に入ります！

2. カスタマイズが必要になった経緯

  • 背景:
    • 今回カスタマイズを行ったのは、結婚相談所様のサイト構築プロジェクトにおける「会員プロフィール」というカスタム投稿タイプの改善です。
    • このカスタム投稿タイプのアーカイブページに、以下の項目を表示する必要がありました：
    • 会員番号
    • 年齢　など
  • 課題:
    • Snow Monkeyの標準機能では、カスタム投稿タイプ内のカスタムフィールドをアーカイブページに表示するオプションがありません。そのため、テンプレートのカスタマイズが必要でした。
    • 一見シンプルな要求のように思えますが、実際に実現するにはコードの記述やテーマファイルの編集が必要で、初心者には少し難しい作業です。
    • そこで、問題解決のためにChatGPTの力を借りることにしました。

3. ChatGPTのプロンプトと返答

  • 初期プロンプト:
    • 試しに、状況をシンプルに伝えて返答がどうなるかを確認

WordPressのSnow Monkeyテンプレートでサイトを構築しています。
「プロフィール（profile）」というカスタム投稿タイプを作成し、その中に、
国籍（nationality）
会員番号（no）
年齢（age）
結婚歴（marital_status）
などの項目を作成しました。
そのうえで、このカスタム投稿タイプの一覧を表示するアーカイブページに、上記の４項目を表示させたいです。どのようにカスタマイズしたらよいですか？公式のSnow Monkeyリファレンスを参考に回答ください。

  • 工夫した点：
    • 表示させたいフィールドの名称や内容を具体的に記載。
    • Snow Monkeyを使用していること、公式リファレンスの活用を求める点を明示。
  • 初期回答：
    • ChatGPTからは、カスタムテンプレート作成とカスタムフィールド表示の手順が詳細に返答されました。

WordPressのSnow Monkeyを使い、「プロフィール」というカスタム投稿タイプのアーカイブページで カスタムフィールド を表示するためのカスタマイズ方法を説明します。

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

すでに「プロフィール（profile）」というカスタム投稿タイプが作成済みとのことなので、引き続き「国籍」「会員番号」「年齢」「結婚歴」のフィールドが Advanced Custom Fields (ACF) プラグインなどで追加されていると仮定します。

2. アーカイブページのカスタマイズ

Snow Monkeyでは、archive-{$post-type}.php というテンプレートファイルをカスタム投稿タイプの一覧ページ用に利用します。

手順

  1. archive-profile.php というファイルをテーマフォルダ内に作成します。
    • 子テーマを使っている場合は子テーマフォルダに作成します。
    • ファイル名は「profile」がカスタム投稿タイプのスラッグと一致するようにします。
  2. カスタムフィールドを表示するループの記述
    以下のコードを archive-profile.php に追加してください：
phpコードをコピーする<?php
/**
 * Archive Template for Custom Post Type: Profile
 */
get_header(); ?>

<div class="c-container">
    <h1 class="smb-section__title">プロフィール一覧</h1>

    <?php if (have_posts()) : ?>
        <div class="c-row c-row--margin c-row--lg-margin">
            <?php while (have_posts()) : the_post(); ?>
                <div class="c-row__col c-row__col--1-1 c-row__col--md-1-2 c-row__col--lg-1-3">
                    <div class="smb-box smb-box--white">
                        <div class="smb-box__body">
                            <h2 class="wp-block-heading"><?php the_title(); ?></h2>
                            <ul class="profile-info">
                                <li><strong>国籍：</strong> <?php echo esc_html(get_field('nationality')); ?></li>
                                <li><strong>会員番号：</strong> <?php echo esc_html(get_field('no')); ?></li>
                                <li><strong>年齢：</strong> <?php echo esc_html(get_field('age')); ?>歳</li>
                                <li><strong>結婚歴：</strong> <?php echo esc_html(get_field('marital_status')); ?></li>
                            </ul>
                        </div>
                    </div>
                </div>
            <?php endwhile; ?>
        </div>

        <!-- Pagination -->
        <?php the_posts_pagination(); ?>

    <?php else : ?>
        <p>プロフィールが見つかりませんでした。</p>
    <?php endif; ?>
</div>

<?php get_footer(); ?>

3. コードの解説

  • the_field() / get_field()
    • Advanced Custom Fields (ACF) プラグインを使って登録したカスタムフィールドを取得します。
    • get_field('field_name') の field_name には、登録したフィールドの名前を指定します。
      • 例: nationality, no, age, marital_status
  • レスポンシブ対応
    • c-row や c-row__col は Snow Monkeyのユーティリティクラス で、レスポンシブレイアウトを簡単に実装できます。
    • c-row--margin や c-row--lg-margin を使って適切な余白を確保しています。
  • the_posts_pagination()
    • 投稿一覧のページネーションを表示するSnow Monkey標準の関数です。

4. CSSの追加（任意）

必要に応じて、CSSでスタイルを調整します。以下は基本的なスタイル例です。

cssコードをコピーする.profile-info {
    list-style: none;
    padding: 0;
    margin: 0;
}

.profile-info li {
    margin-bottom: 8px;
    font-size: 14px;
    color: #333;
}

.smb-box--white {
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    padding: 16px;
    text-align: left;
}

5. Snow Monkey公式リファレンスとの関連

  • Snow Monkeyは「WP標準テンプレート階層」を尊重
    • アーカイブページは archive-{$post-type}.php でカスタマイズ可能です。
  • Snow Monkeyの標準クラスとレイアウトシステム
    • c-row, c-row__col を活用すれば簡単にレスポンシブデザインが構築できます。
  • モジュールクラスを利用
    • smb-box クラスを使用することで、Snow Monkey標準のボックスデザインを適用できます。

6. 確認と反映

  • 上記のコードを子テーマに追加し、archive-profile.php を保存します。
  • WordPress管理画面で プロフィール一覧ページ を表示し、カスタムフィールドの内容が正しく出力されているか確認してください。

この方法で、Snow Monkeyの標準機能とカスタム投稿タイプを活かしつつ、シンプルかつ視認性の高い一覧ページが作成できます！

公式の別のリファレンスによると、プラグインをカスタマイズする形で対応してほしいとのことでした。
下記内容からどのようにカスタマイズしたらよいか、教えて下さい。
https://snow-monkey.2inc.org/2019/02/04/my-snow-monkey-plugin/

  • ChatGPTからの返答：

Snow Monkey公式サイトの「My Snow Monkey Plugin」を使ってカスタマイズする方法に基づき、「プロフィール（profile）」というカスタム投稿タイプ のアーカイブページにカスタムフィールド（国籍、会員番号、年齢、結婚歴）を表示する手順を説明します。

1. My Snow Monkey Pluginの概要

「My Snow Monkey Plugin」は、Snow Monkeyテーマのカスタマイズをプラグイン形式で行うためのテンプレートです。
これを利用することで、テーマのアップデート時にカスタマイズ内容が失われるリスクを防げます。

2. My Snow Monkey Pluginを作成する手順

ステップ1: プラグインフォルダとファイルを作成

  1. WordPressの wp-content/plugins ディレクトリ に移動します。
  2. my-snow-monkey というフォルダを作成します。
  3. フォルダ内に以下のファイルを作成します。
    • my-snow-monkey.php
    • custom-profile-archive.php

ステップ2: プラグインのメインファイル

my-snow-monkey.php に以下のコードを記述します。

phpコードをコピーする<?php
/*
Plugin Name: My Snow Monkey
Description: Snow Monkeyのカスタマイズを行うためのプラグインです。
Author: Your Name
Version: 1.0
*/

// アーカイブページ用のカスタムテンプレート読み込み
add_filter( 'archive_template', 'my_snow_monkey_profile_archive_template' );

function my_snow_monkey_profile_archive_template( $archive_template ) {
    if ( is_post_type_archive( 'profile' ) ) {
        $archive_template = plugin_dir_path( __FILE__ ) . 'custom-profile-archive.php';
    }
    return $archive_template;
}

3. カスタム投稿タイプのアーカイブテンプレート

次に、カスタムテンプレート custom-profile-archive.php を作成し、カスタムフィールドを表示するようにします。

custom-profile-archive.php のコード例

phpコードをコピーする<?php
/**
 * Custom Archive Template for Profile Post Type
 */
get_header(); ?>

<div class="c-container">
    <h1 class="smb-section__title">プロフィール一覧</h1>

    <?php if ( have_posts() ) : ?>
        <div class="c-row c-row--margin c-row--lg-margin">
            <?php while ( have_posts() ) : the_post(); ?>
                <div class="c-row__col c-row__col--1-1 c-row__col--md-1-2 c-row__col--lg-1-3">
                    <div class="smb-box smb-box--white">
                        <div class="smb-box__body">
                            <!-- タイトル表示 -->
                            <h2 class="wp-block-heading"><?php the_title(); ?></h2>

                            <!-- カスタムフィールドの表示 -->
                            <ul class="profile-info">
                                <li><strong>国籍：</strong> <?php echo esc_html( get_post_meta( get_the_ID(), 'nationality', true ) ); ?></li>
                                <li><strong>会員番号：</strong> <?php echo esc_html( get_post_meta( get_the_ID(), 'no', true ) ); ?></li>
                                <li><strong>年齢：</strong> <?php echo esc_html( get_post_meta( get_the_ID(), 'age', true ) ); ?>歳</li>
                                <li><strong>結婚歴：</strong> <?php echo esc_html( get_post_meta( get_the_ID(), 'marital_status', true ) ); ?></li>
                            </ul>
                        </div>
                    </div>
                </div>
            <?php endwhile; ?>
        </div>

        <!-- ページネーション -->
        <?php the_posts_pagination(); ?>

    <?php else : ?>
        <p>プロフィールが見つかりませんでした。</p>
    <?php endif; ?>
</div>

<?php get_footer(); ?>

4. コードの解説

  1. archive_template フィルター
    • is_post_type_archive( 'profile' ) を使い、カスタム投稿タイプ「profile」のアーカイブページでカスタムテンプレートを適用します。
  2. get_post_meta()
    • WordPress標準の関数でカスタムフィールドの値を取得します。
    • カスタムフィールドのキー（例: nationality, no, age, marital_status）を指定して表示します。
  3. Snow MonkeyのCSSクラス利用
    • Snow Monkeyの c-container, c-row, c-row__col などを活用して、統一されたデザインシステムを適用します。
  4. the_posts_pagination()
    • アーカイブページにページネーションを追加します。

5. プラグインを有効化

  1. WordPress管理画面 → プラグイン → My Snow Monkey を有効化します。
  2. カスタム投稿タイプ「profile」のアーカイブページ（/profile/）にアクセスし、カスタムフィールドが表示されていることを確認します。

6. スタイル調整 (CSS)

必要に応じてスタイルを追加し、レイアウトを整えます。

cssコードをコピーする.profile-info {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 14px;
}

.profile-info li {
    margin-bottom: 8px;
    color: #333;
}

.smb-box--white {
    border: 1px solid #ddd;
    padding: 16px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

まとめ

  • My Snow Monkey Plugin を使うことで、テーマのアップデート時にもカスタマイズが失われません。
  • archive_template をフィルターでフックし、カスタムテンプレートを読み込むことでカスタマイズが可能です。
  • カスタムフィールドの表示には get_post_meta() を使用し、WordPress標準機能を最大限に活用します。

この方法で、カスタム投稿タイプ「プロフィール（profile）」の一覧ページに、必要なカスタムフィールドを表示させることができます！

上記をもとに実装したところ、うまくいきました！

▼完成イメージ：
　カスタム投稿タイプ「プロフィール」のアーカイブページ。写真下の項目がカスタムフィールドの内容

ちなみに、上記以外のカスタマイズでテンプレートの構成やCSSの細かな調整も添付ファイルを交えてやり取りを重ねることでレイアウトが効率的に実現できました。

4. 振り返り

  • AIを使った感想:
    • 良かった点:
      • 問題に対する解決策を迅速に提案してくれる。
      • リファレンスの引用やコード例を提供してくれるため、学びが多い。
      • 試行錯誤しながら進められるので、自分のスキルアップにもつながる。
    • 今後に活かしたい点:
      • 時折、細部で正確性に欠ける回答があるため、公式リファレンスと併用する必要がある。
      • 抽象的な指示では精度が落ちるため、具体的なプロンプト作成が重要。
  • Snow Monkeyをカスタマイズした感想:
    • もっといい方法があるかもしれないので、詳しい方に効いてみたい
    • ゆくゆく、アーカイブページや、「最新の投稿」ブロックで表示する項目を選択できるようなオプションが追加されるとありがたいかも

7. おすすめのChatGPT活用法

  • 今回のカスタマイズ以外にも、ChatGPTは以下の用途で役立ちます：
    • クライアントへのヒアリング項目の整理
    • サイト構成案の作成
    • メール返信のドラフト作成
    • デバッグのヒント提供

余談：昨日のオレインさんのYoutube配信で、画像のAI生成方法に触れられていました！ながら聞きで詳細までキャッチアップできていないのですが、気になる方は見てみてください！（冒頭8分くらい〜だったはず）

5. まとめ

ChatGPTとSnow Monkeyを活用した今回の経験を通じて、生成AIがカスタマイズ作業を効率化する非常に有力なツールであると実感しました。次はUnitoneをキャッチアップしたいので、リファレンス情報をインプットしつつ、ChatGPTと壁打ちしながら学習を進めていきたいと思います！
この記事が、Snow Monkeyユーザーやカスタマイズに挑戦している方々の参考になれば幸いです。

未分類
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

この記事を書いた人

pk-web代表のアバター pk-web代表

東京都練馬区でフリーランスでウェブ制作、ウェブ解析を請け負っております。
お客様に寄り添い、スピード感をもって対応いたします。貴社ビジネスに貢献できれば幸いです。
実現したい事をしっかりと伺い、ゴールを目指して一緒に邁進いたします。

関連記事

コメント

コメントする

目次