Faust.js ile Başsız Bir WordPress Sitesi Nasıl Oluşturulur (9 Adımda)

WordPress'i başsız çalıştırmanız gerekiyorsa, sahip olunması gereken kaliteli bir çerçevedir. Bununla birlikte, modern bir çerçeveden biraz yardım alsanız bile, içeriğinizi etkili bir şekilde önizlemek için hala mücadele edebilirsiniz.

İşte burada Faust.js devreye giriyor. Bu yeni çerçeve, Next.js ve React'in gücünden yararlanıyor ve bunu kullanışlı post önizleme özellikleriyle birleştiriyor. Faust.js ile içeriğinizi, geleneksel bir WordPress web sitesinde olduğu gibi Yayınla seçeneğine basmadan önce görüntüleyebilirsiniz.

Bu makalede, bir sonraki başsız WordPress projeniz için neden Faust.js kullanmak isteyebileceğinizi keşfedeceğiz. Sonra size bu yeni çerçeveyi nasıl kuracağınızı ve basit bir ön uç inşa edeceğinizi göstereceğiz. Başlayalım!

Neden Başsız Bir WordPress Sitesi Çalıştırmak İsteyebilirsiniz?

Tipik İçerik Yönetim Sistemi (CMS), bir ön uç ve bir arka uçtan oluşur ve WordPress de bir istisna değildir. Ancak, WordPress'i başsız çalıştırmak mümkündür.

'Kafa' sunum katmanına atıfta bulunurken, 'gövde' içeriğin depolandığı ve yazıldığı yerdir. Ön ucu (kafa) arka uçtan (gövde) çıkararak WordPress'i başsız çalıştırabilirsiniz.

Başsız bir projeyle, tanıdık WordPress panosunu ve araçlarını kullanmaya devam edeceksiniz. Ancak, WordPress'in olağan kısıtlamalarından bağımsız olarak kendi ön uçunuzu tasarlamakta özgürsünüz. Bu, içeriğinizin nasıl görüntülendiği üzerinde tam kontrol sağlar.

Kendi ön uçunuzu oluşturmak heyecan verici bir olasılık olabilir, ancak özellikle kolay değildir. Neyse ki, sizin için ağır kaldırmanın çoğunu gerçekleştirebilecek araçlar var.

Birçok başsız CMS kullanıcısı Frontity, Gatsby çerçevesi veya React tabanlı Next.js gibi bir aracın yardımını almayı tercih ediyor. Bununla birlikte, geleneksel olarak, bir çerçeve kullanırken bile, başsız bir sitedeki gönderileri ve sayfaları önizlemek zor olmuştur. Faust.js burada devreye giriyor:

Bu çerçeve, Next.js ve React üzerine inşa edilmiştir ve geleneksel WordPress ile tutarlı bir yayıncılık deneyimi sağlamaya çalışır. Bunu başarmak için Faust.js, kesintisiz içerik önizlemeleri sunar.

Faust.js ayrıca bir GraphQL istemcisi kullanır. Bu, önceden GraphQL sorgularını bilmek zorunda kalmadan WordPress WPGraphQL API'sini sorgulamanıza olanak tanır.

Ayrıca Faust.js, WordPress arka ucunuzun kimliğini doğrulamak için yerleşik mekanizmalar sağlar. Bu, başsız CMS'nizle kapılı içerik ve e-ticaret siteleri oluşturmayı kolaylaştırır.

Faust.js ile Başsız Bir WordPress Sitesi Nasıl Oluşturulur (9 Adımda)

Faust.js'nin ne olduğunu ve başlıca faydalarından bazılarını ele aldığımıza göre, şimdi bu çerçeveye nasıl başlayabileceğinizi görelim. Dokuz adımda Faust.js ile nasıl başsız bir CMS oluşturulacağı aşağıda açıklanmıştır.

Adım 1: Geliştirme Ortamınızı Hazırlayın

Başlamadan önce Node.js ve Node Paket Yöneticisi'ni (NPM) yüklemeniz gerekir. Ayrıca yerel olarak veya bir web sunucusunda barındırabileceğiniz bir WordPress kurulumuna da ihtiyacınız olacak.

