Bricksを使用してWordPressサイトを構築する方法

WordPressサイトの作成はとても簡単で、適切なツールとヘルプがあれば、初心者でも洗練された高機能サイトをすぐに立ち上げることができます。

今回は、コードを1行も書かずに高度にカスタマイズ可能なテーマビルダー「Bricks Builder」を使用して、WordPressサイトを構築する方法をご紹介します。

Bricks Builderとは

Bricks（Bricks Builderとも）はビジュアルページビルダーで、WordPress環境内で直接レスポンシブなウェブサイトを構築することができます。WordPressとのシームレスな統合により、初心者から熟練した開発者まで、ドラッグ＆ドロップのインターフェースで視覚的にサイトを作成でき、ユーザーエクスペリエンスが向上するように設計されています。

BricksはElementorなどの他のサイトビルダーとは異なり、プラグインではなくテーマです。他のサイトビルダーでは拡張機能が必要になるのに対し、Bricksにはほぼすべての機能が標準搭載されています。

また、フロントエンドのライブ編集が可能で、デザイン要素やレイアウトを調整しながらリアルタイムで変更を確認することができます。

テンプレート、豊富なデザイン要素、高度なカスタマイズ機能など、様々なツールが包括的に組み込まれています。

さらに、動的データもサポートされているため、データ駆動型のウェブサイトを簡単に構築し、テンプレート全体でコンテンツを動的に統合することができます。

Bricksの強み

Bricksは、パフォーマンスと柔軟性に特に優れており、他のビルダーに代わる堅牢なサイトビルダーです。

• スピード─驚くほど高速かつ軽量
• 使いやすさ─直感的なインターフェースで誰でも簡単に使うことができる
• カスタマイズ─カスタムCSSとJavaScriptによる高度なカスタマイズ＆多くのWordPressプラグインと互換性あり

Bricksを使用する方法

Bricksはサブスクリプションが必要な有料テーマです。プランを契約して支払いを終えたら、ダッシュボードからZIPファイルおよびWordPress内でBricksを有効化するライセンスキーをダウンロードし、WordPressサイトにアップロードします。

Bricksテーマをインストールすると、WordPress管理画面に「Bricks」メニューが表示されるようになります。

ライセンスを有効化するには、「Bricks」を選択して「Activate license」をクリックします。Bricksのアカウントからライセンスキーをコピーして貼り付け、「Activate」で有効化すれば、すべての機能が利用できるようになります。

購入する前にまずは一度試してみたいという場合には、try.bricsbuilder.ioでトライアルアカウントを設定可能です。Bricksがインストールされたデモサイトにアクセスでき、無料でBricksの機能や性能を試すことができます。

Bricksの起動

Bricksで固定ページを作成または編集するには、「固定ページ」＞「新規追加」に移動するか、既存ページのエディターを開きます。画面上部に表示される「Edit with Bricks」をクリックするとBricksが起動します。

これで、「Elements」パネルからドロップ＆ドラッグでページをデザインすることができます。

Bricksのインターフェース

Bricksのインターフェイスは、WordPress環境とシームレスに統合されています。

上のスクリーンショットをもとに、インターフェースの各エリアをご紹介します。

• Builder workspace（ワークスペース）：メインになるエリアで、ここで要素をドラッグして配置したり、サイズを変更したり、要素を並べ替えたりなどの操作を行う。
• Toolbar（ツールバー）：作業の保存、サイトのプレビュー、設定メニューやレスポンシブ制御などの機能に簡単にアクセスできる。
• Elements panel（要素パネル）：テキストボックス、画像、ボタンなど、サイトで使用可能なすべての要素が含まれ、直接ページにドラッグ可能。
• Structure view（構造ビュー）：ページの階層的なアウトラインを表示。ページの要素がどのように配置されているかを把握でき、入れ子になった要素を簡単に選択・編集できる。

Bricksでカスタムフォントを使用する

Bricksでは、WordPressサイトにカスタムフォントをアップロード可能です。使用するには、「Bricks」＞「Custom Fonts」に移動します。

