Boostrap4を使ってレスポンシブなWordPressテーマを作成

2016/10/23 2016/11/21

WordPressを使ったサイト作成は、以前から少しずつ挑戦していて、無料テーマ・有料テーマ・自作テーマと一通り試してきました。

WordPressはテーマの数がとても豊富で、有料テーマはもちろん、無料テーマでもデザイン・機能ともに申し分ないものがたくさんあります。

それでも、やはり自分の思う通りにカスタマイズしようと思うと、CSSやPHPの編集は必須です。

コードやクラス付けには、人それぞれ癖があり、それらを一つ一つ理解しようとすると、結局自分で作ることと同じくらいの労力が必要です。

そのため、最近では拙いながらも自作テーマを作ってしまうことが多くなってきました。

今回は新たにこのNOTICEDを立ち上げるために、CSSフレームワークBootstrap4を使ってWordpressテーマを作ったので、その概要を書き留めておきたいと思います。

BootstrapでWordpressテーマを作る利点

Bootstrapはあまりにも有名なCSSフレームワークで、サイト制作に用いると簡単にレイアウトを整えて、見栄えの良いサイトを作ることができます。

WordPressテーマにも同じことが言えて、少ないCSSで思い通りのテーマを作ることができます。

Bootstrapの中で最も重宝する機能は、グリッドシステムです。

ボックスに指定されたクラスを付けるだけで、簡単にカラム分けが可能になっていて、スマホやタブレットなどデバイス別の見た目も同時に指定することができます。

PCとタブレットで見た時は2カラム、スマホで見た時は1カラムという振り分けはもちろん、ある部分はスマホで見た場合も3カラム。

というように、自由自在にレイアウトできるため、細かなCSSの記述が必要ありません。

個人的には、このグリッドシステムだけでもBootstrapを利用する価値があると思います。

サイトのデザインが全く決まっていなくて、サイトを作り始めても、フレームワークを決める様な感覚でサクサクとデザインが決まっていきます。

フォントや色のCSSだけ書いておけば、実際の仕上がりイメージが想像しやすく、テストサイトの制作などにもおすすめです。

サイトのデザインが決まっても、投稿する記事によっては、投稿の中でカラムを分けたいという場面にも遭遇します。

そんな時でもBootstrapを使用していれば、その都度新しいCSSを記述する必要がなく、Wordpress投稿画面のテキストエリアにそのままHTMLを書き込んでしまえば、簡単にレイアウトを変更することができます。

また、function.phpのショートコードや、プラグインを利用して、グリッドシステムのHTMLをすぐに呼び出せる様にしておけば、ビジュアルエディタのままカラム分けをすることも可能です。

左側にテーブルを作って、右側にテキストや画像。といったレイアウトもすぐに作成することができます。

特にサイトやブログのテーマが広く、記事によって必要なデザインが異なる場合はとても重宝する機能です。

BootstrapのグリッドシステムのHTMLは普段から使っていれば、すぐに慣れてくるので、手で入力することもそれほど面倒ではありません。

WP Emmetなどのプラグインを導入していれば、さらに効率よく記事を作っていくことができます。

BootstrapやWordpressをテーマに書かれているTipsはとても多く、検索すると大抵の疑問を解決することができます。

BootstrapはBootstrap公式サイトを見れば、とても分かりやすく使い方が解説されています。

といっても解説は英語なのですが、サンプルとなるコードがたくさん置いてあるので、Bootstrapを読み込んで、サンプルコードを貼り付け、ブラウザで確認すれば、すぐに挙動を確認することができます。

また、Bootstrapを日本語で翻訳しているサイトもあるため、検索してほぼ出てこないということは無いでしょう。

Bootstrapを使って制作されたサイトもたくさんあるので、デザインの参考にも困ることはありません。

もともとHTMLもCSSもそんなに詳しくはなかったので、自分で0から始めるとなると、調べることに膨大な時間がかかり、それでも思った通りのレイアウトにならないこともしばしば。

しかし、Bootstrapを使うと、デザインの大枠は簡単にできますし、細かなことに悩む時間を大幅に減らすことができます。

また、Bootstrapのクラス指定やCSSから学ぶことも多く、HTMLやCSSの知識を身につけるきっかけにもなります。

サイト制作のハードルが大きく下がるBootstrap。

今回はこのサイトのWordpressテーマに作成に使用して見ましたが、作成もカスタマイズも楽しみながら取り組んでいくことができています。

Wordpress