WordPressレイアウトにCSSグリッドをもたらします

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

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

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

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

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

ページビルダープラグインの欠点は次のとおりです。

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

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

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

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

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

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

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

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

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

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

 <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グリッドとドラッグアンドドロップ領域を組み合わせて、ユーザーが視覚コントロールを通じてサイズ、背景、レスポンシブな動作を設定できます。

グリッドプラグインの利点は次のとおりです。

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

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

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

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

以上がWordPressレイアウトにCSSグリッドをもたらしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。