戻る
plugin-icon

Bootstrap Blocks

投稿者: Liip AG·
blocks
bootstrap
gutenberg
WordPress 用 Bootstrap Gutenberg ブロック。このプラグインは、Bootstrap のコンポーネントやレイアウトオプションを Gutenberg ブロックとして追加します。
評価機能
5
最終更新日時
November 19, 2023
バージョン
5.2.0
有効インストール数
10K
Bootstrap Blocks

WordPress 用 Bootstrap Gutenberg ブロック。このプラグインは、Bootstrap のコンポーネントやレイアウトオプションを Gutenberg ブロックとして追加します。

特徴

  • Bootstrap v4 と v5 をサポート
  • CSS Grid をサポート (実験的)
  • フィルターでフルカスタマイズが可能
  • 設定は設定ページ、またはプログラム中の定数で
  • ブロックのテンプレートは、テーマで上書きが可能

このプラグインの完全なドキュメント (英語) は、GitHub: https://github.com/liip/bootstrap-blocks-wordpress-plugin#readme でご覧いただけます。

利用可能なブロック

Bootstrap Container (コンテナ)

設定:

  • フルード(可変): 有効にすると、コンテナは使用可能な幅全体を使用し、ビューポートの幅いっぱいに拡がります。
  • フルード (可変) ブレークポイント: responsive containers を有効にします。この機能は、Bootstrap 4.4 以降でのみ動作します。コンテナは、指定したブレークポイントに達するまで、100% 幅となります。それ以上は、より広い最大幅のそれぞれのブレークポイントに設定された幅が適用されます。
  • 下マージン: Bootstrap Container ブロックの下マージンを設定

Bootstrap Row (行)

設定:

  • テンプレート: 內部の column ブロックのテンプレートを選択
  • 余白なし: カラム間の余白を無くす
  • 水平方向の配置: 内側の column ブロックの水平方向の配置
  • 垂直方向の配置: 内側の column ブロックの垂直方向の配置
  • エディターでカラムを縦並び: エディターでカラムを読みやすくするため、カラムを縦並びで表示します。
  • 水平方向の間隔: 水平方向の間隔のサイズ
  • 垂直方向の間隔: 垂直方向の間隔のサイズ
  • CSS Grid ガター: CSS Grid を使用する場合のガター (グリッド間の空き) のサイズ。

Bootstrap Column (列)

設定:

  • 全てのブレークポイント (xxl, xl, lg, md, sm, xs) でのサイズ: 指定されたブレークポイントで、カラムがどれだけスペースを使用するか。
  • 全てのブレークポイント (xxl, xl, lg, md, sm, xs) で等幅: 可能な場合、カラムは他のカラムと同じ幅に拡がります。
  • 背景色: カラムに背景色を設定
  • コンテンツの垂直方向の配置：コンテンツを列の垂直方向に配置します。このオプションは、背景色が設定されている場合にのみ必要です。それ以外の場合は、外側の 行 ブロックの 列 オプションを使用してください。
  • Padding: カラム内側の余白 (Padding) の指定

Bootstrap Button (ボタン)

設定:

  • スタイル: ボタンのスタイルを選択
  • 新しいタブで開く: リンクを新しいタブで開く場合に選択
  • Rel: リンクの rel 属性をセットしてください。
  • 整列: ボタンの水平揃え

対応している Bootstrap のバージョン

このプラグインは、Bootstrap v4 と v5 をサポートしています。

Bootstrap のバージョンは、このプラグインの設定 (設定 > Bootstrap Blocks) で選択できます。 wp-config.php の WP_BOOTSTRAP_BLOCKS_BOOTSTRAP_VERSION 定数で指定することも可能です。

  • Bootstrap 4: define( 'WP_BOOTSTRAP_BLOCKS_BOOTSTRAP_VERSION', '4' );
  • Bootstrap 5 (default): define( 'WP_BOOTSTRAP_BLOCKS_BOOTSTRAP_VERSION', '5' );

現在の適用可能な値は '4' か '5' です。デフォルトでは、Bootstrap のバージョン5 が選択されています。

CSS Grid

CSS Grid (Bootstrap >= 5.1.0 でサポート) は、プラグイン設定 (設定 > Bootstrap Blocks) 、または、wp-config.php ファイルで WP_BOOTSTRAP_BLOCKS_ENABLE_CSS_GRID 定数を定義すると有効にすることができます。

例: define( 'WP_BOOTSTRAP_BLOCKS_ENABLE_CSS_GRID', true );

CSS Grid を有効にすると、row と column のブロックは、レンダリング処理にカスタムテンプレートを使用します。

  • 行: row-css.grid.php
  • 列: column-css-grid.php

Bootstarp のライブラリでも実験的な機能とされているため、サポートもまだ実験的なものとなります。使い方の詳細は、Bootstrap 公式ドキュメントをお読みください。

Bootstrap ライブラリ

このプラグインは Bootstrap ライブラリを含んでいませんので注意してください。ご自身でセットする必要があります。Bootstrap をロードする前に、使用者のニーズに合わせて設定 (CSS変数、読み込むパーシャル SCSS ファイルや JavaScript モジュール) を変更できるよう、ライブラリを含めないことにしました。

テーマの function.php で Bootstrap (CDN) を読み込むコードサンプルは、ドキュメント をご覧ください。

テンプレート

全てのブロックが、ダイナミックブロックです。これにより、テーマ内のブロックのテンプレートを上書きできます。

ブロックテンプレートのカスタマイズも可能です。テーマディレクトリに wp-bootstrap-blocks/ フォルダを作成し、その中にオリジナルテンプレート wp-bootstrap-blocks/src/templates/<blockname>.php を複製し編集してください。

必要条件

  • WordPress >= 5.0
  • PHP >= 5.6

より詳細な情報

関連するプラグイン

すべて表示
無料Creator プランを利用中
始めてみよう
インストールすることで、WordPress.com の利用規約とサードパーティ製プラグインの規約に同意したとみなされます。
有効インストール数
10K
最大テスト回数
6.4.5
このプラグインをダウンロードして、インストール型 WordPress のインストールに使用できます。
ダウンロード