37
38

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2016-07-05

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

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

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

JavaScript、jQueryプラグイン

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

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

6. ダミー

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

  • PlaceIMG : DLして利用可能。
  • PLACEHOLD.IT : グレーベースに幅と高さの数字の文字
  • coverr : 動画をヘッダーに使いたい時

以下はテキスト

7. OGPとかSEO

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

8. 過去に書いたコード

9. ブラウザチェック

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

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

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

37
38
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
37
38

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?