😊

WordPressのテーマ編集でFSEを使う

に公開
CSS
HTML
PHP
WordPress
tech

WordPressのテーマを自作しています。
カスタマイザーを使って機能追加していましたが、FSEを使う方法を知りました。
ノーコードでWordPressのテーマのデザインをしたいときに、お勧めの方法がFSEだと思いました。
WordPressに最初からインストールされているテーマの中にある”Twenty Twenty-Four”も、FSEを利用しています。

WordPressのフルサイト編集（FSE）について

WordPressのフルサイト編集（Full Site Editing, FSE）は、ウェブサイトのデザインとカスタマイズを大幅に簡素化する新しい機能です。以下にFSEの主要なポイントをまとめます。

1. FSEの基本概念

  • ブロックベースの編集: FSEは、WordPressのブロックエディタの機能をサイト全体に拡張します。これにより、ヘッダー、フッター、サイドバーなど、サイトのすべての部分をブロックを使って編集できるようになります[3][6][19]。

  • テーマの互換性: FSEを利用するには、FSEに対応した「ブロックテーマ」が必要です。これにより、ユーザーはコードを書くことなく、直感的にサイトをデザインできます[4][6][19]。

2. 主な機能

  • サイトエディタ: 新しいサイトエディタインターフェースを通じて、ユーザーはテンプレート、テンプレートパーツ、パターン、ページなどを作成、プレビュー、編集、削除できます[3][4][19]。

  • グローバルスタイル: サイト全体のデザイン要素（色、タイポグラフィ、間隔など）を一元管理できるスタイルインターフェースが提供されます。これにより、個別のブロックや全体のスタイルを簡単に設定できます[4][6][19]。

  • テンプレートとテンプレートパーツ: ユーザーは、ページレイアウトやサイトの構造を簡単に作成できるテンプレートを利用できます。これにより、PHPやHTMLの知識がなくても、サイトのデザインを自由に変更できます[4][6][19]。

  • theme.jsonファイル: 新しいテーマ設定ファイルであるtheme.jsonを使用して、テーマのデフォルトスタイルや設定を定義できます。これにより、開発者はテーマのカスタマイズをより効率的に行えます[3][4][6]。

3. FSEの利点

  • ノーコードでのデザイン: FSEは、コーディングの知識がないユーザーでも、簡単にサイトをデザインできるように設計されています。これにより、より多くの人々がウェブサイトを作成しやすくなります[5][6][19]。

  • 効率的な作業フロー: FSEを使用することで、サイトのすべての部分を一つのインターフェースで管理できるため、作業の効率が向上します。特に、ブロックパターンを利用することで、一般的なサイトセクションのレイアウトを迅速に構築できます[4][6][19]。

4. FSEの導入と今後の展望

FSEは、WordPressの進化の一環として、ユーザーがより直感的にサイトを構築できるようにするための重要なステップです。今後も新機能や改善が期待されており、特に開発者やデザイナーにとって、FSEは強力なツールとなるでしょう[2][4][19]。

このように、WordPressのフルサイト編集は、ウェブサイトのデザインと管理を根本的に変える可能性を秘めています。ユーザーは、FSEを活用することで、より自由に、そして効率的に自分のビジョンを実現できるようになります。
[1] https://zenn.dev/test_myname/books/wordpress_fullsite_book/viewer/summary
[2] https://cyberpanel.net/blog/wordpress-full-site-editing
[3] https://fullsiteediting.com/lessons/what-is-full-site-editing/
[4] https://kinsta.com/blog/wordpress-full-site-editing/
[5] https://motoki-design.co.jp/wordpress/how-to-fse/
[6] https://kinsta.com/jp/blog/wordpress-full-site-editing/
[7] https://webgaku.net/jp/wordpress/full-site-editing/
[8] https://www.theme3.net/fse-liquid-press/
[9] https://note.com/sakai017/n/nc75f996413b0
[10] https://wpengine.com/resources/full-site-editing-what-does-it-mean-for-web-designers/
[11] https://codewp.ai/blog/wordpress-full-site-editing/
[12] https://www.koko-de.com/hp-full/
[13] https://www.wpbeginner.com/ja/beginners-guide/wordpress-full-site-editing/
[14] https://tcd-theme.com/2022/01/wordpress-full-site-editing.html
[15] https://zenn.dev/chiilog/articles/93f53bef9f0b51
[16] https://www.smashingmagazine.com/2022/10/wordpress-full-site-editing/
[17] https://www.wpbeginner.com/beginners-guide/wordpress-full-site-editing/
[18] https://www.megane-blog.com/workshop/フルサイト編集で実際にサイトを作ってみよう！/
[19] https://themeisle.com/blog/wordpress-full-site-editing/
[20] https://www.amazon.co.jp/WordPressの新しい標準レッスン-フルサイト編集＋ブロックエディター活用講座〈動画解説付き〉-池田-嶺/dp/4295206571
[21] https://wordpress.org/documentation/article/site-editor/
[22] https://www.multidots.com/blog/wordpress-full-site-editing-for-developers/
[23] https://lulliecat.com/posts/wp-fse-01-intro.html
[24] https://edgcal.jp/wordpress-full-site-editor-guide/
[25] https://fukuokamiyako.com/wordpress_fse/
上記の文章は、Felo.AIを使い生成しました。
https://felo.ai/search/hr2idDpMjtRfhSQ4CV3HRw?invite=WPpJDDz5MLqaV

