いかに素早く、車輪の再発明をせず、毎回の手順に労力を掛けないか。
人的コストもばかにならないよってお話です。
またの名を「オレのブクマ披露」
2018.3.27 update
0. 事前準備
開発機はMac。コマンド叩きまくるのといろんな便利ツール使うので
1. ローカルサーバーの用意
VCCW 使いますが、何個もローカルサーバー作るので scaffold-vccw の方を使う。
詳しくは上記リンク参照。
2. テーマの準備
毎回 _s をDLするのが面倒なので、 grunt-init 対応の Iemoto を使う。
詳しい手順は「WordPressテーマ用の grunt-init テンプレート Iemoto を使ったテーマ作成」を参考に。
なお、個人的にフォークした Iemoto の dc_sass ブランチは、いつもSassで手直ししてる手間をなくす用にちょっと改変してあり、実際にはこっちを使ってます。
（_s と乖離し過ぎるとそれはそれで問題が起きそうなため）
_s でいいわーという場合はWP CLI でコマンド打てばOK。
$ wp scaffold _s <slug>
3. プラグインの準備
WP CLI でコマンド打てばOK。
$ wp scaffold plugin <slug>
4. テーマとプラグインの構築
コードをテーマとプラグインどちらで実装するかは「WordPressのコードスニペットを書くのは functions.php か自作プラグインか」を参考に。
また、WordPress Code Reference でそのコードの関数（フィルターフックやアクションフック）が妥当であるか確認する癖をつける。ググったコードそのままは危険。
追加でSNSボタン類（公式ボタン、オリジナルデザインのボタン）の実装は、そこそこの頻度でSNS側がコードのアップデートを行うので、都度SNSのドキュメントを見て確認する（過去自分で構築したコードは参考にしない）。
5. Webフォント、CSS、 JavaScript
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 : グレーベースに幅と高さの数字の文字
- coverr : 動画をヘッダーに使いたい時
以下はテキスト
- Theme Unit Test : テーマユニットテスト用の投稿データなど。VCCWなら取り込んだ上でサイト作れる。
- すぐ使えるダミーテキスト - 日本語 Lorem ipsum : 追加で日本語のダミーテキストが欲しかった場合。
7. OGPとかSEO
プラグイン使ったほうが楽。本音として製作者側がそこで消耗する必要が無いと思う。細かい部分はサイト運営者に任せるべき。
とは言えOGPのデフォルト画像は用意してと言われたりするので、ドキュメントをチェックするのは必要でしょう。
8. 過去に書いたコード
9. ブラウザチェック
Windows + IE環境必要だよね。他スマートフォンのネイティブ環境が必要な時。
- Browser Stack : ブラウザベースで複数環境を用意できる。スマートフォン（iOS、Android）もある。アドオンを入れればローカルサーバーのサイトも確認できる。超絶楽。
- Microsoft Edge（旧modern.IE） : VirtualBox用のマシンイメージがダウンロードできる。どうしても Windows のネイティブ環境でアプリケーションのインストールが必要なときなど。
なお、Browser Stackは有料だが、オープンソースプロジェクトの開発者は申請して許可が出れば無料になる。