WordPressテーマを作成するのに役立つサイト・ツール・サービス37個まとめ

先日、Simplicityというテーマを作りました。

その作成の過程において、いろいろなツールやサービスを利用しました。そのおかげで、かなり作業がはかどりました。

それで今回は、テーマ作成開始時から現在まで、「テーマ作成のために用いたサイトで便利だったもの」や「他のものを使ったので使いはしなかったけど便利そうなサイト」のまとめです。

もちろんテーマのカスタマイズに使うにも便利なものたちばかりです。

photo by Sean MacEntee

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

コード編集

Instant WordPress

Instant WordPress

Instant WordPress

5分とかからずにWordpressローカル環境構築することができます。やはりテーマをいじるならローカル環境です。

詳しくは以下を参照してください。

Windowsに「Instant WordPress」で超簡単にWordpressローカル環境を構築する方法

Sublime Text

Sublime Text- The text editor you'll fall in love with

Sublime Text: The text editor you’ll fall in love with

Emmetを利用して少ない文字数で、大量のコードを書くために使用。CSSを書くには、これがないと書く気が起きない。

Emmetチートシート

Cheat Sheet

Emmet Cheat Sheet

Emmetは、使いこなせれば、HTML&CSSの編集に絶大な威力を発揮しますが、短縮コードを覚えていないと意味がありません。当然僕は、すぐ忘れてしまうので、こういったカンニングペーパーに頼ることになります。

HTML・CSSクイックリファレンス

HTMLクイックリファレンス

HTMLクイックリファレンス

HTMLやCSSの使い方に迷ったらとりあえず調べる。

color-sample.com

色見本と配色サイト - color-sample.com

色見本と配色サイト – color-sample.com

テーマに使用する色選びに迷ったら。

日本語版 WordPress チートシート

日本語版 WordPress チートシート  Webクリエイターボックス

日本語版 WordPress チートシート

昨日書いたコードすらすぐに忘れてしまう僕には必需品。とりあえずこれだけ押さえておけば、テーマの70%は作れそう。その他に、WordPressテンプレートタグ チートシートなどもある。

WordPress日本語フォーラム

WordPress › フォーラム » テーマ

WordPress › フォーラム » テーマ

テーマ作成に行き詰まったら、もちろん質問してもOKなんだけど、フォーラム内をサイト内検索すると、大抵の解決策は出てきます。ブラウザから、手軽にサイト内検索するには、以下のブラウザ拡張を使用すると簡単にできます。

ChromeやFirefoxで手軽にGoogleのサイト内検索をする方法

HTML整形ツール

HTML整形ツール(プチ・デバッグ機能付き)

HTML整形ツール(プチ・デバッグ機能付き)

インデントの崩れた、HTMLを綺麗に成形したいときに使用。

ProCSSor(CSS整形ツール)

ProCSSor - Advanced CSS Prettifier

ProCSSor – Advanced CSS Prettifier

スタイルシートを、好みの書式で整形することができるツールです。

CSS整形ツール「ProCSSor」が便利、CSS記法を綺麗に統一し最適化してくれる

HTML特殊文字

HTML-特殊文字

HTML-特殊文字

HTML特殊文字もすぐに忘れるのでカンニング。

正規表現チェック

preg_match()正規表現チェッカー

preg_match()正規表現チェッカー

正規表現をコードに書く前に、手軽に動作チェック。

テスト・テンプレートチェック

Firebug

Firebug

Firebug

HTMLの要素チェックや、スタイルのチェックなどに。Chromeなら開発者ツール。

WordPressテストデータ日本語版

WordPress テストデータ日本語版  め組の小ネタ

WordPress テストデータ日本語版

いろいろなHTMLタグの表示チェックなどに。利用すると、わざわざチェック用の投稿をする手間を大幅に省けます。Wordpressを利用する時に想定される使い方に対応した、記事がインポートするだけで作成できます。テーマをテストするには絶対に入れたい。

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

Google Structured Data Testing Tool

Google Structured Data Testing Tool

URLを入力するだけで、構造化データマークアップを手軽にチェックすることができます。

W3C HTML5 バリデーション

The W3C Markup Validation Service

The W3C Markup Validation Service

HTML5の記述におかしなところがないか、チェックしてくれます。

HTML5 Outliner

HTML5 Outliner - Chrome ウェブストア

HTML5 Outliner

ChromeのHTML5アウトラインを手軽にチェックできる拡張。WEBツールとして利用できるHTML 5 Outlinerもあります。

テーマバリデーションサービス

The Web Template Verification Service

The Web Template Verification Service

WordPressテーマ的におかしなところがないかチェックする時に使用。

Theme Check

WordPress › Theme Check « WordPress Plugins

WordPress › Theme Check « WordPress Plugins

WordPress管理画面から、プラグインでテーマをチェックすることができます。すべてを修正するのは難しいけど警告部分くらいは直したい。

