Web

サイト構造の刷新:開発ログの新設と『詩葉クロニクル』への統一

前提・使用ツール/部品

工程分野: Web

前提・使用ツール/部品:
WordPress(shiha.net、テーマ:Shiha Project)
子テーマ「Shiha Project - 開発ログ拡張」(本記事内で新規作成)
カスタム投稿タイプ:dev_log
カスタムタクソノミー:devlog_area

目的

これまで「【第◯回】」形式の1本のブログにまとめていた情報を、目的の異なる2系統に分離する。

両者を同じ投稿タイプ・同じ一覧に混在させると、読者が読みたい情報にたどり着きにくくなるため、開発ログを独立したカスタム投稿タイプとして切り出した。

手順

  1. 役割の整理
    「詩葉クロニクル」は大きな区切り(章)、「開発ログ」はその中の細かい工程(節)という関係に位置づけた。番号を振らず、日付とタクソノミーで時系列・分野を管理する方式にした。
  2. カスタム投稿タイプdev_logを設計
    スラッグはdevlog、アーカイブページを/devlog/に固定。タイトルには接頭辞を付けず、工程名だけを書く運用にした(投稿タイプ自体が分類の役割を果たすため)。
  3. タクソノミーdevlog_area(工程分野)を設計
    頭部 / 眼球 / 構造・サーボ / ソフトウェア / ハードウェア / Webの6分野を初期タームとして用意し、階層型(カテゴリー的な運用)にした。
  4. 専用メタボックスを2つ追加
  1. 単体ページ・一覧ページ・タクソノミー絞り込みページの3テンプレートを作成
    single-dev_log.php / archive-dev_log.php / taxonomy-devlog_area.php
    一覧ページには工程分野ごとのフィルタータブを設け、興味のある系統だけを追えるようにした。
  2. 既存テーマの配色を踏襲した専用CSSを作成
    Ink(#12151A)とSprout Green(#6FA05A)を基調に、カード型の一覧・タグ表示・工程間ナビのスタイルを追加した。
  3. 実装形態を「子テーマ」に変更
    当初はテーマ本体のfunctions.phpに直接追記する案だったが、編集ミス時のリスクを避けるため、子テーマとして切り出す形に変更した。子テーマを無効化するだけで即座に元の状態へ戻せる。
  4. 「進捗ブログ」を「詩葉クロニクル」へ改称
    開発ログが技術記録の役割を明確に持ったことで、既存ブログは「物語として読ませる」役割だとはっきりしたため、名称をナビゲーション・見出し・リード文・titleタグの4箇所で統一する方針を決めた。

確認方法

つまずきやすい点