Başsız WordPress nedir? Nasıl Oluşturulur? [Eğitim]

WordPress başsız CMS'nin artıları ve eksileri nelerdir?

Başsız WordPress, her biri farklı senaryolarda çalışmanızı etkileyebilecek birçok avantaj ve dezavantajla birlikte gelir. Net bir resim elde etmek için Artılarını ve Eksilerini Karşılaştırma Tablosu formatında karşılaştıralım.

Başsız WordPress iyi mi?

Daha önce bahsettiğimiz sınırlamaları göz ardı ederseniz, başsız WordPress kullanmanın sizin için faydalı olabileceği bazı senaryolar vardır.

• Web sitenizin güvenliği son derece öncelikliyse ve veri işleme çok hassas veya kritikse.
• WordPress'in sınırlı tema seçeneklerinin kısıtlamaları olmadan özel tasarımın ve sınırsız olanakların tadını çıkarıyorsanız ve benzersiz bir ön uç tasarımı arıyorsanız, Başsız WordPress'i tercih edin.
• Web sitenizi WordPress'in sık sık yaptığı güncellemeler ve yükseltmelerle izole tutmak istiyorsanız.
• Web sitenizi veya uygulamanızı geleceğe hazır hale getirmek ve tüm altyapınızı elden geçirmenize gerek kalmadan yeni teknolojilere, trendlere ve kullanıcı davranışlarına uyum sağlamak istiyorsanız, başsız WordPress'i düşünün.
• Demo web siteleri, küçük veya kısa vadeli projeler veya eğitimler arıyorsanız Headless kurulumu iyi bir seçenek olabilir.

Başsız WordPress nasıl çalışır?

Standart WordPress'ten bahsederken, kullanıcı dostu bir arayüz ve içeriği kolayca düzenleyebileceğiniz, oluşturabileceğiniz ve silebileceğiniz ve web sitesini yönetebileceğiniz kullanımı kolay bir yönetici paneli ile birlikte gelir.

Ön uç için, ekranda görsel olarak çekici bir web sitesi oluşturmak için yerleşik temaların yanı sıra üçüncü taraf temalarını birleştiren binlerce tema seçeneği sunar.

Ancak WordPress'i ayırdığınızda her iki dünyanın en iyilerinin keyfini çıkarabilirsiniz. Bunu mümkün kılmak için WordPress'in WordPress REST API adında bir API'si vardır.

Geliştiricilerin standart HTTP yöntemlerini kullanarak WordPress web sitesi verilerine erişmesine ve bunlarla etkileşime girmesine olanak tanıyan bir programlama arayüzüdür.

Geliştiricilerin WordPress içeriğini uzaktan almasına, oluşturmasına, güncellemesine ve silmesine olanak tanır; bu da özel bir web sitesi oluşturmak için WordPress'i diğer uygulama platformlarıyla veya React.js, Angular.js vb. gibi diğer ön uç teknolojilerle entegre etmeyi kolaylaştırır.

WordPress'i nasıl başsız hale getirebilirim? (Başsız WordPress Eğitimi)

Kullanacağınız teknolojiye, kaynaklara, tercih ettiğiniz dillere ve çerçevelere bağlı olarak standart WordPress'i ayırmanın çeşitli yolları olabilir. Hangi yöntem kullanılırsa kullanılsın, ön uç dillerin yanı sıra WordPress Rest API konusunda da rahat olmalısınız.

Ancak bireylerin çoğunluğunun yeni başlayanlar olması nedeniyle şimdilik en basit yöntemi seçeceğiz. Aşağıda verilen adımlara göz atın:

1. Adım: WordPress'i Kurun

Yapmanız gereken ilk şey, normalde sunucunuzda yaptığınız gibi bir WordPress web sitesi oluşturmaktır. Bu, web sitesinin yayında olması, kendi etki alanına ve uygun bir web barındırma hesabına sahip olması gerektiği anlamına gelir.

Ancak doğru WordPress barındırma platformunu seçmek başlı başına çok zor bir iştir ve hatta WordPress'i kurarken ve bağımsız bir CMS oluştururken çok önemli bir adımdır.

Bu çok önemlidir çünkü ön uç ve arka uç ayrılmış olsa bile arka ucun yine de barındırma gerektiren bir sunucuda bulunması gerekir.

