Cara Membangun Laman Web WordPress yang hampir tidak berkepala

Tema WordPress tradisional juga boleh dijalankan dengan cekap sebagai laman web statik atau aplikasi web tanpa kepala. Sebilangan besar laman web WordPress dibina menggunakan tema WordPress tradisional. Kebanyakan laman web ini juga mempunyai tahap caching yang baik dan pengoptimuman pergantungan, menjadikannya berjalan dengan pantas. Tetapi sebagai pemaju, kami telah menguasai cara untuk menghasilkan hasil yang lebih baik untuk laman web kami. Menggunakan WordPress tanpa kepala membolehkan banyak laman web untuk mencapai pemuatan lebih cepat, interaksi pengguna yang lebih baik dan peralihan lancar antara halaman.

Masalahnya ialah: penyelenggaraan. Izinkan saya menunjukkan kemungkinan lain!

Mari kita mula -mula menentukan apa yang saya bicarakan tentang "tradisional" WordPress, "tanpa kepala" WordPress, dan "hampir tidak kepala" WordPress.

Laman web tradisional WordPress

Secara tradisinya, laman web WordPress menggunakan PHP untuk menjadikan tag HTML diberikan pada halaman. Setiap kali pautan diklik, penyemak imbas menghantar permintaan lain ke pelayan, dan PHP membuat tag HTML laman web yang diklik.

Ini adalah kaedah yang digunakan oleh kebanyakan laman web. Ia adalah yang paling mudah untuk dikekalkan, mempunyai kerumitan teknikal yang paling rendah, dan menggunakan alat caching sisi pelayan yang betul dan ia juga berfungsi dengan baik. Masalahnya, kerana ia adalah laman web tradisional, ia terasa seperti laman web tradisional. Dalam laman web jenis ini, peralihan, kesan, dan ciri -ciri moden yang bergaya sering lebih sukar untuk dibina dan dikekalkan.

kelebihan:

1. Laman web ini mudah dijaga.
2. Teknologi ini agak mudah.
3. Keserasian yang baik dengan plugin WordPress.

Kekurangan:

1. Memandangkan masyarakat menjangkakan pengalaman seperti aplikasi dalam penyemak imbas, laman web anda mungkin kelihatan agak ketinggalan zaman.
2. Kerana laman web tidak menggunakan rangka kerja JavaScript untuk mengawal tingkah laku laman web, JavaScript sering lebih sukar untuk ditulis dan diselenggarakan.
3. Laman web tradisional cenderung untuk berjalan lebih perlahan daripada pilihan tanpa kepala dan hampir tanpa kepala.

Laman web WordPress tanpa kepala

Laman web WordPress tanpa kepala menggunakan JavaScript moden dan beberapa jenis perkhidmatan Restful Server, seperti WordPress REST API atau Graphql. Daripada membina dan memberikan HTML dalam PHP, ia adalah pelayan yang menghantar HTML minimum dan fail JavaScript yang besar yang mengendalikan rendering mana -mana halaman di laman web. Pendekatan ini memuat halaman lebih cepat dan memberi peluang untuk mewujudkan peralihan yang benar -benar sejuk dan ciri -ciri keseronokan lain di antara halaman.

Tidak kira apa yang anda katakan, laman web WordPress yang paling tidak berkepala memerlukan pemaju untuk membuat sebarang perubahan besar. Ingin memasang plugin borang? Maaf, anda mungkin memerlukan pemaju untuk menetapkannya. Ingin memasang plugin SEO baru? Tidak, pemaju perlu menukar permohonan. Mahu menggunakan blok mewah itu? Terlalu buruk - anda memerlukan pemaju terlebih dahulu.

kelebihan:

1. Laman web itu sendiri akan berasa moden dan pantas.
2. Ia mudah diintegrasikan dengan perkhidmatan lain yang lain di luar WordPress.
3. Seluruh laman web dibina di JavaScript, yang menjadikannya lebih mudah untuk membina laman web yang kompleks.

Kekurangan:

