---
tags: 2023-05-17, 2023-05-07, Wordpress, block theme
title: 「Block Theme」の理解を深める
---

<style>
.layout {
width: 100%;
display: grid;
grid-template-rows: 0fr;
grid-template-columns: 36% 1fr;
gap: 8px;
}
.layout div{
background-color: #FEEEED;
padding: 1rem;
/* height: auto; */
}
div .thead {
background-color:pink;
height: 60px;
text-align: center;
font-weight: bold;
}
.markdown-body blockquote{
font-size: 16px;
padding: 0 1em;
color: #777;
border: .7rem solid rgba(255,165,7,0.5);
}

}
</style>

<h2>「Block Theme」の理解を深める</h2>

<p style="text-align:right;margin-bottom: 0px;"><a href="https://developer.wordpress.org/themes/block-themes/" target="_blank" rel="noopener"><span data-position="618" data-size="7">出典元(邦訳)</span></a></p>

### 「Block Theme」ってなに？

> wordpresss はバージョン 5.9 からブロックテーマをサポートしています。スタイルインターフェイスとともに、ブロックテーマは新しいサイト編集機能の一部です。ブロックテーマは、フルサイト編集テーマと呼ばれることもあります。詳しくは、サイト編集機能についての記事をご覧ください。

### 「Block Theme」のメリット

> - ブロックテーマは、ページ上のレンダリングされたブロックに対してのみスタイルをロードすることにより、読み込みパフォーマンスを向上させます
> - ブロックテーマは、フロントエンドとエディターの両方のスタイルシートを手動でエンキューする必要はありません
> - Theme.json は add_theme_support() のすべての側面を処理します。
> - コンテンツにスキップ、キーボード ナビゲーション、ランドマークなどのアクセシビリティ機能は、コードを追加せずに自動的に生成されます。
> - ブロックテーマを使用すると、ユーザーはコードなしでWebサイトのすべての部分を編集できます
> - スタイルインターフェイスを使用することにより、ユーザーはWebサイトとブロックの色とタイポグラフィをカスタマイズできます

### 「Block Theme 自作」に役立つサイト
最近、Wordpressの勉強を再開しています。
Wprdpressはバージョン5.9から様子が変わってきています。例えば、サイトのデザインに欠かせない「テーマ開発」における哲学・概念（コンセプト）・考え方が大きく変化したと思います。

<p style="text-align:right;margin-bottom: 0px;"><a href="https://blogs.itmedia.co.jp/itsolutionjuku/2022/07/post_1038.html" target="_blank" rel="noopener"><span data-position="618" data-size="7">図表の出典元</span></a></p>


つまり、従来の「HTML・CSS・JavaScript」などの開発言語スキルを前提として「テーマ開発」スタイルから、いわゆる「ノーコード（コード不要）」「ローコード（簡易コード対応）」対応へと方向が変わったのです。

この変化は、今後労務**サービス提供（請負）型から価値共創（商品）型へ**事業の重心を変化させようと模索している弊社（ユアシス）にとっては重要だと思います。

2023年末から俄かに話題が沸騰し始めたChatGPTなどの文章生成系の人工知能（AI）技術に４か月ほど触れて学んだことの一つは、これからの時代において一定のルールを覚えてコンピューターに指示するという部分は人工知能が最も得意な分野であるという事です。

