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

サイバーマンデー
Amazonプライム会員限定の大セール「サイバーマンデー」開催中!プライム会員限定の大セール

先日、Wordpress編集向けにSublime Textの開発環境を新たに作ってみました。

というのも最近は、Wordpress関係の言語しか触っておらず、その他の言語は使用することがないので、余分な設定やパッケージを一旦整理しようと思ったからです。

ということで今回は、僕がそのとき行ったSublime Text3環境の作成方法の紹介をしたいと思います。

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

Sublime Text3のダウンロード

まずは、Sublime Text 3からソフトをダウンロードします。

僕は、環境移行のしやすさから、Windows64bit版のSublime Text3ポータブル版を利用しています。

Sublime Text3ポータブル版のダウンロード

ダウンロードしたら、任意の場所において解凍してください。

回答したら、フォルダの中の「sublime_text.exe」ファイルを実行してください。

Sublime Text実行ファイル

Package Controlのインストール

解答したら、実行ファイル「sublime_text.exe」を起動します。

メニューの「View」→「Show Console」から、コンソールを開きます。

「View」→「Show Console」

コンソールを開いたら、Package Controlをインストールするために、Installation – Package ControlからPythonのインストールコードを入手します。

ページ上の「Sublime Text3」タブを選択し、そこに記載してあるパッケージのインストールコードをコピーします。

パッケージCtrlのインストールコードの取得

コードをコピーしたら、Sublime Textのコンソールにペーストし、Enterキーを押します。

パッケージコントロールコードの入力

パッケージコントロールをインストールした事により、日本語がも行えるようになりました。

日本語化するには、以下のようにすることでできます。

簡単5分!WindowsでSublime Text3ポータブル版を日本語化する方法
僕は、HTMLやCSSを書くとき、Sublime Textを利用しています。 というのも、Emmetという少ない文字入力で、素早く大量...

ただ、日本語化するには、少し手順も多くかかるし、Sublime Textに使用されているメニューの英語には、その後どう難しい言葉も使われていないので、僕は日本語化しないで利用しています。

ということで、以下では、日本語化していない状態の説明になります。

パッケージのインストール方法

これで、パッケージのインストールとなります。]

けれどその前に、パッケージのインストール方法をここでおさらいしておきたいと思います。

パッケージをインストールするには、まずメニューから「Preference → Package Control」を選択します。

パッケージコントロールの表示

すると、以下のようなドロップダウンリストが表示されるので「Package Control: Install Package」を選択します。

パッケージインストール

すると、以下のような入力ボックスが表示されるので、欲しいパッケージ名を入力して、インクリメンタル検索をし、見つかったらクリックすることで、パッケージがインストールされます。(今回はEmmetを検索した例)

パッケージを検索してインストール

おすすめのパッケージ 15個

以下では、僕がWordpressテーマ開発に利用しているパッケージを紹介するとともに、設定がある場合は設定方法も紹介します。

今回は、前回の環境から、あまり利用しなかったパッケージは省いて、「これだけは必要」と感じたもの、「新たに便利で使い始めたもの」を15個紹介したいと思います。

IMESupport

chikatoike/IMESupport · GitHub

まず、Sublime Textデフォルトの状態では、IMEを使った日本語入力の時には、以下のようなダイアログが出て日本語入力をすることになります。

日本語入力

これが結構邪魔なので、IMESupportをインストールすると、エディターに直接日本語入力をすることができます。

ConvertToUTF8

シフトJISが文字化けする

seanliang/ConvertToUTF8 · GitHub

Sublime Textは、文字コードをUTF-8以外は対応していません。

文字コードが、UTF-8以外のファイルを開くと文字化けしてしまいます。ConvertToUTF8は、UTF-8以外のファイルを開くと自動的に文字コード変更してくれ、保存するときは文字コードを元に戻して保存してくれます。

Emmet

Cheat Sheet

sergeche/emmet-sublime

少ないコード記述でHTMLやCSSをザクザク記入できるパッケージです。使い方がわからなくてもチートシートを見ながら使っているうちに、これなしではコードを書く気がなくなります。

All Autocomplete

All Autocomplete

alienhard/SublimeAllAutocomplete

ただえさえ便利なSublime Textのコード補完機能を、さらに強化するパッケージです。自分で記入した関数や変数なども補完してくれます。

AutoFileName

AutoFileName

AutoFileName – Packages – Package Control

こちらは、プロジェクトフォルダ内のファイル名などを補完してくれるパッケージです。images/のようにサブフォルダを指定しても保管してくれ、画像の場合は幅と高さまで表示&補完してくれます。

wpseek.com WordPress Developer Assistant

wpseek.com WordPress Developer Assistant

wpseek.com WordPress Developer Assistant – Packages – Package Control

WordPressで定義されている独自関数も補完してくれるパッケージです。Wordpressのテンプレートファイルなどを編集する場合に重宝します。

SublimeCodeIntel

Jump to Symbol Definition

SublimeCodeIntel

とりあえずインストールしておけば、JavaScript, Mason, XBL, XUL, RHTML, SCSS, Python, HTML, Ruby, Python3, XML, XSLT, Django, HTML5, Perl, CSS, Twig, Less, Smarty, Node.js, Tcl, TemplateToolkit, PHPの強調表示、コードの自動補完を行ってくれます。

また、関数などはコンテキストメニューから「Jump to Symbol Definition」を選択することで定義箇所に飛ぶこともできます。というか補完というより、これが便利で利用しています。

BracketHighlighter

BracketHighlighter

facelessuser/BracketHighlighter

カッコやクォート、タグなどにカーソルを置くと開始と終了を強調表示してくれるパッケージです。強調表示されることで不具合を発見し易くなります。