AntiVirus

WordPress › AntiVirus « WordPress Plugins

WordPress › AntiVirus « WordPress Plugins

テーマのウイルスチェック。一応チェック。

noindex、nofollowのチェック

NoFollow - Chrome ウェブストア

NoFollow

noindex、nofollow、nofollowリンクなどをチェックできるChrome拡張。FirefoxだとSeerobotsアドオンが便利。

サイトのnoindex、nofollowを手軽にチェックできるChrome拡張&Firefoxアドオン

Xdomain(エックスドメイン)

ドメイン取得&無料レンタルサーバー Xdomain(エックスドメイン)

ドメイン取得&無料レンタルサーバー Xdomain(エックスドメイン)

無料でWordpressをインストールして使用できるサーバー。ローカルでテーマを開発していても、サーバーにアップロードしたときにエラーが出ることがあるので、サーバー上でもチェック。

PageSpeed Insights

PageSpeed Insights

PageSpeed Insights

テーマで使用されている、画像圧縮をチェックしたり、スマホのユーザーエクスペリエンスなどのチェックに。

GTmetrix

GTmetrix  Website Speed and Performance Optimization

GTmetrix | Website Speed and Performance Optimization

タイムライン機能などで読み込みに時間のかかっているもののチェックに。

レスポンシブチェック

Responsive Checker

Responsive Checker | レスポンシブデザイン検証サービス

Responsive Checker | レスポンシブデザイン検証サービス

いろいろな端末の状態から、レスポンシブデザインをチェックすることができます。

Responsive Design Testing

Responsive Design Testing

Responsive Design Testing

240~1024ピクセル幅のサイズを一気にチェックすることができます。

Demonstrating Responsive Design

Demonstrating Responsive Design

Demonstrating Responsive Design

いろんな端末を動的にチェックすることができます。

SNS

Twitter Card validator

Card Validator  Twitter Developers

Card Validator | Twitter Developers

Twitterカードの仕様を見たり、HTMLタグのチェックに。

Facebookデバッガー

Debugger

Debugger

Facebook OGP用のタグが正しく入力されているかなどのチェックに。

WEBアイコフォント

Font Awesome

Font Awesome, the iconic font and CSS toolkit

Font Awesome, the iconic font and CSS toolkit

画像のアイコンを使うよりも、リクエスト数は減るし、軽くて表示も早いし、手軽だし、色も変えられるしで、テーマにワンポイント置きたい時に便利。

Genericons

Genericons - a free, GPL, flexible icon font for blogs!

Genericons – a free, GPL, flexible icon font for blogs!

個々のアイコンは、実際にテーマで使ったわけではないけど、こちらもよさそう。

Foundation Icon Fonts 3

Foundation Icon Fonts 3  Playground from ZURB

Foundation Icon Fonts 3 | Playground from ZURB

こちらも良さげなアイコンフォント。

IcoMoon

IcoMoon App - Icon Font & SVG Generator

IcoMoon App – Icon Font & SVG Generator

自作のアイコンフォント作成に。Iconvau.ltでも手軽に作成できます。

Perfect Icons

Perfect Icons - A social icon creation tool.

Perfect Icons – A social icon creation tool.

シェア用のアイコンボタンをアイコンフォントで手軽に作れる。

画像編集関係

TinyPNG

TinyPNG – Compress PNG images while preserving transparency

TinyPNG – Compress PNG images while preserving transparency

テーマに使用するPNG画像を圧縮するために使用。ドラッグ&ドロップするだけで画像を圧縮することができます。

画像によってはサイズを50%以上削減できるものもあります。テーマに使用するPNG画像は、少しでも、サーバーの負担を減らせるようこのサービスで圧縮。

JPEG & PNG Image Compression

JPEG & PNG Image Compression - Media4x

JPEG & PNG Image Compression – Media4x

こちらはJPEG画像を圧縮するために使用しました。

Favicon Maker

Favicon Maker

Favicon Maker

画像から手軽にファビコンを作成。

PNGify Me

PNGify Me  Icon Creator, Generate and Download Icons, Mobile Icons

PNGify Me | Icon Creator, Generate and Download Icons, Mobile Icons

2000種類以上のPNGアイコンをカスタマイズしてダウンロードできる。

画像など

今回のテーマでは、画像はほとんど使用しなかったけど、画像を使う場合は。

著作権表記無しで使用できる高解像度の画像

クレジット不要なので、手軽に使えます。

※利用、改変は、サイトのライセンスを必ずチェックしてください。

アイコンなど

画像のアイコンを探すなら。

まとめ

ここで紹介したものを利用することによって、作業を楽に進めることができました。

テーマ作成は、少しコードを書いてはチェック、書いてはチェックの繰り返しです。目視でソースをチェックしていると、いつまでたっても終わらないので、いろいろ使うことによってかなりチェック時間を短縮することができました。