Bagaimana cara melihat pratinjau situs web WordPress menggunakan Adobe Brackets?

4

Kurung Adobe memiliki fitur pratinjau langsung yang memungkinkan saya melihat halaman web HTML sementara saya sedang mengerjakan file .css dan .html.

Saya sekarang mulai bekerja di situs web WordPress yang melibatkan .html, .css, .js dan .php file. Bagaimana saya bisa melihat pratinjau situs web WordPress menggunakan kurung?

wordpress brackets henrywright
sumber
Ini adalah sesuatu yang diketahui oleh komunitas Brackets, tetapi saat ini fungsi Live Preview tidak akan berfungsi dengan situs web berbasis server (mis. Situs web yang didukung CMS seperti WP). Anda dapat mengikuti yang terbaru di sini: github.com/adobe/brackets/issues/3007
Trevor

Jawaban:

3

Saya pikir saya menemukan solusi untuk ini!

Anda dapat mengatur URL Pangkalan Pratinjau Langsung di pengaturan proyek Anda. Ketika Kurung mencoba untuk melihat halaman, itu akan memuat nama file dan path di proyek Anda dari file saat ini, ditambahkan ke akhir URL dasar itu.

Masalah dengan WordPress adalah bahwa path dan nama file dari file php yang sedang Anda kerjakan dalam proyek Anda jarang berhubungan dengan URL yang akan Anda akses untuk mengeksekusi kode itu dan melihat halaman templat Anda.

Jadi, apa yang kita lakukan jika kita ingin server kita menyajikan halaman yang berbeda dari yang diminta browser? Penulisan ulang URL!

Saya mengatur URL Pangkalan saya di dalam tanda kurung http://server.dev/theme/ dan kemudian membuat .htaccess file untuk Apache di server pengembangan saya. Ini sebuah contoh: 

<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>

Seperti yang Anda lihat, Anda perlu memilih beberapa permintaan halaman sembarang untuk beberapa file yang akan Anda edit.

Yang pasti, ada banyak masalah lain dengan alur kerja dan penyegaran, setidaknya dalam pengujian pada Brackets 1.5, tetapi ini memecahkan satu masalah besar menggunakan Pratinjau Langsung Brackets untuk WordPress.

NReilingh
sumber
1
Solusi Kludgy, tapi ide kreatif yang menyelesaikan pekerjaan.
JakeGould
2

Kamu bisa menggunakan Pratinjau Langsung dengan backend Anda sendiri (seperti server WordPress), tetapi disertai dengan peringatan tertentu:

  • Anda memerlukan server yang berjalan secara lokal, menunjuk ke folder yang sama dengan yang Anda buka untuk diedit dalam kurung
  • Pembaruan HTML langsung dinonaktifkan - meskipun Anda masih mendapatkan pembaruan CSS langsung (dan pemilihan pemilih). Tanda kurung kembali ke "live reload" sederhana ketika Anda mengedit HTML, PHP, atau file lainnya.

Dokumentasi memiliki informasi lebih rinci: https://github.com/adobe/brackets/wiki/How-to-Gunakan-Brackets#lp-custom-server .

peterflynn
sumber
1
Satu-satunya hal yang saya temukan jika saya menggunakan Live Preview dengan server lokal dan situs WordPress, ia mencoba memuat file PHP sebagai bagian dari jalur situs web. Untuk CMS ini tidak benar. Sebagai contoh jika nama file templat halaman saya adalah pg-home.php saya pergi ke pratinjau langsung dan memuat: site.local / pg-home.php yang tidak benar. Apakah saya melewatkan sesuatu yang jelas di sini?
Trevor
@ Trvor Hanya memikirkan sesuatu yang mungkin bisa bekerja untuk ini - menggunakan RewriteRule di server kustom Anda untuk membuat tanda kurung BERPIKIR itu memuat file yang ingin dilihat pratinjau dengan sukses ... Saya akan menambahkan jawaban jika berfungsi.
NReilingh
0

Saya berharap Anda bisa, namun fitur pratinjau Langsung Kurung tampaknya dibangun di sekitar alur kerja statis. Tidak ada dukungan apa pun untuk mempratinjau bahasa dinamis dan, sejauh yang saya tahu, tidak ada rencana untuk menambahkannya juga.

Sayang juga karena itu membuat aplikasi benar-benar tidak berguna bagi saya. : - /

Joey the Squid
sumber
Catatan: Anda bisa masih mendapatkan pembaruan CSS langsung (atau KURANG atau SCSS) meskipun Anda memiliki konten dinamis yang berasal dari backend Anda sendiri. Lihat jawaban saya di bawah ini.
peterflynn