Cocoon ChildでトップページをLP化した記録
この記事の概要
この記事では、AI-Continuity LabのWordPressサイト制作で行った作業を記録します。
今回は、Cocoon Childテーマを使ってトップページをLP化し、カテゴリ別の記事導線や個別記事ページの表示を整えました。
作業前の状態
作業前は、トップページやカテゴリページの基本構成はできていましたが、一部のリンクや記事表示に調整が必要な状態でした。
特に「作っているもの」セクションでは、カテゴリ指定が古いままになっており、意図した記事が表示されていませんでした。
今回やったこと
今回実施した内容は以下です。
- Container Factoryカテゴリを作成
- トップページのカテゴリ取得処理を修正
- 記事タイトルリンクの色を統一
- 個別記事ページにカテゴリ一覧へ戻るボタンを追加
- single.phpの表示を確認
実施手順
1. カテゴリスラッグを修正
トップページの「作っているもの」セクションでは、古いカテゴリスラッグが指定されていました。
これを現在のカテゴリである container-factory に変更しました。
2. 記事タイトルリンクの見た目を調整
AI最新記事と作っているものの記事タイトルが青色になっていたため、通常時は黒、ホバー時はアクセントカラーになるようにCSSを追加しました。
3. 個別記事ページの導線を追加
single.phpに、カテゴリ一覧へ戻るボタンを追加しました。
これにより、記事を読んだあとにカテゴリ一覧へ戻りやすくなりました。
確認したこと
以下の動作を確認しました。
- トップページにContainer Factoryの記事が表示される
- 記事タイトルをクリックすると個別記事に移動できる
- 個別記事ページでカテゴリ・タイトル・公開日・更新日が表示される
- 記事下にカテゴリ一覧へ戻るボタンが表示される
- 前の記事・次の記事リンクが表示される
つまずいた点
最初は「作っているもの」の記事リンクが正しくないように見えました。
原因は、リンクそのものではなく、記事取得に使っていたカテゴリスラッグが products のままだったことでした。
現在は container-factory に修正済みです。
わかったこと
今回の作業で、カテゴリ設計とテンプレート側のスラッグ指定を揃えることが重要だとわかりました。
また、記事タイトルをリンク化する場合は、見た目がブラウザ標準の青色にならないようにCSSで統一する必要があります。
次にやること
次は以下を進めます。
- 記事本文の見出しデザインを整える
- コードブロックの見た目を調整する
- アイキャッチ画像の方針を決める
- 各カテゴリの記事テンプレを固定する
まとめ
今回は、WordPressサイトのトップページと個別記事ページの導線を整えました。
小さな修正ですが、記事一覧から個別記事、カテゴリ一覧へ戻る流れができたことで、サイト全体の回遊性が高まりました。