WordPressの
カスタマイズ事始め
yumi
自己紹介
名前：mimi (yumi)
昔々MovableTypeに感動してCSS、PHP、JavaScriptの沼へ。
デザインもDTPとかイラストもやりますが、たぶん、世間的にはフロントエンドエンジニアです。
WordPress歴10年余。
CSS入門編：
ディベロッパーツールを使おうCSS初級編：
スタイルガイドを作ろうCSS中級編：Sassのススメ
今日話すこと
WordPressのカスタマイズ
つまづきポイント その１
追加CSSの使い方が
分からない
追加CSSとは
WordPressのカスタマイズ
ページにある機能です。
コレ
ココまで触ったことの無い方はそんなのあるんだー、ぐらいで聞いてください。
CSSの意味もいろはも
全部ググればわかります。
Cascading Style Sheet とは？
なので今日は
どこをどういじればいいか教えてくれる
ディベロッパーツール
を理解しましょう。
問題は何をいじればいいか
分からない、ということです。
ディベロッパーツールとは
Google Chromeに標準搭載されている開発者向けのツールです。
（SafariやFirefoxやIEにもあります）
今から
使ってみましょう。
実践あるのみ。
WordPressのカスタマイズ
つまづきポイント その2
自分が書いたCSSが
分からない
自分が書いたコードなんてプロでも忘れます
1. シツコイぐらい
コメントを書く
/* ここにコメント書きます */
.mystyle {
font-size: x-small;
}
/* commentクラスを追加 */
.mystyle .comment {
color: red;
}
/* ===========
こんな風に目立たせてもOK
=========== */2.簡易スタイルガイド
（パターンライブラリ）を作る
@miminari
Sass
CSSに慣れてきたら
CSSを書くのは
正直ダルい。
ul {
margin: 0;
}
ul li{
margin: 10px;
}
ul li a{
color: #ccc;
}ulを3回、liを2回。
Sass
「Syntactically Awesome Stylesheets」の略で、直訳すれば「構造的にイケてるスタイルシート」
ul {
margin: 0;
li {
margin: 10px;
a {
color: #333;
}
}
}Sass
1. 開発のスピードが飛躍的に上がる
Sassを使うことでコード量を大幅に減らすことができます。
結果的に開発スピードが上がり、生産性を上げることが可能です。
2. 保守性が高まる
コード量が減り、ネスト構造や関数を使ってコードをより見やすく書くことができるので、保守性やメンテナンス性が高まりリファクタリングがしやすくなります。
3. バグの量が減る
コード量が減り、コードの見通しが良くなると、バグを早期に発見できたり、そもそものバグの量を減らしたりことができます。
さまざまなめりっと
便利過ぎて最早、
Sass無しでは生きていけない
※ Sass以外にもPostCSSとか色々あります。
ただし、コンパイルしてCSSに変換しなきゃ使えない。
npm-scripts
ここでは、
sassをcssに変換してくれるツール
と思ってください。
いわゆる
タスクランナー
のひとつ。
タスクランナーとは
Webサイト構築に必要な処理をタスクとして自動化してくれるプログラム
Sassとnpm-scriptsを使ったWordpress開発のワークフロー
npm run watch
まずはターミナルでnpm-scriptsを起動させます。
yumi at mbp1 in ~/Documents/test/dev
$ npm run watch
Coding!
Sassでゴリゴリ
書いていきます。
.m-button {
border:1px solid #eee;
}Save and review
保存すれば、
プレフィックスも追加して
無駄な記述も省いた
美しいCSSが出力されます。
.m-button {
border:1px solid #eee;
}And so...
JSの文法チェックやら、
圧縮化やら、
マージやら、
自動化できることがありすぎて紹介しきれません。
が、Sassを導入するだけでも飛躍的に開発工数が減るのでぜひお早めにお試しください。
.m-button {
border:1px solid #eee;
}Copy of 2018-06-23用
By mimitips
