Vue.js ile Başsız WordPress Sitesini Nasıl Oluşturacağınızı Öğrenin

WordPress, geliştiriciler ve geliştirici olmayanlar için hızlı bir şekilde çarpıcı web siteleri oluşturmak ve oluşturmak için kullanılan içerik yönetim sistemi olmuştur.

İçerik yönetimi arka ucunun ön uçtan ayrı olduğu bir mikro hizmet mimarisi kullanmak, her iki "uç" için de maksimum kontrol sağlar. Bu ayırma sorunu, başsız WordPress çözümleri de dahil olmak üzere başsız içerik yönetim sistemlerinin çözmeye çalıştığı şeydir.

Başsız bir yaklaşımla, işletmeler içerik yönetimi arka ucu üzerinde daha ayrıntılı kontrole sahip olur. Ayrıca React, Vue, Angular vb. dahil olmak üzere seçtikleri herhangi bir ön ucu kullanmakta özgürler.

Bu kılavuz, başsız WordPress'i ve neyle ilgili olduğunu, ne zaman ve neden kullanmayı düşünmeniz gerektiğini ayrıntılı olarak keşfedecektir. Son olarak, başsız bir WordPress ortamı oluşturmayı, Vue.js ile ön ucu oluşturmayı ve Kinsta kullanarak başsız WordPress'i dağıtmayı keşfedeceğiz.

Başsız WordPress Nedir?

WordPress, arka uç ve ön uç parçalarının birbirine sıkıca sarıldığı monolit bir uygulamadır. Arka uç, yönetimin devreye girdiği, görünüm yapılandırmalarının değiştirilmesi de dahil olmak üzere içerik oluşturabileceğiniz, düzenleyebileceğiniz, ekleyebileceğiniz ve silebileceğiniz yerdir. Buna karşılık, içeriğin kullanıcıya gösterilmesinden ön uç sorumludur.

Başsız WordPress, ayrıştırılmış WordPress'i tanımlamak için kullanılan terimdir. Arka uç (yönetim) bölümü, WordPress CMS'nin ön uç bölümünden ayrıdır. Ön ucu, istediğiniz herhangi bir ön uç çerçevesiyle bağımsız bir uygulama olarak geliştirebilir ve yönetebilirsiniz.

Headless WordPress'in Artıları ve Eksileri

Ardından, konsepti daha iyi anlamanız için başsız WordPress'in artılarını ve eksilerini keşfedeceğiz.

Profesyoneller

İlk olarak, profesyonelleri keşfederek başlayacağız.

Süper Hızlı Performans

Süper hızlı performans gösteren uygulamalar çağında, web sitenizin yüklenmesi birkaç saniyeden fazla sürmemeli ve ziyaretçi kaybetmemelidir. Ön uç, WordPress'ten ayrıldığından ve modern ön uç araçları kullanılarak yüksek performans ve ölçeklenebilirlik göz önünde bulundurularak geliştirilebildiğinden, başsız bir WordPress yaklaşımı kullanmak, web sitenizin genel kullanıcı deneyimi için büyük fayda sağlar.

Granül Kontrol

Başsız mimariyi seçmek, tasarım düzeniniz, içerik sunumunuz ve kullanıcıların uygulamanızın ön ucuyla nasıl etkileşime girdiği konusunda size daha fazla kontrol sağlar. Ayrıca arka uç içeriğinizin güvenliğinin sağlanmasına ve merkezi bir konumdan erişilmesine olanak tanır.

Artan Ölçeklenebilirlik

WordPress'i ölçeklendirmek bazen karmaşık olabilir, çünkü özellikle geliştirici değilseniz, WordPress'i destekleyen tüm bileşenler ve kodlar üzerinde tam kontrole sahip değilsiniz. Ancak WordPress'in ayrıştırılmasıyla, her bir parçayı ayrı ayrı ölçeklendirmek zahmetsizdir ve hangi parçanın ölçeklendirilmesi gerektiğini kolayca tespit edebilirsiniz.

