WordPress 6.6リリース間近：新機能と改善にフォーカス - Photon Flux｜プロフェッショナルによるWordPress修理サービス、グローバルリーチ、迅速な対応

ワードプレス6.6 2024年7月16日にリリースが予定されているこのリリースでは、以前のリリースからいくつかの機能が最適化および強化されるとともに、WordPress開発のフェーズ3をさらに進めるために多くの新機能が導入されます。新しいリリースには、299のコアチケット、392の機能強化、462のバグ修正、46のブロックエディタのアクセシビリティの改善が含まれます。

WordPress 6.6の主な新機能と改善点をご紹介します：

同時サンプルカバレッジ

ブロックバインディングAPI の最初の実装は、ブロック・プロパティとカスタム・フィールドを連結するためのものだった。最初のワードプレス6.6 この中で、2回目の反復は"同時サンプルカバレッジ「シンクロナイズド・サンプル・エンハンスメント

ブロックサンプルには2種類ある：

同期ブロック・サンプル
標準（非同期）ブロックサンプル

この2つのサンプルの主な違いは、ウェブサイト上のコンテンツにどのような影響を与えるかです。シンクロナイズドサンプルを変更すると、そのサンプルを使用しているサイト上のすべてが自動的に更新され、まるで魔法のように、同じサンプルのすべてのインスタンスがまったく同じになります。これは標準のブロックサンプルとは異なり、1つを変更すると、その1つだけに影響し、残りは同じままです。

Synchronised Sample Overlayは、この2つの間のスーパーヒーローのようなものです。ブロックバインディングAPIと呼ばれるスーパーパワーを利用することで、サイト全体で統一された構造を維持しながらも柔軟性のあるサンプルを作成することができます。サイトエディターでこのサンプルの構造やスタイルを変更すると、それを使用しているすべてのインスタンスが同期して更新されます。

では、このサンプル・オーバーレイ・マジックの使い方を見てみよう！

まずは。

同期テンプレートが必要です。記事エディターで一から作成するか、サイトエディターの "テンプレート "セクションで既存の同期化テンプレートを見つけることができます。

ステップ1：テンプレートに移動し、Twenty Twenty-FourデフォルトテーマのHeroテンプレートなど、既存のテンプレートをコピーします。

名前を追加し、コピーを同期サンプルとして設定します。

ステップ2： "私のサンプル"セクションで新しい同期化サンプルを見つけてください。サイト・エディターでそれを開き、カバーする必要のあるすべてのブロックを個別に選択します。

ブロック設定へサイドバーまでスクロールする。アドバンスセグメント.あるんだ。オーバーライドを有効にするボタン。

ボタンをクリックその後名前を追加さらにサンプルタイプの設定.

ステップ3：書き換えるブロックごとに同じ作業を繰り返す。終了したら新しい記事もしかしたらウェブページまた、カスタムサンプルも添付してください。

ステップ4：書き換え用のブロックの内容を変更し、記事を保存する。最後にフロントエンドでの結果チェック.

これで完成です。これらのサンプルはサイト上の好きな場所にいくつでも追加することができ、それぞれの新しいインスタンスは同じオリジナルコンテンツを表示しますが、カスタマイズすることができます。

では、これらのサンプルのコードを確認してみよう。サイト・エディタの "テンプレート" セクション選択 "私のサンプル"を選択し、サンプルを追加します。次に、Optionsメニューを開き、Code Editorを選択してサンプルのコードを表示します。

例えば、コードは以下のようになるはずだ：

<div class="wp-block-group">
    <!-- wp:heading {
        "textAlign":"center",
        "level":1,
        "metadata":{
            "bindings":{
                "__default":{
                    "source":"core/pattern-overrides"
                }
            },
        },
        "name":"Hero title"
    },"fontSize":"x-large"} -->
        <h1 class="wp-block-heading has-text-align-center has-x-large-font-size">イノベーションと持続可能な開発へのコミットメント</h1>
    <!-- /wp:heading -->
    ...
</div>

