_sベースのBootstrap 4対応WordPressスターターテーマを公開しました

カテゴリー:ブログ

WordPressのテーマを制作する際、_s (underscores) をベースにBootstrapを組み込むことが多いのですが、毎回同じような作業をするのは手間がかかるのでスターターテーマとして管理することにしました。

_sと同様に、そのまま使ったり子テーマを作るのではなく、直接書き換えてテーマを作ることを前提に制作しています。

特徴

  • 書き換えを前提としたシンプルな設計
  • CSSやJavaScriptはwebpackでバンドル

レイアウト

企業サイトなどのベースにすることを想定しており、

  • 投稿ページは最新記事などを表示するためサイドバーが必要
  • その他のページには不要

という考えに基づいて、投稿関連(archive.phpsingle.phphome.php)のみサイドバーを表示する形にしています。404.phpsearch.phpはcontainerで囲っています。

固定ページ関連にはcontainerブロックがありません。固定ページは自由なレイアウトを行いたい場合が多いので、テーマ側にcontainerがあると邪魔になるからです。固定ページのエディタ内でcontainerやその他のレイアウト用クラスを使ってください。

ナビゲーションバー

ナビゲーションバーはBootstrapのNavbarの形で出力されるようにしています。メニューの副項目を作ればその親はドロップダウンメニューになります。副項目のナビゲーションラベルを「divider」にすると仕切り線として表示します。

このあたりの処理はinc/s_bootstrap_navwalker.phpで行なっています。

ディレクトリ構成

ディレクトリ構成はほぼ_sのままなので、一般的なテーマの構成と同じです。テンプレート階層についてはWordPressの公式ドキュメントを参考にしてください。

CSS (SCSS)、JavaScriptはsrcディレクトリ内にあります。出力先は、CSSはstyle.css、JavaScriptはinc/assets/js/main.jsになっています。

webpack

npm scriptにwatchとbuildを定義しています。

npm run watch

で、.scssと.jsを監視します。minimizeは行いません。

npm run build

を実行すると、minimize済みのstyle.cssとmain.jsを出力します。

ダウンロード

Githubのリポジトリからダウンロードしてください。