Daha Sıkı Güvenlik

Ayrık WordPress bilgisayar korsanlarına ve DDoS saldırılarına karşı yüksek güvenlik avantajlarına sahip olduğundan, başsız WordPress'in güvenlik avantajlarını yeterince vurgulayamıyoruz. Başsız WordPress yaklaşımı, bilgisayar korsanlarının hassas arka uç verilerinize erişmesini zorlaştırır, çünkü bunlar kullanıcıya yönelik web siteniz olan ön uçtan ayrıdır.

Hafif Tasarım

Ön uç tasarımınızın yapısı ve düzeni üzerinde daha fazla kontrole sahip olacaksınız. Ek olarak, daha özgür ve özelleştirilmiş tasarımla ön uç üzerinde çalışabilirsiniz; REST API çağrıları sayesinde modern web araçlarından yararlanabilecek ve bunları ön uçta dağıtabileceksiniz.

Çok Kanallı İçerik Yayıncılığı

Başsız WordPress, içeriğinizi ön uca iletmek için API tabanlı bir sistem kullandığından, içeriğinizi masaüstü, web sitesi, mobil uygulamalar ve dokunmatik ekran kiosk dahil olmak üzere herhangi bir yerde ve herhangi bir platformda görüntüleyebilirsiniz. API tabanlı sistemden gelen içeriğinizi görüntülemek ve sunmak için Artırılmış Gerçeklik, Sanal Gerçeklik ve Nesnelerin İnterneti cihazlarından tam olarak yararlanmanız da mümkündür.

Eksiler

Başsızın eksilerini ilerledikçe daha derinlemesine keşfedeceğiz, ancak ana dezavantajları:

1. Arka ucu ve ön ucu ayırmak, farklı web sitesi örneklerini yönetirken size ekstra bir yük sağlar.
2. Ekibinizde ek üyelere ve farklı örnekleri çalıştırmak için ekstra sermayeye ihtiyaç duyduğundan uygulanması maliyetli olabilir.
3. İçeriğinizi farklı platformlarda kullanıma sunmak, içeriğin tüm platformlarda tutarlı bir şekilde sunulmaması durumunda kullanıcılarınız için tutarsız bir deneyime neden olabilir.

Başsız WordPress En İyi Seçenek Olmadığında

Başsız WordPress büyük faydaları olan inanılmaz bir yenilik olduğundan, onunla devam edip etmemeye karar verirken aklınızda bulundurmanız gereken bazı şeyler var.

1. Başsız WordPress'in bakımı çok pahalıdır. Altyapıdan birden çok geliştiriciye kadar bir web sitesinin iki farklı örneğini sürdüreceksiniz.
2. Headless WordPress, WordPress'in tüm özelliklerini desteklemez. Örneğin, WYSIWYG düzenleyici ve canlı önizleme gibi harika WordPress özellikleri, ayrı bir ön uç kullanıldığında çalışmaz.
3. Başsız bir WordPress kurmak daha pahalıdır. Bu nedenle, artan maliyetini daima aklınızda bulundurun.

Başsız WordPress'i Kimler Kullanmalı?

Başsız WordPress'e ihtiyaç duyabileceğiniz en uygun durumlar aşağıdadır:

1. Web sitenizin güvenliği en büyük endişeniz ve şirketiniz için çok önemliyse, başsız WordPress kullanıyor olmalısınız.
2. Ardından, web sitenizin düzenli olarak yükseltilmesi ve güncellenmesi gerekmiyorsa, başsız bir kurulum kullanmanız gerektiğinin harika bir işareti olacaktır.
3. Ardından, bir WordPress temasının kolayca yapamayacağı özelleştirilmiş bir tasarıma sahip olmak istiyorsanız, web sitenizin ön yüzünü benzersiz bir tasarımla renklendirmek istersiniz. Ardından, başsız WordPress bir sonraki seçeneğinizdir.
4. Son olarak, kısa ömürlü bir web sitesi veya sunumlar ve eğitimler için bir demo sitesi oluşturuyorsanız, başsız yaklaşımı deneyebilirsiniz.