FSEを使ったテーマを使うと

WordPressの管理画面の項目が、従来のカスタマイザーを使った時と変わります。
テーマエディタの位置が、変わりました。

ウェサイトにアクセスしたときに表示されるページの設定項目が、表示設定に移動していました。

FSEのエディタの画面

私が作った練習用のFSEの基本の身のテーマでも、このようにエディタを利用できます。

ヘッダーのカスタマイズも容易

こちらのように、ヘッダーのパーツを複製できます。

ヘッダーの編集画面は、このような様子です。

カラムの設定でサイドバーのブロックの設定ができる

2カラムのデザインは、サイドバーを左に表示したり、右に表示したりする設定に活用できるものも含まれています。

theme.jsonで内容の設定ができます

{
    "$schema": "https://schemas.wp.org/trunk/theme.json",
    "version": 2,
    "settings": {
        "color": {
            "palette": [
                {
                    "slug": "primary",
                    "color": "#0073aa",
                    "name": "プライマリ"
                },
                {
                    "slug": "secondary",
                    "color": "#23282d",
                    "name": "セカンダリ"
                },
                {
                    "slug": "background",
                    "color": "#ffffff",
                    "name": "背景"
                },
                {
                    "slug": "text",
                    "color": "#333333",
                    "name": "テキスト"
                }
            ],
            "gradients": [
                {
                    "slug": "primary-to-secondary",
                    "gradient": "linear-gradient(135deg, #0073aa 0%, #23282d 100%)",
                    "name": "プライマリからセカンダリへ"
                }
            ],
            "duotone": [
                {
                    "colors": [ "#0073aa", "#ffffff" ],
                    "slug": "primary-white",
                    "name": "プライマリと白"
                }
            ],
            "custom": true,
            "customGradient": true,
            "link": true
        },
        "typography": {
            "fontSizes": [
                {
                    "slug": "small",
                    "size": "14px",
                    "name": "小"
                },
                {
                    "slug": "normal",
                    "size": "16px",
                    "name": "標準"
                },
                {
                    "slug": "medium",
                    "size": "20px",
                    "name": "中"
                },
                {
                    "slug": "large",
                    "size": "24px",
                    "name": "大"
                },
                {
                    "slug": "x-large",
                    "size": "32px",
                    "name": "特大"
                }
            ],
            "fontFamilies": [
                {
                    "fontFamily": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
                    "slug": "system-font",
                    "name": "システムフォント"
                },
                {
                    "fontFamily": "'Noto Sans JP', sans-serif",
                    "slug": "noto-sans-jp",
                    "name": "Noto Sans JP"
                }
            ],
            "lineHeight": true,
            "dropCap": true,
            "customFontSize": true
        },
        "spacing": {
            "units": [ "px", "em", "rem", "vh", "vw", "%" ],
            "padding": true,
            "margin": true
        },
        "layout": {
            "contentSize": "800px",
            "wideSize": "1200px"
        }
    },
    "styles": {
        "color": {
            "background": "var(--wp--preset--color--background)",
            "text": "var(--wp--preset--color--text)"
        },
        "typography": {
            "fontSize": "var(--wp--preset--font-size--normal)",
            "fontFamily": "var(--wp--preset--font-family--system-font)",
            "lineHeight": "1.6"
        },
        "elements": {
            "link": {
                "color": {
                    "text": "var(--wp--preset--color--primary)"
                }
            },
            "h1": {
                "typography": {
                    "fontSize": "var(--wp--preset--font-size--x-large)",
                    "lineHeight": "1.2"
                }
            },
            "h2": {
                "typography": {
                    "fontSize": "var(--wp--preset--font-size--large)",
                    "lineHeight": "1.3"
                }
            }
        },
        "blocks": {
            "core/paragraph": {
                "spacing": {
                    "margin": {
                        "bottom": "1.5rem"
                    }
                }
            },
            "core/heading": {
                "spacing": {
                    "margin": {
                        "top": "2rem",
                        "bottom": "1rem"
                    }
                }
            }
        }
    },
    "templateParts": [
        {
            "name": "header",
            "title": "ヘッダー",
            "area": "header"
        },
        {
            "name": "footer",
            "title": "フッター",
            "area": "footer"
        }
    ]
}