1. Anda perlu mencipta semula banyak ciri yang disediakan oleh plugin WordPress untuk anda keluar dari kotak.
2. Tetapan ini sukar dikekalkan.
3. Hosting adalah kompleks dan boleh mahal berbanding dengan pilihan lain.

Lihat "WordPress dan Jamstack" untuk perbandingan yang lebih mendalam tentang perbezaan antara WordPress dan hosting statik.

Saya suka hasil yang dapat dicipta oleh WordPress tanpa kepala. Saya tidak suka penyelenggaraan. Saya mahukan aplikasi web yang membolehkan saya mempunyai kelajuan pemuatan cepat, peralihan antara halaman dan rasa keseluruhan aplikasi seperti laman web. Tetapi saya juga ingin bebas menggunakan ekosistem plugin yang menjadikan WordPress begitu popular. Saya mahukan sesuatu yang tidak berkepala. Hampir tanpa kepala .

Saya tidak dapat mencari apa -apa yang sesuai dengan keterangan ini, jadi saya membina satu. Sejak itu, saya telah membina beberapa laman web yang menggunakan pendekatan ini dan membina perpustakaan JavaScript yang diperlukan untuk memudahkan orang lain untuk mencipta tema WordPress mereka sendiri yang tidak berdekatan.

Pengenalan kepada WordPress yang hampir tanpa kepala

Hampir tanpa kepala adalah kaedah pembangunan web WordPress yang memberikan anda banyak manfaat aplikasi serupa yang dibawa oleh pendekatan tanpa kepala, serta kemudahan pembangunan menggunakan tema WordPress tradisional. Ia melakukan ini dengan aplikasi JavaScript kecil yang akan mengendalikan penghalaan dan menjadikan laman web anda seperti aplikasi tanpa kepala, tetapi mempunyai mekanisme sandaran yang dapat memuatkan halaman yang sama dengan permintaan WordPress biasa. Anda boleh memilih halaman mana yang hendak dimuat menggunakan kaedah sandaran, dan anda boleh menyuntik logik ke JavaScript atau PHP untuk menentukan sama ada halaman itu dimuatkan seperti ini.

Anda dapat melihat bagaimana ia berfungsi di laman web demo yang saya bina, yang menunjukkan pendekatan ini dapat dicapai.

Sebagai contoh, laman web yang melaksanakan kaedah ini menjual kursus WordPress dalam talian menggunakan sistem pengurusan pembelajaran yang dipanggil LifterLMS. Plugin ini mempunyai ciri-ciri e-dagang terbina dalam dan mempunyai antara muka yang diperlukan untuk menyediakan kandungan kursus hosting dan meletakkannya di belakang paywall.此网站使用了大量LifterLMS的内置功能——其中很大一部分是结账购物车。 Daripada membina semula seluruh halaman untuk berfungsi dalam permohonan saya, saya hanya menetapkannya untuk memuatkan menggunakan kaedah sandaran. Jadi halaman ini berfungsi seperti mana -mana tema WordPress lama dan oleh itu berfungsi dengan tepat seperti yang diharapkan - semua tanpa saya membina semula apa -apa.

kelebihan:

1. Setelah disediakan, ini mudah dikekalkan.
2. Hosting semudah tema WordPress biasa.
3. Laman web ini terasa moden dan cepat sebagai laman web tanpa kepala.

Kekurangan:

1. Anda mesti sentiasa mempertimbangkan dua cara yang berbeza untuk menjadikan laman web anda.
2. Kaedah ini mempunyai pilihan terhad untuk perpustakaan JavaScript yang berkesan.
3. Permohonan ini terikat dengan WordPress, jadi menggunakan API REST pihak ketiga lebih sukar daripada tanpa kepala.

Bagaimana ia berfungsi

Untuk menjadi hampir tanpa kepala, ia memerlukan keupayaan untuk melakukan pelbagai tindakan, termasuk:

1. Gunakan permintaan WordPress untuk memuatkan halaman,
2. Memuat halaman menggunakan JavaScript,
3. Benarkan halaman menjadi sama, tidak kira bagaimana mereka memberikan,
4. Menyediakan cara untuk mengetahui bila memuatkan halaman menggunakan JavaScript atau PHP, dan
5. Memastikan konsistensi 100% semua halaman penghalaan, sama ada ia diberikan dalam JavaScript atau PHP.

