WordPressのテーマ「UnderStrap」のカスタマイズや使い方などの覚書

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の子テーマのインストール方法は、以下になります。

子テーマを追加するには、wp-content/themes/ に配置して、管理画面から有効にすれば完了です。

WordPress管理画面 -> 外観
WordPress管理画面 -> 外観

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.phpunderstrap/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 の結果は以下のような感じになりました。トップページのスコアなので記事ページなどは少し落ちます。

Google PageSpeed Insightsの結果
Google PageSpeed Insightsの結果
MOST READ 昨日のアクセス数ランキング

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です