フォントファイルはWOFF2、WOFF、TTFなど、さまざまな形式でアップロード可能です。thin、semi-bold、normal、boldなどの書式スタイルもアップロードできます。

カスタムフォントを追加するには、「Add New」をクリックします。「Add New Custom Font」フィールドにフォント名を入力し、アップロードしたいフォントを選択して「Edit」をクリックします。

するとドロップダウンメニューが表示され、フォントファイルをアップロードするためのフィールドが出現します。ファイルを選択してアップロードしてください。「Add a font variant」でフィールドを追加し、フォントのバリエーションを複数追加することができます。設定を終えたら、「Publish」をクリックします。

続いて、以下の手順でアップロードしたカスタムフォントをWordPressサイトのテキストに適用します。

1. フォントを使用したい固定ページに移動し、「Edit with Bricks」をクリック。
2. 変更したいテキストを選択する。
3. 選択したテキストに関する情報が左側のパネルに表示されたら、「STYLE」をクリック。
4. 「TYPOGRAPHY」ドロップダウンを開き、細かい設定を表示。
5. 「Font family」フィールドでGoogle Fontsや独自のフォントを参照。
6. 一覧からフォントを選択すると、テキストに適用される。

これでフォントが表示され、ブランディングやサイトの外観に合わせて固定ページの見た目を向上することができます。

Bricksでテンプレートを使用する

テンプレートはBricksの基本機能です。ウェブサイトのヘッダーやヒーローセクションのような単一のセクションから、ブログ記事のレイアウト、アーカイブページ、検索結果、エラーページのようなページ全体のコンテンツまで、様々な種類が用意されています。

テンプレートの作成

テンプレートは以下の手順で作成可能です。

1. WordPress管理画面で「Bricks」＞「Templates」に移動。
2. 新規テンプレートを追加、または既存のテンプレートをインポートする。
3. 「Add New」をクリックしてテンプレートの種類を選択し、「Edit with Bricks」をクリック。

   

テンプレートの適用

続いて、テンプレートを固定ページに適用します。

1. テンプレートを使用したい固定ページに移動。
2. ツールバーの「Templates」（フォルダアイコン）をクリックして、テンプレートセクションを開く。

   

3. 作成したテンプレートとコミュニティテンプレートの両方にアクセスできる。
4. 使用したいテンプレートを選択して、プレビューする。

   

5. 「Insert」をクリックして、テンプレートを適用。

   

リモートテンプレート

Bricksのテンプレートには、他のサイトビルダーには見られない「リモートテンプレート機能」というものが存在し、他のサイトで作成・使用されているものを自分のサイトで使用することができます。

他のサイトにBricksテンプレートの使用を許可するには、WordPress管理画面の「Bricks」＞「Settings」＞「Templates」に移動して、「MyTemplates Access」のトグルスイッチをオンにします。

テンプレートへのアクセスにパスワードを設定するには、「Whitelist URLs」と「Password Protection」フィールドを使用します。

他のサイトのテンプレートを使用するには、同じ「Templates」タブを開き、「Remote templates」セクションの「URL」フィールドにテンプレートを取得したいBricksサイトのURLを貼り付けます。

パスワードが設定されている場合は、「Password」フィールドに必ずパスワードを入力してください。「Save Settings」で変更を保存します。

テンプレートを適用するには、ページビルダーに移動して、先ほどと同じように「Templates」（ファイルアイコン）をクリックします。すると、新たに「Remote templates」セクションが出現し、リモートサイトのテンプレートを選択できるようになります。

Bricksで動的データを使用する

Bricksでは、動的データをテンプレートやページに組み込むことができます。動的データには、アイキャッチ画像、投稿タイトル、公開日、著者名、カテゴリ、タグ、サイトタイトル、カスタムフィールドなどが挙げられます。

動的データは、ブログ投稿テンプレートやカスタム投稿タイプ用テンプレート（個別の物件情報など）を作成する際に特に便利です。

