【WordPress】シンプルなWordPressショートコードプラグインFlexbox Grid(WP Plugin)

Flexbox Grid
Flexbox GridはFlexboxを使ったシンプルなグリッドシステムをWordPressでショートコードを使い実装できるプラグイン。レスポンシブ対応で使いやすい便利なプラグインだと思います。

Flexbox Gridプラグイン導入

flexbox_grid_2
GitHubのFlexbox Gridページでプラグインファイルをダウンロードします。

flexbox_grid_3
WordPressのプラグイン >> 新規追加 >> プラグインのアップロードと進みます。

flexbox_grid_4
ドラッグして選択するかファイルを選択で先程ダウンロードしたZipをインストールします。

flexbox_grid_5
今すぐインストールをクリックし、プラグインを有効化にします。

使い方

基本的な使い方はflexboxgrid.comと同じです。
必要なショートコードは[flex_row][flex_col]。class属性なしだと列の幅が同じままになります。
[flex_row]
[flex_col]First column[/flex_col]
[flex_col]Second column[/flex_col]
[/flex_row]

画面サイズに列幅を制御する場合はclass属性を追加します。

[flex_row]
[flex_col class=”col-xs-12 col-md-4″]First column[/flex_col]
[flex_col class=”col-xs-12 col-md-8″]Second column[/flex_col]
[/flex_row]

グリッド列を1から12までの数で、クラス名によって制御されます。

  1. col-xs-??
  2. col-sm-?? (min-width: 48em)
  3. col-md-?? (min-width: 62em)
  4. col-lg-?? (min-width: 75em)
class="col-md-4"で3列にしてみました。

flexbox_grid_1

 
Flexbox Grid

【WordPress】シンプルなWordPressショートコードプラグインFlexbox Grid(WP Plugin)

  • LATEST
  • RELATED
  • POPULAR