タグ別アーカイブ: Bootstrap

thum

BootstrapベースのシンプルなWordPressのテーマを作成

サイト設計段階で使用するモックアップの制作にBootstrapを利用する事は多々あるかと思います。

Jadeなどのテンプレートエンジン+スニペットを駆使すれば全て静的なHTMLでも割と簡単に作成できますが、
ページの概念や検索機能、記事管理、メニュー管理の面で、いきなりWordpressに乗っけたものがあっても良いかと思い、シンプルなテーマファイルを作成してみました。

https://github.com/kotaro-co/bootstrap-wp-template

レイアウトとして4パターンを制作しました。以下は確認用の静的なページ

img-single1.シングルカラムのページ

img-multi2.マルチカラムのページ

img-masonry3.カード型レイアウトのページ

img-allparts4.Bootstrapの全パーツをまとめたページ

フルスクリーンのページやもっとグリッド感を強めたレイアウトまであっても良かったかもしれませんが、とりあえずレイアウトは1.〜3.である程度賄えると思います。
また、4.のパーツ一覧ページはオリジナルでCSSを作った際にパーツを1ページでまとめて確認するためのものです。※こちらのサイトから拝借しました。

WordPressのテーマとして設定した場合は、[Page-Single],[Page-Multi],[Page-Masonry],[Page-AllParts]の固定ページ用テンプレートが同じものになります。
この固定ページ用テンプレートは特に記事の連動はかけていないので、必要に応じて設定するという想定です。

img-page-wp

WordPressでBootstrapのパーツを組み立てようと思った時に、ショートコード系のプラグインを入れて記事本文エリアで作成する事もできなくはなかったのですが、 結局タグの入れ子が多くなってHTMLを組むのと大差が無い事と、細かいクラス指定ができないなどプラグイン上の制限があるため、あくまでパーツの組み立ては使い慣れたコードエディタで直打ちするのがベストだと判断しました。
ですのでWordpressもローカルにインストールしてローカルでテンプレートを組んで行くイメージですね。

【随時更新】Bootstrapに役立つ便利なリソースまとめ