Ayrıca birkaç WordPress eklentisi kullanacaksınız. İlk olarak, WPGraphQL eklentisi, WordPress'i projenizin tüketmeye hazır bir GraphQL API'sine dönüştürecektir.

Ayrıca WPE Headless'a da ihtiyacınız olacak. Bu eklenti, WordPress'in başsız bir CMS olarak doğru şekilde çalışmasını sağlamaya yardımcı olan bazı ekstra özellikler sağlar. Bu eklentinin en son sürümünü indirebilir ve ardından WordPress kontrol panelinize yükleyebilirsiniz.

Faust.js çerçevesini kullanmaya başlamanıza yardımcı olması için bir sonraki uygulama oluşturma başlangıç ​​projesini kullanacaksınız. Bu, gerekli tüm yapılandırmaların ve dosyaların zaten yerinde olduğu, önyüklenmiş bir Next.js uygulaması oluşturur. Daha sonra bunu başsız Faust.js projeniz için temel olarak kullanabilirsiniz.

NPM ile birlikte gelen npx aracını kullanarak create-next-app'yi yükleyebilirsiniz. Yerel Terminal veya Komut İstemi pencerenizde aşağıdakileri çalıştırın:

 npx create-next-app faust-headless-demo

Bu, bilgisayarınızın yerel kullanıcı dizininde faust-headless-demo projesi oluşturacaktır. Bu işlem tamamlandıktan sonra Terminal, aşağıdaki komutları kullanarak Next.js uygulamanızı başlatmanızı ister:

 cd faust-headless-demo npm run dev

Tebrikler – bir Next.js projesini başarıyla oluşturdunuz! Bu uygulamaya göz atmak için tarayıcınızda “http://localhost:3000” adresine gidin:

Şimdi Next.js başlangıç ​​sitesini görmelisiniz. Bir hata mesajıyla karşılaşırsanız, sorunu çözebilecek npm run dev komutunu yeniden çalıştırmayı deneyin.

2. Adım: TypeScript'i Kurun

Faust.js, derleme zamanı tür denetimi ekleyen JavaScript'in yazılı bir üst kümesi olan TypeScript'i kullanır. Bu, çalışma zamanına kadar beklemek yerine derleme zamanında hataları yakalamanızı sağlar. TypeScript'i yüklemek için Terminalinizde aşağıdaki komutları çalıştırın:

 npm install --save-dev @types/react npm install typescript --save-dev

Şimdi bir tsconfig.json dosyası oluşturmanız gerekiyor. Bu dosya, projenizi çalıştırmak için gerekli olan derleyici seçeneklerini belirtir:

 npx tsc --init

TypeScript'i kurduktan sonra, birkaç JavaScript dosyasını TypeScript formatına dönüştürmeniz gerekecek. Yeni bir faust-headless-demo dizini içermesi gereken yerel Kullanıcılar dizininize gidin:

faust-headless-demo içinde, sayfalar dizinini açın. Artık _app.js dosyasını _app.tsx olarak yeniden adlandırabilir ve içeriğini aşağıdakilerle değiştirebilirsiniz:

 import '../styles/globals.css'; import type { AppProps /*, AppContext */ } from 'next/app'; function MyApp({ Component, pageProps }: AppProps) { return <Component {...pageProps} />; } export default MyApp;

Ardından, sayfaları/index.js'yi sayfalar/index.tsx olarak yeniden adlandırın. Next.js uygulamanız artık TypeScript için düzgün şekilde yapılandırılmıştır.

Adım 3: Yeniden Kullanılabilir Bir React Bileşeni Oluşturun

Bu noktada, bazı boş içerik görüntüleyerek projenizi test edebilirsiniz. Yerel sayfalar dizininizde bir posts.tsx dosyası oluşturun:

Bu dosyaya bir metin gireceksiniz. Tarayıcınızda aşağıdaki içerik görünüyorsa, Next.js uygulamanızın doğru yapılandırıldığını bilirsiniz:

 export default function PostsPage() { return <h1>The posts page</h1>; }

Tarayıcınızda “http://localhost:3000/posts”a gidin. Şimdi bu sahte içeriği görmelisiniz:

Kurulumunuzu doğruladıktan sonraki adım, temel bir React bileşeni oluşturmaktır. Sonunda tüm WordPress gönderilerinizin bir listesini görüntülemek için bu bileşeni kullanacaksınız.

