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

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

2018.3.27 update

0. 事前準備

• 「MacでWebサイトデザイン・コーディングするための、黒い画面と仲良くなりながらの環境構築手順メモ

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

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

• WP-CLIでVCCW環境をほいほい作る

VCCW 使いますが、何個もローカルサーバー作るので scaffold-vccw の方を使う。
詳しくは上記リンク参照。

2. テーマの準備

• Iemoto

毎回 _s をDLするのが面倒なので、 grunt-init 対応の Iemoto を使う。
詳しい手順は「WordPressテーマ用の grunt-init テンプレート Iemoto を使ったテーマ作成」を参考に。

なお、個人的にフォークした Iemoto の 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集＋便利なサービス

コードをテーマとプラグインどちらで実装するかは「WordPressのコードスニペットを書くのは functions.php か自作プラグインか」を参考に。

• WordPress Code Reference

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

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

5. Webフォント、CSS、 JavaScript

webフォント

• Web制作で使えそうなアイコンフォント

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

CSS

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

• Ultimate CSS Gradient Generator : グラデーション
• CSS3 Generator : いろいろ
• CSS triangle generator : 三角
• CSS ARROW PLEASE! : 三角
• CSS Button Generator : ボタン

JavaScript、jQueryプラグイン

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

• bxSlider : レスポンシブ対応スライダー
• Colorbox : lightbox系
• jQuery UI : いろいろ。WordPressコアに入ってるので使いやすい。
• FooTable : レスポンシブテーブル
• trunk8 : 文字数ではなく行数でカットできる。

6. ダミー

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

• PlaceIMG : DLして利用可能。

- [PLACEHOLD.IT](http://www.placehold.it/) : グレーベースに幅と高さの数字の文字 - [coverr](http://coverr.co/) : 動画をヘッダーに使いたい時

以下はテキスト

• Theme Unit Test : テーマユニットテスト用の投稿データなど。VCCWなら取り込んだ上でサイト作れる。
• すぐ使えるダミーテキスト - 日本語 Lorem ipsum : 追加で日本語のダミーテキストが欲しかった場合。

7. OGPとかSEO

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

• OGP画像シミュレータ

8. 過去に書いたコード

• Gist
• Qiita

9. ブラウザチェック

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

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

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