自動化ツールでブログを作成③：ChatGPTがプラグインの提案とPHPコードを書いてくれた

半自動イベントポータルブログ「コレイコーひろしま」ができるまで。今回はChatGPTが真価を発揮した日。

私

Cocoonスキンを使っているが、トップページをこのようにしたい。
日時や会場を入力する投稿欄を別に作って、トップページのタイトルだけ3行で表示させればいいだろうか？このようなカスタマイズができるプラグインはあるか？

（パワーポイントで完成イメージを作ってスクショして貼り付けた）

ChatGPT

Advanced Custom Fields (ACF) プラグインを使い、ACFで「日時」と「会場」を入力するカスタムフィールドを作成し、phpを編集してカスタムフィールドの内容を表示させるようにすればよい

私

ACFを使って各記事にevent_dayとevent_venueというカスタムフィールドを持たせるようにしました。トップページの表示を変えるには、どのphpをどのように変える必要がありますか

ChatGPT

index.php（トップページに使用される基本テンプレート）
このphpのどこかに投稿ループのテンプレートがあると思う

私

（だんだんわからなくなってくる…試しにlist-index.phpをアップロードする）

このファイルの中に投稿ループは含まれているか？含まれていないようであればこのファイルが参照している他のphpファイルを推測できるか？

ChatGPT

cocoon_template_part(‘tmp/entry-card’);

このコードは、tmp/entry-card.php というテンプレートファイルを参照しており、そこに投稿のカード形式の表示が定義されている可能性があります。

私

（entry-card.phpをアップロードする）

このファイルにはカスタムフィールドを追加できる場所があるか？

ChatGPT

＜h2 class=”entry-card-title”＞の部分を、以下のようにカスタムフィールドを追加することで、日時と会場を表示することができます。

<div class="entry-card-content card-content e-card-content">
  <h2 class="entry-card-title card-title e-card-title" itemprop="headline"><?php the_title() ?></h2>
  
  <?php //日時の表示
  if( get_field('event_day') ): ?>
    <div class="event-day">日時：<?php the_field('event_day'); ?></div>
  <?php endif; ?>

  <?php //会場の表示
  if( get_field('event_venue') ): ?>
    <div class="event-venue">会場：<?php the_field('event_venue'); ?></div>
  <?php endif; ?>

  <?php //スニペットの表示 ?>
</div>

私

コードを貼り付けてみた。このcard-list.phpをどこにアップロードしたらいいの？

ChatGPT

子テーマのディレクトリ（まだない場合は tmp フォルダを作成します）

/wp-content/themes/cocoon-child/tmp/entry-card.php

にアップして、サイトのトップページにevent_day や event_venue のカスタムフィールドが正しく表示されるか確認してみてください

で、実際うまく表示された。その後、CSSの調整もお願いしたりして、現在のトップページのようにイベント名の下に日時と会場が表示されるようになった。やりたいことを画像で伝えたり、わからないことはファイルをアップして読み込んでもらったりすることで、自分ではできなくても、プラグインを紹介してくれたり、コードを書いてくれたり、それをどこに貼り付けてどのようにアップしたらいいかまで手取り足取り教えてくれる。ChatGPTの手を借りれば、自分ができることの範囲がかなり広がるという実感を持てたのが、このときだった。続く。

自動化ツールでブログを作成③：ChatGPTがプラグインの提案とPHPコードを書いてくれた

＜自動化ツールでブログを作成シリーズ＞

コメント