Tüm React bileşenlerinizi özel bir dizine eklemek en iyi uygulamadır. Bunu göz önünde bulundurarak projenizin köküne gidin ve bir bileşenler klasörü oluşturun:

Bu dizinin içinde bir post.tsx dosyası oluşturun. Bir React bileşeni, bileşen props aracılığıyla ana bileşenden veri alabilir. Bu örnekte, her gönderinin başlığını ve içeriğini gönderi bileşenine ileteceksiniz.

TypeScript'te bunu, iletmek istediğiniz verilerin haritasını çıkarmak için bir arayüz oluşturarak başarabilirsiniz. posts.tsx dosyanızın içine aşağıdakileri ekleyin:

 export interface PostProps { title: string; content: string; } export default function Post(props: PostProps) { const { title, content } = props; return ( <article> <h1>{title}</h1> <p>{content}</p> </article> ); }

Artık yeniden kullanılabilir bir React bileşeniniz var. Bir sonraki adım, bu bileşeni gönderiler sayfanızda kullanmaktır.

4. Adım: Gönderilerin Listesini Görüntüleyin

Başlamak için sayfalar/posts.tsx dosyasını açın. Bu noktada, liste biçiminde görüntüleyeceğiniz bazı sahte verileri sağlamanız yeterlidir:

 import Post from '../components/post'; const posts = [ { id: 1, title: 'Lorem ipsum.', content: 'nteger porttitor, dui id dapibus euismod, lacus felis tincidunt ante, sit amet eleifend metus enim in orci. Vivamus tincidunt eleifend leo, at scelerisque lacus viverra ac.', }, { id: 2, title: 'Lorem ipsum.', content: 'In lacinia ipsum et lorem varius, eu porttitor eros porttitor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.', }, ]; export default function PostsPage() { return <h1>My posts page</h1>; }

Mesaj dizisinde dolaşarak bir gönderi listesi oluşturabilirsiniz. Bu, her öğe için bir Gönderi bileşeni oluşturmanızı gerektirir:

 import Post from '../components/post'; const posts = [ { id: 1, title: 'Lorem ipsum.', content: 'nteger porttitor, dui id dapibus euismod....', }, { id: 2, title: 'Lorem ipsum.', content: 'In lacinia ipsum et lorem varius, eu porttitor eros porttitor...', }, ]; export default function PostsPage() { return ( <div> <h1>My posts</h1> {posts.map((post) => ( <Post key={post.id} title={post.title} content={post.content} /> ))} </div> ); }

Değişikliklerinizi kaydedin ve bu dosyayı kapatın. Ardından, “http://localhost:3000/posts”a gidin:

Bu sekme artık sahte gönderilerin bir listesini göstermelidir. Faust.js'yi WordPress arka ucuna bağladıktan sonra, web sitenizin gerçek hayattaki gönderilerinin bir listesini görüntülemek için bu React bileşenini kullanacaksınız.

Adım 5: Faust.js Çerçevesini Yapılandırın

Sonunda Faust.js çerçevesini kurmaya hazırsınız. Başlamak için, aşağıdaki komutları çalıştırarak üretim ve geliştirme bağımlılıklarını kurun:

 npm install --save-prod @faustjs/core @faustjs/next npm install --save-dev @gqty/cli dotenv

Ardından projenizin kök dizinine gidin. Bu klasörün içinde yeni bir faust.config.js dosyası oluşturun:

Faust.js'yi WordPress arka ucunuza bağlamak için bu dosyayı kullanacaksınız. Şimdi aşağıdaki kodu girebilirsiniz:

 import { config as coreConfig } from '@faustjs/core'; if (!process.env.NEXT_PUBLIC_WORDPRESS_URL) { console.error( 'You must provide a NEXT_PUBLIC_WORDPRESS_URL environment variable, did you forget to load your .env.local file?', ); } /** * @type {import("@faustjs/core").Config} */ export default coreConfig({ wpUrl: process.env.NEXT_PUBLIC_WORDPRESS_URL, apiClientSecret: process.env.WP_HEADLESS_SECRET, });

Bu dizinin içinde ayrıca bir .env.local dosyası oluşturmanız gerekecek. Bu, tüm ortam değişkenlerinizi tutacaktır:

