WPの

～ワードプレス関連～

WordPressで使うSublimeTextの初期設定と最適なパッケージ

      2020/04/25

WordPressの編集に最適なエディタSublimeText

ワードプレスを使うには、レンタルサーバーの簡単インストールが出来れば、他に何もいりません。
新しいテーマやプラグインも管理画面からクリックでインストールでき、簡単なカスタマイズも外観から変更することが出来ます。
ですが、より柔軟なカスタマイズをしたい場合は、スタイルシートやテンプレートファイルを編集する為のプログラミング用テキストエディタが必要になります。

一番有名なエディタは、AdobeのDreamweaverです。有料で使いやすいエディタですが、少し重いのが難点です。私も長い間、 Dreamweaver を使っていましたが、違うエディタに乗り換えました。

sublimetext コーディングエディタ

そのエディタの名前は、 SublimeText ！！
2 と 3 がありますが、私が使うのは、 SublimeText3です。
ちまたでは、「恋するエディタ」と呼ばれています。
試しにインストールしてみたときは、
「誰が考えたキャッチコピーか知らんが、何言って・・・・・なにこれすごい好き。」
秒殺でした。

初期設定が少し時間がかかりますが、すごくオススメです。（WEB開発の効率が上がります。）

自分好みに機能をカスタマイズできる点と、軽さが気に入っています。

ATOM コーディングエディタ

最近、 ATOM も人気があるみたいで、浮気性なので使ってみました。デザインが素敵で SublimeText と同じく、パッケージをインストールすると機能を拡張できますが、動作が重たく、導入は控えました。

私のパソコンは、ハイスペックじゃないので、ADOBEのイラストレーターやフォトショップ、ブラウザを立ち上げている状態で、ATOMを起動すると悲鳴を上げてしまいました。

ATOMも負けず劣らずの高性能エディタなので、好みの問題だと思います。

ATOM公式ページ：http://blog.atom.io/

SublimeText のメリット

初期状態でのメリット

以下のメリットは、パッケージで拡張していない初期状態の場合です。

いいね

  • 動作が軽い。
  • パッケージで機能を拡張できる。
  • 保存していないファイルの復元。めちゃ便利！(保存しないまま、エディタを閉じても前回の状態で起動する)
  • マルチカーソル(複数のカーソルを表示させ、一括置換と一括入力)
  • ミニマップ(ファイルの全体像が右に表示され、移動が楽。)
  • ファイル内の検索とディレクトリ内の検索

個人的には、前回の状態を復元して起動するのは、すごく助かります。
選択した文字列と一致する文字を Ctrl + D で複数選択でき、一括で編集できるのも、かなり使います。

パッケージで拡張時のメリット

以下のメリットは、パッケージで拡張した場合（オススメのパッケージのみ）。

  • 日本語表示
  • HTML,PHP,javascript,jQueryの入力補助
  • WordPressの入力補助　コレ重要！
  • SFTP接続
  • 開始タグと終了タグの強調表示
  • 末尾のスペースをハイライト表示

WordPress の入力補助は、テンプレートファイルの編集で、かなり役に立ちます。開始タグと終了タグの強調表示も良いです。(結構、タグやカッコがどこで閉じてるのか分からなくなることもあるので非常に便利です。)

SublimeText3のインストール

sublimetext3

説明しましたが、まずは触ってみてください。
公式のダウンロード先：http://www.sublimetext.com/3

パソコンのOSに合わせたファイルをダウンロードして、インストールします。

オススメのパッケージ

パッケージコントロールをインストールするためのコードをコピー

まず、パッケージをインストールするためには、
Package Controlをインストールする必要があります。
以下のページから、パッケージコントロールをインストールするためのコードをコピーします。
Package Control：https://packagecontrol.io/installation

package controll

サブライムテキストのメニューから、「View」→「Show Console」で入力欄が表示されるので、コピーしたコードを貼りつけたら、完了です。

パッケージのインストール手順は、まずコマンドパレットを開きます。

