結論
WordPress.org からインストールして有効化すれば、すぐにブロックエディタで使い始められます。ブレークポイントのカスタマイズは任意ですが、サイトのデザインに合わせて調整すると、より精度の高いレスポンシブ表示が可能になります。
インストール方法
WordPress管理画面からインストールする（推奨）
- WordPress管理画面で プラグイン > 新規追加 を開く
- 検索欄に「ZenBlocks」と入力する
- ZenBlocks が表示されたら 今すぐインストール をクリック
- インストール完了後、有効化 をクリック
ポイント: WordPress.org の公式ディレクトリから配布しているため、セキュリティ審査を通過した安全なプラグインです。
ZIPファイルからインストールする
- WordPress.org のZenBlocksページ からZIPファイルをダウンロード
- WordPress管理画面で プラグイン > 新規追加 > プラグインのアップロード を開く
- ダウンロードしたZIPファイルを選択してアップロード
- プラグインを有効化 をクリック
有効化の確認
有効化が完了すると、ブロックエディタの挿入パネルに ZenBlocks Elements カテゴリが表示されます。
- 任意の投稿または固定ページの編集画面を開く
- 左上の ＋ ボタンをクリックしてブロック挿入パネルを開く
- 「ZenBlocks」で検索するか、カテゴリ一覧から ZenBlocks Elements を探す
- Button Basic ブロックが表示されていればインストール成功
設定画面の概要
設定 > ZenBlocks から、プラグインの全般設定にアクセスできます。
| 項目 | 説明 |
|---|---|
| ブレークポイント設定 | デバイスごとの画面幅しきい値を変更 |
| CSSキャッシュクリア | フロントエンドのスタイルキャッシュを手動クリア |
| ライセンス管理 | Pro版のライセンスキー入力・状態確認 |
ブレークポイントのカスタマイズ
ZenBlocks では、レスポンシブデザインのための4つのブレークポイントをカスタマイズできます。
デフォルト値
| デバイス | 表示名 | 画面幅 |
|---|---|---|
| PC | デスクトップ | 1141px 以上 |
| MD | 中画面 | 841px ～ 1140px |
| TB | タブレット | 541px ～ 840px |
| SP | スマートフォン | 540px 以下 |
変更方法
- 設定 > ZenBlocks を開く
- ブレークポイント設定セクションで値を変更する
- 保存 をクリック
注釈: ブレークポイントを変更すると、すべてのZenBlocksブロックのレスポンシブCSSが再生成されます。既存ページでスタイルが崩れた場合は、CSSキャッシュをクリアしてください。
次のステップ
設定が完了したら、はじめてのボタン作成 で実際にブロックを使ってみましょう。