ブロック・セパレーターでは メタデータ・バインディング 属性で指定します。これでタイトル・ブロックが編集可能になります。デフォルト バインディングはWordPressに、サポートされているすべてのプロパティを特定のソースに接続するよう指示します。"core/pattern-overrides".

編集が必要なすべてのブロックに同じプロパティが適用されます。ボタンブロックを例にとってみましょう：

<div class="wp-block-buttons">
    <!-- wp:button {
        "metadata":{
            "bindings":{
                "__default":{
                    "source":"core/pattern-overrides"
                    }
                },
            "name":"Hero button"
            }
        } -->
    <!-- /wp:button -->
    <div class="wp-block-button">
        <a class="wp-block-button__link wp-element-button">会社概要</a>
    </div>
    ...
</div>

さて、記事エディターに戻り、コードエディターに切り替えてください。コードは以下のようになるはずです：

ここでは、特定のブロックが表示されるのではなく、ブロックサンプルへの参照と、編集可能なブロックプロパティのセットが表示されます。

同様に、サイト上のどこにでもブロックサンプルをいくつでも追加することができ、それらはサイトエディターで構築されたときと同じ構造とデザインを維持します。

サイトエディターでサンプルのスタイルと構造を編集し、書き直す。

その後、全体の構造はそのままに、編集可能な各ブロックの内容を個別に変更することができる。

接続されたブロックからカスタム・フィールド値を編集する

WordPress 6.5では、カスタムフィールドの値をデータソース（core/post-meta）としてブロック属性にリンクできる新機能が導入されましたが、WordPress 6.6ではこの機能がさらに強化され、ブロックから直接カスタムフィールドの値を編集できるようになりました。

プラグインやテーマの関数ファイルからカスタムフィールドの新しいセットを登録することで、これを試すことができます。 ショー・イン・レスト に設定します。 真の.以下に例を示す：

register_post_meta(
    'post'.
    'book_title'、
    array(
        'show_in_rest' => true、
        'type' => 'string'、
        'single' => true, 'sanitise_callback' => 'サニタイズコールバック' => 'テキストフィールドのサニタイズ' => true
        'sanitize_callback' => 'sanitize_text_field' です。
    )
);

完了したら、新しい投稿またはページを作成し、先ほど作成したカスタムフィールドと同じ名前で新しいカスタムフィールドを追加します。エディタにサポートされているブロック（タイトルブロックなど）を追加し、コードエディタに切り替えてブロックを以下のように修正します：

<!-- wp:heading 
{
    "metadata":{
        "bindings":{
            "content":{
                "source":"core/post-meta",
                "args":{
                    "key":"book_title"
                }
            }
        }
    }
} -->
<h2 class="wp-block-heading"></h2>
<!-- /wp:heading -->

投稿/ページを保存し、結果を確認してください。これでブロックから直接タイトルの内容を編集でき、カスタムフィールドの値にも変更が反映されるはずです。

さらに、カスタムフィールドにリンクされたブロック属性に関する情報を提供する新しいパネルが追加され、カスタムフィールドにリンクされたブロック属性が表示されます。

この機能はまた、いくつかの関連機能をもたらす：

クエリ・ループからカスタム・フィールドの値を更新できます。
複数のブロックが同じカスタムフィールドに接続されている場合、それらのブロックは同じカスタムフィールドの値を共有し、それに同期して変更されます。
ユーザーが編集できるカスタムフィールドは、パーミッションを持つ投稿のみです。

最後の注意：前述したように、Block Binding APIへの対応は現時点ではまだ限られている：

データ・ビューの強化

WordPress 6.5で導入されたデータビューは、テンプレート、サンプル、投稿、メディアなどのコンテンツを管理するための改良されたユーザーインターフェイスです。この新しいインターフェイスは、開発ロードマップのフェーズ3、特にコラボレーションに関して重要な役割を果たします。そのため、WordPressの将来のバージョンでは、投稿をレビューする人を割り当てたり、ワークフローを効率化するカスタムビューを作成したりといった機能強化が期待できる。WordPress 6.6では、新しいインターフェイスはサイトエディタでのみ利用可能ですが、将来的にはより多くの管理セクションに拡張される予定です。

