WordPress  ローカルサーバー〜テーマ・プラグイン構築 オレオレ環境 2018年版

いかに素早く、車輪の再発明をせず、毎回の手順に労力を掛けないか。
人的コストもばかにならないよってお話です。
またの名を「オレのブクマ披露」

2018.3.27 update

# 0. 事前準備

- [「MacでWebサイトデザイン・コーディングするための、黒い画面と仲良くなりながらの環境構築手順メモ](http://gatespace.jp/2013/10/31/mac-web-setup-use-terminal/)

開発機はMac。コマンド叩きまくるのといろんな便利ツール使うので

# 1. ローカルサーバーの用意

- [WP-CLIでVCCW環境をほいほい作る](http://qiita.com/miya0001/items/687d142d714b1386a44f)

[VCCW](http://vccw.cc/) 使いますが、何個もローカルサーバー作るので [scaffold-vccw](https://github.com/vccw-team/scaffold-vccw) の方を使う。
詳しくは上記リンク参照。

# 2. テーマの準備

- [Iemoto](https://github.com/megumiteam/iemoto)

毎回 [_s](http://underscores.me/) をDLするのが面倒なので、 `grunt-init` 対応の [Iemoto](https://github.com/megumiteam/iemoto) を使う。
詳しい手順は[「WordPressテーマ用の grunt-init テンプレート Iemoto を使ったテーマ作成」](http://gatespace.jp/2014/09/01/grunt-init-iemoto/)を参考に。

なお、個人的にフォークした Iemoto の [dc_sass ブランチ](https://github.com/gatespace/iemoto/tree/dc_sass)は、いつもSassで手直ししてる手間をなくす用にちょっと改変してあり、実際にはこっちを使ってます。
（_s と乖離し過ぎるとそれはそれで問題が起きそうなため）

_s でいいわーという場合はWP CLI でコマンド打てばOK。

```
$ wp scaffold _s <slug>
```
- https://developer.wordpress.org/cli/commands/scaffold/_s/

# 3. プラグインの準備

WP CLI でコマンド打てばOK。

```
$ wp scaffold plugin <slug>
```

- https://developer.wordpress.org/cli/commands/scaffold/plugin/

# 4. テーマとプラグインの構築

- [WordPress テーマ（プラグイン）開発オレオレsnippet集＋便利なサービス](http://qiita.com/gatespace/items/324a037dd241ee908dd8)


コードをテーマとプラグインどちらで実装するかは[「WordPressのコードスニペットを書くのは functions.php か自作プラグインか」](http://gatespace.jp/2012/06/19/functions-php-v-s-plugin/)を参考に。

- [WordPress Code Reference](https://developer.wordpress.org/reference/)

また、WordPress Code Reference でそのコードの関数（フィルターフックやアクションフック）が妥当であるか確認する癖をつける。ググったコードそのままは危険。

追加でSNSボタン類（公式ボタン、オリジナルデザインのボタン）の実装は、そこそこの頻度でSNS側がコードのアップデートを行うので、都度SNSのドキュメントを見て確認する（過去自分で構築したコードは参考にしない）。

# 5. Webフォント、CSS、 JavaScript

## webフォント

- [Web制作で使えそうなアイコンフォント](http://gatespace.jp/2014/02/27/icon-fonts-201402/)

Webフォントについてはデザイナーさんと共通で「これ使う」というのを先に決めておく。

## CSS

面倒そうな時はジェネレーター使います。特にグラデーションと吹き出しの矢印。

- [Ultimate CSS Gradient Generator](http://www.colorzilla.com/gradient-editor/) : グラデーション
- [CSS3 Generator](http://css3generator.com/) : いろいろ
- [CSS triangle generator](http://apps.eky.hk/css-triangle-generator/) : 三角
- [CSS ARROW PLEASE!](http://www.cssarrowplease.com/) : 三角
- [CSS Button Generator](http://css-button-generator.com/) : ボタン

## JavaScript、jQueryプラグイン

基本GPLv2やMITなどライセンスに問題がないもの。

- [bxSlider](http://bxslider.com/) : レスポンシブ対応スライダー
- [Colorbox](http://www.jacklmoore.com/colorbox/) : lightbox系
- [jQuery UI](http://jqueryui.com/) : いろいろ。WordPressコアに入ってるので使いやすい。
- [FooTable](http://fooplugins.github.io/FooTable/) : レスポンシブテーブル
- [trunk8](http://jrvis.com/trunk8/) : 文字数ではなく行数でカットできる。

# 6. ダミー

ダミー画像とかアップロードしてテストするとかいろいろあるよね。

- [PlaceIMG](https://placeimg.com/) : DLして利用可能。
<img src="https://placeimg.com/640/480/any">
- [PLACEHOLD.IT](http://www.placehold.it/) : グレーベースに幅と高さの数字の文字  
<img src="http://placehold.it/350x150">
- [coverr](http://coverr.co/) : 動画をヘッダーに使いたい時

以下はテキスト

- [Theme Unit Test](https://codex.wordpress.org/Theme_Unit_Test) : テーマユニットテスト用の投稿データなど。VCCWなら取り込んだ上でサイト作れる。
- [すぐ使えるダミーテキスト - 日本語 Lorem ipsum](http://lipsum.sugutsukaeru.jp/) : 追加で日本語のダミーテキストが欲しかった場合。

# 7. OGPとかSEO

プラグイン使ったほうが楽。本音として製作者側がそこで消耗する必要が無いと思う。細かい部分はサイト運営者に任せるべき。
とは言えOGPのデフォルト画像は用意してと言われたりするので、ドキュメントをチェックするのは必要でしょう。

- [OGP画像シミュレータ](http://ogimage.tsmallfield.com/)

# 8. 過去に書いたコード

- [Gist](https://gist.github.com/gatespace)
- [Qiita](http://qiita.com/gatespace)

# 9. ブラウザチェック

Windows + IE環境必要だよね。他スマートフォンのネイティブ環境が必要な時。

- [Browser Stack](https://www.browserstack.com/) : ブラウザベースで複数環境を用意できる。スマートフォン（iOS、Android）もある。アドオンを入れればローカルサーバーのサイトも確認できる。超絶楽。
- [Microsoft Edge（旧modern.IE）](https://developer.microsoft.com/en-us/microsoft-edge/) : VirtualBox用のマシンイメージがダウンロードできる。どうしても Windows のネイティブ環境でアプリケーションのインストールが必要なときなど。

なお、Browser Stackは有料だが、オープンソースプロジェクトの開発者は申請して許可が出れば無料になる。