WordPress 5.0（2018年12月6日にリリース）は、プラットフォームに革命をもたらし、その中心はブロックエディター（Gutenberg）です。これは、バージョン3.0にカスタム記事ジャンルの導(dǎo)入以來、最も重要な革新を示しています。ブロックエディターは、クラシックエディターに取って代わります。これは、デザインの概念があまりにも単純すぎて、最新のWebレイアウトのニーズに対応できません。

古典的な編集者は主にテキスト編集に焦點(diǎn)を當(dāng)て、ブロックエディターは「ブロック」を使用してページコンテンツをアトミックユニット（テキスト段落、寫真、埋め込みコンテンツなど）に分割する基礎(chǔ)として使用します。この構(gòu)造化されたコンテンツ組織は、ブロックエディターの最も重要な利點(diǎn)です。

ブロックエディターの前のレイアウトプラン

ブロックエディターが表示される前に、WordPressレイアウトは主に2つの方法に依存していました。

1. カスタムテンプレート：コードが必要であり、ほとんどのユーザーにとってしきい値は高いです。
2. Page Builderプラグイン：視覚的なレイアウトツールを提供しますが、通常、遅い速度、ユーザーエクスペリエンスの低下、クローズドエコシステムなどの問題があります。

ページビルダープラグインの欠點(diǎn)は次のとおりです。

1. パフォーマンスの問題：包括的な機(jī)能と膨大なコードボリュームを持つために、Webサイトの速度に影響します。
2. ユーザーエクスペリエンス：いくつかのプラグインの編集エクスペリエンスが不十分です。
3. エコロック：他のプラットフォームやツールに移行することは困難です。

ブロックエディターは、これらの問題を解決し、ユーザーにより良いライティングエクスペリエンスを提供し、開発者に統(tǒng)一されたAPIを提供するように設(shè)計(jì)されています。

CSSレイアウトの簡単な履歴

Early CSS（1996）は、主にテキストスタイルとシンプルな要素タイプセットに使用されました。セマンティックHTMLの概念と混合コンテンツとスタイルが不足しているため、レイアウトには多數(shù)のテーブルが使用されているため、コードの冗長性と維持が困難になります。

その後、Web標(biāo)準(zhǔn)キャンペーンは、コンテンツとスタイルの分離を提唱し、レイアウトにDiv ElementsとFloat屬性を使用します。表よりも柔軟性がありますが、フロート屬性のクリアリングメカニズムは複雑さを高めます。

2012年、FlexBox仕様のリリースにより多くのレイアウトの問題が解決され、その簡潔な構(gòu)文はコードの量を大幅に減らしました。

CSSグリッド：2019レイアウトツール

2017年、CSSグリッドレイアウトモジュールが正式にリリースされました。 FlexBoxと比較して、Gridは2次元のレイアウトをサポートし、HTMLタグの順序に依存せずにページ上の要素の位置を制御する柔軟性を高めることができます。

グリッドの基本原理は、ページを行コラムグリッドに分割し、グリッド內(nèi)の要素の位置を指定してレイアウトすることです。これにより、コードが大幅に簡素化され、レイアウトを変更するときにHTML構(gòu)造を変更する必要はありません。

次の例は、グリッドの基本的な使用法を示しています。

 <code>.my-container { display: grid; grid-template-columns: repeat( 3, 1fr ); grid-template-rows: repeat( 2, 1fr ); } .element-1 { grid-column-start: 2; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; }</code>

Gridは、レイアウトをさらに簡素化するためにgrid-template-areas屬性を使用して名前付きエリアの定義もサポートします。

 <code>.container { display: grid; grid-template-areas: "header header header header" "main main . sidebar" "footer footer footer footer"; }</code>

WordPressでCSSグリッドを使用します

WordPressでのCSSグリッドの適用を簡素化するために、Gridsプラグインを開発しました。このプラグインは、ブロックエディターに視覚的なグリッドレイアウトツールを提供し、12×6グリッドとドラッグアンドドロップ領(lǐng)域を組み合わせて、ユーザーが視覚コントロールを通じてサイズ、背景、レスポンシブな動(dòng)作を設(shè)定できます。

グリッドプラグインの利點(diǎn)は次のとおりです。

• ブロックエディターと統(tǒng)合：簡単に使用できるように、ブロックエディターをシームレスに接続します。
• 軽量：生成されたHTMLタグは簡潔で、冗長コードを回避します。
• スケーラビリティ：カスタムスタイルと拡張機(jī)能をサポートします。

グリッドプラグインによって生成されたスタイルは、ページヘッダーインラインスタイルに追加され、簡単にキャッシュできます。

あなたのフィードバックを楽しみにしています！

CSSグリッドの適用を促進(jìn)するには、より自動(dòng)化されたレイアウトツールが必要です。 Gridsプラグインは、WordPressのCSSグリッドのレイアウトを簡素化するように設(shè)計(jì)されており、ユーザーのフィードバックと継続的な改善と改善を楽しみにしています。

以上がWordPressレイアウトにCSSグリッドをもたらしますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。