[公式サイト（英文）](https://developer.wordpress.org/themes/block-themes/#differences-and-similarities-between-classic-themes-and-block-themes)は非常に膨大な量なので、手っ取りばやく行うには下記のリンクが参考になるかもしれない。
※サイトの丸ごと邦訳に失敗することが多いので、リンクをプライベートモードで開いて「サこの頁を翻訳する」を行うと成功する場合があります。

- ワードプレスのブロックテーマを作成する方法([簡単な方法](https://www.elegantthemes.com/blog/wordpress/create-block-theme#:~:text=How%20to%20Create%20a%20WordPress%20Block%20Theme%3F%201,Theme%20Plugin%20...%204%20Manage%20Theme%20Fonts%20))

---
参考 [原典](https://developer.wordpress.org/themes/block-themes/#differences-and-similarities-between-classic-themes-and-block-themes)

### クラシックテーマとブロックテーマの相違点と類似点（機械翻訳）
<section class="layout">
<div class="thead">クラッシックテーマ</div>
<div class="thead">ブロックテーマ</div>
<div>PHPファイルを使用してパーツとコンテンツを表示</div>
<div>HTML ファイルを使用してブロックを表示します。<br>ワードプレスがHTMLファイルを見つけられない場合のフォールバックとしてPHPファイルを使用します。<br>シングル.html は、シングル.phpを使用する場合と同じです。</div>
<div><a href="https://developer.wordpress.org/files/2014/10/Screenshot-2019-01-23-00.20.04.png">テンプレート階層</a>を使用</div>
<div>テンプレート階層を使用</div>
<div><a href="https://developer.wordpress.org/themes/basics/template-tags/">テンプレートタグ</a>などのPHP機能を使用してコンテンツを表示</div>
<div>すべてにブロックを使用。<br>
投稿コンテンツ ブロックは、<b> the_content() </b>を使用する場合と同じです。</div>
<div><a href="https://developer.wordpress.org/apis/handbook/internationalization/">PHP関数</a> を使用してテキストを翻訳可能にする</div>
<div>HTML ファイル内のテキストは翻訳できません。<a href="https://developer.wordpress.org/block-editor/reference-guides/block-api/block-patterns/">ブロックパターン</a>
は、PHP関数を使用してテキストを翻訳可能にすることができます。</div>
<div> <a href="https://developer.wordpress.org/themes/basics/the-loop/">ループ</a> を使用して、さまざまな投稿と投稿タイプを表示します</div>
<div>クエリブロックと投稿テンプレート<a href="https://wordpress.org/support/article/query-loop-block/">ブロック</a>を使用します</div>
<div>ウィジェット<a href="https://developer.wordpress.org/themes/functionality/sidebars/">領域(サイドバー)</a>と <a href="https://developer.wordpress.org/themes/functionality/widgets/">ウィジェット</a>を使用できます</div>
<div>ウィジェットの代わりにブロックを使用します。WordPress に含まれるウィジェットはブロックに変換されています</div>
<div><a href="https://developer.wordpress.org/themes/customize-api/">カスタマイザー</a>を使用できます</div>
<div>サイト エディターを使用します。オプションでカスタマイザーメニューを有効にすることができます</div>
<div>メニューを含めるには<a href="https://developer.wordpress.org/themes/functionality/navigation-menus/">ナビゲーションメニュー</a>を登録する必要があります</div>
<div><a href="https://wordpress.org/support/article/navigation-block/">ナビゲーションブロック</a>を使用します</div>
<div><a href="https://developer.wordpress.org/themes/functionality/custom-headers/">カスタムヘッダー</a>を登録できます</div>
<div>ブロックを使用して、画像を含むサイトヘッダーを完全にカスタマイズします</div>
<div><a href="https://developer.wordpress.org/themes/functionality/custom-logo/">カスタムロゴ</a>を登録できます</div>
<div>サイトのロゴブロックを使用します</div>
<div><a href="https://developer.wordpress.org/themes/basics/including-css-javascript/">カスタムCSSとスクリプト</a>をエンキュー（待ち行列に入れることが）できます</div>
<div>カスタムCSSとスクリプトをエンキューできますが、ブロックとtheme.json構成ファイルに大きく依存します</div>
<div><a href="https://developer.wordpress.org/themes/advanced-topics/theme-json/">theme.json</a>を使用できますが、テーマ作成者は前面のスタイルをキューに入れる必要があります</div>
<div>theme.json を使用でき、スタイルは自動的にエディターとフロントにエンキューされます</div>
<div>テンプレートファイルをルートディレクトリに配置できます</div>
<div>テンプレートファイルを<b>テンプレートフォルダ</b>に配置します</div>
<div>テンプレートパーツを任意のディレクトリに配置できます</div>
<div>テンプレート部品を<b>パーツフォルダ</b>に配置します。</div>
<div>サイトエディタで404やアーカイブページなどのサイトテンプレートを作成および編集することはできません</div>
<div>404などのサイトテンプレートを作成および編集し、サイトエディタでページをアーカイブできます</div>
<div>テーマをサポートするテンプレートエディタでブロックテンプレートを作成および編集できます</div>
<div>テンプレートエディタでブロックテンプレートを作成および編集できます</div>
</section>