Sunucu yalnızca tüm web sitesi içeriğinizi depolamak için bir yuva sağlamakla kalmaz, aynı zamanda performansı, güvenliği ve güvenilirliği de, hangi teknolojiyi kullanırsa kullansın, web sitesi içeriğini ön uca sorunsuz bir şekilde ulaştırmak için çok önemlidir.

Bu nedenle, Son Derece Hızlı Sunucu performansı ve sıkılaştırılmış güvenlik sunan bir ana bilgisayar seçmek önemli hale geliyor.

Bunu göz önünde bulundurarak, hız, kurumsal düzeyde güvenlik ve konsiyerj desteğinin bir karışımını sunan, WordPress yolculuğunuzun daha sorunsuz olmasını sağlayan, En Hızlı ve lider Tam olarak yönetilen WordPress barındırma şirketlerinden biri olan WPOven'i seçebilirsiniz.

• Özellikle WPOven , üst düzey bulut sağlayıcısı Linode üzerinde yönetilen barındırma sağlayarak yüksek hızlı performans ve ölçeklenebilirlik sağlar.
• Platform, WordPress öncesi kurulum sunarak WordPress ve diğer araçların kurulumunu sorunsuz hale getirir.
• Ayrıca yerleşik gelişmiş önbellekleme sistemi ve Cloudflare'in içerik dağıtım ağı (CDN) sayesinde, kullanıcının konumundan bağımsız olarak içeriğiniz daha hızlı teslim edilir.
• Ayrıca WPOven, yerleşik web koruma güvenlik duvarları ve SSL kurulumu aracılığıyla kurumsal düzeyde sağlam güvenlik sağlayarak arka uç verilerinizin ve etkileşimlerinizin korunmasına yardımcı olur.
• Otomatik yedeklemeler ve kolay geri yükleme seçenekleri, ek bir veri koruma katmanı ve gönül rahatlığı sağlar.
• Ayrıca, WPOven'in 7/24 müşteri desteği ve kapsamlı bilgi tabanı, her türlü sorunun hızlı bir şekilde ele alınmasını sağlayarak, barındırmayla ilgili sorunlar olmadan başsız CMS'nizi oluşturmaya ve yönetmeye odaklanmanıza olanak tanır.

2. Adım: REST API'yi etkinleştirin

Yapmanız gereken bir sonraki şey, WordPress REST API'nin etkinleştirildiğinden emin olmaktır. Varsayılan olarak tüm yeni WordPress kurulumlarında etkindir.

Ancak yine de web sitenizde etkin olup olmadığını doğrulamanız gerekir. Bunu, tarayıcınıza aşağıdaki URL'yi girerek bir API isteği yaparak yapabilirsiniz,

https://example.com/wp-json/wp/v2/

'example.com'u gerçek alan adınızla değiştirin; API etkinleştirilmişse, web sitenizin gönderileri hakkında bazı bilgiler içeren bir JSON yanıtı görüntüler.

Alternatif olarak WP REST API eklentisi gibi bir eklentiden yardım alabilirsiniz.

Okuyun: WordPress REST API: Başlangıç ​​Kılavuzu

3. Adım: Gönderi Verilerini API aracılığıyla Getirin

Gönderi verilerini almak istiyorsanız şu adımları izleyin:

• WordPress kontrol panelinizi açın > Ayarlar > Kalıcı Bağlantılar ve Gönderi adı'nı seçin.

• Bundan sonra Postman API test aracını indirmeniz gerekiyor.
• Şimdi Postman API aracının içine URL'yi aşağıdaki formatta olduğu gibi girin.

https://mydomain.com/wp-json/wp/v2/posts

Bu, WordPress web sitenizdeki gönderi verilerini getirecektir.

Adım 6: React Uygulamasını Kurun

Artık arka uçla işimiz bitti, sıra ön uçta çalışmaya başlamaya geldi. Öncelikle aşağıdaki kodu Terminal’de çalıştırarak bir React Uygulaması oluşturuyoruz.

npm create vite@latest my-blog-app
cd my-blog-app
npm install

Bu komut, Vite kullanarak yeni bir React uygulaması oluşturacak ve ayrıca gerekli harici kütüphaneleri veya paketleri kuracaktır.

Ayrıca HTTP isteklerini işlemek için Axios'u da eklemeniz gerekir. Bunun için yüklemek için aşağıdaki komutu çalıştırın.

npm install axios

Artık terminalinizde veya komut isteminde npm run dev komutunu çalıştırarak uygulamanız için yerel bir geliştirme sunucusu başlatabilirsiniz.