theme.jsonの中で、フロントページの指定をしたり、ヘッダーの高さを指定したり、色々設定できます。
ただし、ヘッダーの高さは、設定しなくても良いです。
ヘッダーのパーツをカスタマイズするときに、要素が増えて高さが変わったとき、その内容が反映されるので、コードで高さを設定しなくてもWordPressで認識してくれます。
工夫すれば、固定記事、indexなどのテンプレート単位で、ヘッダーのパーツを変えることも可能です。

このFSEのエディタでテンプレートを確認できるので、テンプレートのデザインを容易に確認できます。
テンプレートのデザインを容易に確認できるのは、とても助かると思いました。

FSEで設定されているパーツ

WordPressのFSE（フルサイト編集）エディタで使えるパーツ（ブロック）の一覧と、それをWordPressが認識するためのコード（ブロック名）を紹介します。パーツの数は非常に多く、標準ブロックだけでもかなりの種類があり、テーマやプラグインによってさらに増えます。

WordPress標準ブロック一覧（FSEエディタで使用可能）

ブロック名（日本語） WordPressコード（ブロック名）
段落 core/paragraph
見出し core/heading
リスト core/list
引用 core/quote
画像 core/image
ギャラリー core/gallery
ボタン core/button
カバー core/cover
動画 core/video
音声 core/audio
テーブル core/table
カラム core/columns
グループ core/group
行 core/row
スタイル付きリスト core/list-item
コード core/code
HTML埋め込み core/html
ショートコード core/shortcode
スペーサー core/spacer
区切り線 core/separator
メディアと文章 core/media-text
もっと読む core/more
ページ区切り core/page-break
最新の投稿 core/latest-posts
カテゴリー一覧 core/categories
タグクラウド core/tag-cloud
検索 core/search
アーカイブ core/archives
コメント core/comments
サイトタイトル core/site-title
サイトのロゴ core/site-logo
サイトの説明 core/site-tagline
ナビゲーション core/navigation
テンプレートパーツ core/template-part
投稿タイトル core/post-title
投稿コンテンツ core/post-content
投稿サムネイル core/post-featured-image
投稿メタ情報 core/post-meta
投稿日 core/post-date
投稿タグ core/post-terms
投稿カテゴリー core/post-terms
投稿の抜粋 core/post-excerpt
コメントフォーム core/comments-form
コメントリスト core/comments-query-loop
ログイン／ログアウトボタン core/loginout
サイトのホームリンク core/home-link

FSE特有のパーツ（テンプレートブロック）

FSEでは、サイト全体のレイアウトをカスタマイズするためのテンプレートブロックもあります。

ブロック名（日本語） WordPressコード（ブロック名）
ヘッダー core/template-part
フッター core/template-part
サイドバー core/template-part
ループ core/query-loop
投稿の前後ナビゲーション core/post-navigation
投稿の次へ・前へボタン core/post-navigation-link
投稿リスト core/query

どのくらいのパーツがあるのか？

WordPressの標準ブロックだけで約50種類以上あります。
加えて、テーマやプラグインによって独自のブロックが追加されるため、数百種類になることもあります。

例えば、WooCommerceをインストールすると、商品リストやカートなどのブロックが追加されますし、
ElementorやSpectraなどのブロックプラグインを使うと、アニメーション付きボタンや高度なデザインパーツも利用できます。

まとめ

  • WordPress標準のFSEブロックは50種類以上あり、サイト編集に必要なほとんどの要素をカバー。
  • core/ プレフィックスのついたコードがWordPressで認識される。
  • WooCommerceや他のプラグインを追加すると、ブロックの数が増える。
  • core/template-part や core/query-loop などのFSE専用ブロックでサイト全体のデザインを管理できる。

この情報は、ChatGPT GPT-4で生成しました。

パーツの書き方

例として、ヘッダーのコードを掲載します。

