あなたは、WordPressのテーマを作成したり編集したりするときどうしていますか？私はローカル環境のWordpressでデザインを実際に確認しながらATOMで作成・編集を行っています。
WordPressのテーマの編集を行うときは、管理画面から直接編集するのはなるべく避けるようにしましょう。管理画面からの直接編集は、何のサポート機能もないので編集がし難い上にコードミスによるトラブルも起こりやすくなります。
この記事では、私が実際に使っているATOMを使ってWordPressテーマの作成・編集する方法についてご紹介します。
ATOMとは
ATOMとは、GitHubが主体となって開発しているオープンソースのコードエディタです。Windows・MAC OS X・Linuxに対応しているため環境を選ばずに使用することができます。
さらに、沢山のプログラム言語も扱うことができるうえに、パッケージを追加することで自分好みに機能を拡張することもできるので、自分にピッタリのエディタに仕上げることができます。
オープンソースのソフトで費用も必要ありませんので、ぜひATOMを導入して自分好みの開発環境を作りましょう。
ATOMを導入する
さて、では早速ATOMを公式サイトからインストールしましょう。
インストーラーのダウンロート→インストールが完了したらAtomを立ち上げてください。
日本語化パッケージを追加する
インストールしたばかりのAtomは、英語ですので日本語化しましょう。
一番左上の『File』→『Setting』からSettingタブを開きましょう。
タブが開いたら『+Install』をクリックしてパッケージのインストール画面を開き、検索ボックスに『japanese-menu』と入力し、『Packages』をクリックしてください。
上記の画像のsyonさんが作成されたパッケージがでてきたら『Install』をクリックしてパッケージをインストールしましょう。
無事インストールできたら(インストールが完了したらInstallボタンがUninstallに変わります)一度ATOMを閉じ、再度起動すると日本語に変換されます。
以上でATOMの初期設定は完了です。
WordPressのテーマをプロジェクトフォルダに追加する
ATOMの初期設定が完了したら、ローカル環境のWordPressのフォルダをプロジェクトフォルダに追加しまししょう。
左上の『ファイル』→『プロジェクトフォルダを追加』をクリックします。
フォルダ選択画面が表示されるので、あなたのローカル環境にある編集したいテーマフォルダを選択してください。
ちなみに私は、ローカル環境をXAMPPで構築しているので C:\xampp\htdocs\blog_theme\wp-content\themes の階層にテーマが入っています。
フォルダを選択したら左にフォルダの中のファイルが一覧で表示されます。WordPressのテーマを作成・編集するときは、編集したいファイルを開いて編集しましょう。
編集が完了したらブラウザ上のローカルのWordPressの画面を更新すれば、ページも一緒に更新されます。
※更新されない場合は、『Ctrl+F5』でブラウザキャッシュをリセット更新をしてみてください。
以上で、ローカルのWordPress+ATOMでのテーマ作成・編集の環境構築は完了です。あとは、自分好みのパッケージを入れてATOMに機能を追加してさらに使いやすくしましょう。
ツリーバー(ファイル一覧)が更新されない場合
プロジェクトにフォルダを追加しても、ツリーバーが表示されない場合は、『パッケージ』→『Tree View』→『Toggle Tree Side』をクリックしてツリーバーを表示させましょう。
WordPressテーマを作成するときにオススメのパッケージ
ATOMのパッケージとは、簡単に言うとWordPressのプラグインのようなものです。パッケージを追加することで、より作りやすくスムーズにWordPressのテーマの編集作業ができます。
実際に私が使っていてWordPressのテーマを作成するときに便利なパッケージをいくつか紹介します。
atom-beautify
『atom-beautify』は、ソースコードを整列してきれいにしてくれるパッケージです。ソースコードきれいに書くのってなかなか難しいですよね？
『atom-beautify』があれば、ソースコードを開いたファイルのうえで右クリックして『beautify-editor-contents』をクリックするだけで整列させてくれます。
ただし、入れただけの状態ではhtmlとcssでphpには対応していないので、合わせて『php-cs-fixer』も入れてphpに適応させる必要があります。
linter
linterはリアルタイムで構文をチェックして、間違ったコードを知らせてくれるパッケージです。
構文チェックしながらコーディングしていくことにより、エラーを防ぐことができます。
linterに対応させるには、書くコード用のパッケージも一緒にインストールする必要があるので『linter-csslint』『linter-htmlhint』『linter-php』も合わせてインストールしておきましょう。
show-ideographic-space
『show-ideographic-space』は、全角スペースが入ったらわかりやすく可視化してくれるパッケージです。
コーディングしていると、全角・半角の切り替えが多くなるのでどうしても全角スペースが入りがちですが、これを入れておくことで全角スペースによるコードミスを防ぐことができます。
tag
『tag』は、『</』まで入力すると自動でタグを閉じてくれる機能を追加するパッケージです。
閉じタグをわざわざ打ち込む必要がなくなるので、コーディングによる入力文字数を減らすことができます。
wordpress-api
『wordpress-api』は、WordPressで使用する関数をオートコンプリートの候補一覧に追加するパッケージです。
wordpressのテーマを編集・作成するときの、コーディングの手助けをしてくれるので非常に便利です。
ATOMとWordPressのローカルテーマを連携してスムーズに作成を
ATOMは、オープンソースのソフトで各OSに対応しているので様々なパッケージでWordPressのテーマの作成や編集に必要な機能を追加していくことができます。
また、エディタとして優秀なので私は投稿記事を書くのにもATOMを利用しています。実際この記事もATOMで編集しています。
費用もかからないので、WordPressのテーマを作成する際は、ローカル環境と合わせて導入しましょう。