荒れ果てたWordPressコードを美しく整形してくれるツールまとめ

WordPressには、いくつかのプログラム言語が利用されています。

具体的には以下のような言語です。

  • PHP
  • HTML
  • CSS
  • JavaScript(jQuery)

細かなことを言えば、他にも使用されているものはありますが、ユーザーが編集するものと言えば大体はこの4つです。

今回は、これら4つの言語のコードを綺麗に整形してくれるツールの紹介です。

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

コード整形ツールとは

コード整形ツールとは、書き方の定まっていないプログラムコードなどを、記法を統一して綺麗に書き直してくれるツールです。

WordPressテーマ作成や、カスタマイズで、コードをググッてよそからコピペ編集で使うときなどに、自分に合った記法に変換して使えます。

例えば、以下のようなことを、まとめて行いたい時に使うと、手動でやるより編集時間を大幅に短縮できます。

  • コードに適切なインデントを自動で設定する
  • インデントをタブからスペースに変換する
  • インデント幅を変更する
  • 括弧の囲み方を変更する
  • コメントを取り除く
  • 空行を取り除く

主に利用する機能は、上に書いたようなものが多いですが、言語によってはさらに細かな設定を行うことができます。

PHP整形ツール

まずは、Wordpressの動作をつかさどるPHPの整形ツールです。

PHP Formatter

PHP Formatter - PHP Beautifier - PHP Pretty Printer - Home

PHP Formatter – PHP Beautifier – PHP Pretty Printer – Home

PHP整形ツール。「STYLE」からかなり細かな整形ルールを設定することができます。

PHP Beautifier

PHP Beautifier

PHP Beautifier

かなりシンプルなPHP整形ツール。括弧のスタイル、インデントスタイルを整形するのみならば、こちらが手軽

PHPコードの整形(phpCodeBeautifier)

PHPコードの整形(phpCodeBeautifier)  Magonote-tools

PHPコードの整形(phpCodeBeautifier) | Magonote-tools

こちらは、あらかじめ整形ルールが決められています。選択することはできません。

HTML整形ツール

WordPressコンテンツの構造部分となるHTMLの整形ツールです。

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

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

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

日本語で利用できるHTML整形ツールです。インデントや、属性改行などの設定を行えます。

Online JavaScript beautifier

Online JavaScript beautifier

Online JavaScript beautifier

HTMLとJavaScriptを綺麗に整形してくれるツールです。インデントレベル、改行文字数など細かな整形ルールを設定できます。

Dirty Markup

Dirty Markup · Tidy up your HTML, CSS, and JavaScript code

Dirty Markup · Tidy up your HTML, CSS, and JavaScript code

HTML、CSS、JavaScriptを整形できるツールです。HTMLは、インデントや文字数を設定できます。

HTML Tidy Online

HTML Tidy Online

HTML Tidy Online

かなり細かなHTMLの整形ルールを設定できるとともに、不適切な書き方なども指摘してくれます。

Free Online HTML Formatter

Free Online HTML Formatter - FreeFormatter.com

Free Online HTML Formatter – FreeFormatter.com

インデントレベルを設定することができます。

Online Code Beautifier

Online Code Beautifier for JavaScript, HTML, CSS and PHP

Online Code Beautifier for JavaScript, HTML, CSS and PHP

こちらはJavaScriptで素早く変換。PHP、CSS、JavaScriptまじりのHTMLを整形してくれます。

Best Online HTML Viewer

Best Online HTML Viewer,Editor,Beautify,Minify,Formatter,Test Output

Best Online HTML Viewer,Editor,Beautify,Minify,Formatter,Test Output

HTMLの整形もできるけど、コードの縮小も行えます。

CSS整形ツール

WordPressのスタイル担当、CSSの整形ツールです。

ProCSSor

ProCSSor - Advanced CSS Prettifier

ProCSSor – Advanced CSS Prettifier

CSSの書き方のかなり細かな部分まで設定することができます。

詳しい使い方などは、以前書きました。

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

Code Beautifier

Code Beautifier- CSS Formatter and Optimiser

Code Beautifier: CSS Formatter and Optimiser

こちらも細かな記法の設定が可能です。

Format CSS Code

Format CSS Code - CSS Portal

Format CSS Code – CSS Portal

こちらもいろいろ設定可能。

Dirty Markup

Dirty Markup · Tidy up your HTML, CSS, and JavaScript code

Dirty Markup · Tidy up your HTML, CSS, and JavaScript code

先程、HTMLの方でも紹介したけど、CSSも整形できます。インデントや改行文字数を設定できます。1画面で、HTML、CSS、JavaScriptを手軽に整形できるのが魅力。

Best Online CSS

Best Online CSS Viewer,Editor,Beautifier-Formatter,Validator,Minifier,Compress

Best Online CSS Viewer,Editor,Beautifier/Formatter,Validator,Minifier,Compress

CSSの整形以外にも縮小化ができます。

JavaScript整形ツール

WordPressのブラウザ側での動作担当、JavaScriptの整形ツールです。

Javascript Beautifier

Javascript Beautifier and Formatter - Dan's Tools

Javascript Beautifier and Formatter – Dan’s Tools

JavaScriptで動作するので、ソースコードを動的に整形することができます。オプションも豊富で、インデント、トークン間の許容する改行数、改行文字数、括弧の囲み方、その他いろいろな設定が行えます。

Online JavaScript beautifier

Online JavaScript beautifier

Online JavaScript beautifier

こちらもJavaScriptで動的に動作を見ながら整形を行うことができます。設定も豊富です。

Dirty Markup

Dirty Markup · Tidy up your HTML, CSS, and JavaScript code

Dirty Markup · Tidy up your HTML, CSS, and JavaScript code

多少設定項目は少ないですが、HTML、CSS、JavaScriptを整形することができるので、ブックマーク管理が楽です。

Best Online JavaScript Tool to View

Best Online JavaScript Tool to View,Beautify,Formatter,Minify,Obfuscator Javascript Code

Best Online JavaScript Tool to View,Beautify,Formatter,Minify,Obfuscator Javascript Code

JavaScriptの整形と縮小化。細かな設定はできません。

まとめ

「コードなんて自分しか読まないので読めればそれでいい」と言われてしまえば、そうなんです。

けど、コードを綺麗にしていると気持ちが良いですし、見やすいので、なにより作業効率が上がります。とはいえ、僕も100%自分の記法を守って書けているわけではないです。

ただ、「分らないところをググって出できたコードがインデントされていない」なんて時には、インデントさせるだけに使用しても、これらのツールは十分便利です。

ファイル内のすべてのコードを整形するなんて時は、実行前に必ずバックアップを取ることをお勧めします。