WordPressでレイアウト作業を簡単にするには エレメンエレメントは、初心者からプロのユーザーまで、コーディングの知識なしに簡単に必要なレイアウトを作成できますが、サイトの速度に影響を与える可能性があります。 WordPress サイトを迅速かつ効率的に構築したい場合は、GenerateBlocksプラグインがまともな選択肢かもしれません。
ブログを操作したり、ワンページレイアウトサイトを作成したい場合は、速度が重要な場合はGenerateBlocksを使用することを検討してください。ブロックエディタの機能を拡張するこのプラグインはCSSと JavaScriptを 使用を最小限に抑え、サイトの読み込み速度を最大化します。複雑なページビルダーがなくても、コンテナ、グリッド、見出し、ボタンなどのコアブロックだけでさまざまなレイアウトとデザインを実装できます。
軽量で高速なブロックエディタ用のGenerateBlocksプラグイン
GenerateBlocksは最速 WordPress テーマの一つとして評価される GeneratePress テーマを作成した開発者が製作したブロックエディタ用プラグインです。
このプラグインをインストールして有効にすると、ブロックエディタでいくつかの追加ブロックを使用できます。
提供されるブロックはいくつかありませんが、これらのブロックを活用してさまざまなレイアウト要素を作成できます。
GenerateBlocks Proバージョンでは、20以上のスターターサイト（Avada などのデモサイトと同様）と200以上の事前に作成されたデザインパターンが提供されます。
無料版で複雑なレイアウトを作成するのは簡単ではありません。プロバージョンでは、あらかじめ作成されたデザインパターンを提供して、簡単にページデザインを行うのに役立ちます。
CTA、FAQ、ギャラリー、ヒーローページ、ロゴ、価格表（Pricing）、クエリループなど、さまざまなパターンを活用できます。
GenerateBlocksと GeneratePress 有料版は最大500サイトにインストールできます。 （複数のサイトに適用する場合 エレメンに比べて価格面で安い方です。）
GenerateBlocksと Elementorの違いについては、次の表を参照してください。
| アイテム | ブロック生成プロ | Elementor Pro |
|---|---|---|
| タイプ | Gutenberg ブロックプラグイン | ドラッグアンドドロップページビルダー |
| 主な特徴 | 8つのコアブロック（コンテナ、グリッドなど）、高性能、軽さ、高級スタイル（グローバルスタイル、エフェクト）、テンプレートライブラリ、レスポンシブ、カスタム属性 | 57以上のウィジェット、テーマビルダー、ビジュアル編集、さまざまなテンプレート、高度なデザイン機能 |
| テンプレート/パターン | 20以上のスターターサイト、200以上のパターン | 何百ものブロックとページテンプレートを提供 |
| 性能（速度/最適化） | 非常に速い、ページ容量・要求数少ない、最適化に強み | 比較的重い、多くのJS / CSS、最適化が必要 |
| 使用難易度 | Gutenberg フレンドリーで少し学習が必要 | 直感的で初心者でも使いやすい |
| 가격 | 年間99ドル（500サイト適用可能） | 適用サイト数に応じて年間 - 84ドル（1サイト） - 99ドル（3サイト） - 204ドル（25サイト） - 399ドル（1000サイト） ※機能が制限されたEssentialプランの場合、年間60ドル |
| 拡張性 | GeneratePress など軽量テーマと相性抜群 | さまざまなアドオンやプラグインと互換性 |
| 主な欠点 | ブロックベース、一部の高度なデザインは直接実装が必要 | サイトの速度低下、重いコード |
詳細については、 GeneratePress ホームページをご覧ください。
GenerateBlocks プラグインの Container ブロックの読みやすさを高める
コンテナブロック領域を視覚的に区別するのが難しい
GenerateBlocksのContainer（コンテナ）ブロックを使用すると、複数のブロックを1つのグループにまとめて利用できます。これにより、さまざまな効果を生み出すことができます。たとえば、次のようなカードUIをコンテナブロックを使用して実装できます。
ブロックエディタでコンテナを追加するには、ブロックを挿入するアイコン（プラス記号アイコン）をクリックしてコンテナを選択するか、単に /容器を入力して選択できます（ブロックエディタキーボードショートカット を参照）。
コンテナブロックを挿入してブロックを追加すると、どのブロックがコンテナに含まれているかを視覚的に区別することは容易ではありません。
次の図に示すように、ブロックエディタでコンテナ領域を簡単に区別できる場合は、コンテナをより便利に使用できます。
コンテナ領域を視覚的に簡単に区別できるようにスタイルを設定する
次の方法で、ブロックエディタで GenerateBlocks の Container ブロック領域を視覚的に区別することができます。
1 チャイルドテーマの関数ファイル（functions.php）に次のコードを追加します。
// default container style in block editor
// 블록 에디터에서 컨테이너 스타일 지정하기
function child_theme_add_editor_styles() {
add_editor_style('editor-style.css');
}
add_action('after_setup_theme', 'child_theme_add_editor_styles');2 チャイルドテーマフォルダに エディタースタイル.css ファイルを作成します。
3 エディタースタイル.css ファイルに次のコードを追加します。
/* Visually distinguish GenerateBlocks Container block in the block editor */
/* GenerateBlocks Container 블록을 블록 에디터에서 시각적으로 구분 */
.block-editor-block-list__block[data-title="Container"] {
background-color: rgba(0, 200, 255, 0.07);
border: 1px dashed #00bcd4;
padding: 16px;
box-shadow: inset 0 0 0 2px #00bcd4;
color: black;
}ブロックエディタでContainerブロックを追加すると、コンテナ領域が色分けされ、より便利にブロックをコンテナに追加できます。
スタイルを変更したい場合 CSSコードを適切に変更してください。
最後に、
WordPressは高いシェアが崩れるという見通しがあったが、 エレメンページビルダー そのため、ユーザーが着実に流入しつつ高いシェアを維持しています。
エレメントを使用すると、コーディングの知識が不足してもデザイン作業を簡単に行うことができるという利点があります。しかし、ページビルダーを使用するとサイトの速度に影響を与えるしかありません。エレメンタはビルダーの中でスピードが大丈夫だと評価されますが、エレメンタを有効にするとサイトの速度が遅くなることがよくあります。
速度が重要な場合 GeneratePressのような軽いテーマを使用できます。また、 GenerateBlocksプラグインを一緒に使用すると、デザイン作業を拡張できます。ただし、スピードの面ではエレメンタに比べて間違いなく高速ですが、使いやすさはエレメンタの方が良い方です。
ブログを運営するなら、あえてページビルダーを使用する必要はなく、シンプルに構成して運営すれば良いようです。企業サイトやショッピングモールを運営する場合には、エレメンタや GenerateBlocks などのプラグインを使用すると設計作業が容易になります。
Generatepress テーマを使っていますが、Generateblocksも一緒に使ってみるべきですね。