.env.local içine aşağıdaki kodu ekleyin. Sitenizi kendi URL'nizle değiştirdiğinizden emin olun:

 NEXT_PUBLIC_WORDPRESS_URL=http://your-site.com WP_HEADLESS_SECRET=YOUR_PLUGIN_SECRET

Ayrıca YOUR_PLUGIN_SECRET'i sitenizin başsız sırrıyla değiştirmeniz gerekecektir. Bu bilgiyi, WordPress kontrol panelinizde Ayarlar > Başsız'a giderek bulabilirsiniz:

Faust.js, isteklerini WordPress'e doğrulamak için bu başsız sırrı kullanacak. Bu, ön ucunuzdaki taslak içeriği önizlemeyi mümkün kılar.

6. Adım: Faust.js için GraphQL İstemcinizi Yapılandırın

Faust.js, GraphQL istemcisi olarak GQty'yi kullanır. GQty'yi yapılandırmak için projenizin kök dizininde bir gqty.config.js dosyası oluşturun:

Artık bu dosyayı düzenlemek için açabilirsiniz. gqty.config.js içinde aşağıdakileri kopyalayıp yapıştırın:

 require('dotenv').config(); /** * @type {import("@gqty/cli").GQtyConfig} */ const config = { react: false, scalarTypes: { DateTime: 'string' }, introspection: { endpoint: `${process.env.NEXT_PUBLIC_WORDPRESS_URL}/graphql`, headers: {}, }, destination: './client/index.ts', subscriptions: false, javascriptOutput: false, }; console.log(`Using "${config.introspection.endpoint}" to generate schema...`); module.exports = config;

Sonraki adım, web sitenizin verilerini sorgulamak için kullanacağınız bir GQty istemcisi oluşturmaktır. Projenizin kökünde yeni bir istemci dizini oluşturun. Bu klasörün içinde aşağıdaki kodu içeren bir index.ts dosyası oluşturun:

 import type { IncomingMessage } from 'http'; import { getClient } from '@faustjs/next'; import { generatedSchema, scalarsEnumsHash, GeneratedSchema, SchemaObjectTypes, SchemaObjectTypesNames, } from './schema.generated'; export const client = getClient< GeneratedSchema, SchemaObjectTypesNames, SchemaObjectTypes >({ schema: generatedSchema, scalarsEnumsHash, }); export function serverClient(req: IncomingMessage) { return getClient<GeneratedSchema, SchemaObjectTypesNames, SchemaObjectTypes>({ schema: generatedSchema, scalarsEnumsHash, context: req, }); } export * from './schema.generated';

Artık değişikliklerinizi kaydedebilir ve index.ts dosyasını kapatabilirsiniz. Artık tüm parçalara sahip olduğunuza göre, GraphQL şemasını oluşturmaya hazırsınız.

7. Adım: Komut Dosyası Oluştur'u çalıştırın

Sonraki adım, package.json dosyanıza bir oluşturma komut dosyası eklemektir. Bu komut dosyası, WordPress sitenizin yapısına göre gerekli şemayı oluşturacaktır.