WordPress 6.6では、新しい管理画面のレイアウトが導入されました。テンプレートセクションの管理画面は削除され、サンプルセクションに統合されました。また、サイトエディタのサンプルメニューは2つのセクションに再配置され、テンプレートセクションが上部に、サンプルが下部に配置されました。

ページについては、新しいパネルがページのリストを提供し、任意のページをワンクリックでプレビューできる。

また、「表示オプション」メニューに新しいレイアウトオプションが表示されます。(右上のアイコン）。

これらの大きな変更に加えて、インターフェースの機能性と情報性を向上させるために、データビューにいくつかの小さな改良が加えられました。例えば、一括編集機能の追加や、フロントエンドページや記事ページでのバッジの表示などです。

WordPress 6.6ではデータビューがさらに進化していますが、まだ初期段階です。将来的には、開発者がビューを直接操作できる拡張APIが導入されるでしょう。データビューの将来についてより深く知りたい方は、Anne McCarthyのデータ・ビュー・アップデート - 2024年6月".

ブロックエディターのその他の改良点

WordPress 6.6では、17.8から18.5までの8つのGutenbergリリースがコアに統合され、インターフェイス、Reactライブラリ、ブロックAPIなどに多くの改善がもたらされました。そのいくつかを紹介しよう：

新作発表プロセス
すべてのブロックを見る
ブロックグループのショートカットキー

新作発表プロセス

バージョン6.6では、記事/ページ設定のサイドバーが簡素化され、より軽量で一貫性のあるものに最適化されました。このイテレーションでは、記事エディターとサイトエディター間の統一プロセスが一歩前進し、両方のエディターが同じ公開プロセスを持つようになりました。

WordPress 6.5と6.6のページ設定サイドバーの比較新しい「ステータスと表示」パネルにより、投稿/ページのステータスをより便利な場所で設定できるようになり、公開エクスペリエンスが標準化されました。

その他の変更点は、サイドバー上部と右上隅にある「改善されたアクション」メニューに移動した「注目画像」と「サマリー」コントロールに影響する。

すべてのブロックを見る

WordPressの以前のバージョンでは、ブロックを選択すると、ブロックインサーターには選択したブロックに追加できるブロックだけが表示されていました。たとえば、カラムブロックを選択すると、ブロックインサーターにはカラムブロックしか表示されませんでした。

WordPress 6.6から、ブロックインサーターには、選択したブロックに追加できるブロックと、選択したブロックの下に追加できるブロックの2つのグループが表示されるようになりました。

ブロックを組み合わせるためのショートカットキー

MacOSでは⌘ + G、WindowsではCtrl + Gのショートカットを使って、選択したブロックを組み合わせることができます。

クラシックテーマのブロックサンプル

WordPress 6.6から、クラシックテーマはブロックテーマと同じサンプルインターフェイスをサポートしています。そのため、WordPressサイトでClassicテーマを使用している場合、ブロックテーマと同じようにサンプル管理で豊かな体験を楽しむことができます。

以下の画像は、WordPress 6.5のサンプル画面とWordPress 6.6の管理セクションのサンプルを比較したものです。

WordPress 6.5とTwenty Twenty-One Classicテーマのサンプル画面

Twenty Twenty-One ClassicテーマでWordPress 6.6のサンプル管理

ブロックテーマと同じように、サンプルの編集、コピー、名前の変更、JSONへのエクスポート、削除ができるようになりました。

Twenty Twenty-One ClassicテーマとWordPress 6.6のサンプルアクション

サンプルを個別に選択したり、一括編集ボタンをクリックすることで、一括操作が可能です。ソートやフィルタリング機能もあります。

Twenty Twenty-One ClassicテーマとWordPress 6.6でのバッチ操作のサンプル

ブロックテーマと同じようにサンプルを作成することもできます。右上の「新しいサンプルを追加」ボタンをクリックすると、サンプルの詳細フォームへの入力が求められます。

WordPress 6.6のクラシックテーマで新しいサンプルを追加する

その後、通常通りサイトエディターでサンプルを作成または編集することができます。

このアップデートにより、クラシック・テーマ・ユーザーにより多くの機能が提供され、クラシック・テーマとブロック・テーマの間で編集体験の一貫性を高める新しい能力がアンロックされます。

デザイナーとテーマ開発者のための新しいツールと機能

WordPress 6.6では、デザイナーとテーマ開発者のために多くの素晴らしい機能と機能強化がもたらされました。デザイナーは、部分的なスタイリング、サイト全体の背景画像、新しいシャドウエディタ、グリッドレイアウトの変更など、より多くのスタイリングにアクセスできるようになりました。また、テーマ作成者にとっては、より多くのツールがより大きな柔軟性を提供します。それでは見ていきましょう。

テーマ.json v.3
WordPress 6.6におけるCSSの特異性
パーシャルスタイル
カラーとタイポグラフィのプリセット
サイト全体の背景画像
グリッドレイアウトの変更
マイナス・マージン
カスタムシャドウ
カスタムアスペクト比プリセット

テーマ.json v.3

WordPress 6.6では、theme.jsonの新しいバージョン、バージョン3が導入されました。新しいバージョンでは、定義済みプロパティのオーバーライド方法が変更されています。フォントサイズやスペーシングサイズのデフォルト値を変更するには 設定.タイポグラフィ もしかしたら 設定.スペーシング そうしれいかん デフォルトフォントサイズ もしかしたら defaultSpacingSizes に設定します。 無実.

以下に要約する：

(落とす デフォルトフォントサイズ もしかしたら defaultSpacingSizes に設定します。 真の デフォルトのフォントサイズとスペーシングサイズがエディタに表示されている場合、テーマはデフォルトの識別子を使用してプリセットを作成できません。デフォルトではデフォルトフォントサイズ に設定します。 真の.
(落とす デフォルトフォントサイズ もしかしたら defaultSpacingSizes に設定します。 無実 デフォルトのフォントサイズとスペーシングサイズがエディターに表示されない場合、テーマはデフォルトの識別子を使用できます。

の開発者ノートをご覧ください。 Theme.json バージョン3 より包括的な概要

WordPress 6.6におけるCSSの特異性

WordPress 6.6では、CSSの仕様が変更され、グローバルスタイルをサポートしながらコアスタイルをオーバーライドすることが容易になりました。

6.6以前では、コアスタイルのオーバーライドはしばしば困難であり、テーマ開発者は望みの効果を得るために複雑なCSSルールを書かなければなりませんでした。6.6では、コアブロックスタイルとグローバルスタイル（theme.json）は、既存のセレクタを（...）でラップすることでオーバーライドされ、コアスタイルの特異性を0-1-0に減らし、新しいセクションスタイルをサポートするために統一されました。

例えば、.wp-block-image.is-style-rounded imgは、(.wp-block-image.is-style-rounded img)に更新されました。

グローバルスタイルを含めることを選択したブロック開発者は、スタイルインタフェースを通じて予測可能な方法でカスタマイズできるよう、スタイルに同じ変更を加えることを推奨されます。ですから、次のようなスタイルのカスタムブロックがあるとします：

wp-block-custom-block {
padding: 0；
}

root :where()でくくるべきだ：

:root :where(.wp-block-custom-block) { { }.
padding: 0；
}

詳しくはデベロッパーノートをご覧ください。WordPress 6.6におけるCSSの特異性の深層.

パーシャルスタイル

WordPress 6.6では、ブロックごとに同じスタイルを再適用することなく、投稿やページの個々のセクションにスタイルを設定できます。つまり、複数のブロックやサブブロックを選択して、選択範囲全体に1つのスタイルバリエーションを割り当てることができます。

これは、ブロック・スタイルの変更の拡張によって可能になったもので、内側のブロックと要素のスタイルをサポートし、グローバルなスタイル付けのためのスタイルの特異性の減少を利用しています。

グローバル・スタイルによるブロック・スタイルの変更を定義および操作できるのは、次のいずれかの方法でブロック・スタイルの変更を登録した場合のみです：

テーマの/stylesディレクトリにあるtheme.jsonセクションを使用する。
利用する レジスタ_ブロック_スタイル 関数
theme.jsonで定義する スタイル.ブロック.バリエーション

theme.jsonセクションを使ってブロックスタイルの変更を定義する

テーマスタイルの変更と同様に、ブロックスタイルの変更もテーマの/stylesディレクトリに独自のtheme.jsonセクションを持つことができます。

2つのバリエーションの違いは、ブロックスタイルのバリエーションでは、新しいトップレベル ブロックタイプ これは、ブロック・スタイルの変更をサポートするブロック・タイプの空でない配列です。さらに、新しい スラッグ 属性は、"ブロック・スタイルの変更を定義する異なるソース間の一貫性を提供し、翻訳可能なタイトル属性からスラッグを分離する "ためです。

開発者ノートには、theme.jsonセクションの例が次のように記載されています：

{
"$schema": "https://schemas.wp.org/trunk/theme.json",.




"styles": {
「カラー": {

"text": "#201819"
},
「要素": {
「見出し": {
"color": {
"text": "#201819"
}
}
},
"blocks": {
「コア/グループ": {
"color": {
"background": "#825f58", "text": "#eed8d3", { { "text": "#eed8d3", { { "text": "#eed8d3
「テキスト": "#eed8d3"
}, "elements": { "background": "#825f58", "text": "#eed8d3
「要素": {
「見出し": {
色": {
"text": "#eed8d3"
}
}
}

}
}
}

とおす `レジスタ_ブロック_スタイル` ブロックスタイルの変更をプログラムで定義

レジスタ_ブロック_スタイル 関数は、ブロックスタイルの変更を登録する2つ目の方法を提供します。ブロックスタイルの変更は、テーマの functions.php でこのように使用する。

register_block_style(
array( 'core/group', 'core/columns' )、
array(
'name' => 'light', 'label' => __( 'ライト' ), array(
'label' => __( 'light' ), 'style_data' => array(
'style_data' => array(
'color' => array(

'text' => '#d2e3c8'.
),
'blocks' => array(
'core/group' => array(
'color' => array(
'background' => '#739072'、
'text' => '#e3eedd'.
),
),
),
'elements' => array(
'link' => array(
'color' => array(
'text' => '#ead196'.
),
':hover' => array(
'color' => array(
'text' => '#ebd9b4', ！
),
),
),
),
), ), ), ), ), ), ), ), ), ), )
)
);

