Bootstrap4で作る最強WordPressオリジナルテーマ開発 その1 Bootstrapを使うメリット

というわけで、久しぶりにWordPressオリジナルテーマを開発します。
前回の開発より3年ほど経過して、いろんな問題点が山積したことと、新たなトレンドを取り入れたいなど要望が増えたことが原因です。シリーズでお送りします。

まず、問題点についてさらっと書きます。
自分でプラグインを開発してきて、また第三者のプラグインを使ってきて感じたことは、レイアウトは難しいということでした。
レイアウトが崩れちゃうことがあるんですね。
今やいろんな画面サイズ、いろんな端末、いろんなブラウザといったマルチプラットフォームな閲覧環境は当たり前です。
なので、良かれたと思ってやったことや、拡張機能独自の依存性がテーマとの相性として表れてきます。

作者それぞれの自由意志や思惑があるため、この辺は当たり外れが大きく、そのほとんどが無料で利用できることを考えると、文句を言う筋合いがあるわけではなく、しょうがないのかなと。
とはいえ、なるべくストレスなく使いたいというのも事実なので、自分で作ってしまおうというわけです。

で、今回オリジナルテーマを開発するに当たり、ネックとなるレスポンシブをどうするか? という問題はモダンCSSの走りである「4」で解消します。レスポンシブというのは、画面サイズに依存せずに1デザインで表示できることを意味します。
」はTwitter社が社内で開発したCSSフレームワークでしたが、その評判が良いことが広まり、社外でも使われるようになりました。去年の秋にバージョン4がリリースされました。

▼Bootstrap4 日本語リファレンス

Bootstrap 4 日本語リファレンス - Bootstrap v4 公式ドキュメントの日本語訳です。レスポンシブでモバイルファーストなWebプロジェクトを構築するための、世界

グリッドという概念でレイアウトを管理し、jquery(JavaScript)によって動作します。予め決められたCSSの名称ルールに沿ってコーディングするだけで色んなことができてしまう、というのがウリです。
つまり、問題となりやすいCSSのコーディングルールの衝突が最大限起きにくいんですね。

「Bootstrap4」で問題が完全に解決するわけではないのですが、みんなが使っているフレームワークで、しかもこの先バージョンアップしていくだろう、という将来性は信頼の証です。クライアントに納品する際も、「いやいやBootstrap4を使ってますので!」と言えばなんとなく「うむむ、そうかね…」と分かってくれます?

で、最近のウェブ制作の事情は複雑でして、単純にデザイナーがデザインだけをしていればいい、という時代はとうの昔に終わりました。マルチプラットフォーム環境が増加してからは、小さな画面にコンパクトに機能をまとめる必要があるため、プログラミング要素が多く出てきます。

ワードプレスなどの無料CMSの普及により、ウェブデザインの単価は下がり傾向にあるため、そこにプログラミング要素が出てくると単純に報酬は少ないのにやることと苦労は多くなります。
なので、なるべく工数は少なく、メンテナンスを容易にする必要があり、車輪の再開発をしないという選択は賢明です。

その一つに「Bootstrap4」という選択肢があります。他にも類似したフレームワークはあるのですが、とにかくサポートが継続していく、ということがなによりも大事です。だからフレームワークに関しては、ユーザー数と人気で判断し、寄らば大樹の陰は正解なのです。

さて、それで「Bootstrap4」でなにができるか? なんですが、最大の特徴はグリッドシステムで、端末の画面サイズに依存しないレイアウトが実現しやすくなります。しやすくなる、というのはアバウトに大体うまくいく、という意味で、完全ではありません。
しかし、それでもメディアクエリーやカラムのブレークポイントをいちいち意識しなくてもいい、というのは心理的にも楽です。

grid-bootstrap

レイアウト崩れしない(しにくい)というのは本当にいいことです。
未知のプラグインをインストールしても、取りあえずはなんとかなるからです。
この辺、自分でCSSを書いているとやはり限界があります。「Bootstrap4」では専用のCSSがあるのですが、その適用判断をスクリプトによって計算して判断しています。ここが大きいですね。

ルールに沿ってコーディングしていればスクリプトで計算して、的確に条件を判断できる。これは普通にCSSを書いているだけでは実現できないことです。自分でレイアウト用のスクリプトを開発することを考えると、いかに「Bootstrap4」が便利か実感できます。

Bootstrapにはグリッド以外にフォームやテーブル、リスト、モーダルウインドウといった便利な要素が揃っていて、利用することで一通りのウェブでサインをBootstrapで素早く整えることができます。
デメリットは、そのまま使うとやはりBootstrap臭がするということで、若干のカスタマイズが必要かもしれません。

続きます。

関連記事