Bu komutu çalıştırdığınızda yerel makinenizde bir sunucu başlatılacak ve uygulamanız https://127.0.0.1:5173 URL'sinde kullanılabilir hale gelecektir.

Yapmanız gereken bir sonraki şey projenizi kod düzenleyicide (hangisini seviyorsanız, Visual Studio Code, Subkline Text, Atom vb.) açmak ve ayrıca index.css, app.css vb. gibi gereksiz dosyaları da kaldırmaktır.

Adım 7: WordPress'ten Gönderileri Alın

App.jsx dosyanızın üst kısmında, React kütüphanesinden useState kancasını içe aktarın. Bu, işlevsel bileşeninizde durumu kullanmanıza olanak tanır.

import React, { useState } from 'react';

İşlevsel bileşeniniz App içinde, useState kancasını kullanarak posts adı verilen bir durum parçasını başlatın. Bu eyalet bir dizi görevde bulunacak. useState([]) başlangıç ​​değeri olarak boş bir dizi içeren posts başlatır.

const [posts, setPosts] = useState([]);

useState([]) kullanarak posts durumunu boş bir diziyle başlattıktan sonra, WordPress REST API'sinden gönderileri almak için kod eklemeniz gerekir. Bu, gönderi verilerini sunan API uç noktasına bir HTTP isteği yapılmasını içerir.

Durum bildiriminden sonra gönderi verilerini almak için gerekli kodu eklemeniz gerekir. Bu kod genellikle gönderi verilerini sağlayan WordPress API uç noktasına bir HTTP GET isteği yapmak için fetch() gibi bir yöntemin veya Axios gibi bir kitaplığın kullanılmasını içerir.

Ardından, WordPress REST API'sinden gönderi verilerini almak ve gönderileri buna göre güncellemek için durum bildiriminden sonra aşağıdaki kodu ekleyin.

const fetchPosts = () => {
// Using axios to fetch the posts
axios
.get("https://yourdomain.com/wp-json/wp/v2/posts")
.then((res) => {
// Saving the data to state
setPosts(res.data);
});
}
// Calling the function on page load
useEffect(() => {
fetchPosts()
}, [])

Bu kod, bileşen bağlandığında bir WordPress web sitesinin REST API'sinden gönderileri getirir ve useState hook'un setPosts işlevini kullanarak bileşenin durumunu getirilen verilerle günceller.

Adım 8: Blog bileşeni oluşturma ve oluşturma

Şimdi src klasörünün içinde “bileşenler” adında yeni bir klasör oluşturun ve Blog.jsx ve blog.css (bileşenlerin içinde) olmak üzere iki yeni dosya oluşturun.

Daha sonra ilk olarak Blog.jsx dosyasına aşağıdaki kodu ekleyin:

import axios from "axios";
import React, { useEffect, useState } from "react";
import "./blog.css";
export default function Blog({ post }) {
const [featuredImage, setFeaturedImage] = useState();
const getImage = () => {
axios
.get(post?._links["wp:featuredmedia"][0]?.href)
.then((response) => {
setFeaturedImage(response.data.source_url);
});
};

useEffect(() => {
getImage();
}, []);
return (
<div class="container">
<div class="blog-container">
<p className="blog-date">
{new Date(Date.now()).toLocaleDateString("en-US", {
day: "numeric",
month: "long",
year: "numeric",
})}
</p>
<h2 className="blog-title">{post.title.rendered}</h2>
<p
className="blog-excerpt"
dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }}
/>
<img src={featuredImage} class="mask" />
</div>
</div>
);
}

Bu bileşen, destek olarak iletilen bir blog gönderisinin başlığını, tarihini, alıntısını ve öne çıkan görselini getirir ve görüntüler.

Bundan sonra blog.css dosyasına aşağıdaki stili ekleyin,