Başsız WordPress Kullanmaktan Kimler Kaçınmalı?

Başsız WordPress kullanmanın iyi bir seçenek olmadığı birkaç durum:

1. Web siteniz yalnızca uygulamanızın ön ucunu kontrol eden ve en iyi şekilde çalışan belirli eklentilere ve işlevlere dayandığında, eklentiler verileri tüketmek için API tabanlı seçenekler sunmadıkça WordPress'e bağlı kalmalısınız.
2. Diyelim ki web sitenizi kodlamakla ilgilenmiyorsunuz veya web siteniz günlük bakım gerektiriyor ve düşük bütçeniz nedeniyle rutin bakım için bir profesyonel işe almıyorsunuz. Bu durumda WordPress sizin için uygun bir seçenektir.
3. Deneyimli bir geliştirici değilseniz ve web sitenizi tek başına oluşturmak ve yönetmek istiyorsanız, WordPress kullanıyor olmalısınız.

WordPress Nasıl Başsız Yapılır (Uygulama Oluşturun)

Bu bölüm, arka uç için başsız WordPress ve kullanıcıya dönük ön uç olarak Vue 3 ile bir haber blogu oluşturmayı ve geliştirmeyi keşfedecektir.

Devkinsta ile Headless WordPress Kurulumu

WordPress sitelerini yerel makinenizin rahatlığında tasarlamak, geliştirmek ve dağıtmak için popüler bir WordPress yerel geliştirme ortamı olan DevKinsta ile başsız WordPress'i geliştireceğiz.

DevKinsta sonsuza kadar ücretsizdir ve onunla WordPress geliştirme ve oluşturma konusunda size büyük faydalar ve rahatlık sunar.

DevKinsta'yı resmi web sitesinden indirip yükleyebilir ve başlamak için belgelerdeki talimatları takip edebilirsiniz.

DevKinsta zaten kurulu olduğundan, onu açacağız ve ilk başsız WordPress'imizi kurmak için aşağıdaki adımı izleyeceğiz.

DevKinsta panosunda Nginx, MySQL ve mevcut herhangi bir WordPress sürümünü kullanarak yeni bir WordPress sitesi oluşturun. Ayrıca, mevcut bir WordPress örneğini içe aktarabilir veya kontrol panelinden özel bir WordPress örneği oluşturabilirsiniz.

Ardından, yeni oluşturulan WordPress örneğinize bir ad, yönetici kullanıcı adı ve şifre verin, ardından DevKinsta yerel makinenizde yeni bir WordPress örneği oluştururken Oluştur'a tıklayın ve ayrıntıları kopyalayın.

Ardından, varsayılan tarayıcınızda yeni oluşturduğunuz WordPress örneğini açmak için Siteyi Aç'a tıklayın.

Son olarak, http://headless-wordpress-news-blog.local/wp-admin bağlantısına erişerek ve yeni örneği oluştururken girdiğiniz yönetici oturum açma bilgilerini girerek yönetici panosuna giriş yapabilirsiniz.

Başsız WordPress'imizi http://headless-wordpress-news-blog.local URL'si ile yerel olarak kurduğumuzu ve ön ucun yerel olarak http://news-blog.local barındırıldığını ve bunu baştan sona kullanacağımızı unutmayın. öğretici.

Başsız WordPress'imizi Yapılandırma

Ardından, WordPress kontrol panelinize başarıyla giriş yaptıktan sonra, istediğiniz eklentileri ve yapılandırmayı yüklemeye devam edebilirsiniz.

Bu eğitim için temayı tamamen devre dışı bırakacağız ve içeriğe yalnızca Simple Website Redirect eklentisini yükleyip ayarlayarak WordPress REST API tabanlı uç nokta üzerinden erişeceğiz.

Eklentiler > Yeni ekle'ye gidin ve Basit Web Sitesi Yönlendirmesini arayın, kurun ve etkinleştirin:

