WordPressの

カスタマイズ事始め

yumi

自己紹介

名前：mimi (yumi)

昔々MovableTypeに感動してCSS、PHP、JavaScriptの沼へ。

 

デザインもDTPとかイラストもやりますが、たぶん、世間的にはフロントエンドエンジニアです。

 

WordPress歴10年余。

  1. CSS入門編：
    ディベロッパーツールを使おう

  2. CSS初級編：
    ​スタイルガイドを作ろう

  3. 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;
}
Made with Slides.com