BracketsでWordPress開発をしようと思ったら登録したいPHPスニペットまとめ

数週間前から、Adobeの無料エディターBracketsを使い始めました。

無料エディター「Brackets」にも恋に落ちた

先日から、Adobe提供の無料開発エディター「Brackets」を使っています。僕はこれまで、Wordpressテーマの開発...

nelog.jp

2016-10-07 18:13

でこれが、無料なのにとても良いエディターで、すぐに気に入ってしまいました。

ただ、Sublime Textなどにはあるのに、Bracketsにはない機能もあるので、拡張などをいろいろインストールして機能を補強しました。

WordPress開発が捗りそうなBracketsおすすめ拡張40個まとめ

前回、無料エディター「Brackets」の素晴らしいデフォルト機能について書きました。 Bracketsは、デフォルト...

nelog.jp

2017-12-10 20:24

で、デフォルトでなかった機能として、PHPのスニペット機能もあったのですが、それはBrackets Snippets (by edc)という拡張を使って実現することにしました。

ただ、拡張インストールしても、インストール直後ではPHPのスニペットを使える状態にはなっていません。

なので今回は、Bracketsで「Wordpressカスタマイズでよく使うPHPのスニペットを登録する方法」などを紹介したいと思います。

photo by Luca Mascaro

Brackets Snippetsのインストール

まずは「拡張機能マネージャー」から「Brackets Snippets (by edc)」をインストールします。

インストールしたら、拡張バーに「Brackets Snippets」ボタンが表示されます。

拡張ボタンを押すと「Brackets Snippets」エリアが表示されるので、そこからスニペットの登録や管理を行います。

PHPでのスニペット登録

では、Wordpress向けに、よく使うPHPのスニペットを登録する方法を紹介します。

HTML、CSSに関しては、Emmetがあれば十分ですし、JavaScriptのスニペットは、Brackets Snippetsがインストールされた時点で、登録されているので割愛します。

PHPのスニペットを手軽に登録するには、Brackets Snippets起動時パネル上方にある「Library」ボタンをクリックします。

次に、PHPライブラリを開きます。

あとは、スニペットごとに「＋」ボタンがあるので、登録したいスニペットでボタンを押して登録していきます。

僕が登録し、自分のコーディングスタイルに変更したスニペットは以下です。

以下で紹介するものは、Sublime Textのスニペット機能でも利用できると思います。ただ、Sublime Textには、あらかじめ登録されているので、特に登録する必要もないかと思います。

if文

言わずもがな、if条件分岐です。

トリガー：if

if ( ${1:condition} ){
  ${2}
}

if ( ${1:condition} ){

${2}

}

if else 文

if else条件分岐です。

トリガー：ifelse

if ( ${1:condition} ){
  ${2}
} else {
  ${3}
}

if ( ${1:condition} ){

${2}

} else {

${3}

}

switch文

条件分岐が多い場合は。

トリガー：switch

switch ( $${1:var} ){
  case ${2:'value'}:
    ${3}
    break;
  default:
    break;
}

switch ( $${1:var} ){

case ${2:'value'}:

${3}

break;

default:

break;

}

関数

functions.phpに関数を書くときなどに。

トリガー：fu

${1:public} function ${2:FunctionName} ($${3:value} = ${4:''}){
  ${5}
}

${1:public} function ${2:FunctionName} ($${3:value} = ${4:''}){

${5}

}

デバッグ用

変数内の状態を出力したいときに。

トリガー：vardump

var_dump( $${1:var} );

1	var_dump( $${1:var} );

コメント用

ちょっと目立つコメントを挟みたい時に。

トリガー：com

////////////////////////////////////////
// ${1:comment}
////////////////////////////////////////
${2}

////////////////////////////////////////

// ${1:comment}

////////////////////////////////////////

${2}

登録完了

登録は、これだけで十分かと思います。

その他の関数などは、Brackets WordPress Hintや、PHP SmartHints拡張を使えば補完してくれるので特に不要かなと。

また、for、whileなどのループ文もいろいろあるけど、Wordpressカスタマイズで、まず使わないんですよね。テーマを作成している僕でも、もう何ヶ月もループ文は使用していないので、特に必要ないかと思います。その程度の頻度なら、書けば良いかと思います。

もちろん、Wordpressでの使用ではなくて、PHPのコードをバリバリ書く場合は、スニペットを登録しておいた方が楽だと思います。

HTML埋め込み用のPHPスニペット登録

PHPコードをHTML部分に埋め込むときに利用する「<?php | ?>」などは、Brackets Snippetsライブラリにもあらかじめ登録はされていません。

なので、こういったコードは、自前で入力する必要があります。

埋め込みの開始記号と終了記号

Bracketsは、埋め込みコードを挿入する箇所はHTMLになるので、スコープをHTMLに設定しなければなりません。

トリガー：php

スコープ：HTML

<?php ${1}; ?>