特に、開始・終了がわかりづらいタグなどのハイライトはありがたいです。

Goto-CSS-Declaration

Goto-CSS-Declaration

HTMLのIDやクラス名の指定箇所から、CSSのスタイルの定義場所まで飛んでくれる死ぬほど便利なパッケージ。CSSの定義場所を探す時間を大幅に削減できます。

ただ、設定が書かれているCSSファイルは開いておく必要があります。

AlignTab

AlignTab After

randy3k/AlignTab · GitHub

イコールやカンマやコロンのカラムを綺麗にそろえることのできるパッケージです。ソースコードが見やすくなります。

jQuery

jQuery

SublimeText/jQuery

jQueryのコード補完を補強するパッケージです。

Color Highlighter

Color Highlighter(背景色を塗り潰す)

Monnoroch/ColorHighlighter

CSSプロパティー値の色指定部分をクリックすると、設定されている色を視覚的に見ることができます。

デフォルトでは、クリックしないと色が大きく表示されませんが、「Preference → Package Control → Color Highlighter → Settings – User」に以下を記入することで、常に色をわかりやすく表示してくれます。

CSS Format

CSS Format

CSS Format – Packages – Package Control

CSSを整形してくれるパッケージです。CSSの縮小・展開なども行えます。Windowsに「Node.js」が入っていなくても使用できます。

TrailingSpaces

TrailingSpaces

SublimeText/TrailingSpaces

末尾にスペースが入っていると、ハイライト表示してくれます。また保存時には、自動でき削除もしてくれます。地味だけど便利。

「Preference → Package Control → TrailingSpaces → Settings – User」に以下を記入することで、保存時に、余分なスペースを削除してくれます。

ApacheConf.tmLanguage

ApacheConf.tmLanguage

colinta/ApacheConf.tmLanguage

Apache設定の強調表示を行ってくれるプラグインです。

これは特にWordpressとはすこまで関係ないのですが、サイト高速化のため、ブラウザキャッシュの設定や、リソースの圧縮などのような高速化に関する.htaccessファイルなどを書くときに見やすくなるとともに、間違っている箇所も見つけやすくなります。

Can I Use

Can I Use

Azd325/sublime-text-caniuse

CSSのプロパティーなどを右クリックしたコンテキストメニューから「Can I Use」を選択することにより、Can I use…からブラウザの対応状況を調べることができます。

テーマ、カラースキーマの設定

Sublime Textもテーマ・カラースキーマは、僕の場合黒背景のものを利用しています。

というのも、夜中に電気を消してコードを書くこともあるので、白背景のものよりは、目に優しいからです。

僕の場合、テーマ、カラースキーマは、以下のものを利用しています。

テーマは、Flatland Theme

Flatland Theme

thinkpixellab/flatland

Sublime Textのカラーテーマは、Flatlandを利用しています。

Flatlandにしているのは、よくある黒系テーマでは、背景色との関係上、文字色が見づらいものが多く、スクロールバーも見にくいからです。

黒系テーマのサイドバー

Flatlandのサイドバーは、字もスクロールバーも見やすいです。

Flatlandのサイドバー

設定は、Flatlandパッケージをインストールして、「基本設定→基本設定 – ユーザー」の設定項目に、以下のコードを追加します。

カラースキーマはMonokai

カラースキーマ

カラースキーマは、デフォルトであった「Monokai」を利用しています。

ただ、通常のままだと、コメントが、ちょっと暗くて見えづらかったので

通常のスキーマのコメント

コメント色を適当な明るめの色に変更しています。

明るめのカラースキーマに変更

変更方法は、ポータブル版のSublime Text3の場合、「インストールフォルダ/Data/Packages/User/Color Highlighter/themes」フォルダ(うまくいかない場合は「インストールフォルダ/Data/Packages/User/SublimeLinter」フォルダなど)の中にある、「Monokai.tmTheme」、「Monokai Bright.tmTheme」などを編集して利用しています。

編集部分は、「comment」と検索をすると出てきます。

「Preference → Settings – User」の設定項目に、以下のコードを追加します。(※メニューからでも設定できます。)

Sublime Textの設定

最後に、「Preference → Settings – User」に自分の好みの設定を記入します。

僕は、以下のような設定をペタッと貼り付けています。

僕は、小さい文字だと目が疲れるので、フォントサイズを大きくして、プログラミング用フォントを利用しています。

視認性の高いプログラミングフォント「Myrica」をWindows+Sublime Textで使う方法
先日、見やすいプログラムフォント「Ricty Diminished」を紹介しました。 今回は、Rictyをより進化させたMyric...

パッケージ

インストールしたパッケージは、以下になります。

まとめ

とりあえず、これだけで、今のところ何不自由なく、Wordpressテーマの開発ができています。

WordPress(PHP、JavaScript、HTML)以外の言語でもSublime Textを利用するなら、他にもインストールしたほうがいいパッケージもあるかもしれません。けれど、Wordpress関連のファイルを編集するだけなら、これで十分かと個人的には思っています。

Sublime Textは基本的に全機能を無料で使用できますが(たまに購入を促すダイアログが出るくらい)、気に入ったら購入しておくことをおすすめします。

ライセンスのFAQにも書いてあるのですが、

  • ライセンスに期限がない(Sublime Text3で購入したとしても4になっても使える)
  • 個人での利用の場合、1つのライセンスで複数環境で利用できる

こんなおいしいライセンスが70ドルとは、お買い得だと思います。今後、値段が上がる可能性もないわけじゃないので、使用して気に入った場合は、Helpメニューから購入ページに行けるのでどうぞ。PayPalで手軽に決済できます。