WordPressテーマ作成に便利だったツールまとめ

先日、WordPressテーマ「Cocoon」を作成しました。

SEO・高速化・モバイルファースト対応済みの無料Wordpressテーマ

これが何とか作れたのは、コーディングに関する面倒事をほぼほぼツールに任せることができたからです。

正直、自動化出来るところはツールなどに任せられないと、やってられないくらい、もはや必需品です。

というわけで、以下は「僕がWordpress開発をする上で大いに役立ってくれたツール・サービス集」です。

常識的なものもあるかもしれないけど、良い機会なので一度まとめておこうと思います。

スポンサーリンク
レクタングル(大)広告

エディター

料理人にとっての包丁ばりに、良いエディターはプログラムをする上で重要。

Sublime Text

Sublime Text is a sophisticated text editor for code, markup and prose. You'll love the slick user interface, extraordinary features and amazing performance.

こういったエディターのオートコンプリート(入力補完)機能がなければ、正直コードを書く気すら起きません。まず関数名が覚えらんない。

入力感も良いし、Grep検索も速く見やすいです。プラグイン(パッケージ)が豊富。有料だけど、ほぼほぼ無料で使えます(※僕はライセンスを購入しています)。

参考 WordPress開発向けSublime Text3環境の構築方法まとめ

Visual Studio Code

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.  Visual Studio Code is free and availa...

こちらは無料のエディター。

VS Codeの方に、Sublime Textと同等のプラグインがあれば、迷わずこっちを使うくらい、サクサク軽快なエディターです。

今回は、Sublime Textはコード編集用、VS CodeはWordPressコアファイル参照用として利用しました。1つのエディターで両方ともやっちゃうと、わちゃわちゃになってしまうので、エディターによってそれぞれ用途を分けています。

プログラミング補助

プログラミングをする上で、面倒事を代わりにやってくれるツール・サービス。

Koala

Koala is a gui for Less, Sass, Compass and CoffeeScript. Koala can run in windows, mac, and linux.

無料のSCSS、Sass、LESSコンパイラ。

SCSSを使うだけでもかなり楽になります。僕は、SCSSを用いて1つのソースコードで、通常用、AMP用、管理画面用と3種のCSSをコンパイルさせました。それにより、ほぼほぼ重複コードを書かずに済みました。

加えてKoalaは、コマンド操作ではなくGUIでSCSS等からCSSファイルを自動生成してくれます。やっぱり、GUIだと直感的に設定できるのが利点。

ファイルの更新状態を自動で監視して、勝手にコンパイルもしてくれます。なので、コーディング後、操作しなくても勝手にCSSが生成されているのは楽。操作が必要だと、つい忘れちゃうので。

参考 KoalaというSCSS(SASS)開発補助ツールを使ってWordpressテーマの開発効率を手軽にアップする方法

codic

codicは、プログラマーのためのネーミング辞書です。新しいcodicでは、翻訳エンジンを搭載しネーミングをジェネレートできるようになりました。

日本語から良い英語の変数名や関数名を提案してくれます。

プログラミングでネーミングに迷ったらとりあえず、このツールに聞いてみるといいかも。

参考 関数や変数のネーミングに悩んだら「codic」に日本語名を入力するとある程度解決するかも

参考 ネーミング時にナイスな英語関数名を一発生成してくれるSublime Text拡張「SublimeCodic」の使い方

参考 Sublime Textでネーミングに悩んだ時などに!codicで英語関数名を手軽に取得する方法

正規表現チェッカー

PHP: preg_match()とJavaScript: match()による正規表現チェッカー

正規表現のトライ&エラー用。

エディターで書いてブラウザで動作確認しても良いけど、それをやっている間にこのツールだと3、4回は試せる。

正規表現チェックツールは、いろいろ使ってみたけど、結局これが一番使いやすかった。

バージョン管理

やはり、変更状態を管理できないと、後々面倒。

Sourcetree

Sourcetree は、Windows および Mac 向けの無料の Mercurial および Git クライアントです。ご使用の Hg および Git リポジトリにグラフィカルインターフェイスを提供します。

GUIでGit管理が出来るバージョン管理ツール。

プロは、コマンド操作した方が速いのかもしれないけど、視覚的に状態を管理できるのは楽。

参考 GitツールSourceTreeでローカルリポジトリを管理する方法(コミット編)

GitHub

GitHub is where people build software. More than 27 million people use GitHub to discover, fork, and contribute to over 80 million projects.

ソースをローカルだけに置いておくには、怖いので。バックアップ代わりも兼ねて。

非公開リポジトリを作成するには、月額700円だった。

参考 GitツールSourceTreeでリモートリポジトリを操作する方法

BitBucket

