WordPressのスターターテーマのBonesを使用していましたが、同じくスターターテーマのUnderStrapに変更してみました。色々と設定済みなので使いやすいテーマです。
UnderStrap について
WordPressを開発しているAUTOMATTIC社のUnderscores（_s）というWordPressのスターターテーマと Bootstrap（フレームワーク）を組みわせたテーマです。
WordPress + Bootstrap 4 Theme Framework - UnderStrap
UnderStrap combines the Underscores starter theme (by Automattic) and the mobil-first, responsive grid framework
UnderStrapは、子テーマでの開発はもちろん、Gulp、SASS、Browser Syncで開発可能です。
WordPress をローカル環境（Mac）で
今回UnderStrapを導入にあたって、WordPressのローカル環境も変更しました。
MAMP を使用していましたが、Local by Flywheel に変更しました。
Local by Flywheelは、キーボードで入力するのはプロジェクトの名称ぐらいで、あとはマウス操作だけでローカル環境を構築できます。Windows環境でもOKです。
WordPressの投稿記事や画像などのデータは、本番からクローンしないで、日本語のテストデータをJapanese test data for WordPress からxmlをダウンロードしてインポートしました。
Local by Flywheel のローカルサイトが重くなる
Local by Flywheel でWordPressを動かして gulp を走らせて作業をしていると、ブラウザでローカルサイトの読み込みが非常に遅くなる現象が発生しました。
どうやら Browsersync を使用していると、発生する現象のようです。デフォルトで設定されている Site Domain の .local を .dev に変更することで解決しました。
Mac環境で、ローカルサイトの表示が重い方はお試しください。
参考：Browsersync + gulp problem with .local - Support - Local by Flywheel
以上で、ローカル環境でWordPressのテーマを変更する準備が整いました。
UnderStrap のインストール
UnderStrapのインストールデータの取得には、以下の方法があります。
- WordPressのテーマ管理画面の「外観」から検索して新規追加
- UnderStrapの 公式ウェブサイト からダウンロード
- GitHub - understrap からクローンもしくはzipダウンロード
- npm install understrap でインストール
私の場合、GitHubからクローンしています。
WordPressの管理画面からインストールする以外の場合は、ダウンロードしたテーマファイルを wp-content/themes/ に配置して、管理画面から有効にすれば完了です。
UnderStrap の子テーマを追加
子テーマは使わないでもOKですが、メインのテーマ（親テーマ）のソースを編集する必要は無いので、テーマのバージョンアップの際には便利ですね。UnderStrapの子テーマのインストール方法は、以下になります。
- UnderStrapの 公式ウェブサイト からダウンロード（ページ下部にリンクがあります）
- GitHub - understrap-childからクローンもしくはzipダウンロード
子テーマを追加するには、wp-content/themes/ に配置して、管理画面から有効にすれば完了です。
wp-content/themes/ のディレクトリは以下のようになります。
wp-content/themes/understrap/
wp-content/themes/understrap-child/
子テーマのバージョン0.5.1では、以下のファイル構成になっています。
子テーマには最小限のファイルしかないので、テーマを変更するには、親テーマからファイル構成を保って子テーマのフォルダ内にコピー。該当ファイルを編集するだけでOKです。
understrap-child/
├ css/
├ fonts/
├ js/
├ sass/
├ src/
├ .gitignore （不可視ファイル）
├ README.md
├ composer.json
├ functions.php
├ gulpconfig.json
├ gulpfile.js
├ package.json
├ screenshot.png
└ style.css
色々と関連しそうなフォルダやファイルがありますが、SASSを使わないで、CSSを直接編集する場合は、以下のファイルに追加する方法になります。
understrap/css/theme.min.css
子テーマを使用する場合は、understrap-child/css/child-theme.min.css になります。
UnderStrap を npm と gulp で開発
npm は、Node Package Manager の略で、Node.js（サーバ側でJavaScriptを動かすための実行環境）で作られたパッケージを管理するツールです。
gulp はそのパッケージの一つで、gulpを動かしている間は、SASSのコンパイルやCSS/JSの圧縮、ブラウザのリロードなど自動で実行してくれます。
node.js と Gulp は、グローバルにインストールされている必要があります。
この辺りは詳しくないので、UnderStrap Documentation を参考に環境を整えました。
node.js は Downloads - Node.js からインストーラーをダウンロードしてインストール。
gulpは、ターミナル.app（/Applications/Utilities/Terminal.app）から以下のコマンドを実行。
npm install --global gulp-cli
Browsersync を使う場合は、以下のコマンドでインストールします。ファイルの変更を感知して自動でブラウザをリロードしてくれるので、あったほうが便利ですね。複数ブラウザの画面操作（スクロール）も同期してくれます。
npm install -g browser-sync
ターミナル.appで、cd でテーマフォルダ（以下は子テーマの場合）に移動して $ npm install を実行。更にインストール終了後に $ gulp copy-assets を実行します。
cd /Users/[ユーザー名]/[Local by Flywheelの場所]/app/public/wp-content/themes/understrap-child
npm install
gulp copy-assets
以上で準備は終了です。node_modules フォルダが作成され色々とインストールされます。
$ gulp watch で gulp が監視している状態になるので、SASSのコンパイルやCSS/JSの圧縮、ブラウザのリロードなど自動で実行される状態になります。
Browsersync を使う場合は、テーマフォルダにある gulpfile.js の proxy 部分をLocal by Flywheelで設定したURLに変更。この場合は、$ gulp watch-bs になります。
var browserSyncOptions = {
proxy: "localhost/theme_test/",
notify: false
};
UnderStrap の CSS/SASS
色々と関連しそうなフォルダやファイルがありますが、CSSで編集するファイルに以下になります。子テーマを使っていますので、ファイル名の先頭に child- や _child_ が付いています。
※SASSを使わない場合は understrap-child/css/child-theme.min.css に追記しています。
understrap-child/sass/theme/_child_theme.scss
変数を新規で追加/上書きする場合は、以下のファイルになります。
定義済みの変数は、understrap-child/src/sass/bootstrap4/_variables.scss になります。
understrap-child/sass/theme/_child_theme_variables.scss
CSSを追加/変更した際に自動で書き出されるのは、以下のファイルになり、child-theme.min.css を読み込む仕様になっています。
understrap-child/css/child-theme.css
understrap-child/css/child-theme.min.css
UnderStrap の Javascript
ページトップのJSなど細かいものやプラグインのJSで小さいものは、以下のファイルに追記してまとめています。
understrap-child/src/js/skip-link-focus-fix.js
JSを追加/変更した際に自動で書き出されるのは、以下のファイルになり、child-theme.min.js を読み込む仕様になっています。
understrap-child/js/child-theme.js
understrap-child/js/child-theme.min.js
UnderStrap の CSS/JS のキャッシュをクリア（Cache Busting）
以下のファイル内のバージョン（Version）の文字列を変更することで、読み込むCSSやJSファイルのリンクURL末尾にクエリー文字列が自動で追加されるので、別ファイル扱いとなりキャッシュが無い状態になります。※style.css をサーバにアップする必要があります。
understrap-child/style.css
UnderStrap の設定を変更した箇所
主要な設定は、understrap/function.php か understrap/inc/ にあります。
WooCommerceの読み込みを停止
そのままでもOKですが、WooCommerceは使用しないので、understrap/function.php の以下の部分をコメントアウト。
require get_template_directory() . '/inc/woocommerce.php';
popper.min.js の読み込みを停止
ツールチップは使用していないので、テーマフォルダの understrap/inc/enqueue.php と子テーマの understrap-child/function.php の以下の部分をコメントアウトして、Popper.js の読み込みを停止しました。
wp_enqueue_script( 'popper-scripts', get_template_directory_uri() . '/js/popper.min.js', array(), true);
ロゴ周りの設定を変更
ロゴの画像ファイルの横幅と高さを変更、schema.orgの構造化マークアップを削除、classを上書きしました。
understrap/inc/extras.php の以下の部分を変更追加。
$html = str_replace( 'width="298"', 'width="139"', $html );
$html = str_replace( 'height="60"', 'height="28"', $html );
$html = str_replace( 'itemprop="logo"', '', $html );
$html = str_replace( 'class="custom-logo"', 'class="img-fluid logo-normal"', $html );
Bootstrapのナビを組み込む
wp-bootstrap/wp-bootstrap-navwalker から wp-bootstrap-navwalker.php をダウンロードして、テーマフォルダのルートに配置。
understrap-child/function.php に以下のコードを追加。
require_once get_template_directory() . '/wp-bootstrap-navwalker.php';
ページネーションのデザインを変更
understrap-child/function.php に以下を追加すれば、ページネーション部分のカスマイズが可能になります。ソースは /inc/pagination.php です。
require( get_stylesheet_directory() . '/inc/pagination.php' );
function.php のプラグイン化
function.php に追記していく方法では、いろいろと煩雑になるので、プラグイン化して整理をしました。
以下のディレクトリに配置すれば、WordPressの管理画面から有効/停止することができます。
wp-content/plugins/任意のフォルダ名/
私の場合、ken-g-com フォルダを作成して、ファイルを配置しています。
以下のように同じファルダに複数のファイルがある場合、WordPressの管理画面から1つだけでもプラグインを削除してしまうと、フォルダ内のすべてが削除されてしまうのでご注意ください。
ken-g-com/
├understrap.php
├head.php
├head_ogp.php
└change_datetime.php
プラグイン化するには、ファイル名.php の中身を以下のようにする必要があります。Plugin Name だけでも動作します。
<?php
/*
Plugin Name: プラグイン名
Plugin URI: プラグインのウェブサイトURL
Description: プラグインの内容
Version: バージョン
Author: 作成した人の名前
Author URI: 上記の人のウェブサイト
License: ライセンスの種類
*/
ここに追加していきます
?>
UnderStrapを導入してみて
シンプルにUnderscoresで良かったかなと思います（笑）が色々と勉強になりました。
CSSやJSの遅延読み込みなど色々と修正して、PageSpeed Insights の結果は以下のような感じになりました。トップページのスコアなので記事ページなどは少し落ちます。
