【2018.2月版】WordPress無料ブランクテーマ「Sage 9」の使い方・カスタマイズまとめ


【アイキャッチ】Sage9.0でWordpressテーマカスタマイズ

この記事では、WordPressの無料ブランクテーマ Sage の使い方を紹介します。 (2018/02/07にファイナルリリースを終えたばかりのSage9.0の情報です!詳細はこちら

WordPressテーマカスタマイズにちょっと凝ってきたみなさま。

既存のWordPressテーマを好みに合わせてカスタマイズしているうちに、 「あれ?これこんなにカスタマイズするなら、1から自分でやったほうが良くなかった?」 ってなったことありません? かと言って、まったく0からWordPressのPHPファイルを作成するなんて無理…

そんな人におすすめなのは、カスタマイズ用に作られたスターターテーマ“Sage”です。 Sageを使うことで、 1. カスタマイズを前提とした開発者用テーマ。最低限必要なWordPress PHP、HTML、CSSで構成されており、1からデザインを作り始められます! 2. タスクランナーなどの効率的な開発環境を簡単に準備できます!

ただし、Sageはファイナルリリース直後で、 最新版に関する日本のドキュメントはまだまだ少ない現状。

そこで今回は、Sageでテーマカスタマイズを始めるまでを、丁寧に解説していきます!

※本記事は、SageのDocsやDiscourseを参考に開発を進めた記録です。不明点やコメントはぜひTwitterでお願いします。 bootstrap4、composer、yarn、gulp、node.jpなどのキーワードが1つも分からない人は諦めつつ読もう!笑

WordPressのスターターテーマ(ブランクテーマ)Sageって?

【挿入】Rootsとは

Sageは、WordPressの開発を効率化するのオープンソースプロジェクト「Roots」のツールの1つです。

Sageは、「モダンな開発ワークフローを持ったWordPressのスターターテーマ」であり、最新のフロントエンドツールを利用しています。

WordPress starter theme with a modern development workflow.Sage – Roots

Rootsプロジェクトとそのツールたち

Rootsは、大きく分けて3つのプロダクトで構成されています。 ①Trellis、②Bedrock、そして今回の③Sageです。 今回は、Sageのみを利用してテーマデザインをカスタマイズしていきます。

①Trellis

WordPressの開発用・商用のサーバです。 ローカルや商用サーバにWordPress開発環境を準備したり、開発後のデプロイを自動化したりする役割を担います。 商用環境は、Ubuntuを前提としているようです。。 今回は、XSERVERの自動インストールでいれたWordPressを使うので、見送りました。

②Bedrock

WordPressにおけるファイル・パッケージ管理ツールです。フォルダ構成、WordPressプラグイン管理などを担います。 テーマで利用するWordPressプラグインのインストール管理に使えそうです。

③Sage★

開発用スターターテーマです。開発を効率化するツールが含まれています。

WordPressのテーマカスタマイズにSage 9.0を選んだ理由

私が、Sageを選んだ理由は以下の通りです。

  • Bootstrap4が利用できる
  • SASSが利用できる
  • モダンな開発ワークフローで保守性が高い
  • オリジナルテーマとしていつか再配布するかもしれない
  • ドキュメントがきれい
まず、Bootstrap&SASSが利用できること。この2つがあることでよりスピーディにCSSコーディングが可能になります。 また、モダンな開発ワークフローが導入できること。最近、フロントエンドだとgulpなどのタスクランナーを利用するのが一般的ですよね。 Sage使って、モダンなワークフローとやらを体得したいと思います。笑

Sage 9.0が依存するツール

Sageを利用するには、以下のツールが必要です。インストールして準備しておきましょう!

  • WordPress >= 4.7
  • PHP >= 7.0 (with php-mbstring enabled)
  • Composer(PHPのパッケージマネージャ)
  • Node.js >= 6.9.x (サーバサイドのJavaScript)
  • Yarn(JavaScriptのパッケージマネージャ)

また、Sageでは以下のフロントエンドツールを利用します。

  • Webpack(モジュールバンドラー)
  • npm(JavaScriptパッケージマネージャ)
  • BrowserSync(ファイル監視ツール)

Webpackは、モジュールバンドラー。複数のCSS, JSなどのファイルを適切にまとめてくれます。 Sageの過去のバージョンではGrunt, Gulpを使用していたようです。

npmは、フロントエンド(JavaScript、特にNode.js)のパッケージマネージャ。 Bootstrap関連のファイルを準備してくれます。Sageの過去のバージョンではBowerを使用していたようです。

Browsersyncは、ファイル監視ツールです。ファイルに変更があるとブラウザをリロードするため、 開発スピードが向上します。 また、CSSの記載内容を常に確認し、「記述がおかしいぞ!」と怒ってくれる人です。

余談ですが、今回Wordpressのローカル環境には、Flywheelを利用しています。別途紹介する機会があれば。

SageでWordPressテーマカスタマイズを始めよう!

見出し画像_let'sカスタマイズ

ツール群(大量)の簡単な説明が終わったところで、カスタマイズを始めていきましょう。

上記のツールが働いてくれるので、インストール等は簡単です!

WordPressのthemesフォルダへSageと関連パッケージをインストール(composer)

Sageは、composerを利用して開発環境にダウンロードできます。

まずは、Sageのファイルを好きなフォルダ名(テーマ名)でインストール。場所は、WordPressのテーマフォルダwp-content/themes/などです。

#@ app/themes/ or wp-content/themes/
$ composer create-project roots/sage [your-theme-name]

yarnを実行して、関連パッケージをインストール。

#@ themes/your-theme-name/
$ yarn

これでファイルの準備は完了です。

Browsersyncの設定

これでファイルは準備できました。 早速カスタマイズ!なのですが、1つだけ設定が必要です。 assets/config.jsonにあるdevURLの値を自分の環境のものに変更します。

...
  "devUrl": "[https://project-name.test]",
...

フォルダ構造と使い方

カスタマイズに利用するフォルダ構造、ファイルを確認しておきましょう。

……多くね? 大丈夫、使うファイルは数字をつけてある一部です!(白目)

テーマカスタマイズに利用するファイル

テーマカスタマイズのため、以下のファイルを修正していきましょう。

①app/helper.php ヘルパーの設定ファイルです。ほとんど触りませんが、サイドバーを利用する場合、 当ファイルのdisplay_sidebarを有効化する必要があります。

②resources/assets/config.json 開発環境のURLを設定しておきましょう。

テーマのカスタマイズは、主に以下の③〜⑤のファイルを修正していきます。

③resources/views/layouts/app.blade.php ベースのテンプレートです。

④resources/views/partials/XXX.balde.php 各投稿タイプに応じたテンプレートです。

⑤resources/assets/ CSS, JSなどのassetsファイルフォルダです。デザインの修正には、当フォルダのstyles/images/を利用します。

テーマカスタマイズのワークフロー

ここまで準備ができれば、あとは以下のフローにしたがって、CSSやPHPの修正を繰り返すだけです!

  1. $yarn run startを実行し、BrowerSyncを起動
  2. 上記③〜⑤のファイルを自由に修正
  3. ブラウザで確認

Deploy方法

以下のコマンドを実行し、Deploy用のファイルを生成します。 yarn run buildassets/内にファイルをコンパイル&最適化します。 yarn run build:production: 商用デプロイ様にassetsをコンパイルします。(→注意点)

注意点

見出し画像_注意するポイント

最後に、Sageを使い始める上での注意点を紹介します。

yarn run build:prodcutionでコンパイルすると変更が反映されない?

現状、バグなのか(もしくは私が誤っているのか)、yarn run build:prodcutionでコンパイルすると 変更内容が反映されていないコンパイルファイルが生成されます。

また、開発用にyarn run startすると、Browsersyncが起動し、コンパイルファイルdist/main.cssは削除されます。(随時反映するため)

そのため、デプロイするためのコンパイルファイルは、yarn run buildで生成しなければなりませんでした。 もしよい情報があれば、Twitterなどでコメントください。

css, jsの記述が適切でないと怒られる

これはBrowsersyncのありがたい機能ですが、css、jsの記述ルールが誤っていると、めっちゃ怒られます。笑 この機会に、自分の記述方法を矯正してもらいましょう。

まとめ:Sage9でテーマカスタマイズしてみよう

スターターテーマSage9のスターター記事でした。いかがでしたか?

難しそうに思えますが、各ツールの役割を理解すれば、あとはツールたちが頑張ってくれるので、作業はかなり少なくて済みます。

この機会に、ぜひSageを利用してみてくださいね。

不明点、コメントはTwitterでお待ちしております。

開発環境

PC Macbook Pro Retina 13 OS X 10.12.6 Sierra
Sage 9.0.0
PHP 7.2.2
Node.js v9.5.0
composer 1.6.3
yarn 1.3.2
npm 5.6.0