初心者向けでないテーマ「Sage」を初心者向けに解説
WordPressテーマを作りたいとき、WordPressでは決められたファイル構造、関数を使わないといけないため、一から作るにしても出来上がったテンプレから作成した方が時間短縮にもなりますし、その時間をデザインに充てることができるためブランクテーマを使うと便利です。ブランクテーマには色んな種類があり、自分の好きなやつを選べばいいと思いますが、今回はSageを取り扱ってみようと思います。
Sageの特徴として、ファイルを保存するとブラウザが自動的にファイルを読み込んでくれるため、確認がしやすかったり、コードの書き方に誤りがあると画像のように示してくれます。
結構便利そうに見えますが、その分導入の敷居がかなり高く、初心者にはお勧めしづらいのですが、この記事ではあえて初心者向けに解説し、使っていけるようになっていただければと思い記事にしました。
今回の想定環境としてはWindowsのローカル環境とします。
WordPressはLocal by Flywheelを使って構築します。詳しい使い方はcolissで紹介されています。もちろんMAMPとかでも大丈夫です！
事前知識としてWordPressの経験は少しは欲しいです。
（参考）徹底解説！自作のWordPressオリジナルテーマをゼロから作成しよう | Plusers
この記事はわかりやすく、説明後、完成ファイルをアップしているので躓きにくいと思います。
また、SCSSの知識も必要です。
一から環境構築始め
Sageのインストールガイドを見てもらえばわかりますが、下記のものが必要となります。先に紹介したLocalを使えばWordPressは準備できている状況になるので、PHPから準備していきます。
Windowsの場合、Cドライブ直にphpフォルダを作成し、PHPをダウンロード、zipの中身をphpフォルダに貼り付けます。
詳しくはPHPBookを参考にしてみてください。
あとのComposer、Node.js、Yarnもダウンロード、インストールしてください。
終わったらSageをインストールしていきます。
Localを利用の場合、テーマフォルダが
C:\Users\[ユーザー名]\Local Sites\[サイト名]\app\public\wp-content\themes
となるのでwp-contentを開いた状態で、themesフォルダをShiftキーを押しながら右クリック、Shell（コマンドプロンプト）を開きます。
コマンドプロンプト内に
次に、たった今作成したフォルダ内でyarnしたいため、cd ./your-theme-name/を入力、yarnします。
最後の設定として、resources/assets/config.jsonを開き、"devUrl": "https://project-name.test"のアドレスを変更する必要があります。
Localを使用している場合はhttp://サイト名.local/に変更すればよく、MAMPの場合はhttp://localhost:8080/wordpressの入ってるフォルダ/に変更します。
これで準備完了です。
ワードプレスの管理画面からテーマを変更し、 先ほど作成したテーマフォルダ内（yarnを実行したところと一緒）でyarn run startを実行し、レイアウトを変更すれば何かしらの変化が出てくるはずです！
詳しくはAREA 13さんの記事で紹介されています。
0 件のコメント :
コメントを投稿