前回は「Aloha Goodies」のテーマをTwenty Twenty-Three (TT3)を使ってノーコードで作成しました。
今回は方針を変えて、
- コードを書いてテーマを作る。
- このブログ専用のTwenty Twenty-Three 子テーマにする。
という２つを目標に取り組みました。
作成した子テーマはGithubにも公開しています。
Github リンク
作成したファイル
- Aloha Goodiesと同様にHero画像をヘッダーに置く
- HeaderとFooterを作成した後、以下のtemplatesファイルを作成しました。
- front-page.html → 最初に出るページ。作品一覧
- home.html -> 投稿一覧。投稿のタイトルのみ表示
- single.html -> 投稿記事
- page.html -> 作品の詳細ページ
- archive.html -> カテゴリのページ
- taxonomy.html -> 作品カードを表示
- page-sitemap.html -> サイトマップ表示
- 404.html -> エラー表示
- その他
- parts/posts-card.html -> 投稿一覧の各投稿カード
- parts/works-card.html -> 作品カード
- patterns/post-meta.php -> 日付、カテゴリメタ情報
- style.css, theme.json, functions.php
カスタム投稿タイプ
- 作品カードは投稿とは別にカスタム投稿を使いました。
- Custom Post Type UIというプラグインをインストールしました。
- タクソノミーをつくり、作品を分類できるようにしました。
カスタムフィールドについて
Advanced Custom Fieldというプラグインをインストールして、カスタムフィールドを使うことを試みましたがうまくいきませんでした。コード側でもエディタ側でも両方のアプローチを取ってみましたがうまくいきませんでした。コードエディターでは作品のリンクがテキストでしか表示されず難しかったです。Twenty Twenty-Threeではなく、次回Twenty Twenty-Fiveなどでもう一度試してみたいと思います。
サイトエディター上での作業
管理画面から一度、追加CSSの作業を行うとその後、style.cssを書き直してアップロードしても優先されないため、追加でCSSを当てるのに管理画面のサイトエディターを用いて最終的には微調整しました。
次回やってみたいこと
- Twenty Twenty-Fiveなどの子テーマを作成することをしようと思います。
- WordPressのAPIを用いてデータを呼び出し、Next.jsのフロントを使って表示しようと思います。