サイト構造の刷新:開発ログの新設と『詩葉クロニクル』への統一
前提・使用ツール/部品
工程分野: Web
前提・使用ツール/部品:
WordPress(shiha.net、テーマ:Shiha Project)
子テーマ「Shiha Project - 開発ログ拡張」(本記事内で新規作成)
カスタム投稿タイプ:dev_log
カスタムタクソノミー:devlog_area
目的
これまで「【第◯回】」形式の1本のブログにまとめていた情報を、目的の異なる2系統に分離する。
- 詩葉クロニクル:プロジェクトがどう進んできたかを時系列で追う、読み物としての記録
- 開発ログ:第三者が同じ手順で同じものを再現できることを目指した、工程単位の技術記録
両者を同じ投稿タイプ・同じ一覧に混在させると、読者が読みたい情報にたどり着きにくくなるため、開発ログを独立したカスタム投稿タイプとして切り出した。
手順
- 役割の整理
「詩葉クロニクル」は大きな区切り(章)、「開発ログ」はその中の細かい工程(節)という関係に位置づけた。番号を振らず、日付とタクソノミーで時系列・分野を管理する方式にした。 - カスタム投稿タイプ
dev_logを設計
スラッグはdevlog、アーカイブページを/devlog/に固定。タイトルには接頭辞を付けず、工程名だけを書く運用にした(投稿タイプ自体が分類の役割を果たすため)。 - タクソノミー
devlog_area(工程分野)を設計頭部/眼球/構造・サーボ/ソフトウェア/ハードウェア/Webの6分野を初期タームとして用意し、階層型(カテゴリー的な運用)にした。 - 専用メタボックスを2つ追加
- 「前提・使用ツール/部品」:型番・バージョンなど、再現に必要な固有情報を本文と分離して記録
- 「前工程・次工程」:投稿IDを指定するだけで、記事下部に工程間のナビゲーションリンクを自動生成する仕組みにした
- 単体ページ・一覧ページ・タクソノミー絞り込みページの3テンプレートを作成
single-dev_log.php/archive-dev_log.php/taxonomy-devlog_area.php。
一覧ページには工程分野ごとのフィルタータブを設け、興味のある系統だけを追えるようにした。 - 既存テーマの配色を踏襲した専用CSSを作成
Ink(#12151A)とSprout Green(#6FA05A)を基調に、カード型の一覧・タグ表示・工程間ナビのスタイルを追加した。 - 実装形態を「子テーマ」に変更
当初はテーマ本体のfunctions.phpに直接追記する案だったが、編集ミス時のリスクを避けるため、子テーマとして切り出す形に変更した。子テーマを無効化するだけで即座に元の状態へ戻せる。 - 「進捗ブログ」を「詩葉クロニクル」へ改称
開発ログが技術記録の役割を明確に持ったことで、既存ブログは「物語として読ませる」役割だとはっきりしたため、名称をナビゲーション・見出し・リード文・titleタグの4箇所で統一する方針を決めた。
確認方法
- 子テーマ有効化後、「開発ログ」からテスト投稿を1件作成し、
/devlog/の一覧・工程分野での絞り込み・単体ページの3つの表示崩れがないことを確認する - パーマリンク設定を再保存し、
/devlog/のURLが404にならないことを確認する - 「詩葉クロニクル」表記への変更後、既存記事へのリンク(URLスラッグ
/blog/は変更していない)が引き続き機能することを確認する
つまずきやすい点
- 子テーマの
style.cssにあるTemplate:の値は、親テーマのフォルダ名と完全に一致していないと子テーマとして認識されない。事前にwp-content/themes/内の親テーマのフォルダ名を確認しておく必要がある(今回はshiha-themeだった) - 「詩葉クロニクル」への名称変更は、コードではなく管理画面上のデータ(メニュー・固定ページ本文・場合によってはテンプレート内のハードコード文言)を書き換える作業のため、子テーマの導入とは別作業として扱う