フルサイト、いわゆるFSEについてテーマ作成のチュートリアルを触ってみた。
参考サイト
テーマ雛形作成
フルサイト編集テーマの雛形作成ツールをgitから落としてきて実行すれば、まずは雛形ができる。
❯ git clone https://github.com/WordPress/theme-experiments
❯ cd theme-experiments
❯ php new-empty-theme.php
Please provide the following information:
Theme name: TestTheme
Description: A theme to test
Author: Marcus Kazmierczak
Theme URI: https://github.com/mkaz
Your new theme is ready!ここではmy-fseという名前でまずは雛形を作成した。
上記に沿ってテーマを作成すると以下のような形で格納される。
theme-experiments
XXX（デフォルトで入っているサンプル）✕多数
my-fse（コンソールから自分が作成したテーマ）
XXX.php（必要ファイル）
theme-experimentsにはデフォルトでサンプルテーマが多数格納されており、コンソールから作成したテーマは[自分が作成したフォルダ名]フォルダとしてそこに並ぶ形で格納されている。
このフォルダをWordPressのthemeフォルダに移すことですぐにFSE対応テーマとして機能する。（一切の装飾等がされていない最低限の状態）
テーマ編集
テーマの編集は専用のエディタで行う。
FSE対応のテーマを設定した状態でメニューからエディタを開くとフルサイト編集用のエディタになる。
以降、いじってみながら気づいたことを五月雨
テンプレートとテンプレートパーツ
サイト > テンプレート > テンプレートパーツ という階層構造になっており、全て管理画面のエディタから作成できる。
テンプレートは旧システム時代のphpテンプレートと分類的には同じだが、htmlで保存される。
テンプレートパーツはテンプレートを構成する部品のイメージで、ヘッダー、フッター、一般という大枠に分かれる。
テンプレートパーツ名に日本語は使えない。
テンプレートパーツ作成の際、名前を日本語で入力するとjsエラーとなり登録できない。入力した文言がそのまま内部的なテンプレートパーツ名として使用されることで起こるようで、–などを使用した場合もHTMLエンコードされて変な感じになるので、半角英数とアンダースコアでつけるのが無難。
テンプレート作成の場合はテンプレート種別をリストから選んで詳細作成に移る形で処理が進み、そのリストが日本語での表示となっているため、テンプレートパーツにもつい日本語を使用してしまって、しばらくエラーの理由がわからず困った。
エディタのCSSとフロントのCSS
デフォルトで書き出されるソースではエディタとフロントの両方にstyle.cssに書いたスタイルが適用される仕組みになっているので、基本的にはデフォルトで見た目が揃う。
functions.phpに書かれたこの辺で、editor styleにstyle.cssを追加している。
if ( ! function_exists( 'my_fse_support' ) ) :
function my_fse_support() {
// Adding support for core block visual styles.
add_theme_support( 'wp-block-styles' );
// Enqueue editor styles.
add_editor_style( 'style.css' );
}
add_action( 'after_setup_theme', 'my_fse_support' );
endif;※my_fseは自分でつけたテーマ名my-fseがfunction名に転用されているのでそうなってる。
基本的にはstyle.cssに書いたスタイルがエディタにもそのまま反映されるが、エディタでは編集部分がiframeに入っていたり、ラッパーのセレクタが両者で違っていたりで、両方に正確に同じスタイル当てるには記述に多少の工夫が必要な部分あり。
テーマフォルダ直下のstyle.cssにはスタイルを書かず、別フォルダに置かれたスタイルの書かれたcssを@importで読み込むとフロントには普通に反映されるが管理画面には反映されなかったので、scssでマージして書き出した。
デフォルトスタイル
エディタ画面のCSSは最初にload-styles.phpが呼ばれて、なんやかんや書いてある。
load-styles.phpのfont-familyにserifが指定してあることでエディタ画面のデフォルトフォントはserifになるが、フロントはブラウザのデフォルトのfont-familyになることから、chromeなどで編集してると初期状態でフォントが異なるなんてことになるので、style.cssの定義大事。
フォントサイズ
remの値はエディタとフロントで異なる
フォントサイズがエディタとフロントで異なってしまったことがあって、調べてみたらrem指定の解釈が違っていた。
エディタとフロントではremのルートとして参照するフォントサイズが異なる。
なのでremではなくCSS変数でピクセルを指定して、そちらで記述するようにしてみたらうまく行った。このあたり正しい書き方がありそう。
Google fonts
Google fontsの設定でフォントファイルの読み込みを@importでやる場合、先頭行に書かないとエディタ、フロントともに反映されない。
linkでやる場合はwp_enque_styleなどで書けばフロントには反映される。
@importでセミコロンの入ったURLを読もうとすると管理画面にstyle.cssが当たらなくなる。フロント側には問題ない。
以下の書き方だと駄目だったので
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300&display=swap');こう書いたらいけた。読み込みが複数回になるのでパフォーマンス的には駄目だろうけど。
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');ブロックの余白
ブロックにはデフォルトで全部のブロックにシステム側でcss変数に定義された –wp–style–block-gapの値がmargin-topとして入る設定となっている。
これはtheme.jsonでblockGapをnullにすることでオフにできる。
{
"$schema": "https://raw.githubusercontent.com/WordPress/gutenberg/trunk/schemas/json/theme.json",
"version": 2,
"settings": {
"appearanceTools": true,
"layout": {
"contentSize": "840px",
"wideSize": "1100px"
},
"spacing": {
"blockGap": null, ←ここ
}
}
}
テンプレートパーツはエディタの見た目上ブロックぽい扱いなので混乱するが、ブロックではないので上記を書き加えてもデフォルトのmargin-topの記述が消えない。※フロント側ではその余白は消える。
なので上記のやりかたではエディタ上でテンプレートパーツ間には必ず余白が生じることとなりフロントと見た目が一致しない。
blockGapをtrueのままで値を0にするなどすれば見た目を揃えることが可能。
{
"$schema": "https://raw.githubusercontent.com/WordPress/gutenberg/trunk/schemas/json/theme.json",
"version": 2,
"settings": {
"appearanceTools": true,
"layout": {
"contentSize": "840px",
"wideSize": "1100px"
},
"spacing": {
"blockGap": true ←ここ
}
},
"styles": {
"spacing": {
"blockGap": "0px" ←ここ
}
}
}
ただし、デフォルトで適用されるblockGapによる余白は詳細度が高く、styleでタグに対して付与したスタイルより優先してしまうので、このやり方だとmarginがつけられなくなる。
管理画面からのスタイル付与
ブロックには管理画面から色や文字サイズなどのスタイルをつけることができる。
システムのデフォルト値があり、テーマごとの値をtheme.jsonで追加することができる。
こんな感じ。
{
"$schema": "https://raw.githubusercontent.com/WordPress/gutenberg/trunk/schemas/json/theme.json",
"version": 2,
"settings": {
"appearanceTools": true,
"layout": {
"contentSize": "840px",
"wideSize": "1100px"
},
"spacing": {
"blockGap": true
},
"color": {
"palette": [
{
"slug": "blue",
"color": "rgb(0,0,255)",
"name": "Blue"
},
{
"slug": "transparent-red",
"color": "rgba(255,0,0,0.5)",
"name": "Transparent Red"
}
]
}
},
"styles": {
"spacing": {
"blockGap": "0px"
}
}
}テンプレートパーツに対しては管理画面からスタイルを付与することができない。
classの設定はできるので、設定したclass名に対してスタイル定義するという対応はできる。
これでいいかはよくわからない。
css変数(カスタムプロパティ)とsass変数
WordPress関係ないけど、sass変数からcss変数にわたすときは#{ }で囲む必要あり。一応メモ。
$base: 8px;
--margin-1: $base;//誤
--margin-1: #{$base};//正