Ini membolehkan laman web untuk memanfaatkan peningkatan progresif . Oleh kerana halaman boleh dilihat dengan atau tanpa JavaScript, anda boleh menggunakan versi yang paling sesuai berdasarkan permintaan yang anda buat. Adakah bot yang dipercayai merangkak laman web anda? Hantar mereka versi bukan JavaScript untuk memastikan keserasian. Adakah halaman checkout tidak berfungsi seperti yang diharapkan? Buat sementara waktu untuk memuatkan tanpa permohonan dan memperbaikinya kemudian.

Untuk melengkapkan projek -projek ini, saya mengeluarkan perpustakaan sumber terbuka yang dipanggil Nicholas, yang termasuk boilerplate pasang siap.

Terus kering

Masalah terbesar yang saya ingin diatasi ketika membina aplikasi yang hampir tidak berdekatan adalah untuk memastikan halaman yang diberikan konsisten dalam bagaimana ia berada di PHP dan JavaScript. Saya tidak mahu membina dan mengekalkan markup saya di dua tempat yang berbeza - saya mahu menggunakan kod sumber tunggal yang mungkin. Ini segera menghadkan perpustakaan JavaScript yang saya boleh gunakan (maaf, bertindak balas!). Selepas beberapa penyelidikan dan banyak eksperimen, saya akhirnya menggunakan Alpinejs. Perpustakaan ini menyimpan kod saya yang kering. Sesetengah bahagian benar -benar perlu ditulis semula untuk setiap bahagian (mis., Looping), tetapi blok markup yang paling penting boleh digunakan semula.

Templat pos tunggal yang diberikan menggunakan PHP mungkin kelihatan seperti ini:

 <code><?php if ( have_posts() ) { while ( have_posts() ) { the_post(); if ( is_singular() ) { echo nicholas()-?>templates()->get_template( 'index', 'post', [ 'content' => Nicholas::get_buffer( 'the_content' ), 'title' => Nicholas::get_buffer( 'the_title' ), ] ); } } } ?></code>

Templat pos yang sama diberikan menggunakan JavaScript Alpine:

<code><template :key="index" x-for="(post, index) in $store.posts"> = niccholas ()-> templat ()-> get_template ('index', 'post')?>
</template></code>

Mereka semua menggunakan templat PHP yang sama, jadi semua kod di dalam gelung sebenar kering:

 <code>$title = $template->get_param( 'title', '' ); // 获取传递到此模板的标题，回退到空字符串。 $content = $template->get_param( 'content', '' ); // 获取传递到此模板的内容，回退到空字符串。 ?></code> = $ tajuk?>

  <div x-html="content">= $ kandungan?></div>

Berkaitan: Kaedah Alpine.js ini sama dengan kaedah Vue.js yang diperkenalkan oleh Jonathan Land dalam "Cara Membina Komponen Vue dalam Tema WordPress".

Mengesan bila halaman harus dijalankan dalam mod yang serasi

"Mod Keserasian" membolehkan anda memaksa sebarang permintaan untuk memuat tanpa menjalankan versi JavaScript tanpa kepala di laman web anda. Apabila halaman ditetapkan untuk dimuatkan dalam mod keserasian, halaman hanya akan dimuatkan dalam PHP dan skrip aplikasi tidak akan terperinci. Ini membolehkan "halaman soalan" berjalan tanpa menulis semula apa -apa yang tidak berfungsi seperti yang diharapkan apabila menggunakan aplikasinya.

Terdapat beberapa cara yang berbeza yang anda boleh memaksa halaman untuk dijalankan dalam mod yang serasi - beberapa memerlukan kod dan ada yang tidak. Nicholas menambah suis togol ke mana -mana jenis pos yang memaksa jawatan untuk dimuatkan dalam mod keserasian.

Selain itu, anda boleh menambah sebarang URL secara manual untuk memaksanya untuk memuatkan dalam mod yang serasi dalam tetapan Nicholas.