これで、グループまたは列ブロックを選択すると、ブロックのサイドバーにあるスタイルパネルに、登録されている部分スタイルボタンが表示されます。

より詳細な情報といくつかのスタイル変更の例については、ジャスティン・タドロックの記事を参照のこと、WordPress 6.6のブロックスタイルのバリエーションでセクションや入れ子要素などを設定するアーロン・ロバートショーのデベロッパーノートのみならずブロック・スタイル・エクステンションプルリクエストの

テーマスタイルの変更を使用したブロックスタイルの変更の定義

現在のところ テーマ.json ずぼしをさす スタイル.バリエーション 属性が追加されましたが、この方法は一時的なもので、まもなく廃止される予定です。の開発者ノートを参照してください。関連部分.

カラーとタイポグラフィのプリセット

これで、グローバルスタイルのインターフェイス利用可能なプリセットを選択をクリックすると、テーマのカラーパレットとフォントファミリーを変更できます。

現在のテーマが色とタイポグラフィのプリセットをサポートしている場合、それらはグローバルスタイルの色とタイポグラフィの設定に表示されます。

以下の画像は、トゥエンティ・トゥエンティ・フォーが提供する2つのカラーパレット。

トゥエンティトゥエンティフォーのライトパレット

トゥエンティー・トゥエンティー・フォーのダークパレット