追加するには、キャンバス上で{を入力するか、設定パネルでフィールドの横にあるボルトのアイコンをクリックします。

以下、動的データを使って単一の投稿テンプレートを作成する手順を見てみます。

1. 「Bricks」＞「Templates」に移動し、テンプレートを作成する。テンプレートに名前をつけてタイプを「Single」に設定して、「公開」または「下書き」のいずれかをクリック。
2. 「Edit with Bricks」をクリックして、動的データを使用するテンプレートの設定を行う。
3. 必要に応じてスタイル設定を行う（通常は投稿タイトル、アイキャッチ画像、公開日、著者名、投稿内容などの要素をすべて動的に表示するように設定）。
4. 空白のキャンバスに、「Heading」に{post_title}、「Basic text」に{post_content}を貼り付けて、タイトルとコンテンツを追加する。

   

このテンプレートをすべての投稿のデフォルトとして設定するには

1. ツールバーの設定アイコンをクリックし、「Template Settings」＞「Conditions」に移動して、「ADD CONDITION」をクリック。
2. 「Post type」＞「Posts」を指定する。

   

3. WordPressのテンプレートページを保存。「投稿」画面に移動すると、スタイリングを加えることなくテンプレートでフォーマットされた各投稿が表示される。

   

テンプレートの編集を簡単にするために、動的要素の参照として使用するデフォルトの投稿を追加します。

1. ツールバーの設定アイコンをクリックし、「Template Settings」＞「POPULATE CONTENT」に移動する。
2. コンテンツタイプに「Single post/page」を選択して、テンプレートコンテンツに特定の投稿を選択。何も表示されない場合は検索して、「APPLY PREVIEW」をクリックする。

   

3. これで選択したテンプレート投稿を使って、投稿タイトルやコンテンツなどの要素を簡単に表示できるように。

   

さらに、BricksはAdvanced Custom Fields（ACF）プラグインからのコンテンツを取得することもでき、独自のページを作成する機能をさらに強化することができます。

Bricksでフォーム投稿を扱う

Bricks 1.9.2からはフォーム投稿機能が導入され、フォーム投稿をキャプチャできるようになっています。これにより、データベースにbricks_form_submissionsという名前のカスタムテーブルを作成することができます（WordPressデータベースのテーブル接頭辞を追加）。

「Bricks」＞「Settings」＞「General」＞「Miscellaneous」 で、「Save form submissions in database（フォーム送信をデータベースに保存）」を有効にすることができます。

「Save Settings」をクリックして変更を保存すると、様々なフォーム送信テーブルを含む「Form Submissions」タブ（「Bricks」＞「Form Submissions」）が出現します。

フォーム送信の収集

フォーム送信を収集するには、「Form」要素を使用してフォームを作成し、必要なフィールドを設定するだけでOKです。別のプラグインをインストールする必要ありません。

設定パネルで「Actions」をクリックし、「Save Submission」を選択します。

次に、「Save Submission」をクリックして、フォームにわかりやすい名前（フォームからデータにアクセスする際に使用）をつけます。

これでページを保存して開くことができます。フォームを保存し、「Bricks」＞「Form Submission」に戻ってフォームデータを確認することができます。

また、フォーム送信をCSVファイルでダウンロードすることも可能です。先ほどの「Bricks」＞「Settings」＞「General」＞「Miscellaneous」 セクションでは、データベーステーブルをリセットまたは削除することもできます。

BricksでWooCommerceを使用する

WooCommerceは、WordPressサイトにEC機能を導入することができる無料の人気プラグインです。オンラインストアの開設と管理に役立つオープンソースソリューションとして、世界中で使用されています。

BricksはWooCommerceとも互換性があり、メインのショップページから個々の商品ページ、商品アーカイブ、買い物カゴ、決済、アカウントページに至るまで、ストア全体を構築することができます。

WooCommerceに特化した要素とテンプレートもあり、ストアのレイアウトを構築するのに有用です。

BricksでWooCommerceストアを作成するには、まずWooCommerceプラグインをインストールして有効化します。これでBricksを使用して視覚的にWooCommerceテンプレートをデザインすることができます。

ベーシックなショップページを作成する手順を見てみます。

1. 「固定ページ」に移動して「ショップ」ページを開く。
2. 「Edit with Bricks」をクリック。「Elements」パネルを使用して商品、タイトル、説明、価格などを設定し、動的なテンプレートを作成。

   

様々な要素を使用して、思い通りにページをデザインし、スタイルを設定することができます。

単一の投稿テンプレートのように、単一の商品テンプレートを作成して、すべての商品ページに適用されるように設定することが可能です。

Bricksのクエリループ

クエリループビルダーを使用すると、クエリパラメータに従ってデータベースにクエリを実行し、ループ内で表示したいクエリ結果をレンダリングすることができます。コンテナ、アコーディオン、スライダーなどのレイアウト要素で使用可能です。

投稿タイプ、タクソノミー、ターム、ユーザーをクエリすることができます（ブログの著者、コミュニティメンバー、チームメンバーの一覧など）。

クエリループを使用するには、「Container」要素をワークスペースにドラッグします。「Use Query Loop」のトグルスイッチをオンにして、コンテナをループ項目に設定します。

「Use Query Loop」を有効にすると、「Query」設定にコントロール（無限のアイコン）が表示されます。アイコンをクリックして開き、データベースからコンテンツを取得するためのクエリパラメータを設定します。

コンテナは繰り返し要素として機能し、コンテナ内のすべての要素がクエリ結果と同じ回数だけ繰り返されます。詳細はこちらをご覧ください。

Bricksの価格

先にも触れましたが、Bricksには無料版がありません。アカウントを作成してテーマを試してみることはできますが、購入しない限りは自分のサイトで使用することはできません。

Bricksには複数の基本的なプランと無制限のプランがあります。

Bricksには必要なものがほぼすべて標準搭載されているという利便性があり、シームレスで効率的なワークフローを確立し、堅牢で汎用性の高いウェブデザインソリューションを探している方には価値ある投資になるはずです。

Bricksを利用する価値はあるのか

Elementorとは異なり、無料版がないことは欠点と言えますが、そのシンプルさと強力な機能の融合により業界で注目を集めています。

1,144名のWordPress開発者を対象にThe Admin Barが実施した2024年の調査によると、Bricksは前年より数字を伸ばした唯一のページビルダーであり、全体の32%を占めています。

この調査から、Bricksが比較的新しいソリューションであるにもかかわらず、多くのWordPress開発者がBricksを評価していることがうかがえます。

Bricksはテーマとして動作するため、他のテーマとページビルダーの機能を組み合わせて使用することはできません。また、速度の面では、高パフォーマンスなサイトを設計することを目的としたページビルダーとして、Elementor Proよりも高速であると言われています。

ただし、高速なページビルダーを使用すれば、必ずしもサイトパフォーマンスが高くなるわけではありません。サイトの構築方法や種類を問わず、ホスティング選びがパフォーマンスの鍵を握ります。

Kinstaでは、数十のプレミアム機能を備えたWordPress専用マネージドホスティングを提供しています。

Googleのプレミアムティアネットワーク上のGoogle Cloud Platformだけを利用し、完全にコンテナ化されたアーキテクチャでサイトを稼働。これにより、最速のデータサーバー、驚異的なパフォーマンス、サーバーレベルのキャッシュ、専用リソース、堅牢なセキュリティなど、一流の機能を実現します。

WordPress専用マネージドホスティングの詳細については、お客様の声をご覧いただくか、営業部門までお気軽にお問い合わせください。

まとめ

Bricksの概要と仕組み、機能、そして使用方法についてご紹介し、包括的なテーマベースのアプローチ、カスタマイズ機能、パフォーマンス高さについても触れました。

Bricksには、Elementorのように無料版はありませんが、統合されたデザインと頻繁に行われている更新からも、サイトパフォーマンスを最適化するための画期的なソリューションになりそうです。

Bricksの使用方法についてご質問がありましたら、以下のコメント欄でお知らせください。