Ini adalah permulaan yang baik, tetapi saya mendapati bahawa saya biasanya boleh mengesan secara automatik apabila halaman perlu dimuatkan dalam mod keserasian berdasarkan blok yang disimpan dalam jawatan. Sebagai contoh, katakan anda mempunyai borang Ninja yang dipasang di laman web anda dan anda ingin menggunakan JavaScript pengesahan yang mereka berikan dan bukannya mencipta JavaScript anda sendiri. Dalam kes ini, anda mesti memaksa mod keserasian untuk digunakan pada mana -mana halaman yang mengandungi borang ninja. Anda secara manual boleh menambah setiap URL satu demi satu, atau anda boleh menggunakan pertanyaan untuk mendapatkan segala -galanya di halaman dengan blok Ninja Forms. Contohnya:

 <code>add_filter( 'nicholas/compatibility_mode_urls', function ( $urls ) { // 过滤Ninja Forms块$filtered_urls = Nicholas::get_urls_for_query( [ 'post_type' => 'any', 's' => 'wp:ninja-forms/form', // 查找Ninja Forms块] ); return array_merge( $urls, $filtered_urls ); } );</code>

Ini secara automatik menambah mana -mana halaman yang mengandungi blok Ninja Forms ke senarai URL yang akan dimuatkan menggunakan mod keserasian. Ini hanya menggunakan parameter WP_Query, jadi anda boleh lulus apa sahaja yang anda mahu di sini untuk menentukan apa yang perlu ditambah ke dalam senarai.

Melanjutkan permohonan

Di sebalik tabir, Nicholas menggunakan penghala ringan yang boleh dilanjutkan menggunakan mod middleware, seperti aplikasi Express mengendalikan middleware. Apabila halaman klik diarahkan, sistem akan menjalankan setiap item middleware dan akhirnya mengarahkan halaman. Secara lalai, penghala tidak melakukan apa -apa ;

Contoh asas adalah seperti berikut:

 <code>// 导入WordPress特定的中间件import { updateAdminBar, validateAdminPage, validateCompatibilityMode } from 'nicholas-wp/middlewares' // 导入通用中间件import { addRouteActions, handleClickMiddleware, setupRouter, validateMiddleware } from "nicholas-router"; // 按此顺序执行这些操作，当页面被路由时。 addRouteActions( // 首先，验证URL validateMiddleware, // 验证此页面不是管理页面validateAdminPage, // 验证此页面不需要兼容模式validateCompatibilityMode, // 然后，我们更新Alpine存储updateStore, // 如果启用，则可能获取评论fetchComments, // 更新历史记录updateHistory, // 可能更新管理栏updateAdminBar ) // 设置路由器。这也使用中间件模式。 setupRouter( // 为点击设置事件监听器handleClickMiddleware )</code>

Dari sini, anda boleh memperluaskan apa yang berlaku apabila anda mengarahkan halaman. Mungkin anda mahu mengimbas halaman untuk menyerlahkan kod, atau anda mahu mengubahnya Kandungan tag adalah untuk memadankan halaman laluan baru. Malah lapisan cache boleh diperkenalkan. Apa sahaja yang perlu anda lakukan, tambahkan tindakan yang diperlukan hanya dengan menggunakan addRoUceAction atau setuprouter.

Langkah seterusnya

Berikut adalah gambaran ringkas saya mengenai beberapa komponen utama yang digunakan untuk melaksanakan pendekatan yang hampir tidak berkesudahan. Jika anda berminat untuk mengetahui lebih lanjut, saya cadangkan mengambil kursus saya di WP Dev Academy. Kursus ini adalah panduan langkah demi langkah untuk bagaimana membina laman web WordPress yang hampir tanpa kepala menggunakan alat moden. Saya juga mengesyorkan untuk menyemak boilerplate saya yang hampir tidak dapat membantu anda memulakan projek anda sendiri.

Atas ialah kandungan terperinci Cara Membangun Laman Web WordPress yang hampir tidak berkepala. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!