BracketsでWordPressのスタイルをリアルタイムに確認しながらいじる

WordPress
スポンサーリンク

Bracketsにはライブプレビュー機能というものがあります。これは、CSSやHTMLを編集した結果をリアルタイムにプレビューしてくれるという機能です。この機能を使うことにより、常に確認しながら作業を行うことができ、スタイルの編集が格段に楽になります。

今回はこのBracketsとライブプレビューを使ってWordPressサイトに適用しているCSSをいじっていきましょう。

スポンサーリンク

準備

Brackets

Bracketsは、Adobe製のエディタです。ライブプレビュー機能のほか、様々な拡張機能を導入することでその機能性を拡張することができます。無料で利用できる上、デフォルトで日本語化されていますので安心です。

インストール

Bracketsのサイトからインストーラをダウンロードすることができます。

インストーラを実行し、インストールを行ってください。アドウェア等余計なオプションは含まれていないので適当に。

拡張機能の導入

Bracketsの起動後、[ファイル]→「拡張機能マネージャー」もしくはサイドバーのレゴブロックのようなアイコンをクリックすると拡張機能の一覧が表示されます。

必要な拡張機能があれば適宜導入しておきましょう。拡張機能マネージャーウィンドウの右上にある検索窓から拡張機能を検索することができます。

WordPressローカル環境

ライブプレビューはローカルに構築したWordPressサイトに対して行います。ローカルに構築する方法は色々ありますが、InstantWPまたはLocal by Flywheelを使った手順については以下の記事で紹介しておりますのでよろしければ参考にしてください。

WordPress環境をInstantWPとBackWPupでローカルに複製する
Instant WordPressを使って、WordPress環境をローカルに複製します。ローカルに環境を構築することで、WordPressの設定やスタイルシート等のカスタマイズをサイトに影響を与えることなく行うことができます。その際、リア...
Local by FlywheelでWordPressローカル環境を作ってライブプレビューする
InstantWPとBackWPupを使ったローカル環境の構築方法は以前に紹介しましたが、今回はLocal by FlywheelとAll-in-One WP Migrationを使ってローカル環境を構築し、Bracketsでライブプレビュ...

Google Chrome

ライブプレビュー機能を使うためにはGoogle Chromeがインストールされている必要があります。Google Chromeからダウンロード、インストールしておいてください。

準備しておくものは以上となります。

ライブプレビューする

プロジェクト設定


[ファイル]→「プロジェクト設定」からライブプレビューのURLを設定してください。URLは、「http://localhost/wordpress」など、ローカルに構築したWordPressのURLを入力してください。

フォルダを開く

[ファイル]→「フォルダーを開く」から、ローカルに構築したWordPressのフォルダを選択して読み込んでください。InstantWPの場合はiwpserver > htdocsフォルダ内のwordpressフォルダを選択してください。Local by Flywheelの場合はpublicフォルダを選択してください。(WordPressインストールフォルダを変更している場合はそのフォルダを選択する必要があります。)

ファイルを開く

WordPressインストールフォルダ直下にあるindex.phpをダブルクリックで開いてください。

WordPressインストールフォルダのindex.phpはサイトのトップページにあたるファイルです。

そのほか、wp-content > themesフォルダ内にある親テーマ・子テーマのstyle.cssなど、編集したいファイルをダブルクリックで開いてください。

ちなみに、画像のようなタブ表示は「Documents Toolbar」という拡張機能によるものです。

WordPressのローカルサーバーを立ち上げる

InstantWP等を起動し、ローカルサーバーを立ち上げ、ローカル環境のWordPressサイトが表示できる状態にしてください。

ライブプレビューする

index.phpがBracketsのエディタ画面に表示されている状態で、右サイドバーにある稲妻のマークをクリックしてください。[ファイル]→「ライブプレビュー」やCtrl+Alt+Pのショートカットキーからでも良いです。

するとGoogle Chromeが起動し、サイトのトップページ(index.php)が表示されます。これでリアルタイムプレビューが利用できる状態になりました。その後、お好きなファイルを編集してください。

画像は、ローカルのWordpressで投稿したテスト用の記事ページを開き、その中の要素をいじっているところです。

編集した直後からブラウザ側の表示は更新されます。また、編集中の箇所はプレビュー画面側で青枠により強調表示されます。

おわりに

Bracketsはライブプレビューだけではなくエディタとしても優秀で、カスタマイズが効率的に行えますので非常におすすめです。

細かい調整や、いまいちcssの書き方が分からないので色々試したいなど、様々な面で非常に便利ですので是非お試しください。

コメント

タイトルとURLをコピーしました