前回記事で、Wordpressのスターターテーマ「Underscores」をインストールし、SassとSassのコンパイルを自動化するgulp4を設定しました。
いよいよオリジナルテーマをデザインし、Sassでコーディングを行っていきます！
Sassの記述方法については、ここでは詳しい説明はしませんが、まだあんまりよく知らないという方には、下記書籍をおすすめしておきます。
Saasの記述方法が詳しく記載されています。
ただ、2017年発行なので、gulpのバージョンが古く（gulp3）、最新のgulp4では変更されている点があるため、環境設定部分は、私の前回記事などを参考にしてもらえるとよいかと思います。
この１冊を辞書替わりにして、あとはGoogle先生に最新情報を教えてもらえば十分ですよー
Adobe XDでデザインカンプを作成
デザインカンプを作るには、XDが便利ですね。
チュートリアルが充実しているので、初めての方でもすぐに使えますよ！
PhotoshopやIllustratorに比べれば爆速で、サクサク作れるし、web上で確認や共有もできます。
今回私は、練習用にパン屋さんのサイトをざっくり作りました。
Sassコーディング
コーディング用のエディタは何でもよいのですが、私は最近Atomを使っています。
無料だし、いろいろ便利なパッケージもあるし、いいんじゃないでしょうか。
「Underscores」のSassフォルダ構成
前回も少し説明しましたが、UnderscoresのSassフォルダは以下のようになっています。
パーシャルの中はほんとに最低限のものしか記載されていないので、一からのデザインカスタマイズがしやすいです。
カスタマイズ例
カスタマイズ方法の例として、私が行ったことをいくつか挙げてみます。
- リセットCSSの変更
リセット系の_nomalize.scssがいまいち趣味でないので、これをstyle.scssの@importから外し、代わりに自作の_reset.scssを作って、importしました。 - メディアクエリ用のbreakpointとmixinの定義
メディアクエリに関する指定は何もなかったので、変数定義用のvariables-siteフォルダに_breakpoints.scssを追加し、breakpointを定義。mixinsフォルダのパーシャルで、ミックスインを作成。 - ハンバーガーメニューの変更
デフォルトのハンバーガーメニューがいまいちなので、drawer.jsに変更。
これに伴い、navigationフォルダの_menus.scssは中身を総変更。 - トップページ用のパーシャル追加
トップページの細かいデザイン用のパーシャル_top.scssをelementsフォルダに追加。
スライダー用のswiper.jsも入れたので、その辺の設定もいれました。 - 個別ページ用のパーシャル（「site」-「primary」の下の_posts-and-pages.scss）の修正や追加
②のメディアクエリ用のミックスインは、誰もが必要かと思いますので、記述例を記載しておきます。
いろいろな方法が紹介されていますが、今回下記サイトを参考にさせて頂きました。
参考：https://www.tam-tam.co.jp/tipsnote/html_css/post10708.html
_breakpoints.scssの中身
$breakpoint-up: (
'sm': '(min-width: 400px)',
'md': '(min-width: 768px)',
'lg': '(min-width: 1000px)',
'xl': '(min-width: 1200px)',
) !default;
$breakpoint-down: (
'sm': '(max-width: 399px)',
'md': '(max-width: 767px)',
'lg': '(max-width: 999px)',
'xl': '(max-width: 1199px)',
) !default;
※モバイルファーストでコーディングしているので、大部分はmin-widthですが、たまにmax-widthも必要になるので、一緒に定義しています。
_mixin-master.scssに追加
// Breakpoint
@mixin mq-up($breakpoint: md) {
@media #{map-get($breakpoint-up, $breakpoint)} {
@content;
}
}
@mixin mq-down($breakpoint: md) {
@media #{map-get($breakpoint-down, $breakpoint)} {
@content;
}
}
呼び出すとき（min-widthの場合）
.top-mes {
@include mq-up(sm) {
font-size: 3.6vh;
}
@include mq-up() { //引数省略の場合、初期値のmdになります
font-size: 5.2vh;
}
}
コンパイル後
@media (min-width: 400px) {
.top-mes {
font-size: 3.6vh;
}
}
@media (min-width: 768px) {
.top-mes {
font-size: 5.2vh;
}
}
注意
メディアクエリは、Sassファイルでバラバラに記述されていても、前回ご説明したPostCSSのパッケージ「CSS MQPacker」により、コンパイル後一つにまとめられるのですが、まとめられる順番は読み込んだ順になるため、各パーシャルをimportしているstyle.scssの読み込み順となります。
ということは、最初にimportされたパーシャルファイルの最初のメディアクエリの記述がmq-up(lg)で、その次にmq-up()となっていた場合、コンパイル後にまとめられるメディアクエリの順番は以下のようになってしまいます。
@media (min-width: 1000px) {
.top-mes {
font-size: 6vh;
}
}
@media (min-width: 768px) {
.top-mes {
font-size: 5.2vh;
}
}
こうなると、モバイルファーストから順々に画面サイズを大きくして、それぞれデザインを変えていたものが崩れてしまいますね・・・
なので、これをさけるため、style.scssで最初にimportしている_reset.scssに以下の記述を入れました。
body {
@include mq-up(sm) {
width: 100%;
}
@include mq-up(md) {
width: 100%;
}
@include mq-up(lg) {
width: 100%;
}
@include mq-up(xl) {
width: 100%;
}
}
この記述が最初に読み込まれることで、メディアクエリもこの順にまとめられることになります。
サーバーへアップロード
テスト環境での制作、確認が終わったら、いよいよサーバーへアップします。
アップロードの方法は、いろいろあると思いますが、今回はテストサイトなので、以下の方法で簡単に済ませました。
- サーバーにて、Wordpressを簡易インストールする。
その際、ID、PW、サイト名、サイトの説明などは、ローカル環境と同じにする。 - FTPソフトにて、テーマフォルダ（直下のnode_modulesとsassフォルダは不要、style.css.mapは必要に応じて）とuploadsフォルダをアップロードする。
- LOCALのデータベース「ADMINER」にて、全データをエクスポートし、ローカルURL（http://・・・.local）をサーバーのURLに置換する。
- サーバー側のデータベースにて、３のデータをインポートし、簡易インストールで先に作られていたテーブル12個（接頭辞で区別）を削除（DELETE）する。
- サーバー直下のwp-config.phpをダウンロードし、$table_prefixをローカルでインポートしたテーブルのものに変更後、アップロードする。
WordPressを丸ごとアップロードするのって、結構時間かかるので、サーバー側でインストールした方が早いです。
まぁ、今回プラグインも「WP Multibyte Patch」ぐらいしか入れてなかったので、これで済むんですが、本番サイトでは、プラグインも各種必要ですし、WordPressのバージョンとのからみもあるので、全データアップロードが無難だと思います。
後、データベースの照合順序も注意が必要ですね。よく、ローカルとサーバーで違ってて、画面がおかしなことになったりしますよね。
以上で、こんなサイトが出来上がりました。
Sassについては、CSSを熟知し、プログラムの初歩を知っている方（PHPやjavascriptを多少触っている方）なら、すぐに理解できる内容だと思います。
私もネットで概要をつかみ、本をざっと読んだ程度でしたが、実際に手を動かさないと身につかないなと思ったので、今回テストサイトを作ってみました。
なるべく効率的な記述方法はどれだろうと調べながら制作したので、多少時間はかかりましたが、CSSでのコーディングに比べると、すごくサクサクコーディングできることが実感できました！
でも、まだまだ使っていないSassの便利な機能があると思うので、いろいろ要勉強です・・・