<!-- wp:group {"style":{"spacing":{"padding":{"top":"20px","bottom":"20px"}},"border":{"bottom":{"width":"1px"}},"dimensions":{"minHeight":"var:preset|custom|headerHeight"}},"className":"wp-block-template-part-header","layout":{"type":"constrained"}} -->
<div class="wp-block-group wp-block-template-part-header" style="border-bottom-width:1px;min-height:var(--wp--preset--custom--header-height);padding-top:20px;padding-bottom:20px">
    <!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
    <div class="wp-block-group">
        <!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap"}} -->
        <div class="wp-block-group">
            <!-- wp:site-logo {"width":48} /-->
            <!-- wp:site-title {"style":{"typography":{"fontWeight":"700"}}} /-->
        </div>
        <!-- /wp:group -->
        
        <!-- wp:navigation {"layout":{"type":"flex","orientation":"horizontal"}} /-->
    </div>
    <!-- /wp:group -->
</div>
<!-- /wp:group -->

今回制作したFSEの練習用の基本形のWordPressのテーマは、こちらからダウンロードできます。
https://github.com/miracle777/fse-theme

ランディングページ（LP）をWordPressのテーマで作るとき

これまでWordPressのテーマを自作してランディングページを使えるようにしていましたがFSEを知り、FSEを活用するとランディングページのカスタマイズも容易になるのかなと思いました。
納品先で、自由にランディングページの編集をして、効果に合わせて修正することが容易になると思ったのです。

またノーコードでWordPressのテーマを作りたいときもFSEは、とても役立つと思いました。

カスタマイザーと違い機能追加はプラグイン対応みたい

FSEを使ったテーマで機能を追加したいときは、WordPressのプラグインとして開発しないといけないみたいです。
そのため特有の機能があるWordPressのテーマやランディングページの場合は、従来通りカスタマイザーを使ったクラッシックエディタを使う方法が良いのかもしれないです。

WordPressのテーマで、デザインと機能面と分けることで、WordPress自体のアップデートがあったときに、影響を受けにくくなるかもしれないです。

FSEでテンプレートを追加する時

FSEでは、従来の page-landing.phpのようなPHPファイルの代わりに、landing.html というようなHTMLテンプレートを作成します。

HTMLで作成したランディングページをWordPressのブロック（Gutenbergブロック）に変換する必要があります。

例えば、以下のようなHTMLをブロックエディターのコードに変換できます。


<section class="hero">
    <h1>魅力的なランディングページ</h1>
    <p>このページの目的を説明します。</p>
    <a href="#" class="btn">申し込む</a>
</section>

というコードを

<!-- wp:group {"align":"wide","layout":{"type":"constrained"}} -->
<section class="hero">
    <!-- wp:heading {"level":1} -->
    <h1>魅力的なランディングページ</h1>
    <!-- /wp:heading -->

    <!-- wp:paragraph -->
    <p>このページの目的を説明します。</p>
    <!-- /wp:paragraph -->

    <!-- wp:buttons -->
    <div class="wp-block-buttons">
        <div class="wp-block-button"><a class="wp-block-button__link" href="#">申し込む</a></div>
    </div>
    <!-- /wp:buttons -->
</section>
<!-- /wp:group -->

というような形に、変換します。

CSSは、theme.jsonに書くのが推奨のようです。

{
    "styles": {
        "color": {
            "background": "#ffffff",
            "text": "#333333"
        },
        "typography": {
            "fontSize": "16px"
        },
        "spacing": {
            "padding": "20px"
        }
    }
}

でも長いCSSは、従来通りstyles.cssに書くこともできます。

.landing-page {
    text-align: center;
    padding: 50px;
}

.landing-page h1 {
    font-size: 2rem;
    color: #333;
}

.landing-page .wp-block-button__link {
    background-color: #ff6600;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
}

FSE対応テーマの templates/landing.html にブロック形式で作成すれば,
テンプレートとして使用可能です。
templatesのディレクトリの中にランディングページのテンプレートを設置すると、ランディングページを利用できます。
そしてテンプレートのファイルは、phpではなくhtmlの拡張子のファイルになりますので、従来のテーマと異なります。

まとめ

自分でWordPressのテーマを作るときは、必要な機能を使えるようにする手間があります。
でもFSEを採用したWordPressのテーマなら、表示の設定の部分はWordPressの機能を使えますので、自分が必要としているランディングページの部分だけ作ればよくなりますので、生産性の向上を図ることができるように思いました。
ただブロックエディタ対応にするために、コードの書き方やファイルの拡張子などの点で、気を付けないといけない内容もあります。
作成するランディングページやウェブサイトの内容に応じて、使い分けも良いかもしれないです。

Discussion