1	<?php ${1}; ?>

if文（埋め込み記号付き）

トリガー：if

スコープ：HTML

<?php if ( ${1:condition} ): ?>
  ${2}
<?php endif ?>

<?php if ( ${1:condition} ): ?>

${2}

<?php endif ?>

if else文（埋め込み記号付き）

トリガー：ifelse

スコープ：HTML

<?php if ( ${1:condition} ): ?>
  ${2}
<?php else: ?>
  ${3}
<?php endif ?>

<?php if ( ${1:condition} ): ?>

${2}

<?php else: ?>

${3}

<?php endif ?>

日本語のダミーテキスト

トリガー：dummyj

スコープ：HTML

メロスは激怒した。必ず、かの邪智暴虐じゃちぼうぎゃくの王を除かなければならぬと決意した。メロスには政治がわからぬ。メロスは、村の牧人である。笛を吹き、羊と遊んで暮して来た。けれども邪悪に対しては、人一倍に敏感であった。きょう未明メロスは村を出発し、野を越え山越え、十里はなれた此このシラクスの市にやって来た。メロスには父も、母も無い。女房も無い。十六の、内気な妹と二人暮しだ。この妹は、村の或る律気な一牧人を、近々、花婿はなむことして迎える事になっていた。

1	メロスは激怒した。必ず、かの邪智暴虐じゃちぼうぎゃくの王を除かなければならぬと決意した。メロスには政治がわからぬ。メロスは、村の牧人である。笛を吹き、羊と遊んで暮して来た。けれども邪悪に対しては、人一倍に敏感であった。きょう未明メロスは村を出発し、野を越え山越え、十里はなれた此このシラクスの市にやって来た。メロスには父も、母も無い。女房も無い。十六の、内気な妹と二人暮しだ。この妹は、村の或る律気な一牧人を、近々、花婿はなむことして迎える事になっていた。

英語のダミーテキスト

トリガー：dummye

スコープ：HTML

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor

incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis

nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu

fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in

culpa qui officia deserunt mollit anim id est laborum.

登録完了

HTMLのスニペットは、このくらいで十分じゃないかと思います。

あとは、Emmetと、補完（ヒント）機能と、先程登録したPHPのスニペットと組み合わせての利用で十分な気がします。

あまり凝ったスニペットを作成しても、僕の脳の揮発性は高いので、すぐに忘れてしまい、せっかく作ったスニペットが持ち腐れになってしまうので。

まとめ

とりあえず、これだけ登録しておけば、Wordpressテーマのカスタマイズなら特に不自由しないのではないかと思います。

併せて、拡張マネージャーから以下の補完（ヒント）系拡張をインストールしておけば、タグ名や関数名等のキーワードを、あまり覚えていなくても、ある程度コードを書くことはできると思います。

Emmet（タグやCSSの入力補助）
WordHint（開いているドキュメントからキーワードを補完）
Brackets WordPress Hint（Wordpressに関する補完）
Brackets WordPress Functions Hints（Wordpress関数の補完）
Brackets WordPress Hooks Hints（Wordpressフック名の補完）
Brackets CSS Class Code hint（ユーザーが設定したクラス名、IDなどの補完）
PHP SmartHints（PHPの補完）
Simple JS Code Hints（JavaScriptの補完）
More HTML5 Code Hints（HTML5タグや属性の追加補完）

その他の拡張については以下を参照してください。

WordPress開発が捗りそうなBracketsおすすめ拡張40個まとめ

前回、無料エディター「Brackets」の素晴らしいデフォルト機能について書きました。 Bracketsは、デフォルト...

nelog.jp

2017-12-10 20:24

Sublime Textでは、デフォルトである機能でも、Bracketsは、少し設定する必要がある機能があったりします。もちろんその逆もあったりするのですが。

とりあえず、設定すれば、Sublime Text同様に（近く）編集できるようになるのは、やっぱりすごいなぁと。どう頑張っても、同機能を持たせられないエディターの方が多いので。

ということで、「Bracketsは、デフォルトでPHPのスニペットが使えないので…」なんて場合は、今回の方法などがおすすめです。

補足情報として、今回行った設定を複数PCで同期させたい場合は、以下の方法などを行うと全環境が同期します。環境ごとにわざわざ設定する必要はありません。

Bracketsエディタの設定を複数PC環境で同期させる方法

前回、Sublime Textの設定の同期方法を紹介しました。この方法の、Brackets版はないのかと、ネットを調べてみましたが、な...

nelog.jp

2017-06-17 11:58

Brackets Snippetsのインストール

PHPでのスニペット登録

if文

if else 文

switch文

関数

デバッグ用

コメント用

登録完了

HTML埋め込み用のPHPスニペット登録

埋め込みの開始記号と終了記号

if文（埋め込み記号付き）

if else文（埋め込み記号付き）

日本語のダミーテキスト

英語のダミーテキスト

登録完了

まとめ

関連記事