BracketsでWordPressの投稿ページをライブプレビューしながら編集するには？

Question

前提・実現したいこと

初心者です。おそらく初歩的な質問でたいへん恐縮なのですが、どうしても解決できません。

既存のWordPressで作ったサイトを、ローカル環境でテストしながら作るために、Mac内に移行しました。
MAMP経由で見ても、特に表示等に問題はありません。

このローカルサイトを作成する際に、Bracketsのライブプレビュー機能を利用したいのですが、WordPressとどう連携させるのかがわからず困っています。

発生している問題・エラーメッセージ

WordPressの投稿ページは、htmlとして存在していないようなのですが、ページを編集するためには、何を開けばいいのでしょうか。

index.phpをライブプレビューすると、CSSがきちんと反映されたトップページが表示されています。
この状態で、同時に編集可能なファイルも表示されるのかな…と思っていたのですが、特にBrackets側では変化は見られず、ほかの方のサイトや動画のように、見ながら編集ができずにいます。

試したこと

＜プロジェクト設定で編集したい投稿ページのスラッグを入力＞
表示されたあと、Bracketsに「ライブプレビューのエラーが発生しました」とのアラートが出る

＜編集したいｈｔｍｌをコピーして、プロジェクト設定で指定したフォルダ内にhtmlとして保存＞
cssが反映されないままライブプレビューされる

補足情報（FW/ツールのバージョンなど）

ローカルに移行するだけで3週間かかってしまうほどの初心者なため、移行の際、どこかでミスをしているかも知れません。
お力を貸していただけましたら、幸いです…！

MAMP>htdocs>WordPressのデータ

・Mac…High Sierra 10.13.2
・WordPress…4.9.4
・Brackets…1.12.0-17621
・MAMP…4.4.1

Answer 1

BracketsはあくまでローカルPCにインストールしてローカルのファイルを編集するものなので、
サーバーにインストールしデータベースのデータを編集するWordPressのようなCMSの記事を編集するのは無理ではないでしょうか。

確かに様々な拡張機能はありますが

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

いずれもWordPressのテーマ作成であったりプラグインであったり
本体へのカスタマイズのためであって記事を編集するものではないようです。

もしかしたら回答が外してる可能性もあるので追記ですが、
ローカルのサイトで、データベースもローカルに置いている接続しているのであれば本番サイトへの影響はないので、
普通にWordPress上でプレビューすればいいのではと思いますが、
「ほかの方のサイトや動画のように、見ながら編集ができずにいます。」というのがどういうことをしたいかによっても違うので、
その辺り、参考にした記事など質問に追加していただければと思います。

Comments

[nico.]

さっそくのご回答、ありがとうございます！

mtsさんのおっしゃるとおり、WordPress上で編集することができるので、あらかじめテストができることで望みの8割方は叶うのですが、Bracketsを使えば、まだまだ理解できていないhtmlやCSSのしくみが理解でき、補助もできるうえに、プレビューまでできるのではないかと思っていました。

ほかの方〜という部分ですが、下記が参考にさせていただいたサイトです。

http://asae7diary.blog.fc2.com/blog-entry-72.html
https://las-sama.com/blog/wordpress/wp-app-1
https://debuyoko.com/822

動画に関しては、mtsさんにご指摘いただいたように、WordPressではない可能性があるため、掲載は控えます。

よろしくお願いいたします。

[m.ts10806]

ちょっと特殊な環境で１つ目の記事が見れてなくて申し訳ないのですが、

これ、記事自体はWordPress上で編集しているように見えます。
ただ、CSSやJavaScriptはファイルとしてWordPressに同梱されているので編集はBrackets上でできる、と。
３つ目の記事を見ると、index.phpを表示するとトップページが現れるので、そこから目的の記事のページにリンクをたどっていき、確認するのだと思います。

[nico.]

なるほど…、WordPressでは、CSS含む記事全体の編集はできないけれど、CSSならばできるということなのでしょうか。
それだけでも、できるようになればうれしいですが、素直にローカルのサイトで作業したほうが、早いのかもしれませんね。

[m.ts10806]

CSS（javascriptもですけど）は普通にファイルが置いてあるものは普通に編集できますよ。
システムから払い出して埋め込んでいるものは難しいかもしれませんが、そういうのはファイルになっていないと思いますし、WordPressの画面からしか編集できないはずですし。

[nico.]

用途を切り分けて考えたら、活用できそうですね。
WordPressの作業において、Bracketsでできること、できないことがあるということが分かり、助かりました。
ここまで、力技でなんとか数ページの投稿を作りましが、htmlやCSSをきれいに書けるようになりたいので、Bracketsを利用してみます。

ご親切にありがとうございました！