Rest Fire ve Vue.js kullanarak bir WordPress teması oluşturun
Arama Motorlarının Optimizasyonu (SEO)
İstemci/Sunucu Kodu Bölümü
Tarayıcı geçmişi
Analitik
Başlangıç yük hızı
Bu sorunların bazılarının üstesinden gelmek diğerlerinden daha kolaydır. Örneğin, tarayıcı geçmişi bir geçmiş API kullanılarak JS’de uygulanabilir ve Google Analytics, tek bir sayfa uygulamasını izleme desteğine sahiptir.
Diğer yandan istemci/sunucu kodu bölümü biraz daha karmaşıktır, çünkü şablonunuzu arka uçta yeniden yapmak ve farklı formatlarda ön uç yapmak istemezsiniz. Bunun üstesinden gelmenin bir yolu, sunucuda şablonlar oluşturmak ve aynı şablonu ön uçta kullanmak için NodeJ’leri kullanmaktır, ancak bunun bir zayıflığı vardır, çünkü PHP ile Nodejs çalıştırmalıdır. SEO, çoğu insan için ana sorun olarak anlaşılabilir ve büyük arama motorlarının çoğu JavaScript tarafından bir dereceye kadar oluşturulan siteyi sürüklerken, sonuçlar iyi değildir ve çoğu sosyal ağ paylaştığınızda içerik taramayacaktır.
Önemli performans ve bir sayfa uygulaması ile ilgili diğer büyük sorunlardan biri başlangıç yükleme hızıdır. Jack, bir JavaScript şablonundan otomatik olarak bir PHP şablon dosyası üretmeyi önererek daha da ileri gider (yani, sunucunun ilk sayfa yüklemesini oluşturmasına ve yüklendikten sonra JavaScript’in devralmasına izin ver) Oda dehşete kapılmış hissediyor (ve gerçekten de). Eylem Planı Bu sorunu ve potansiyel çözümleri düşündükten sonra, REST API ve VUE.JS’yi kullanarak basit bir çerçeve WordPress teması oluşturup oluşturamayacağımı görmeye karar verdim. Vue React’e benzer çünkü her ikisi de reaktif görünüm bileşenleri sağlar ve bestelenebilir, ancak beklediğiniz gibi, uygulama birçok yönden farklıdır. Bu makalenin tüm kodları ve tüm çalışma temaları isterseniz Repo Github’da bulunabilir. Kendi temalarınızı takip etmek ve kesmek için. Peki istemci/sunucu, SEO ve performans bölümleme sorunlarını nasıl ele alacağım? Temel olarak plan, ilk sayfayı yükledikten sonra sitede güç sağlamak için bootstrap vue için görülen sayfa için ekler olmadan içeriği görüntüleyecek çok basit bir temel WordPress teması oluşturmaktır. Bu, arama motorlarının verilen sayfalar için içeriği taramasına izin verirken, kullanıcılar aslında sunucudan oluşturulan içeriği görmez ve yalnızca VUE uygulamasını görmez. Daha sonra, WordPress Rest API’sinden alarak içeriği işlemek için site gezinmesini (geçmiş ve arka düğmeler dahil) ve Vue-Restource ile işlemek için Vue-Rouer’ı kullanacağız.
Temanın WordPress bölümü WordPress bölümü yalnızca üç dosya içerecektir: Style.css – WordPress ve Global Style tarafından kullanılan meta tema bilgileri dahil.
Functions.php – Komut dosyaları ve stiller için sıraya girmek için kullanılır ve API REST’den alınamayan çıktı bilgileri.
İndex.php – Arama motorları tarafından taranacak sayfanın en temel HTML içeriğini görüntüler.
İşte index.php: <html > <Meta Charset = " <link rel = "pingback" href = "”> <? php if (had_posts ()): if (is_home () &&! is_front_page ()) {echo '
‘. single_post_title (”, yanlış). ‘
‘; } while (hack_posts ()): the_post (); if (is_singular ()) {the_title (‘
‘, ‘
‘); } else {the_title (‘
‘, ‘
‘); } içerik (); Sonunda; Endif; ?>
Gördüğünüz gibi, sunucu tarafından oluşturulan içerikler #Content Div’e (gizlenecek) dahil edilir ve arama motorları tarafından kullanılır. Vue uygulaması Div #App’a önyüklenir. Hepsi temanın WordPress bölümü için.
Temanın vue bölümü vue bölümü dinlenme dispue klasöründe bulunabilir.VUE uygulaması SRC/Main.js dosyasında oluşturulur.Burada ana uygulama bileşenini basit bir şablonla yapıyoruz: ‘ ‘ + ‘
>’ + ‘ ‘, tema-olmayan ve tema-ayaklayıcı bileşenleri kendi dosyalarında tanımlanır.Yönlendirici-View bileşeni, geçerli sayfa için orada devam eden bileşenleri oluşturmak için VUE yönlendirici kitaplığı tarafından kullanılır.
Bir tema oluştururken bulduğum bir sorun, WordPress rotasını Vue’da nasıl yeniden yapacağım. Daha büyük siteler için, ASHNC Vue bileşenini yalnızca gerektiğinde rotayı yüklemek için kullanmak mantıklı olabilir, ancak küçük bir site için functions.php: function rest_theme_scripts () function’da WP_LOCALICAL_SCRIPT kullanarak görüntülenmeye karar verdim. (‘Rest-theme-vue’, ‘wp’, dizi (‘root’ => esc_url_raw (rest_url ()), ‘nonce’ => wp_create_nonce (‘wp_rest’), ‘site_name’ => get_bloginfo (‘ad’) , ‘rotalar’ => rest_theme_routes (),)); } Add_action (‘wp_enqueue_scripts’, ‘rest_theme_scripts’); işlev rest_theme_routes () {$ rointes = array (); $ query = new WP_Query (Array (‘Post_type’ => ‘Any’, ‘Post_status’ => ‘yayın’, ‘Post_per_page’ => -1,); if ($ query-> heat_posts ()) {while ($ query-> heat_posts ()) {$ query-> the_post (); $ rotes [] = array (‘id’ => get_the_id (), ‘type’ => get_post_type (), ‘slug’ => baseame (get_permalink ()),); }} wp_reset_postdata (); $ Rotaları döndür; } Bu, daha sonra Vue yönlendiricimizde rotamızı önyüklemek için kullanabileceğimiz ilk sayfanın yüklenmesindeki rotayı görüntüleyecektir:
for (wp.routes içindeki var tuşu) {var route = wp.routes [tuş]; Router.on (Route.slug, {bileşen: vue.component (Capitalize (Route.type)), Postid: Route.id}); } Daha sonra rota ile eşleşen bileşenler yaparım. Tip (bu durumda yazı ve sayfalar). Bu bireysel bileşen, API dinlenmesinden alınan ve çıktıyı oluşturan içeriği işler. Örneğin:
