☰

Adobe Brackets を使用して WordPress ウェブサイトをライブプレビューする方法は?

tag-icon • tag-icon wordpress brackets
Adobe Brackets を使用して WordPress ウェブサイトをライブプレビューする方法は?

Adobe ブラケットライブプレビュー機能があり、.css ファイルや .html ファイルで作業しながら HTML Web ページを表示できます。

.html現在、、、.cssファイル.jsを含む WordPress ウェブサイトの作業を開始しています.php。Brackets を使用して WordPress ウェブサイトをライブ プレビューするにはどうすればよいですか?

答え1

これに対する解決策が見つかったと思います!

プロジェクト設定でライブ プレビュー ベース URL を設定できます。Brackets がページをプレビューしようとすると、プロジェクト内の現在のファイルのファイル名とパスが読み込まれ、そのベース URL の末尾に追加されます。

WordPress の問題は、プロジェクトで作業している PHP ファイルのパスとファイル名が、そのコードを実行してテンプレート ページを表示するためにアクセスする URL とほとんど関連がないことです。

では、ブラウザが要求したものとは異なるページをサーバーに表示させたい場合はどうすればよいでしょうか? URL の書き換えです。

ベース URL を括弧で囲んで設定しhttp://server.dev/theme/、.htaccess開発サーバー上に Apache 用のファイルを作成しました。次に例を示します。

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteRule theme/archive.php "/?m=201510"
    RewriteRule theme/ "/"
    RewriteRule theme/header.php "/"
    RewriteRule theme/footer.php "/"
    RewriteRule theme/page.php "/?page_id=16080"
    RewriteRule theme/search.php "/?s=asdf"
    RewriteRule theme/sidebar.php "/"
    RewriteRule theme/single.php "/?p=16247"
</IfModule>

ご覧のとおり、編集するファイルの一部に対して、任意のページ リクエストを選択する必要があります。

確かに、少なくとも Brackets 1.5 でのテストでは、ワークフローと更新に関する他の多くの問題がありますが、これにより、WordPress 用の Brackets のライブ プレビューを使用する際の大きな問題の 1 つが解決されます。

答え2

あなたできるライブ プレビューを独自のバックエンド (WordPress サーバーなど) で使用することもできますが、いくつかの注意点があります。

  • Bracketsで編集するために開いている同じフォルダを指す、ローカルで実行されているサーバーが必要です。
  • ライブ HTML 更新は無効になっていますが、ライブ CSS 更新 (およびセレクターの強調表示) は引き続き行われます。Brackets は、HTML、PHP、またはその他のファイルを編集するときに、単純な「ライブ リロード」にフォールバックします。

ドキュメントにはさらに詳しい情報が記載されています:https://github.com/adobe/brackets/wiki/How-to-Use-Brackets#lp-custom-server。

答え3

できればいいのですが、Brackets のライブ プレビュー機能は静的なワークフローに基づいて構築されているようです。動的言語のプレビューはまったくサポートされておらず、私の知る限り、それを追加する予定もありません。

私にとってはアプリがまったく役に立たなくなってしまったので残念です。:-/

関連情報