WordPressを見直してみようと思う。でも、そのまま使うのはどうも…。どうせ使うなら余計なものはすべて排外されて、機能的で先進的、かつラクなものがいい。ということで、世界的に定評あるRoots社のボイラープレート「Bedrock」と、Bootstrap4・Sass・Brade採用のシンプルなスターターテーマ「Sage 9」（ベータバージョン）に目が止まった。
このSage、ステーブルバージョンの「Sage 8」についての情報は日本語で多く見つかるが、まだベータ版の「Sage 9」は英語情報がちらほら程度で、それほど多くない様子。どうしようかな…、と思いながら、READMEとYoutubeを参照しながら、Macのローカル環境でやってみたところ、サラッと構築できた。
ということで、手順を端的に紹介する。
Bedrockインストール
① MAMPアプリを起動。
$ cd *****/WWW/CPD/ $ composer create-project roots/bedrock bedrock-wp.dev
② Terminalアプリで、ローカルサーバの適当な場所へ移動し、ComposerでBedrockをインストール（例は”bedrock.dev”がドキュメントルート名）。
Installing roots/bedrock (1.8.1)
- Installing roots/bedrock (1.8.1): Loading from cache
Created project in bedrock-wp.dev
> php -r "copy('.env.example', '.env');"
Loading composer repositories with package information
Installing dependencies (including require-dev) from lock file
Package operations: 8 installs, 0 updates, 0 removals
- Installing johnpbloch/wordpress-core-installer (1.0.0): Loading from cache
- Installing composer/installers (v1.2.0): Loading from cache
- Installing johnpbloch/wordpress-core (4.8.1): Loading from cache
- Installing johnpbloch/wordpress (4.8.1): Loading from cache
- Installing oscarotero/env (v1.1.0): Loading from cache
- Installing roots/wp-password-bcrypt (1.0.0): Loading from cache
- Installing vlucas/phpdotenv (v2.4.0): Loading from cache
- Installing squizlabs/php_codesniffer (2.9.1): Loading from cache
Generating autoload files
③ インストール完了。
④(1) エディタで.envファイルを開き、「DB_NAME」「DB_USER」「DB_PASSWORD」を編集（DBは事前に用意）。「WP_HOME」は「(ローカルドメイン)/web/」に。
④(2) さらに、「Generate your keys here:」横のURLをコピーして、ブラウザにてアクセス。「Env Format」の8行をすべてコピーし、.envファイルの枠内にペースト。
これでBedrockによるWordpress環境が完成した。
⑤ ブラウザで(ローカルドメイン)/web/にアクセスすると、通常のインストール画面が表示される。
⑥ そのままインストール。
⑦ インストール完了。
次に、スターターテーマのsage 9をインストールする。
Sage 9インストール
$ cd bedrock-wp.dev/web/app/themes/ $ git clone https://github.com/roots/sage.git sage
① Bedrockテンプレートの/themesフォルダに移動。ここに新テーマをインストールする（例のフォルダ名は”sage”）。
Cloning into 'sage'... remote: Counting objects: 9951, done. remote: Total 9951 (delta 0), reused 0 (delta 0), pack-reused 9950 Receiving objects: 100% (9951/9951), 4.53 MiB | 251.00 KiB/s, done. Resolving deltas: 100% (5804/5804), done.
② sageテーマインストール完了
③ ダッシュボードのメニュにてテーマを「sage」に変更。
④ /theme/sageフォルダ内に、”composer.json”がある。
$ cd sage $ composer install
⑤ ターミナルでsageフォルダ移動し、composerを実行。
Loading composer repositories with package information Installing dependencies (including require-dev) from lock file Package operations: 26 installs, 0 updates, 0 removals - Installing composer/installers (v1.4.0): Loading from cache - Installing paragonie/random_compat (v2.0.10): Loading from cache - Installing illuminate/contracts (v5.4.27): Loading from cache - Installing doctrine/inflector (v1.2.0): Loading from cache - Installing illuminate/support (v5.4.27): Loading from cache - Installing illuminate/container (v5.4.27): Loading from cache - Installing illuminate/events (v5.4.27): Loading from cache - Installing psr/log (1.0.2): Loading from cache - Installing symfony/debug (v3.3.6): Loading from cache - Installing symfony/finder (v3.3.6): Loading from cache - Installing illuminate/filesystem (v5.4.27): Loading from cache - Installing illuminate/view (v5.4.27): Loading from cache - Installing illuminate/config (v5.4.27): Loading from cache - Installing roots/sage-lib (9.0.0-beta.4): Loading from cache - Installing symfony/yaml (v3.3.6): Loading from cache - Installing hassankhan/config (0.10.0): Loading from cache - Installing brain/hierarchy (2.3.0): Loading from cache - Installing soberwp/controller (9.0.0-beta.4): Loading from cache - Installing symfony/polyfill-mbstring (v1.5.0): Loading from cache - Installing symfony/translation (v3.3.6): Loading from cache - Installing nesbot/carbon (1.22.1): Loading from cache - Installing symfony/process (v3.3.6): Loading from cache - Installing symfony/console (v3.3.6): Loading from cache - Installing illuminate/console (v5.4.27): Loading from cache - Installing roots/sage-installer (1.3.1): Loading from cache - Installing squizlabs/php_codesniffer (2.9.1): Loading from cache paragonie/random_compat suggests installing ext-libsodium (Provides a modern crypto API that can be used to generate random bytes.) illuminate/support suggests installing symfony/var-dumper (Required to use the dd function (~3.2).) illuminate/filesystem suggests installing league/flysystem (Required to use the Flysystem local and FTP drivers (~1.0).) illuminate/filesystem suggests installing league/flysystem-aws-s3-v3 (Required to use the Flysystem S3 driver (~1.0).) illuminate/filesystem suggests installing league/flysystem-rackspace (Required to use the Flysystem Rackspace driver (~1.0).) symfony/translation suggests installing symfony/config () symfony/console suggests installing symfony/event-dispatcher () symfony/console suggests installing symfony/filesystem () illuminate/console suggests installing guzzlehttp/guzzle (Required to use the ping methods on schedules (~6.0).) illuminate/console suggests installing mtdowling/cron-expression (Required to use scheduling component (~1.0).) Generating autoload files
⑥ composerの実行完了。
⑦ /sage/README.mdを確認。
⑧ resources/assets/config.jsonの「devUrl」を、ローカルのホスト名に変更。（※ sageテーマのインストール先を”sage”にしなかった場合は、「publicPath」も修正。）
$ brew update $ brew install yarn
⑨ Mac環境にyarnをインストール（まだインストールしていない場合）。
$ yarn
⑩ yarnを実行。
yarn install v0.27.5 [1/4] Resolving packages... [2/4] Fetching packages... [3/4] Linking dependencies... [4/4] Building fresh packages... warning Your current version of Yarn is out of date. The latest version is "1.0.1" while you're on "0.27.5". Done in 20.43s.
⑪ yarnの実行完了。
⑫ フロントページを確認。一切の整形が成されていない。
$ yarn run build
⑬ yarnにてビルドを実行。
⑭ 初期段階でのレイアウトが適用された。
$ yarn run start
⑮ コンパイル＆ブラウザシンクを実行。
⑯ 試しに、/resources/assets/styles/common/_global.scssにCSS適用し保存してみる。
⑰ ブラウザシンクが実行され、自動的にブラウザがリロードされる。
以上。
Comment