Bricks Builderの「Codeエレメント」はコードを文字化してサイトに表示させるエレメントだと思って、これまでSNNのCodeエレメントを使っていました。
実はBricksにも同じ、いやそれ以上の便利な機能がありますので、今回ご紹介していきたいと思います。

SNNのCodeについての解説はこちらからご確認いただけます。

BricksのCodeエレメント

BricksBuilderのCodeエレメントは、通常のテキストエレメントでは実現しづらい HTML・CSS・JavaScript・PHP を直接記述できる機能があるため、カスタマイズの幅が大きく広がります。

Codeエレメントには以下の設定項目があります。ひとつひとつ詳しく解説していきたいと思います。

• Execute code
• Parse dynamic data
• Suppress PHP errors
• Render without wrapper

BricksのCodeエレメントの基本機能

Codeエレメントは、ページ内にコードを直接埋め込める要素です。
例えば以下のようにHTML・CSS・JavaScriptを1つにまとめられます。

<div class="my-box">
  <h2>タイトル</h2>
</div>

<style>
.my-box{
  background:#eee;
  padding:20px;
}
</style>

<script>
console.log("Hello");
</script>

この1つのCodeエレメント内で、

• HTML
• CSS
• JavaScript
• PHP

を同時に扱えます。そのため次のような用途でよく利用されます。

使用例

• カウントダウン表示
• アニメーション
• Swiperスライダー
• GSAP
• ACFデータ表示
• 独自レイアウト作成
• PHPを使った動的処理

Execute code（コード実行）とは？

この設定はPHPコードを実行するかどうかを決めます。

OFFの場合：PHPコードはそのまま文字として扱われます。

<?php
echo date('Y年m月d日');
?>

表示結果：

<?php
echo date('Y年m月d日');
?>

ONの場合：PHPが実行されます。

<?php
echo date('Y年m月d日');
?>

表示結果：

2026年05月26日

Execute codeの実用例

サイト名を表示する

<?php
echo get_bloginfo('name');
?>

表示例：

WordPressサイト名

ログインユーザー名を表示

<?php
$current_user = wp_get_current_user();
echo $current_user->display_name;
?>

ACFの値を取得する

<?php
echo get_field('company_name');
?>

Execute code使用時の注意点

PHPは非常に強力なため、ファイル操作なども可能です。

例：

unlink("sample.txt");

誤ったコードを書くとサイトに影響することがあります。
PHPを利用する場合は十分注意しましょう。

Parse dynamic data（動的データ解析）とは？

Bricks独自の {} 形式の動的データを有効化する設定です。
ONにするとBricksの動的データを自動変換します。

例：

• {post_title} → 投稿タイトル
• {post_date} → 投稿日
• {post_id} → 投稿ID
• {featured_image} → アイキャッチ画像

OFFにするとどうなる？

そのまま表示されます。つまり変換されません。

Parse dynamic dataを使う場面

特に以下で利用頻度が高いです。

• ブログ記事一覧
• カスタム投稿
• ACF
• ユーザー情報表示
• URL表示

Suppress PHP errors（PHPエラー抑制）とは？

PHPエラーを画面に表示しない設定です。
例えば次のコード。

<?php
echo $abc;
?>

通常なら次のようなエラーが表示されます。

Warning: Undefined variable $abc

ONの場合

エラーを非表示にします。
表示結果：

（何も表示されない）

メリット

公開ページでエラー表示を防げます。

例：

エラー表示あり

Warning: Undefined variable

エラー表示なし

正常なページのみ表示

デメリット

原因調査が難しくなります。
一般的には次の使い方が多いです。

開発中：

OFF

公開時：

ON

brx_code_errorsとは？

Bricksには隠しているPHPエラーを一時表示する機能があります。

通常URL：

https://example.com/sample/

変更：

https://example.com/sample/?brx_code_errors=1

するとSuppress PHP errorsをONにしていてもエラーが表示されます。
開発時には非常に便利です。

Render without wrapper（ラッパーなし）とは？

Bricksは通常、自動的に外側にdivを追加します。

通常：

<div class="brxe-code">
    <h2>Hello</h2>
</div>

Render without wrapperをONにすると：

<h2>Hello</h2>

余計なdivがなくなります。

なぜ必要なのか？

JavaScriptライブラリはHTML構造が厳密なことがあります。
例えばSwiperの場合：

<div class="swiper">
   <div class="swiper-wrapper">

      <div class="swiper-slide">
      Slide1
      </div>

      <div class="swiper-slide">
      Slide2
      </div>

   </div>
</div>

ここにBricksが自動追加したdivが入ると、

<div class="brxe-code">

構造が崩れる場合があります。

よくONにするケース

Swiper

<div class="swiper">

GSAP

カウントダウン

外部ライブラリ

厳密なHTML構造が必要なもの

<ul>
   <li>項目1</li>
   <li>項目2</li>
</ul>

実務でよく使う設定例

PHP + 動的データ

設定：

• Execute code → ON
• Parse dynamic data → ON
• Suppress PHP errors → ON（公開時）

コード：

<?php
echo "<h2>CODEエレメントの便利機能・完全ガイド</h2>";
?>

HTML/CSS/JSのみ

設定：

• Execute code → OFF
• Parse dynamic data → OFF
• Render without wrapper → 必要時のみON

Swiper・GSAP・アニメーション系

設定：

• Execute code → OFF
• Parse dynamic data → OFF
• Render without wrapper → ON

まとめ

BricksのCodeエレメントは非常に便利ですが、設定の意味を理解すると使いやすさが大きく変わります。

Execute code　→ PHPを実行する
Parse dynamic data　→ CODEエレメントの便利機能・完全ガイド などを変換する
Suppress PHP errors　→ エラー表示を隠す
Render without wrapper　→ 余計なdivを出力しない

特に「Render without wrapper」は、SwiperやJavaScriptライブラリを使う際によく利用する設定なので覚えておくと役立ちます。
Codeエレメントを使いこなせるようになると、Bricksでできる表現の幅がかなり広がります。