ev borcu WordPress sitesi
REST API ve Vue.js kullanarak bir WordPress Teması Oluşturma
Birkaç hafta önce Day of REST konferansına katıldıktan sonra, WordPress REST API'sine dalmak ve onu test etmek için ilham aldım. O gün Automattic'ten Jack Lenox, REST API ve React kullanarak bir WordPress teması oluşturma deneyimini anlattığı “Orada ve Tekrar: Bir Geliştiricinin Hikayesi” başlıklı bir konuşma yaptı. Görüşleri ilginçti ve tek sayfalık bir uygulama olarak bir WordPress teması oluşturmanın bazı zorluklarını açıkça dile getirdi:
- Arama Motoru Optimizasyonu (SEO)
- İstemci/sunucu kodu bölümleme
- Tarayıcı geçmişi
- Analitik
- İlk yük hızı
Bu sorunlardan bazılarının üstesinden gelmek diğerlerinden daha kolaydır. Örneğin, tarayıcı geçmişi, Geçmiş API'si kullanılarak JS'de uygulanabilir ve Google Analytics, Tek Sayfa Uygulama İzlemeyi destekler.
Diğer yandan, istemci/sunucu kodu bölümleme, şablonlarınızı arka uçta ve ön uçta farklı biçimlerde yeniden oluşturmak istemediğiniz için biraz daha karmaşıktır. Bunu aşmanın bir yolu, sunucuda şablonlar oluşturmak için Nodejs kullanmak ve aynı şablonu ön uçta kullanmaktır, ancak bunun dezavantajı Nodejs'i PHP ile birlikte çalıştırma ihtiyacıdır.
SEO, anlaşılır bir şekilde çoğu insan için büyük bir sorundur ve çoğu büyük arama motoru JavaScript ile oluşturulmuş siteleri belirli bir dereceye kadar tararken, sonuçlar harika değildir ve çoğu sosyal ağ, içeriği paylaştığınız zaman taramayacaktır.
Performans önemlidir ve tek sayfalı uygulamalardaki diğer büyük sorunlardan biri de ilk yükleme hızıdır. Jack, işleri hızlandırmanın bir yolu olarak işlenmiş JavaScript şablonlarından otomatik olarak PHP şablon dosyaları oluşturmayı önerecek kadar ileri gitti (yani, sunucunun ilk sayfanın yüklenmesini sağlamasına ve yüklendikten sonra JavaScript'in devralmasına izin vermesine izin verin), bu da odadaki çoğu insanı rahatsız etti ( Ve haklı olarak).
Eylem Planı
Bu sorunları ve olası çözümleri düşündükten sonra, REST API ve Vue.js kullanarak basit bir iskelet WordPress teması oluşturup oluşturamayacağımı görmeye karar verdim. Vue, hem reaktif hem de şekillendirilebilir Görünüm bileşenleri sağladıkları için React'e benzer, ancak beklediğiniz gibi uygulama birçok yönden farklılık gösterir.
Bu makaledeki tüm kodlar ve tüm çalışma teması, kendi temanızı takip etmek ve kesmek istiyorsanız GitHub deposunda bulunabilir.
Peki, istemci/sunucu kod bölümleme, SEO ve performans sorunlarıyla nasıl başa çıkacağım? Temel olarak plan, görüntülenen sayfa için gösterişsiz içerik çıkaracak çok basit bir temel WordPress teması oluşturmak ve ardından ilk sayfa yüklendikten sonra siteyi güçlendirmek için bunun üzerine Vue'yu önyüklemek. Bu, arama motorlarının verilen sayfanın içeriğini taramasına izin verirken, gerçek kullanıcılar sunucudan oluşturulan içeriği görmez ve yalnızca Vue uygulamasını görür. Ardından, sitede gezinmeyi (geçmiş ve geri düğmesi dahil) işlemek için vue-router'ı ve WordPress REST API'sinden içerik getirmeyi işlemek için vue-resource'u kullanacağız.
WordPress Bölümü
Temanın WordPress kısmı yalnızca üç dosya içerecektir:
-
style.css– WordPress ve genel stiller tarafından kullanılan tema meta bilgilerini içerir. -
functions.php– Komut dosyalarımızı ve stillerimizi sıraya koymak ve REST API'sinden alamadığımız çıktı bilgileri için kullanılır. -
index.php– Arama motorları tarafından taranacak sayfanın çok temel HTML içeriğini çıkarır.
İşte index.php için kod:
<!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="profile" href="http://gmpg.org/xfn/11"> <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>"> <?php wp_head(); ?> </head> <body> <div> <?php if ( have_posts() ) : if ( is_home() && ! is_front_page() ) { echo '<h1>' . single_post_title( '', false ) . '</h1>'; } while ( have_posts() ) : the_post(); if ( is_singular() ) { the_title( '<h1>', '</h1>' ); } else { the_title( '<h2><a href="' . esc_url( get_permalink() ) . '">', '</a></h2>' ); } the_content(); endwhile; endif; ?> </div> <div></div> <?php wp_footer(); ?> </body> </html>
Gördüğünüz gibi, sunucu tarafından oluşturulan içerik bir #content (gizlenecek) gider ve arama motorları tarafından kullanılır. Vue uygulaması daha sonra #app . Temanın WordPress kısmı için bu kadar.
Vue Bölümü
Temanın Vue kısmı, rest-theme klasöründe bulunabilir. Vue uygulaması, src/main.js dosyasında oluşturulur. Burada basit bir şablonla ana App bileşenini oluşturuyoruz:
template: '<theme-header></theme-header>' + '<div class="container"><router-view></router-view></div>' + '<theme-footer></theme-footer>',
theme-header ve theme-footer bileşenleri kendi dosyalarında tanımlanır. router-view bileşeni, vue-router kitaplığı tarafından, geçerli sayfa için kendisine iletilen herhangi bir bileşeni işlemek için kullanılır.
Temayı oluştururken karşılaştığım bir sorun, Vue'da WordPress rotalarının nasıl yeniden oluşturulacağıydı. Daha büyük siteler için, Vue'nun Async Bileşenlerini yalnızca ihtiyaç duyulduğunda rotaları yüklemek için kullanmak muhtemelen mantıklıdır, ancak küçük bir site için wp_localize_script kullanarak functions.php :
function rest_theme_scripts() { //... wp_localize_script( 'rest-theme-vue', 'wp', array( 'root' => esc_url_raw( rest_url() ), 'nonce' => wp_create_nonce( 'wp_rest' ), 'site_name' => get_bloginfo( 'name' ), 'routes' => rest_theme_routes(), ) ); } add_action( 'wp_enqueue_scripts', 'rest_theme_scripts' ); function rest_theme_routes() { $routes = array(); $query = new WP_Query( array( 'post_type' => 'any', 'post_status' => 'publish', 'posts_per_page' => -1, ) ); if ( $query->have_posts() ) { while ( $query->have_posts() ) { $query->the_post(); $routes[] = array( 'id' => get_the_ID(), 'type' => get_post_type(), 'slug' => basename( get_permalink() ), ); } } wp_reset_postdata(); return $routes; }
Bu, Vue yönlendiricimizde rotalarımızı önyüklemek için kullanabileceğimiz ilk sayfa yükündeki rotaları çıkaracaktır:
for (var key in wp.routes) { var route = wp.routes[key]; router.on(route.slug, { component: Vue.component(capitalize(route.type)), postId: route.id }); }
Daha sonra route.type karşılık gelen bileşenler oluşturdum (bu durumda gönderiler ve sayfalar). Bu bağımsız bileşenler, içeriği REST API'sinden almayı ve çıktıyı oluşturmayı işler. Örneğin:
<template> <div class="post"> <h1 class="entry-title" v-if="isSingle">{{ post.title.rendered }}</h1> <h2 class="entry-title" v-else><a v-link="{ path: '/' + post.slug }">{{ post.title.rendered }}</a></h2> <div class="entry-content"> {{{ post.content.rendered }}} </div> </div> </template> <script> export default { props: { post: { type: Object, default() { return { id: 0, slug: '', title: { rendered: '' }, content: { rendered: '' } } } } }, ready() { // If post hasn't been passed by prop if (!this.post.id) { this.getPost(); this.isSingle = true; } }, data() { isSingle: false }, methods: { getPost() { this.$http.get(wp.root + 'wp/v2/posts/' + this.$route.postId).then(function(response) { this.post = response.data; this.$dispatch('page-title', this.post.title.rendered); }, function(response) { // Error console.log(response); }); } } } </script>
Tek dosya bileşenleri ve ECMAScript 6 JavaScript için burada Vueify biçimini kullandığımı unutmayın.
Ortaya çıkan diğer bir sorun, uygulamadaki sayfaları değiştirdiğinizde sayfanın title öğesini güncellemekti. Başlığı güncelleyecek olan ana bileşene bir güncelleme göndermek için Vue'nin dispatch yöntemini kullanmaya karar verdim:
// In the child component... this.$dispatch('page-title', this.post.title.rendered); // In the App component methods: { updateTitle(pageTitle) { document.title = (pageTitle ? pageTitle + ' - ' : '') + wp.site_name; } }, events: { 'page-title': function(pageTitle) { this.updateTitle(pageTitle); } }
Sıradaki ne?
Bu aşamada tema çok basittir ve aşağıdakiler de dahil olmak üzere geliştirilecek birçok şey vardır:
- Yalnızca bir sayfa listesi çıkarmak yerine WordPress menülerini uygulamak
- Verilere zaten sahipsek, REST API'ye basmaya devam etmememiz için önbelleğe alma
- Google Analytics'i Uygulamak
- Yükleme göstergelerini ve geçişleri uygulayın
- Daha gelişmiş yazı/sayfa bileşenleri
- Daha fazla…
Her neyse, umarım bu makale en azından biraz fikir verir ve REST API tarafından desteklenen kendi WordPress temalarınızı oluşturmak için bir başlangıç noktası sağlar. Makalenin başında ana hatlarıyla belirttiğim engellerin çoğunun üstesinden gelmeyi başardım, ancak bu, bu sorunları aşmanın daha iyi yolları olmadığı anlamına gelmiyor. Çalışan temayı hatırlayın ve tüm kodlar GitHub deposunda bulunabilir.
REST API ile bir WordPress teması oluşturmayı denediniz mi? Deneyimin neydi?