Bu komut dosyasını eklemek için projenizin kök klasörüne gidin ve package.json dosyasını açın. Artık oluşturma komut dosyasını ilk kod bloğuna ekleyebilirsiniz:

 { "name": "fause-headless-demo", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", //Add the following// "generate": "gqty generate" },

Bu komut dosyasını çalıştırmadan önce, web siteniz için Genel İç Gözetim'i geçici olarak etkinleştirmeniz gerekir. WordPress panosunda GraphQL > Ayarlar'a gidin. Ardından, Public Introspection'ı Etkinleştir'e gidin ve beraberindeki onay kutusunu seçin:

Değişiklikleri Kaydet'e tıklayın. Artık aşağıdaki komutu Terminalinize girerek oluşturma komut dosyasını çalıştırabilirsiniz:

 npm run generate

Bu komut dosyası bir client/schema.generated.ts dosyası oluşturacaktır. Bu noktada, WordPress kontrol panelinizden Public Introspection'ı devre dışı bırakabilirsiniz.

Adım 8: Bir FaustProvider Bileşeni ve Kancası Tanımlayın

Şimdi, yerleşik <FaustProvider> bileşenini kullanarak Next.js uygulamanızı sarmanız gerekir. Bu React Yüksek Dereceli Bileşen, Faust.js'ye verileri almak ve önbelleğe almak için ihtiyaç duyduğu bağlamı sağlayacaktır.

Bunu başarmak için projenizin sayfalarını/_app.tsx dosyasını açın. Daha sonra içeriğini aşağıdakilerle değiştirebilirsiniz:

 import '../faust.config'; import '../styles/globals.css'; import type { AppProps /*, AppContext */ } from 'next/app'; import { FaustProvider } from '@faustjs/next'; import { client } from '../client'; function MyApp({ Component, pageProps }: AppProps) { return ( <FaustProvider client={client} pageProps={pageProps}> <Component {...pageProps} /> </FaustProvider> ); } export default MyApp;

Artık WordPress arka ucundan veri sorgulamaya hazırsınız. Başsız WordPress API'sinden gönderilerin listesini alan standart bir arayüz sağlayan usePosts kancasını kullanacaksınız.

Sayfalar/posts.tsx dizinini açın ve tüm ortak Lorem Lipsum kodunu silin. Ardından usePosts kancasını uygulayabilirsiniz:

 import { client } from '../client'; import Post from '../components/post'; export default function PostsPage() { const { usePosts } = client; const posts = usePosts()?.nodes; return ( <div> <h1>My posts</h1> {posts.map((post) => ( <Post key={post.id} title={post.title} content={post.content} /> ))} </div> ); }

Oluşturduğunuz şema dosyası bir Gönderi türünü dışa aktarır. Bu, Post bileşeni props'larını tanımlamak için bu türü kullanabileceğiniz anlamına gelir. Bir Post desteğini kabul etmek için component/post.tsx dosyasını açın ve aşağıdakileri ekleyin:

 import { Post as PostType } from '../client'; export interface PostProps { post: PostType; } export default function Post(props: PostProps) { const { post } = props; return ( <article> <h1>{post.title()}</h1> <div dangerouslySetInnerHTML={{ __html: post.content() }} /> </article> ); }

İşlenmiş içeriği mi yoksa ham içeriği mi almak istediğinizi belirtebilirsiniz. Yukarıdaki kodda, işlenmiş içeriği seçiyorsunuz.

9. Adım: Faust.js'yi WordPress Web Sitenize Bağlayın

Son adım, verileriniz ile Gönderi bileşeni arasında bir bağlantı oluşturmaktır. Bu, posts.tsx dosyasına tek bir kod satırı eklemenizi gerektirir:

 … .... …. {posts.map((post) => ( //Add the following line// <Post key={post.id} post={post} /> ))} </div> ); }

Bu değişiklikleri yaptıktan sonra tarayıcınıza “http://localhost:3000/posts” yükleyin. Artık WordPress web sitenizdeki tüm gönderilerin bir listesini görmelisiniz:

Gönderileriniz görünmüyorsa, Terminalinizi kapatarak çalışan işlemi sonlandırın. Ardından yeni bir pencere açın ve Change directory komutunu kullanarak Terminal'in yerel Faust.js projenizi göstermesini sağlayın (örneğin: cd /Users/username/faust-headless-demo ). Ardından geliştirme sunucusunu ( npm run dev ) başlatabilir ve “http://localhost:3000/posts” sayfasını yenilemeyi deneyebilirsiniz.

Çözüm

Birçok başsız WordPress geliştiricisi bir çerçeve kullanmayı tercih eder. Ancak, içeriğinizi önizleme zamanı geldiğinde, birçok çerçeve sizi harici bir siteye giriş yapmaya veya önizleme sayfanızı bir çerçeve içinde görüntülemeye zorlar.

Faust.js, tutarlı ve sorunsuz bir önizleme deneyimi sağlamak için yola çıktı. Bu çerçeveyi kurduğunuzda, tanıdık WordPress iş akışını kullanarak içeriğinizi görüntüleyebileceksiniz. Ayrıca tanıdık React ve Node.js araç setlerine de erişebilirsiniz.

Faust.js çerçevesi hakkında sorularınız mı var? Aşağıdaki yorumlar bölümünde bize bildirin!