@import url("https://fonts.googleapis.com/css?display=swap&family=Poppins");
.blog-container {
width: 400px;
height: 322px;
background: white;
border-radius: 10px;
box-shadow: 0px 20px 50px #d9dbdf;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
img {
width: 400px;
height: 210px;
object-fit: cover;
overflow: hidden;
z-index: 999;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}

.blog-title {
margin: auto;
text-align: left;
padding-left: 22px;
font-family: "Poppins";
font-size: 22px;
}

.blog-date {
text-align: justify;
padding-left: 22px;
padding-right: 22px;
font-family: "Poppins";
font-size: 12px;
color: #c8c8c8;
line-height: 18px;
padding-top: 10px;
}

.blog-excerpt {
text-align: justify;
padding-left: 22px;
padding-right: 22px;
font-family: "Poppins";
font-size: 12px;
color: #8a8a8a;
line-height: 18px;
margin-bottom: 13px;
}

Son olarak App.jsx dosyasının return ifadesinin içine aşağıdaki kod parçasını ekleyin. Burası, JSX sözdizimini kullanarak bileşeninizin kullanıcı arayüzünün yapısını tanımladığınız yerdir.

<div>
{posts.map((item) => (
<Blog post={item} />
))}
</div>;

Here's the final version of your "App.jsx":
import React, { useEffect, useState } from 'react'
import axios from "axios"
import Blog from './components/Blog';
export default function App() {
const [posts, setPosts] = useState([]);
const fetchPosts = () => {
axios
.get("https://my-awesome-website.local/wp-json/wp/v2/posts")
.then((res) => {
setPosts(res.data);
});
}

useEffect(() => {
fetchPosts()
}, [])
return (
<div>
{posts.map((item) => (
<Blog
post={item}
/>
))}
</div>
)
}

Dosyayı kaydedin ve tarayıcınızı yenileyin. Artık işlenmiş blog yazılarını ekranda görebileceksiniz.

Başsız WordPress Örnekleri

Referans olması ve güven oluşturmanız için burada size bazı Başsız WordPress Örnekleri sunuyoruz:

1. Techcrunch

Bir teknoloji meraklısıysanız TechCrunch'a aşina olmalısınız. Lider bir teknoloji medya kuruluşu ve haber sitesidir. Sorunsuz bir kullanıcı deneyimi sağlamak için web sitelerinin ön ucunu yeniden tasarladılar.

Bunu başarmak için Başsız WordPress yaklaşımını benimsediler ve ön ucu ve arka uç için başsız WordPress'i oluşturmak için React uygulamasını kullandılar.

2. Facebook Marka Kaynak Merkezi

Artık popüler olarak Meta olarak bilinen bir sosyal medya devi olan Facebook, bu Başsız WordPress yaklaşımını Marka Kaynak Merkezi web sitesinde marka varlıkları için bir stil rehberi olarak kullanıyor.

Web sitesi, benzersiz ve zarif web tasarımı ile sorunsuz bir kullanıcı deneyiminin benzersiz bir karışımını kullanıyor. Eğer Facebook/Meta gibi büyük bir teknoloji devi bunu yapabilirse. Başsız WordPress'e güvenin, siz de güvenebilirsiniz.

Çözüm

Sonuç olarak, belirli sınırlamaları, dezavantajları veya dezavantajları dışında. Başsız bir yaklaşım, eğer doğru şekilde uygulanırsa harikalar yaratabilir. Özellikle başsız web uygulamaları oluşturmayı seven geliştiriciler veya içerik oluşturucular için oldukça avantajlı olabilir.

Hiç şüphe yok ki, standart WordPress'in ayrıştırılması, React kullanarak bir web sitesi kullanıcı arayüzü tasarlama ve ayrıca WordPress kullanarak içeriği yönetme özgürlüğünü kazanmak gibi bir fırsatlar dünyasının kapılarını açabilir.

Bu teknoloji, esneklik, ölçeklenebilirlik ve SEO optimizasyonunun avantajlarının yanı sıra her teknolojinin tam gücünden yararlanmanıza olanak tanır.

Bu blog boyunca, başsız WordPress ile ilgili tüm genel soruları yanıtlamaya çalıştık ve ayrıca referans olması için başsız bir WordPress'in nasıl oluşturulacağı konusunda size bazı adımlar sunduk. (Ancak WordPress'i ayırmanın birden fazla yolu olabilir, bu nedenle hangisinin sizin için en kolay olduğunu düşünüyorsanız onu takip edin).

Sıkça Sorulan Sorular

Rahul

Rahul Kumar, WordPress ve web barındırma konusunda uzmanlaşmış bir web tutkunu ve içerik stratejistidir. Yılların deneyimi ve sektör trendlerini takip etme kararlılığıyla trafiği yönlendiren, etkileşimi artıran ve dönüşümleri artıran etkili çevrimiçi stratejiler oluşturuyor. Rahul'ın detaylara olan ilgisi ve ilgi çekici içerik oluşturma yeteneği, onu çevrimiçi varlığını geliştirmek isteyen her marka için değerli bir varlık haline getiriyor.