Ardından, eklenti Ayarlarına tıklayın ve ön uç tabanlı URL'nizi girin (örneğin http://news-blog.local ), Gelişmiş ayar seçeneklerine tıklayın ve aşağıdaki yolları ekleyin - /wp-admin , /wp-login.php ve /wp-json — Yolları Hariç Tut bölümüne.

Son olarak, Yönlendirme Durumu açılır menüsünde Etkin'i seçerek Eklentiyi etkinleştirin:

…ve bu kadar!

Ek olarak, varsayılan olarak http://headless-wordpress-news-blog.local/wp-json adresini ziyaret ettiğinizde JSON API'niz etkin değilse, WordPress Ayarları altında Kalıcı Bağlantılarınızı açıp Gönderi Adı veya herhangi birini seçerek etkinleştirebilirsiniz. Plain dışında seçtiğiniz diğer biri:

Şimdi http://headless-wordpress-news-blog.local/wp-json 'nizi ziyaret ettiğinizde, size aşağıdaki gibi JSON verilerini sunmalıdır:

 { "name": "Headless WordPress News Blog", "description": "Just another WordPress site", "url": "http://headless-wordpress-news-blog.local", "home": "http://headless-wordpress-news-blog.local", "gmt_offset": "0", "timezone_string": "", "namespaces": [ "oembed/1.0", "wp/v2", "wp-site-health/v1" ], "authentication": [ ], "routes": { "/": { "namespace": "", "methods": [ "GET" ], "endpoints": [ { "methods": [ "GET" ], "args": { "context": { "default": "view", "required": false } } } ], ...

Vue.js (Ön Uç) Kurulumu

Başsız WordPress ile bağlantı kurmak için Vue 3 uygulamamızı oluşturmak için Vite web geliştirme aracını kullanacağız. Vue 3 ve Vite geliştirme araçları hakkında daha fazla bilgi edinebilirsiniz.

Bu yazımızda bir haber blogu oluşturacağız. Projenin tüm arka uç içerik yönetimi, Devkinsta kullanan başsız WordPress'imiz ile geliştirilecek ve barındırılacaktır.

Bu basit komutlarla birlikte yazın:

 npm init @vitejs/app news-blog cd news-blog npm install npm run dev

Kullanıcı adınızdaki boşluklarla ilgili sorun yaşıyorsanız, şunu kullanmayı deneyin:

 npx create-vite-app news-blog

Vue 3 uygulamamızı http://news-blog.local dinleyecek şekilde yapılandırdığımızı unutmayın, ancak varsayılan http://localhost:3000 ile devam edebilirsiniz.

Son olarak, seçtiğiniz herhangi bir kod düzenleyiciyle Vue 3 kod tabanınızı açın. VSCode ile gideceğiz ve kodlarla ellerimizi kirletelim.

WordPress API'sini Kullanma

Size okuma süresinden tasarruf etmek için Vue uygulamasının kalan kısmını geliştirmeye devam ettik, ancak depoyu GitHub'dan klonlamaya devam edebilirsiniz.

Uygulama Gönderi Bileşenini Görüntüle

Aşağıdaki kod parçacığı, başsız WordPress'teki tüm gönderileri görüntülemek için WordPress REST API'sini Vue örneğimizle nasıl uyguladığımızı gösterir:

 <template> <section> <div class="padding-top"> <div class="container inner-padding-top"> <div class="row"> <div class="col-md-12 col-sm-12-col-xs-12 text-center"> <h2 class="lead-title text-uppercase"> Latest Backend Dev. Articles </h2> <h3 class="article-subtitle"> Latest Backend Dev. Articles curated daily by the community. </h3> </div> </div> <div class="row mb-1 mt-5"> <post v-for="(post, i) in posts" :key="i" :post="post" /> </div> </div> </div> <div class="col-md-12 col-sm-12-col-xs-12 text-center mb-5"> <Button link="/posts" class="col p-3">More Articles</Button> </div> </section> </template> <script> import { mapState } from 'vuex' export default { computed: { ...mapState({ posts: (state) => { return [...state.post.posts].slice(0, 22) }, }), }, } </script>

Tek Posta Bileşenini Görüntüle

Kod parçacığı, başsız WordPress ile WordPress REST API ile tek bir gönderiyi nasıl aldığımızı ve onu Vue örneğimizde nasıl görüntülediğimizi gösterir:

 <template> <div class="card single"> <div class="card-head pl-3 pr-3 pt-3"> <h1 class="title">{{ post.title || '' }}</h1> <div class="d-flex"> <div class="author d-flex pr-3 pb-4"> <div class="profile mr-2"></div> <a :href="'/authors/' + post.author.slug" class="subtitle is-6"> {{ post.author.name }} </a> </div> <div class="date_created"> <small class="text-muted"> <li class="fa fa-calendar"></li> <time :datetime="$moment(post.date).format('MMMM Do YYYY, h:mm:ss a')" >{{ $moment(post.date).format('MMMM Do YYYY') }}</time > </small> </div> </div> </div> <div class="block-image pl-3 pr-3 pt-2 mb-3"> <img v-lazy-load :data-src="image" class="card-img-top img-fluid" :alt="post.title" /> </div> <div class="tags absolute"> <a v-for="category in post.categories" :key="category.id" :href="'/categories/' + category.slug" class="btn-tag" > {{ category.title }} </a> </div> </div> </template> <script> import Vue from 'vue' export default { name: 'SinglePost', props: { post: { type: [Object, Array], default: () => {}, }, }, } </script>

Aşağıda, arka uç içerikleri için başsız WordPress API'sine API çağrıları yapan mağaza yer almaktadır:

 export const actions = { async getPosts({ commit }, { page, count = 22 }) { try { const response = await fetch( `http://headless-wordpress-news-blog.local/wp-json/wp/v2/posts` ) const data = await response.json() if (data) { commit('setPosts', data) } return data } }, async getPost({ commit }, id) { try { const response = await fetch( `http://headless-wordpress-news-blog.local/wp-json/wp/v2/posts/${id}` ) const data = await response.json() if (data) { commit('setPost', data) } return data } }, }

Kinsta ile Headless WordPress'i Dağıtma

Son olarak, Kinsta barındırma hizmetini kullanan DevKinsta ile başsız WordPress'inizi dağıtmak çok kolay.

Başsız WordPress'inizi Kinsta'ya dağıtmak için DevKinsta panonuzdaki Aşamaya Bas düğmesine tıklayın ve oturum açma kimlik bilgilerinizle Kinsta'da oturum açın. Oturum açma kimlik bilgilerinizi almak için yeni bir Kinsta hesabı oluşturabilirsiniz.

Başsız WordPress'inizi tek bir tıklamayla Kinsta barındırma hizmetlerine dağıtmak için hazırlama ortamındaki değişiklikleri nasıl yapacağınızı öğrenebilirsiniz.

Son olarak, Vue.js örneğinizi istediğiniz herhangi bir bulut barındırma sağlayıcısına dağıtabilirsiniz. Uygulamanızı canlı bir üretim ortamında test etmek için başsız WordPress uç noktanızı uygun şekilde güncellediğinizden emin olun.

Özet

Başsız WordPress ve beraberinde getirdiği avantajlar bir süre daha burada kalacak. Popülaritesi, yalnızca daha fazla geliştirici ve site sahibi, başsız bir seçeneğin iyi taraflarını anlamaya başladıkça artmaya devam edecek.

Bu kılavuzda, size başsız WordPress'in yararlarını, artılarını ve eksilerini tanıttık ve DevKinsta ile ilk başsız WordPress'inizi nasıl oluşturacağınızı ve dağıtacağınızı gösterdik. Artık başsız WordPress uygulamanıza sahip olma yolundasınız.

Başsız bir WordPress sitesi dağıtmak için ipuçlarınız nelerdir? Lütfen bunları yorumlar bölümünde paylaşın!