コマンドパレットへのショートカットは、Ctrl + Shift + P
または、「Tools」→「Command palette」を選択し、「Install」と入力。

package install

「Package Controll : Install Package」が表示されるので選択。
出てきた入力欄にインストールしたいパッケージ名を入力して、選択するとインストールできます。

package install

日本語化

japanize

メニューが日本語になります。

ファイル操作

ConvertToUTF8

デフォルトで扱える文字コードはUTF-8のみです。Shift-JISなどの日本語のファイルを文字化けせずにUTF-8に変換してくれます。文字化け対策に。

SFTP

名前の通り、SFTP/FTP接続でサーバーにアップロード、ダウンロードの操作が可能になります。

コード補完（オートコンプリート）

All Autocomplete

標準のコード補完機能を、さらに強化します。

SublimeCodeIntel

JavaScript, HTML, HTML5, CSS, PHP などの強調表示、コードの自動補完を行ってくれます。

HTML5

HTML5のコード補完を補強します。

jQuery

jQueryのコード補完を補強します。

phpcs

phpのコード補完を補強します。

wpseek.com WordPress Developer Assistant

WordPressで定義されている独自関数も補完してくれるパッケージ。
wordpress

入力補助

IMESupport

日本語入力をインラインにします。

IMESupport
IMESupport

AutoFileName

プロジェクトフォルダ内のファイル名などを補完してくれます。画像URLやリンク先URLを指定する時に便利です。
autofilename

TrailingSpaces

末尾にスペースが入っていると、ハイライト表示してくれます。

Tag

HTML閉じタグのスラッシュまで入力すると、あとは自動で入力してくれます。

BracketHighlighter

カッコやコーテーション、タグなどにカーソルを置くと開始と終了を強調表示してくれます。ネストして階層が深くなっても終了位置がすぐにわかります。
brackethighlighter

Color Highlighter

CSSの色指定部分をクリックすると、実際にカラーで確認できます。

Goto-CSS-Declaration

HTMLのIDやクラス名を右クリックして、「Go to CSS Declaration」を選択すると、CSSの定義場所まで飛びます。ファイルを開いている必要があります。

他にも、便利なパッケージは多数あります。パッケージの中には、Node.jsがないと動作しないもの（構文チェック系）など、単独で動作しないパッケージもあるので、それらは、オススメから外してあります。

人気のパッケージを探すには

オススメのパッケージは、ワードプレスでテンプレートファイル編集を行う際に、便利だと思うものを揃えてみました。

いいね

パッケージコントロールの公式ページから、新しい順、トレンド順、人気順、カテゴリー順で確認できます。

パッケージコントロール公式ページ：https://packagecontrol.io

人気順の上位にあるパッケージは、どれも間違いない性能を持っています。チェックしてみて下さい。

ユーザー基本設定のカスタマイズ

参考までに、私の基本設定です。

メニューの「基本設定」→「基本設定-ユーザ」で設定をカスタマイズできます。

以下のコードを「基本設定-ユーザ」にコピペ、保存で反映されます。

{
	"color_scheme": "Packages/User/iPlastic (SL).tmTheme",
	"draw_white_space": "all",
	"font_size": 13,
	"highlight_line": true,
	"ignored_packages":
	[fusion_builder_container hundred_percent="yes" overflow="visible"][fusion_builder_row][fusion_builder_column type="1_1" background_position="left top" background_color="" border_size="" border_color="" border_style="solid" spacing="yes" background_image="" background_repeat="no-repeat" padding="" margin_top="0px" margin_bottom="0px" class="" id="" animation_type="" animation_speed="0.3" animation_direction="left" hide_on_mobile="no" center_content="no" min_height="none"][
		"Vintage",
		"BracketHighlighter"
	],
	"line_padding_top": 5,
	"tab_size": 4,
	"trim_trailing_white_space_on_save": true,
	"word_wrap": true
}

以上、WordPress で使う SublimeText の初期設定と最適なパッケージ でした。

[/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]

 - WordPress, テンプレートファイル , , , , , ,