Collaborate on code with inline comments and pull requests. Manage and share your Git repositories to build and ship software, as a team.

こちらは、非公開リポジトリも無料で使えるGitホスティングサービス。

ローカル開発環境

WordPress開発をするならば、ローカル環境がないと始まらない。

Local by Flywheel

Local by Flywheel is a free local development environment designed to simplify the workflow of WordPress developers and designers. Download it for free today!

手軽に複数のローカル環境を作成できる。しかもWindowsでも速い。サーバーソフトやPHPバージョンも変更可能。

参考 WordPressローカル環境「Local by Flywheel」が有能ツールだったので良いとこ言いたい

Bitnami

With over 1 million apps deployed per month, Bitnami makes it incredibly easy to deploy apps with native installers, as virtual machines, docker containers or i...

Local by Flywheelが利用できない環境の場合は、これがおすすめ。

参考 PCにWordpressローカル環境を「Bitnami」で作成する方法

SEOチェック

SEOは、目視でソースコード確認なんかしていたら、日が暮れてしまう。

PageSpeed Insights

ページ表示スピードチェック用。

利用するなら、外部リソース使用を除外した、外部リソース除外版を使用した方がより正確かも。

GTmetrix

GTmetrix is a free tool that analyzes your page's speed performance. Using PageSpeed and YSlow, GTmetrix generates scores for your pages and offers actionable ...

ページ表示スピードについてより詳しく見たい場合は。

ただし、Google AdSense等の外部リソースの影響もそのまま結果に出てしまうため、テーマ自体のパフォーマンスを見るには、外的要因を排除して調べる必要があります。

モバイルフレンドリーテスト

HTML上にパーツを追加する毎に「これはモバイルフレンドリー的なデザインか?」と調べるのに便利。

目視だと面倒だし、曖昧になってしまうので。

構造化データテストツール

構造化データにエラーや警告がないか調べるツール。どういった、構造化データが使われているかもリスト化してくれます。

構造化データは、仕様がややこしいので、任せられるところは、ツール任せ。

HTML5バリデーター

HTML5マークアップにおかしな部分がないか、手軽にチェック。

タグの閉じ忘れなども手軽にチェック可能です。

HTML 5 Outliner

ページのアウトライン構造を手軽にチェック。

SEOチェキ

無料SEOツール「SEOチェキ!」(せおちぇき!)はSEOに役立つさまざまな情報を、調査することのできるツールです

メタディスクリプション、メタキーワードがどのようにページ上で出力されているか調べるのが手軽。

あと、サイトが使用しているサーバーも分かって便利。他サイトのサーバー環境チェックに。

AMPチェック

AMPは仕様がややこしすぎるので目視でチェックなんて不可能。

AMPテスト

日本語対応のAMPテスト。

AMPページをGoogleに送信できたり、構造化データもチェックできる。ただし、解析時間がそれなりにかかるので、頻繁に使うのはちょっと億劫。

The AMP Validator

AMP HTML Project Web Validator. Tests Accelerated Mobile Pages for valid markup.

こちらは、URLを入力して結果(エラーや警告等)を表示してくれるシンプルなAMPバリデーターです。

機能がシンプルなので、結果が出るのも速いです。ただし、表示されるエラーメッセージ等は、英語になります。

AMPBench

こちらは、軽い上に詳細なデータをチェックすることが出来るAMPチェックツールです。

The AMP Validator構造化データテストツールを同時にチェックすることが可能なので、何回も調べる手間が省けます。ただし、英語ツールです。

レスポンシブチエック

レスポンシブチェックは、ブラウザーのデベロッパーツールでもできるけど、一気に様々なデバイスサイズをチェックしたい時などに。

Sizzy

A tool for developing responsive websites crazy-fast. Preview changes on multiple devices instantly.

暗色系の背景に、iPhone、iPad、Nexus、Galaxy端末サイズでレスポンシブチェックができて見やすい。

Responsinator

The Responsinator is designed to test responsive websites on different device resolutions

こちらは筐体もモックアップ風に表示してくれるチェックツール。

Multi Screen Resolution Test

Multi screen resolution Test- Test your website at different device resolutions i.e Mobile, Tablet, Desktop, Television.Check how your site looks on different d...

こちらは端末1つ1つを念入りにチェックするのに向いたツールです。

デザイン

見た目に関するツール。

色見本と配色サイト

とりあえず色で迷ったら。

WEB色見本 原色大辞典

色の名前とカラーコードが一目でわかるWEB色見本

もっと簡易的な色見本でよければ。色のリンク先から様々なパターンのカラーコード取得も可能。

まとめ

最近主にWordpress開発で利用しているツール・サービスはこんな感じです。

面倒なことを、これらのツールに任せることが出来なければ、正直「何か作ろう」という気さえおきないような気がします。