この機能をテーマに追加するには、色とタイポグラフィのみを含むスタイル・バリエーションを作成する必要があります。この方法で定義されたスタイルは抽出され、プリセットの生成に使用されます。

この機能についてはコアエディターの改良：デザインをアップグレードおよび開発資金国際会議（ICFD）の行動プログラム。個性的なタイポグラフィとカラーバリエーションを作成...".

サイト全体の背景画像

WordPress 6.6から、新しいセクションを テーマ.json とサイトエディタでサイト全体の背景画像を定義できます。

サイトワイド画像は、body要素に設定され、サイトのすべてのページに表示される背景画像属性値です。

ある テーマ.json サイト全体の背景画像を スタイル.背景 属性は backgroundImage.url::

{
"styles": {
"background": {
"backgroundImage": {
"url": "https://example.com/bg.png"
}
}
}
}

上記の例では、画像への絶対パスが設定されていますが、以下のようにテーマのルートディレクトリからの相対パスを使用して背景画像を定義することもできます：

{
"styles": {
"background": {
"backgroundImage": {
"url": "file:./assets/bg.png"
}

その場合、以下の画像プロパティを使用できます：

背景位置
背景サイズ
バックグラウンドリピート

テーマ開発者でない場合は、サイトエディタのスタイルパネルからサイト全体の背景画像を使用できます。WordPress 6.6では、スタイル > レイアウトの下に適切なコントロールがあります。

これは背景画像の最初のイテレーションです。より詳細な動作方法、制限事項、今後の計画については、デベロッパーズノートをご覧ください。WordPress 6.6のサイト全体の背景画像".

グリッドレイアウトの変更

グループ・ブロックの新しいレイアウト・バリエーションでは、グループ内の要素をグリッドとして表示できます。

エディター・キャンバスにグループ・ブロックを追加し、ブロック設定パネルでグリッド・レイアウトを選択することで試すことができます。

グリッドレイアウトには2種類ある：

オート：自動的にグリッドの行と列を生成する
手動：グリッドに追加する列の数を設定できます。

グリッド要素にコンテンツを追加し、コントロールを使用してサイズを変更します。選択したグリッドタイプに応じて、最小列幅や列数を調整することもできます。

マイナス・マージン

マージンコントロールをサポートするすべてのブロックに対して、負のマージンを設定できるようになりました。WordPress 6.6以前では、この機能はtheme.jsonでのみ利用可能でしたが、負のマージンを要素に適用してオーバーラップ効果を生み出すことが簡単にできるようになりました。

WordPress 6.6では、以下のように手動で負の値を追加する必要があることに注意してください。

WordPress 6.6でボタンブロックにネガティブマージンを設定する

カスタムシャドウ

WordPress 6.6では、カスタムシャドウをグローバルスタイルのインターフェイスで作成・編集することができます。カスタムシャドウを作成するには、サイトエディタに移動し、グローバルスタイルメニューからシャドウを選択します。ここにカスタマイズパネルがあります。ボタンをクリックすると、新しい要素が表示され、シャドウのカスタマイズや名前の変更・削除を行うことができます。

概要

WordPress 6.6には、ブロックモードのオーバーライドからデータビューの強化、テーマ開発者向けの新機能、サイト編集者と投稿編集者の統一された編集エクスペリエンスなど、多くの新機能や変更が含まれています。しかし、この記事で取り上げていないものもたくさんあります。自動アップデートのロールバック機能.

これらの変更点をより詳しく見るには、WordPress 6.6のテスト中に言及されたWordPressのコア貢献者による一連の優れたリソースを参照してください。その中でも、Anne McCarthy の著書WordPress 6.6 真実の源の「ミートアップ」。WordPressオンラインセミナー",WordPress開発者ブログMake WordPress Coreブログに掲載されました。開発ノートとビルギット・パウリ＝ハークが事務総長報告の中で述べている。グーテンベルグ・タイムズの定期的な更新など。

お問い合わせ
チュートリアルが読めない？無料でお答えします！個人サイト、中小企業サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨询：1025174874
三 Eメール：info@361sale.com
④ 勤務時間: 月～金、9:30～18:30、祝日休み