WordPressテーマ『Luxeritas』でBootstrap4を利用する方法
はじめに
『Luxeritas』は、SEO 最適化済み、レスポンシブ、高カスタマイズ性を持つ無料の WordPress テーマです。
Bootstrapをベースに利用しているため、意識することなくレスポンシブデザインが適用されます。ただし、多くの機能を削っているため、デフォルトではBootstrapとしての描き方では動きません。
Bootstrapを使い慣れていて、自分でデザインをカスタムしたいのなら、最初に有効にしておこう！
Luxeritasでの設定
専用の設定画面から簡単に切り替え可能です。
管理者画面のメニューから「Luxeritas」⇒「カスタマイズ」⇒「CSS」
モード選択の項目で下記よりどちらかを選択
- Bootstrap 3 Mode
- Bootstrap 4 Mode
これだけで基本的な機能は利用が可能となりますが、一部の機能は別途CSSとJSを導入する必要があります。
結果
Bootstrap 3 に比べて、Bootstrap 4 はファイルサイズが1.5倍ほどあります。
動作自体も重い可能性もありますが、PageSpeed Insightsの結果では、他にプラグインを入れてある状態でも普通に90後半のスコアが出るため、そこまで気にすることはないと思います。
Boostrapのスタイルやスクリプトはそのまま使用しているわけではないので、デザインに変化は見られません。
とりあえず、いくつかのコンポーネントは利用できるようになりました。
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
This is a primary alert—check it out!
This is a secondary alert—check it out!
This is a success alert—check it out!
This is a danger alert—check it out!
This is a warning alert—check it out!
This is a info alert—check it out!
This is a light alert—check it out!
This is a dark alert—check it out!