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

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

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

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

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

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

Wordpress開発が捗りそうなBracketsおすすめ拡張40個まとめ
前回、無料エディター「Brackets」の素晴らしいデフォルト機能について書きました。 Bracketsは、デフォルトだけでも、良い機能...

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

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

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

photo by Luca Mascaro

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

Brackets Snippetsのインストール

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

Brackets Snippets (by edc)

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

Bracketsスニペットボタン

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

Brackets Snippets拡張エリアが表示される

PHPでのスニペット登録

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

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

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

Brackets Snippetsのスタート画面

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

Brackets SnippetsでPHPのスニペットをライブラリを開く

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

Brackets Snippetsで登録したいPSPスニペットを追加する

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

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

if文

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

トリガー:if

if else 文

if else条件分岐です。

トリガー:ifelse

switch文

条件分岐が多い場合は。

トリガー:switch

関数

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

トリガー:fu

デバッグ用

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

トリガー:vardump

コメント用

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

トリガー:com

登録完了

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

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

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

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

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

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

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

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

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

トリガー:php

スコープ:HTML

if文(埋め込み記号付き)

トリガー:if

スコープ:HTML

if else文(埋め込み記号付き)

トリガー:ifelse

スコープ:HTML

日本語のダミーテキスト

トリガー:dummyj

スコープ:HTML

英語のダミーテキスト

トリガー:dummye

スコープ:HTML

登録完了

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は、デフォルトだけでも、良い機能...

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

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

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

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

Bracketsエディタの設定を複数PC環境で同期させる方法
前回、Sublime Textの設定の同期方法を紹介しました。 この方法の、Brackets版はないのかと、ネットを調べてみました...