「Twenty Twenty-Three」のファイル構成

テーマファイルの場所

WordPressがインストールされたフォルダの中にあります。

• wp-note.ookini.org（WordPressがインストールされたフォルダ）
  • wp-content（フォルダ）
    • themes（フォルダ）
      • twentytwentythree（テーマファイルのフォルダ）

テーマフォルダの内容

• twentytwentythree
  • assets
    • fonts
      • dm-sans
        • DMSans-Bold-Italic.woff2
        • DMSans-Bold.woff2
        • DMSans-Regular-Italic.woff2
        • DMSans-Regular.woff2
        • LICENSE.txt
      • ibm-plex-mono
        • IBMPlexMono-Bold.woff2
        • IBMPlexMono-Italic.woff2
        • IBMPlexMono-Italic.woff2
        • IBMPlexMono-Regular.woff2
        • OFL.txt
      • inter
        • Inter-VariableFont_slnt,wght.ttf
        • LICENSE.txt
      • source-serif-pro
        • LICENSE.md
        • SourceSerif4Variable-Italic.otf.woff2
        • SourceSerif4Variable-Italic.ttf.woff2
        • SourceSerif4Variable-Roman.otf.woff2
        • SourceSerif4Variable-Roman.ttf.woff2
  • parts
    • comments.html
    • footer.html
    • header.html
    • post-meta.html
  • patterns
    • call-to-action.php
    • footer-default.php
    • hidden-404.php
    • hidden-comments.php
    • hidden-no-results.php
    • post-meta.php
  • readme.txt
  • screenshot.png
  • style.css
  • styles
    • aubergine.json
    • block-out.json
    • canary.json
    • electric.json
    • grapes.json
    • marigold.json
    • pilgrimage.json
    • pitch.json
    • pitch.json
    • whisper.json
  • templates（フォルダ）
    • 404.html
    • archive.html
    • blank.html
    • blog-alternative.html
    • home.html
    • index.html
    • page.html
    • search.html
    • single.html
  • theme.json

assets

4種類のフォントが置かれています。

ここに置かれたフォントは「theme.json」で設定され 利用できるようになります。

ここにフォントを置いて theme.json を編集すれば フォントが読み込める ということです。

parts

templateのパーツです。templateに読み込んで使用します。

各templateに共通している部分をパーツ化したものです。header や footer を parts 化して ここに置きます。

テーマエディタで編集することができます。

patterns

.php ファイルが置かれています。template や parts に読み込まれています。

readme.txt

screenshot.png

テーマの一覧で表示される画像です。880*660のPNGです。

style.css

WordPressにテーマとして認識させるために このCSSが置かれています。テーマ名など必要な事項が記入されているのみで、CSSは定義されていません。
また、編集画面や実際に表示されるページには読み込まれていません。

試しに

body{
background-color: red !important;
}

と入力しても 編集画面も 実際に表示されるページも 変化しません。

style.css を読み込ませるには functions.php を追加する必要があるようです。

styles

WordPress6.1でグローバルスタイルの「切り替え」ができるようになりました。

10個の .json ファイルが置かれています。それぞれが TT3 のスタイルバリエーションに対応しています。デフォルトは↓にある theme.json です。デフォルトの theme.json とこのフォルダにあるバリエーションの違いはファイル内に「タイトル」が設定されていることです。

グローバルスタイルを編集し ここに .json ファイルで 編集結果を保存しておくと 切り替えて利用できるようになります。

「Create Block Theme」といプラグインを使うと グローバルスタイルをバリエーションとして保存できます。

templates

WordPress で作成した 投稿ページ・固定ページはテンプレートによ見込まれ ブラウザに表示されます。

「Mindblown: a blog about philosophy.」は home.html というテンプレートにあります。まずはこれを テーマエディタで編集します。

テーマエディタで編集しても、テンプレートファイルには反映されません。編集内容は データベースで保存されています。

エディタから新規にテンプレートを追加しても 同様です。この templates フォルダに新たなファイルが追加されることはありません。すべて データベースに保存されています。

「Create Block Theme」といプラグインを使うと、編集内容を反映した 新たなテーマ（子テーマ）を作成することができます。テンプレートファイルも編集内容を反映して書き換わります。

theme.json

WordPress6.1 や「TT3」を操作するうえで このファイルが鍵になります。

スタイルのバリエーションを切り替えてみる（theme.json を切り替えてみる）と このファイルでどの部分が設定できるのか よくわかります。バリエーションの変更で変化する部分が このファイルで設定されている部分です。

これで設定できる項目は 徐々に増加しています。WordPress がバージョンアップされるとさらに増えると思います。