半自動イベントポータルブログ「コレイコーひろしま」ができるまで。今回はChatGPTだけでは解決できなかった問題を自力で見つけた話。
イベントを一覧形式で見たい
アイキャッチ画像があった方が見栄えはいいけど、そんなことより開催日順にずらっと並んでた方が見やすくないか。というか僕はそっちの方がほしい。なので開催日とイベント名だけで並べるページを作りたかった。最終的に完成したのはこちらのリスト形式のページ。
トップページはタイル形式だが、リスト形式で見れるページを作りたい。
・開催日順に並べて月ごとに分けて、2024年10月という見出しをつくる
・イベントは[開催日][カテゴリ][イベント名]で1行で表現し、イベント名の部分に当該ページへのリンクを貼る
まず、wp-content/themes/cocoon-child/ ディレクトリに、例えばtemplate-event-list.phpというphpファイルをアップします。固定ページでテンプレートにtemplete-event-listを選ぶとリスト形式で表示されたページができます。phpファイルのコードは…
と、PHPコードを書いてくれたのでそれをコピペして文字コードをUTF-8にして保存し、所定のフォルダにアップして言われたとおり固定ページからテンプレートを選んで表示してみたら、大体できてた。できてたが、他のページと同じようなCSSが反映されていない。
・ヘッダーとフッターが正しく読み込まれているか確認してください
・CSSクラスが間違っていないか確認してください
・キャッシュをクリアしてみてください
確認してもしても同じことを言うようになったら、もうChatGPTでは解決できない。何か他のアプローチを考えねばならない。ページは大きくヘッダーと本文とフッターに分かれているんだけど、どこかでCSSをちゃんと読み込めてないからこんなことになっているはず…。
固定ページのPHP構造に目をつける
Cocoonにおいて、固定ページの投稿を表示されるPHPはどれにあたりますか？
通常はpage.phpです。page.phpは固定ページのコンテンツを表示するためにcontent-page.phpなどの別ファイルを呼び出して、その内容を管理しています。
固定ページの表示をカスタマイズしたい場合、page.phpを編集するか、content-page.phpを修正して対応することができます。
そういわれてpage.phpを見に行ってみると、ようやく固定ページでのphpファイル同士の関係がわかってきた。page.php → page-contents.php → content.phpという風にphpを呼び出していることがわかった。これまでChatGPTに書いてもらってたコードはcontent.phpに相当する本文の部分だけなので、page.phpとpage-contents.phpに相当するphpも書いてもらえばいいんじゃないだろうか。
固定ページpage.phpの構造を参考に次の4つのphpを作ろうと思う。
Template_eventlist.php：page.phpに相当
eventlist_pagecontents.php：page-contents.phpに相当
eventlist_content.php：content.phpに相当
eventlist.php：記事リンクをリスト形式で吐き出す本文
上3つのphpはコード内に書かれている呼び出すphpを、新しく作ったphpに名前を変えて、内容をChatGPTに確かめてもらった。eventlist_content.phpは本文部分で更にeventlist.phpを呼び出す必要があったので、その部分だけ書き換えてもらった。それで、ようやく肝心のeventlist.phpを書いてもらうことにした。
イベントをリスト形式で一覧で表示する部分のPHPコードを書いて。
・開催日順に並べて月ごとに分けて、2024年10月という見出しをつくる
・見出しは＜h2 class=”wp-block-heading”＞というクラス名をつける
・イベントはリスト形式で、＜ul class=”wp-block-list”＞というクラス名をつける
・イベントは[開催日][カテゴリ][イベント名]で1行で表現し、イベント名の部分に当該ページへのリンクを貼る
・開催日は●月●日(●)という形式で、曜日は日本語で書く。
・カテゴリは＜span＞で囲み、カテゴリIDに応じて背景色を変える（別途指示した）
これまでやりとりしてきたコードをもとに書き換えて、と修正を依頼すると、指示したことは直るけど別の部分が元に戻ることがある。自分にコードを修正するスキルは無いので一発で間違いの無いコードを出してもらわないといけない。それでこれまで指示した内容を整理して書き直して、コードを書いてもらうことを何度か繰り返して、ようやく理想どおりに表示されるコードができあがった。
<div class="event-list">
<style>
.category-label {
padding: 2px 4px !important;
color: white;
font-size: 10px;
display: inline-block;
border-radius: 2px;
}
.category-blue {
background-color: #0073e6; /* 青 */
}
.category-green {
background-color: #28a745; /* 緑 */
}
.category-yellow {
background-color: #f39c12; /* 黄 */
}
.category-purple {
background-color: #6f42c1; /* 紫 */
}
.category-red {
background-color: #dc3545; /* 赤 */
}
.category-pink {
background-color: #e83e8c; /* ピンク */
}
.category-default {
background-color: #333; /* デフォルトのグレー */
}
</style>
<?php
// 現在のページ番号を取得
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
// クエリパラメータ
$args = array(
'post_type' => 'post', // 全ての記事タイプ
'posts_per_page' => 50, // 1ページに表示する件数
'paged' => $paged, // ページ番号
'orderby' => 'date', // 日付順に並び替え
'order' => 'DESC' // 最新順に並び替え
);
// クエリ実行
$event_query = new WP_Query($args);
if ($event_query->have_posts()) :
$current_month = ''; // 現在の月を記録
while ($event_query->have_posts()) : $event_query->the_post();
$event_date = get_the_date('m月d日(D)'); // 日付フォーマット (月日 曜日)
$event_year_month = get_the_date('Y年n月'); // "2024年10月" の形式
// 月ごとの見出し作成
if ($current_month != $event_year_month) {
if ($current_month != '') {
echo '</ul>'; // 前の月のリストを閉じる
}
$current_month = $event_year_month;
echo '<h2 class="wp-block-heading">' . $current_month . '</h2>';
echo '<ul class="wp-block-list">';
}
// カテゴリごとのスタイル
$categories = get_the_category();
if (!empty($categories)) :
$category_class = 'category-default'; // デフォルトのクラス
switch ($categories[0]->term_id) {
case 3:
$category_class = 'category-blue';
break;
case 4:
$category_class = 'category-green';
break;
case 5:
$category_class = 'category-yellow';
break;
case 6:
$category_class = 'category-purple';
break;
case 7:
$category_class = 'category-red';
break;
case 8:
$category_class = 'category-pink';
break;
default:
$category_class = 'category-default'; // その他のカテゴリのデフォルトスタイル
break;
}
?>
<li>
<!-- 投稿日とカテゴリ表示 -->
<?php echo $event_date; ?>
<span class="category-label <?php echo $category_class; ?>">
<?php echo esc_html($categories[0]->name); ?>
</span>
<!-- 記事タイトルとリンク -->
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</li>
<?php endif; ?>
<?php endwhile;
// 最後の月のリストを閉じる
echo '</ul>';
// ページネーション
$pagination_args = array(
'total' => $event_query->max_num_pages,
'current' => $paged,
'prev_text' => '≪ 前へ',
'next_text' => '次へ ≫',
);
echo paginate_links($pagination_args);
else :
echo '記事はありません。';
endif;
wp_reset_postdata();
?>
</div>
理想的なコードができるまで何度か指示をちょっとずつ変えたりする必要があったが、気がつけばこんな長いコードもChatGPTを使って書けるようになっていた。すごいぞChatGPT。この辺でだいたいブログの見た目に関することもできあがり、いよいよイベント記事を投稿しておよそ人に見せれるような状態になってきた。しかしコンテンツが増えても人に見てもらう工夫が無いといけない。もう一息頑張ろう。続く。
＜自動化ツールでブログを作成シリーズ＞
- 自動化ツールを使うためにはサーバー設定の見直しが必要
- 没になったアイデアたち
- ChatGPTがプラグインの提案とPHPコードを書いてくれた
- 全くわからないPythonコードを書いてもらう
- jsonを使ってZapierからブログ投稿
- Cocoonのphp構造を理解してカスタムテンプレートをつくる
- Googleフォームに入力したらWordPressに自動投稿してくれるZapierフローのまとめ
- ZapierでSNSへ定期的に自動投稿
- 週末に土日から来週のイベントをまとめてSNSに投稿するZapierフローのまとめ
- ZapierからACFフィールドへの投稿
- ChatGPTと一緒にブログを作って感じたこと
コメント