カテゴリー
Webサイト

ブランクテーマ( sage )でWordPressを立ち上げる

ブランクテーマは、ほとんど何もデザインや装飾がついていないテーマです。

その分、カスタマイズ性が高く、一度やり方を覚えてしまえば新しいデザインに変更する際に、

かなり、なんでも出来るようになります。

今回、ブランクテーマとして有名なrootsのsageをインストールしカスタマイズする方法を紹介します。

というのも、本ブログがWordpressでの制作なのですが、使用するテーマを探そうにもどれも英語版に最適化されているためか、あまりピンとくるものがありませんでした。

さくっと最初から作るついでに、紹介します。

sageとは

https://roots.io/

オープンソースの開発者集団rootsにより作成されたWordpressのブランクテーマです。

元々、「roots」自体がテンプレートの名前だったと記憶してます。

5年程度前の時点で、BootstrapやScss等、Wordpressのテーマとしてはモダンな技術が多く取り入れられてきたテーマです。

最新の物を見た所、LaravelのBladeファイルでテンプレートが記述されており、より一層、カスタマイズがしやすくなった印象です。

https://readouble.com/laravel/7.x/ja/blade.html

インストール要件

Make sure all dependencies have been installed before moving on:
• WordPress >= 4.7
• PHP >= 7.1.3 (with php-mbstring enabled)
• Composer
• Node.js >= 8.0.0
• Yarn

https://roots.io/docs/sage/9.x/installation/#server-configuration

それぞれ環境によってどうインストールするかは異なりますが、Wordpressまでローカルで表示できる環境になったことを前提に、進めていきます。

なお、私の環境はUbuntu20.04なので、ほとんどの人には上記のインストール手順は参考にならないため割愛します。

Sageのインストール方法

Sageをテーマに追加

WordPressのフォルダの./wp-content/themes/にて下記コマンドを実行します。

$ composer create-project roots/sage

すると、sageというフォルダにsageのパッケージがインストールされます。

Composerについては下記からインストールしましょう。

https://getcomposer.org/

外観を変更する

WordPressの「外観」→「テーマ」へ行くと、sageが選択可能になっています。

こちらを選択すると、Sageのテーマが有効になります。

かなりシンプルです。

何もありません。

テンプレートの編集

テンプレートの編集は、./{sage-folder}/resources/以下のフォルダを編集していきます。

コマンドラインで下記を入力すると、ライブコーディングが始まります。

$ yarn start

resourceフォルダ以下のファイルの説明をします。

Index.php　：　特に使用しません。

Functions.php　：　WordpressのFunctionファイル。ここに書くことで、管理画面のカスタマイズ等が行えますが、今回は割愛。

Style.css　：　ここに書いてもCSSは反映されません。
このstyle.cssは、上の「テーマ」の所等で読み込まれる内容を定義する場所です。
試しにTheme Nameを適当な名前に変えてみると、「テーマ」のページで表示名が変わるので試してみてください。

Screenshot.png　：　ここも、上の「テーマ」で表示させるサムネイル画像です。誰も気にしませんので白紙のままでもOKです。

StyleSheetの編集の仕方

どこを変えればテーマを編集できるの？

Style.cssを変えても編集できないのならばどうすれば…。

Sageでは、SCSSで記述されたものが、コンパイルされて、
{sage-folder}/dist/以下にcssやjsが出力されます。

出力元のSCSSファイルの設置場所は
{sage-folder}/resources/assets/styles/です。

ここに記述し、yarnを実行することでCSSへ反映されます。

Layoutの編集の仕方

トップページのHTMLタグの編集等は、{sage-folder}/resources/viewsフォルダ以下を編集します。

レイアウトはLaravelのBladeテンプレートが用いられているので、Bladeの記述を覚えましょう。

https://readouble.com/laravel/7.x/ja/blade.html

主に編集するファイルは以下の5つです。

index.blade.php　：　記事一覧ページ

page.blade.php　：　固定ページ

search.blade.php　：　検索結果ページ

single.blade.php　：　記事ページ

layouts/app.blade.php　：　フレーム部分。ヘッダーやフッター等の共通部分が読み込まれます。

SCSSコンパイル時のEsLintの無効化

SCSSのコンパイル時に、特にルールを決めていないと、下記のようにエラーが出ます。

 28:2   ✖  Expected indentation of 2   indentation                             
           spaces                                                              
 28:12  ✖  Unexpected whitespace       declaration-block-semicolon-space-before
           before ";"                                                          
 28:13  ✖  Unexpected missing          no-missing-end-of-source-newline        
           end-of-source newline

このまま続けても良いですが、SCSS等にあまり慣れていない場合は、SCSSのLintingを無効化しても良いでしょう。

下記ファイルのStyleLintPluginの行をコメントアウトします。

{sage-folder}/resources/assets/build/webpack.config.js

    /*
    new StyleLintPlugin({
      failOnError: !config.enabled.watcher,
      syntax: 'scss',
    }),
    */

Yarnのインストールでエラーが出たら

今回、Sageをインストールした際、Yarnで少し躓いたので、エラーの解消方法のみ挿入します。

Yarnは下記でインストールできると表示されます。

$ apt install cmdtest

ただ、自分の環境で実行し、SageでYarnを実行した時に、下記のようなエラーが出ました。

ERROR: There are no scenarios; must have at least one.

Yarnのバージョンが古いとのことで、

Yarnを一旦削除し、パッケージの更新し再度Yarnをインストールすると実行ができます。

sudo apt remove cmdtest
sudo apt remove yarn
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt-get update 
sudo apt-get install yarn

参考　：　https://honmushi.com/2020/01/15/yarn-install/

まとめ

これで、かなりシンプルなブランクテーマをまず、編集できるところまで進めました。

Bladeファイルになったことで、WordpressからLaravelを使ったWeb開発にステップアップしたいな…と考えている方への入門となるテンプレートではないかと思います。

次回、Bootstrapを使って、最低限見栄えが問題ないサイトへカスタマイズしていきたいと思います。

コメントを残す