ACF + WPGraphQL ile İlk Başsız WordPress Projenizi Nasıl Oluşturursunuz?

WordPress geliştirme söz konusu olduğunda herkesin favori araçları vardır ve bu araçlar olmadan başsız bir site oluşturma fikri göz korkutucu olabilir. Şans eseri, WordPress geliştiricilerinin en sevdiği iki araç olan ACF ve WPGraphQL, başsız bir şekilde geliştirmeye başlamanıza yardımcı olabilir.

Bu oturumda, WP Engine Kıdemli Geliştirici Avukatı Jeff Everhart, Atlas'ı kullanarak birkaç dakika içinde bir demo sitesi oluşturarak altyapının tüm ayrıntılarını gösteriyor!

Oturum Slaytları:

Deşifre metni:

JEFF EVERHART: Naber millet? Adım Jeff Everhart, burada WP Engine'de kıdemli bir geliştirici savunucusuyum. ACF ve WP GraphQL ile ilk başsız WordPress projenizi oluşturma konulu bugünkü konuşmama katıldığınız için çok teşekkür ederim. Binaya geçmeden önce, her zaman başsız WordPress'in ne olduğu hakkında biraz bağlam vermek isterim. Görünüşe göre başsız, niş bir terim olmaktan çıkıp daha yaygın hale geliyor, bu yüzden açıklamayı kısa tutmaya çalışacağım.

Headless WordPress özünde, WordPress CMS'yi başka bir tür uygulamaya güç sağlamak için bir API aracılığıyla kullanmakla ilgilidir. Bu slayttaki şemaya bakarsak, bir kullanıcı site.com/page istediğinde, WordPress'in bu isteği işlemesi yerine, bir JavaScript uygulaması bu rotaya yanıt verir. Yola bakar, WordPress'ten veya diğer kaynaklardan hangi verilere ihtiyaç duyduğunu belirler, bu API'leri çağırır ve kullanıcıya bir yanıt oluşturur.

Bu Node.js çalışma zamanı yuvasında bulunanların gerçekten herhangi bir sayıda farklı türde uygulama veya istemci olabileceğini unutmamak önemlidir. En popüler çerçevelerin tümü ile oluşturulmuş çeşitli mobil uygulama örnekleri veya web sitelerinin bu modeli büyük bir başarıyla kullandığını gördük. Artık başsız WordPress'in ne olduğu hakkında iyi bir fikriniz olduğuna göre, bugünün projesi için kullanacağımız teknoloji yığınını gözden geçirelim.

En arkadaki katmanımızda, API'miz olarak WP GraphQL kullanacağız. WP GraphQL, WordPress arka ucunuzu güçlü bir GraphQL API'sine dönüştürür. Yerel WordPress ve temel REST API'sinin yaptığı aynı rol ve yetenek güvenlik kontrollerini uygular. WP GraphQL, başsız uygulamalar geliştirmek için harika bir seçimdir çünkü bildirime dayalı sorgulama dilini kullanarak, tüm bu içerik aracında farklı içerik türlerini sorgulayabiliriz. Yani gönderiler, kategorileri olan sayfalar aynı istekte.

Şimdi, WordPress CMS'yi kullanarak bazı daha karmaşık verileri nasıl yapılandırabileceğimizi ve modelleyebileceğimizi görelim. Başsız projelere yaklaşan birçok geliştiricinin farklı verileri modellemesi ve depolaması gerekir, değil mi? WordPress'in tipik gönderilerinin veya sayfalarının ötesine uzanır. ACF veya gelişmiş özel alanlar, bu özel alanları modellemek için harika bir araçtır. Yaklaşan bir sürümde, bu eklentinin ücretsiz sürümünde gönderi türlerini ve taksonomileri doğrudan kullanıcı arayüzüne kaydetmenize izin vererek daha da güçlü hale gelecektir.

Tüm verileri REST API üzerinden kolayca kullanılabilir hale getirir, ancak bu alan verilerinin bir kısmını GraphQL şemamıza eklemek için bir WP GraphQL uzantısı yüklemesi gerekir. Şahsen, bu eklentinin kafasız geliştiriciler için daha güçlü hale geldikçe geliştiğini görmek beni gerçekten heyecanlandırıyor.

Artık karmaşık verileri modelleyebildiğimize ve WP GraphQL aracılığıyla sorgulayabildiğimize göre, WordPress'i zaten bilen ve seven içerik editörlerini desteklerken kullanıcılarımız için bu modern web deneyimlerini yaratmanın bir yoluna ihtiyacımız var. Faust burada devreye giriyor. Faust, bir WordPress eklentisi ve Next.js tabanlı bir JavaScript çerçevesinden oluşan iki parçalı bir çerçevedir. Başsız WordPress siteleri oluşturmayı kolay ve sezgisel hale getirmek için birlikte çalışırlar.

Gönderi önizlemeleri ve kimlik doğrulama gibi şeyler için kutudan çıkar çıkmaz destek ekler ve modern JavaScript'te yeniden tasarlanmış bir WP şablonu hiyerarşi deneyimine güvenebilirsiniz. Faust.js, oldukça genişletilebilir bir platform olmayı amaçlar ve bir eklenti sistemi ve özel kullanım durumunuzu destekleyen deneyimler oluşturmak ve özelleştirmek için kullanabileceğiniz bir yönetici çubuğu ile birlikte gelir.

Son olarak, bu araçlarla yerel olarak ve üretimde çalışmanın bazı yollarına ihtiyacımız olacak. Yerel ve WP geçişini kullanarak, bu proje için ihtiyaç duyacağınız tüm WordPress kaynaklarını, başlamak için yerel dosyaya sürükleyip bırakabileceğiniz tek bir zip dosyasına çektim. Sitemizi oluşturmayı bitirdiğimizde, çalışmamızı Atlas platformuna aktarabiliriz. Atlas WP Engine'in, WordPress arka ucunuzu ve bir Node.js kapsayıcısını birleştiren hepsi bir arada başsız barındırma çözümü, tümü birlikte çalışmak üzere ayarlanmış, tek bir sorunsuz gösterge panosundan edinilebilir.

Bugünkü sunumda kullanacağımız tüm araçları iyice anladığınıza göre, hemen başlayalım ve oluşturmaya başlayalım. Demo koduna tarayıcıda erişmek için bu slayttaki URL'yi açın. Bu deneyimi elimden geldiğince takip etmeyi kolaylaştırmaya çalıştım, ancak önümüzdeki 25 dakika içinde çok fazla yol kat edeceğiz, bu yüzden şimdi izlemekten çekinmeyin ve bu GitHub deposuna geri dönün ve Konferanstan sonra çalışmaya devam etmek için bu oturumun daha sonra kaydedilmesi. Kod çözmenin geri kalanı bir araba şovuysa, bu oturum motorların yapımı üzerinedir. Kelime oyunu tamamen kasıtlı.

Artık GitHub deposunu açtığımıza göre başlayalım. Yapmanızı tavsiye ettiğim ilk şey, kendi hesabınızda bu depodan bir çatal oluşturmanızdır. Bu depoda bulunanlara bakarsanız, bu sunumda yapacağımız her şey için benioku dosyasında bir dizi örnek kodun yanı sıra bazı adım adım talimatlar göreceksiniz. Aslında, doğrudan bu havuzdan projenize çok sayıda kopyalayıp yapıştıracağız. Bunu yerel olarak klonlamak için devam edelim ve terminalinizin içinde Git clone komutunu çalıştıralım.

İndirmesi sadece bir saniye sürecek ve projeyi indirdikten sonra, devam edelim ve dizinimizi o proje dizinine dönüştürelim. Oradan, bu projeyi VS Code'da açmak için bir komut çalıştıracağım, ancak istediğiniz kod düzenleyiciyi kullanmakta özgürsünüz. VS Code zaten entegre bir terminale sahip olduğundan, bunu temizleyebilir ve ardından devam edip iTerm'i kapatabilirim. Ve şimdi, yerel WordPress sitemizi konumlandırmaya geçebiliriz. Bunu yapmak için, bu projeyi Finder'da açacağız ve ardından sizin için hazırladığım headless WP demo zip dosyasını bulacağız.

Bu zip dosyasını doğrudan yerel geliştirme ortamına sürükleyip bırakacağız ve yerel, demo WordPress sitenizi sizin için paketten çıkarma ve önyükleme sürecini başlatacak. Varsayılanlara hemen hemen bağlı kalabiliriz ve ardından yerel, size yeni bir WordPress sitesi oluşturmak için sadece birkaç dakika sürer. Şimdi, bu, herhangi bir siteyi bir zip olarak dışa aktarmama ve bunu doğrudan yerel makineye sürükleyip bırakmama izin veren harika bir WP migration pro özelliğidir, böylece platformdan bağımsız olarak bir üretim sitesini yerel makineme çok hızlı bir şekilde alabilirim.

Kurulum bittiğinde, devam edip bu SSL sertifikasına güvenmek isteyebilirsiniz ve ardından devam edip bu projeyi WP Admin'de açacağız. Oradan devam edeceğiz ve yereli en aza indireceğiz, çünkü zaten çalışıyor ve gerçekten onunla başka bir şey yapmamıza gerek yok. Oradan, bu demo sitesi için oluşturduğum bir yönetici kullanıcı adı ve şifresini bulacağınız depomuzu açacağız. Devam etmek ve WP Yönetici panosunda oturum açmak için bu kimlik bilgilerini kullanabilmeniz gerekir. Oradan, bu yerel WordPress kurulumuyla konumlanmamız sadece bir saniye sürecek.

Yapacağımız ilk şey, bu WordPress sitesiyle birlikte yüklenen eklentilere bir göz atmak olacak. Veri modelleme için gelişmiş özel alanlar gibi şeyler görüyoruz. Başsız yeteneklerimizden bazılarını etkinleştirmek için faullerimiz var, sitemiz için bir API görevi görecek WP GraphQL ve ardından ACF alan gruplarından bazılarını ortaya çıkarmak için ACF uzantısı için WP GraphQL. Şimdi gönderilere de bir göz atalım. Bu projede önceden doldurduğum farklı demo gönderilerinin tümüne bakarsanız, bir grup farklı kategoriye sahip bir dizi farklı gönderiye sahip olduğumuzu görebiliriz.

Her gönderinin içeriğine bakarsak, bir grup gövde içeriğimiz, bazı görsellerimiz, öne çıkan görsellerimiz ve önceden oluşturup önceden doldurduğumuz bazı ACF alan gruplarımız olduğunu görürüz. Öyleyse alan gruplarına daha ayrıntılı bir göz atalım. ACF menüsünü açarsak, oluşturulmuş iki alan grubumuz olduğunu göreceksiniz – yiyecek kaynakları ve tatlı karışık liste. Önce gıda kaynaklarına bir göz atalım.

Bu, metin ve URL olmak üzere iki ayrı alana sahip gerçekten basit bir alan grubudur. Bunların her biri için, GraphQL'de görünebilmeleri için GraphQL'de Göster seçeneğini işaretledim. Sonra bu seçeneği saha grubu düzeyinde de kontrol ettim. Ek olarak, bu gönderileri ne zaman oluşturacağımı belirlemek için bazı koşullu mantığım var - yani gönderi kategorisi gıdaya eşitse. Ve tatlı mixtape'in nasıl göründüğüne bir bakalım.

Bunun gıda kaynaklarımıza oldukça benzediğini ve birkaç farklı alanımız olduğunu göreceğiz. Her birinin GraphQL'de Göster seçeneği işaretli ve ek olarak alan grubu düzeyinde işaretli. WP GraphQL uzantısının bize sağladığı ve ihtiyacımız olmayabilecek birkaç farklı ayar olduğunu görebiliriz. Ek olarak, bunu gönderi kategorisine göre de koşullu olarak gösterdiğimizi görebiliriz.

Şimdi, WP GraphQL'e ve bunun araçlar açısından bize neler verdiğine bir göz atalım. GraphQL menüsünü açarsak, grafiksel IDE'nin içine düşeriz. Bu, WP GraphQL kullanarak sorgular oluşturmanıza izin veren etkileşimli bir geliştirme ortamıdır. Diyelim ki kategorili ilk 10 gönderiyi istediğimizi belirtebilir ve ek ACF alanlarımızı da buraya dahil edebiliriz. Çalıştır düğmesine tıkladığımızda, WordPress sitemizden o sorgudaki verilerle eşleşen canlı verileri geri alırız.

Eğer istersek, Query Composer penceresini açarak sorgumuzun yönlerini görsel olarak oluşturabiliriz. Belirli bir WordPress nesnesinde hangi belirli alanların veya verilerin olabileceğinden emin değilseniz, bu gerçekten kullanışlı bir araçtır. Bu sorguları keşfetmek ve gerçek zamanlı olarak çalıştırmak için Sorgu Oluşturucu'yu kullanabilirsiniz. Şimdi Faust ayarları menüsünü açarak Faust'u yapılandırmaya geçelim. Giriş konuşmasında söylediğim gibi, Faust gerçekten bir WordPress eklentisinden ve ön uç kod tabanınızdan oluşan iki parçalı bir çerçevedir.

Yani, WordPress eklenti ayarları menüsüne geri dönersek, ön uç sitemizin adresini gösterecek olan ön uç site URL'si için bu seçeneği belirlediğimizi görebiliriz. Bunun hemen altındaki gizli anahtar seçeneğinde, demo projeniz için kullanabileceğiniz benzersiz bir anahtar oluşturmak için devam edip yeniden oluştur'a tıklayacağız. Oradan, JavaScript kod tabanına geri dönelim ve örnek bir ortam değişken dosyasını sitemizde kullanabileceğimiz bir dosyaya kopyalamak için bu komutu çalıştıracağız.

Bunu çalıştırdıktan sonra, komut .env.local dosyasını açın ve birkaç değişiklik yapacağız. İlk şey, bir sonraki genel WordPress URL seçeneğini yerel sitenizin konumuyla değiştirecek olmasıdır. Yani ACF.WPEngine.local. Ve sonra bu gizli anahtar değerini de alıp Faust gizli anahtarımız için kullanacağız. Bunu da kaldırmak istediğimizden emin olun ve ardından son ortam değişkeni, yerel geliştirme ortamına bağlanırken karşılaşabileceğiniz herhangi bir SSL sorununu düzeltebilmeniz için gerçekten yalnızca test ve yerel geliştirme için yararlıdır.

Oradan, projemizin tüm bağımlılıklarını kurmak için NPM Kurulumunu çalıştırmak isteyeceğiz ve bu bittiğinde, bunu başlatabilir ve projemizi başlatmak için NPM Run Dev'i çalıştırabiliriz. Derlenmesi sadece bir saniye sürecek, ancak derlendiğinde, tarayıcıda localhost:3000'i açabiliriz ve Faust sitemizi çalışırken görebiliriz.

Bu işlendiğinde, Faust'un şimdiden bizim için biraz sihirle uğraştığını görebilirsiniz. Sağ üstteki menüye bakarsak, WordPress arka ucumuzda tanımladığımız menülerimizden sayfaları ve içeriği zaten çektiğini görebiliriz ve WordPress Yöneticimize geri dönersek, bakabiliriz. bu bağlantının nasıl çalıştığını biraz daha ayrıntılı olarak ele alalım.

Faust eklentisi, ön uç URL'mizin adresini bildiğinden, bu önizleme bağlantıları gibi birçok bağlantıyı yeniden yazar, böylece onları tarayıcıda açtığınızda, ön uç site URL'sinde açılırlar. içeriğinizin ön uçta nasıl görüneceğine dair gerçek bir canlı ön izleme elde ediyorsunuz.

Şimdi, Faust JavaScript projemizin yapısını daha derinden inceleyelim. Next.js'de çalışmaya aşinaysanız, yollarınızı uygulayan sayfa bileşenleri oluşturmak için muhtemelen sayfanın dizinini kullanmışsınızdır. Bunu Faust'ta hala yapabilirsiniz, ancak WordPress düğümü adı verilen ve WordPress'in yönettiği herhangi bir URI'yi almanıza ve bunu belirli bir içerik parçasına çözmenize izin veren bir tüm yol sağlayarak bu konsept üzerine kuruludur.

Daha sonra, bu içerik öğesi hakkında bazı ek veriler alırız ve bunları bileşenlerimizden geçiririz, böylece bu tek parça içeriği WP şablonları klasöründeki belirli bir şablona çözebiliriz. Bu, şablon hiyerarşi konseptine ve geleneksel WordPress temasına ve birçok adlandırma kuralına çok benzer. Örneğin, frontpage.js web sitemizin ön sayfasıdır, page.js ise sayfa içerik türündeki şeyleri işlemekten sorumludur. Ve single.js, tek gönderileri işlemek için var.

Şimdi frontpage.js dosyamızı biraz daha dinamik hale getirmeye başlayalım. TAMAM . Başlamak için ön sayfa.js dosyamızı açacağız ve kendimize çalışmak için biraz daha alan bırakacağız. Yani bu dosyanın içeriğine bakarsak üç ana parça olduğunu görebiliriz. Oluşturduğumuz bileşenin kendisi var, bileşene iliştirilen bir sorgu özelliği var ve bu, bileşeni her oluşturduğumuzda çalıştırılıyor ve ardından altta iletebileceğimiz bazı değişkenler var.

Ve görebileceğiniz gibi, bunu kullanmanın gerçekten iki ana yolu var. Ya bileşenin içindeki sorgu kancasını kullanın ya da bileşenin kendisine destek olarak aktarılabilir ve bunu daha sonra bir örnekte göreceksiniz. Öyleyse, depoya geri dönelim ve frontpage.js sorgumuzu güncellemek için 2.1 adımına başlayalım. Bunu kopyalayacağız, sonra grafik IDE'ye geri döneceğiz ve orada bir saniye oynayacağız. Dolayısıyla, panomuzdaki bu sorgu ilk 10 gönderiyi almalı ve bu gönderilerin her biri ile ilişkili birkaç parça veri almalıdır.

Ve eğer oraya tıklayıp çalıştırırsak, her şeyin harika çalıştığını görürüz. Ve böylece devam edip bunu bileşen sorgu özelliğimize eklemek isteyeceğiz. Bunu yapmak için iyi bir yer bulacağız ve oraya yapıştıracağız ve biraz yeniden biçimlendirme yapacağız. Ve bunun yaptığı şey, sorgunun bu bireysel bölümünü o sorgunun kendisine eklemektir. Bu nedenle, bu sorgunun sonuçlarını bileşenimizin geri kalanı için kullanılabilir hale getirmemiz gerekiyor, bu nedenle devam edip bu ek satırı birlikte çalışabileceğimiz bir değişkene çıkaran bu ek satırı ekleyeceğiz.

Şimdi, bu ana sayfayı dinamik hale getirmenin bir sonraki adımı, aslında bu gönderi alıntılarını işlemek için bir bileşen oluşturmaktır. Bunu yapacağız ve bileşenler klasöründe birkaç dosya oluşturacağız ve burada bundan bahsedeceğim – Devam edeceğim ve bir post alıntı klasörünün içinde bir postexcerpt.js oluşturacağım ve ben ' Ben gerçekten sadece bu Faust.js Başlarken projesinin bir parçası olan mevcut bileşenlerin yapısını kopyalıyorum. Burada istediğinizi yapmakta gerçekten özgürsünüz ve ben sadece bu Başlarken'in bir parçası olarak benim için hazırlanmış olan çerçeveyi takip ediyorum.

Bu dosyaların üçüne de sahip olduğumuzda, bu gönderileri oluşturmak için onlara bazı şeyler eklemeye başlayacağız. Bu yüzden yapacağımız ilk şey, alıntı sonrası bileşenimize biraz içerik koymak. Ve böylece bunu depomuzdan kopyalayıp yapıştıracağız ve bu module.css dosyasını içe aktardığımızı görebiliriz. Ve gönderi olan bir pervaneyi tadan bileşenimiz olan post alıntı adlı bir işlevimiz var, ardından bir bölüm oluşturuyoruz, doğrudan o gönderi URI'sine gidecek bir bağlantıya sahip oluyoruz, başlığı oluşturuyoruz. Sonra aşağıda, oluşturduğumuz kategori döşemelerimiz var ve ardından gönderi alıntısı için HTML içeriğini ayarlamak için HTML'mizde tehlikeli bir şekilde ayarlanmış kullanıyoruz.

Şimdi, her şey harika olduğunda ve kaydedildiğinde, onu kaydedeceğiz, ancak buraya da geleceğiz ve kategorilerimiz için bu yayılma etiketlerini biçimlendirmek üzere bu ek kapsamlı stili bileşenimize ekleyeceğiz ve sonra sadece Bunu varsayılan bir dışa aktarmadan adlandırılmış bir dışa aktarmaya götürmek için index.js dosyasının içine biraz içe aktarma işlemi yapın ve tüm bunları kaydedeceğiz. Ve bunu başka şeylerde kullanılabilir hale getirmek için son adım, bileşenler klasörümüzün index.js dosyasına bir dışa aktarma satırı daha eklemektir. Ve şimdi bunu yaptığımıza göre, ana sayfa olan frontpage.js'ye geri dönersek, gönderi alıntımızı kullanmak için mevcut import ifademize ek bir import ekleyebilmemiz gerekir.

Şimdi, bunu uygulamak için bir yer bulmak isteyeceğiz ve eğer aşağı inip ana öğemizin içine bakarsak, kahramanın hemen altında bazı şeyler olduğunu görürsek, yapacağımız şey şu: kodun bir kısmını depoya kopyalayıp yapıştırın ve yazı alıntımızı kullanarak o ana kodun içindekilerin üzerine yazın. Ve etraftaki bazı şeyleri yumuşatmak için biraz yeniden biçimlendirme yapacağız, ancak burada yaptığımızın o kabın içinde olduğunu görebilirsiniz, geri aldığımız gönderi dizisini haritalayacağız. sorgumuzun sonucu ve ardından gönderide geçirdiğimiz ve ona bir anahtar verdiğimiz bir gönderi alıntı bileşeni döndürüyoruz.

Ve sonra devam edip hepsini kaydedip tarayıcıda oluşturup yenilersek, harika bir dinamik ana sayfamız olduğunu görmeliyiz. Evet, bu başlıkların her birinin, ayrı ayrı kategori kutucuklarında olduğu gibi tıklanabilir bir bağlantısı vardır. Ve tıklarsak, Faust'ta zaten var olan şablonların yararı sayesinde, ACF kullanarak oluşturduğumuz kaynak gruplarından bazılarını kaçırmış olsak da, tüm gönderilerimizin zaten oluşturulduğunu görebiliriz. Bu nedenle, ikinci bir gönderiye tıklarsak, birinin harika olduğunu ve önceden hazırlanmış tüm kategori bağlantılarını yaptığını görebiliriz - bu kategori URI'lerini, o kategori JS şablonunu oluştururken Faust'a yaslanmak için kullanıyoruz .

Tamam, artık dinamik bir ana sayfamız olduğuna göre, bu ACF alanlarını single.js şablonumuzda oluşturmaya geçelim. Öyleyse devam edin ve kod düzenleyicimizi temizleyin, sonra single.js dosyasını açıp içinde ne olduğuna bir göz atabiliriz. Bu en üst düzeyde, dışa aktardığımız ve gerçekten donanım gerektiren bu bileşen işlevine ve çekirdek sorgudan geri aldığımız değişkenlerden bazılarını okuyan dinamik bir GraphQL sorgusuna sahip component.query özelliğine sahip olduğumuzu biliyoruz.

Ve sonunda yapmak isteyeceğimiz şey, bu farklı gönderi kaynaklarından bazılarını gönderi içeriğimizin altında göstermek. Bu yüzden depoya geri dönüyorum ve tek gönderi sorgusunu güncellediğimiz 3.1 adımına iniyorum ve buna bir göz atacağız çünkü bu, oluşturduğumuz hem tatlı mixtape hem de gıda kaynağı alan gruplarını çekmeye başlıyor. önceki adım. Bu sorguyu alıp kopyalayıp grafiğe yapıştırırsam, devam edip bir gönderi için bir veritabanı kimliğini sabit kodlayacağım ve As Preview ve diğer parça gibi ihtiyacımız olmayan birkaç farklı şeyi kaldıracağım. .

Devam edip bunu çalıştırırsam, gerçekten beklediğim şeyi içeren bazı verileri geri aldığımı göreceğiz. İçerik, yazarı geri alıyorum ve daha da önemlisi, hem bu alan gruplarını hem de verilerini geri alıyorum. Bu yüzden devam edip bu sorguyu kopyalayacağım ve single.js'ye geri döneceğim. Oradan, sorgunun o kısmını panomdan aldıklarımla değiştireceğim. Devam edip bunu kaydedebiliriz. İsterseniz yeniden biçimlendirebilirsiniz, ancak bu boşluk agnostiktir, bu yüzden çoğunlukla iyi göründüğünü düşünüyorum.

Buradan, sorgumuzun bir parçası haline getirdiğimiz son adımda yaptığımızın aynısını yapmak isteyeceğiz. Şimdi, bu değişkenleri bileşenimizin içinde kullanılabilir hale getirdiğimizden emin olmak istiyoruz. Bunları yapılandırma ifadesine ekleyeceğiz ve ek olarak, gönderilerimiz için birkaç farklı kategorimiz olduğundan, yiyecek kaynaklarını mı yoksa tatlı karışım listesini mi göstermemiz gerektiğine karar vermemize yardımcı olacak bazı Boolean şeyler oluşturmak istiyoruz. Çünkü orada da görebileceğiniz gibi, ne alırsak alalım ikimiz de tatlı mixtape alanları için bulunacak bir şey yoksa bunlar null olarak geri dönüyor. Orada bazı koşullu kontroller yapmak isteyeceğim, bu yüzden bu iki kod satırını dosyamıza ekleyeceğim.

Ve bunun temel olarak yaptığı şey, bize aşağıda şablonları koşullu olarak işlemek için kullanabileceğimiz bazı Boolean değişkenleri yaratmasıdır. Bu şeyde, her kategori için düğümlere bakıyoruz ve sonra temelde onları filtreleyerek içlerinde yiyecek veya müzik olup olmadığını belirliyoruz ve sonra uzunluğu kontrol ediyoruz. Muhtemelen bu tür Boolean değişkenini uygulayabileceğiniz pek çok yol vardır, bu yüzden bunu yapmak için daha temiz bir yolunuz varsa bunu değiştirmekten çekinmeyin, ancak buradaki amaçlarımız açısından, bunun gayet iyi çalışacağını düşünüyorum.

Şimdi, bir sonraki adım, önceki adımda olduğu gibi, bazı ek bileşenler oluşturmak isteyeceğimizdir. Bu yüzden devam edeceğim ve bileşenler dosyamın içinde devam edip bir gıda kaynakları bileşeni oluşturacağım. Bu yüzden bir klasör oluşturacağım ve bunun içinde bir gıda kaynakları.js dosyası oluşturacağım ve bununla birlikte bir index.js dosyası ve bir CSS modülleri dosyası oluşturacağım. Ve şimdi bu SCSS modülleri dosyası gerçekten yardımcı oluyor çünkü stillerimizi söz konusu bileşene göre belirlememize izin veriyor. Yani bunu yapmak garip bir sözdizimi gibi geliyor, ama sonunda gerçekten temiz bir sonuç çünkü bir sürü sınıf filan yazmak zorunda değiliz.

Bu yüzden bileşen kodunu depodan kopyalayıp doğrudan bu dosyalara yapıştırmaya başlayacağım. İki destek tarifi adı ve tarif bağlantısı alan bir gıda kaynakları fonksiyonumuz olduğunu görebiliriz, ardından bunları burrito emojisi ile güzel yaşımızın altında gösteriyoruz. Ayrıca bazı SCC dosya stillerini kopyalayıp bu özel klasöre yapıştıracağız ve ardından bunu index.js bileşen klasörlerinden dışa aktardığımızdan emin olacağız. Ve tıpkı önceki örnekte olduğu gibi, devam edip bunu bileşenler klasörümüzün index.js dosyasına dışa aktarmak isteyeceğiz, böylece içe aktarılacak gerçekten güzel bir grubumuz olabilir, doğrudan bu bileşenlerden gördüğünüz gibi Bu farklı dosyalardan bazılarının başka bir yerindeki klasör.

Bunu ekledikten sonra, dikkatimizi müzik kaynakları bileşenine çevireceğiz ve aynı şeyi yapacağız. Devam edip aynı dosya yapısını oluşturacağız. Yani müzik kaynakları klasörü ve bunun içinde bir musicresources.js dosyası. Ardından dışa aktarmak için bir index.js dosyası ve ardından bu kapsam stilleri için musicresources.module.scss dosyamızı oluşturacağız.

Tüm bu şeyleri elde ettikten sonra, gıda kaynaklarımız için yaptığımızın aynısını yapacağız ve bu kodun bir kısmını depodan kopyalayıp yapıştıracağız. Bu bileşenin neredeyse aynı göründüğünü görebiliriz. Müzik kaynaklarımız var. Bunun aslında iki yerine üç dekoru var ama bu alan grubunda üç alanımız vardı ama styles.component kuralı aynı. Ve içeriğimiz farklı olduğu için biraz farklı render yapıyoruz.

Oradan, SCSS kodumuzu da ekleyeceğiz ve bunu index.js bileşen klasörlerinden dışa aktaracağımızdan emin olacağız ve ardından buradaki klasörümüze de aktaracağız ve sanırım gerçekten yaptım – hadi bunu gerçekten hızlı bir şekilde yeniden adlandıralım ve index.js ve bileşenlerimizin müzik kaynaklarımızı bulması ve tüm bunların harika olması için tüm adlandırmalarımızın iyi göründüğünden emin olun. Şimdi devam edeceğiz ve tüm bu gereksiz sekmeleri kapatacağız çünkü bu bileşenleri single.js dosyamızda gerçekten uygulamaya hazırız.

Bunu yapmak için, bu iki bileşeni zaten otomatik olarak tanıyan mevcut import ifademize ekleyeceğiz ve bunu yapmak için iyi bir yer bulacağız. Ve böylece, burada bu içerik sarmalayıcı bileşenimiz var. Ve şu anda içeriği aktarıyoruz, ancak bu aslında isteğe bağlı olarak çocukları da kabul edecek. Böylece içeriği aktarabiliriz, ancak daha sonra bazı alt bileşenleri de doğrudan bu içerik sarmalayıcıya iletebiliriz, böylece zaten sahip olduğumuz o güzel yatay alanda görüntülenir ve her şey hizalanır.

Yapacağımız şey bu ve sonra bu kodu oraya kopyalayıp yapıştıracağız ve yeniden biçimlendireceğiz ve bu özel örnekte neler olduğunu konuşacağız. Dolayısıyla, bu içerik sarmalayıcı bileşeninin içinde, karşılık gelen kaynak bileşenlerini koşullu olarak oluşturmak için is food ve is music Boolean değişkenlerini kullanıyoruz. Yani yemek doğruysa ve bu gönderi yemek kategorisindeyse onu yorumlayacağız. Ve eğer bu müzikse, aynı şeyi yaparız. Ve orada, onu işlemek için gerekli olan tüm farklı aksesuarları geçtiğimizi görebilirsiniz.

Ve geri dönüp single.js şablon sayfalarımızdan birini yenilersek, gıda kaynaklarımızın tam beklediğimiz gibi işlendiğini görebiliriz ve WP Admin'e veya ana sayfamıza geri dönersek bu bağlantı uygun şekilde çalışır. sayfa. Ve bir tane ve yiyecek kategorisi veya müzik bulursak, Kinfolk Synth DIY'i açabilir ve müzik kaynakları bileşenimizin nasıl göründüğünü ve harika görünen her şeyi görebiliriz. Ve aslında her iki kategoride de yer alan bir tane bulursak, aslında en altta bu bileşenlerin her ikisini de tam beklediğimiz gibi işlediğini görebiliriz.

TAMAM. Artık sitemizi istediğimiz gibi oluşturduğumuza göre, bu siteyi nasıl konuşlandıracağımıza geçelim. Şimdi, GitHub deposunun bizim için oluşturulmuş bir bölümü var ve aslında, bitiş dalında tamamen ayrı bir dağıtılmış dal oluşturdum. Git check-out işlemi tamamlandı, size bunu sağlayacağız. Ayrıca, bu dalı doğrudan WP Engine'in başsız WordPress barındırma çözümü olan Atlas'a da dağıtabilirsiniz.

Bu size hem bir WordPress kurulumu hem de bir Node.js kapsayıcısı sağlar ve Atlas açılış sayfasındaki bu düğmeye tıklayarak ücretsiz bir sanal alan hesabına kaydolabilirsiniz. Sizi gerçekten hızlı bir foruma götürür ve gördüğünüz gibi fiyat sıfırdır. Yine de sadece dolandırıcılığı önlemek amacıyla kullandığımız bir kredi kartını takmanız gerekebilir, ancak bunu test etmek ve canınızın istediği gibi düşünmeden öğrenmek için bunlardan herhangi biriyle oynamak için ücretsiz bir hesabınız olabilir. Bu yüzden, bu siteyi Atlas'a dağıtmaya başlamak için devam edeceğim ve WP Engine kontrol panelini açacağım.

Aslında yapacağım ilk şey, site listemi açmak ve üretim WordPress sitemi açacağım. Yani aslında, tam burada gördüğünüz bu ACF başsız sitesi, burada WP Admin'i yeni bir pencerede açacağım, hepinizin yerel olarak kullandığınız zip dosyası için ana sitedir. Bu yüzden, WP ihracatını kullanarak bir zip yaptım ve aslında üretim dağıtımım için kullanacağım şey bu.

Oradan, Atlas sekmesine tıklayacağım ve ardından Uygulama Oluştur'a tıklayacağım. Ve bana bu seçenek sunuldu. Depodan Çek'i seçeceğim ve ardından Devam Et'i tıklayın. Ve GitHub'da kimlik doğrulaması yapmadıysam, yapacağınız yer burasıdır, ancak zaten öyle olduğum için devam edip depomu seçebilirim. Devam edeceğiz ve bu proje için kullandığımız depoyu seçeceğiz, Devam'a tıklayın, ardından uygulamamı US Central'da konuşlandıracağım.

Buradan bir dal seçmemi sağlıyor ve dediğim gibi Finished kullanacağım. Bir monorepo kullanıyorsanız, bizim kullanmadığımız seçenekler de var ve WordPress Kurulumumu Kontrol Ettim ve ACF Başsız Sitemi Ara'yı işaretli bırakacağım. Şimdi, burada, aslında, bir .env dosyası kullanmak yerine, files projemden iki ortam değişkeni üzerine kopyalamak isteyeceğim.

İlki, bir sonraki genel WordPress URL'sidir. Bunlar, yerel projemizde belirlediğimiz ortam değişkenlerinin aynısıdır ve bağlantıyı üretim WordPress kurulumumun oraya kopyalayacağım. Sonra başka bir ortam değişkeni ekleyeceğim ve bu bizim Faust gizli anahtarımız için olacak. Bu yüzden devam edip Faust Ayarları menüsünden bunu kopyalayacağım ve oraya açacağım ve bunun anahtarını Faust Gizli Anahtarı olarak ayarlayacağım.

Ve bu bittiğinde, devam edip Uygulama Oluştur'a tıklayabilirim ve Atlas, uygulamamı oluşturma ve dağıtma sürecine başlayacak. Atlas oluşturma işlemi sırasında, kullandığınız çerçeve ne olursa olsun NPM kurulumunu ve NPM oluşturma komutunuzu çalıştıracaktır. Ardından, bu kodun tamamı oluşturulduktan sonra, bu Node kapsayıcısını sizin için ağımıza dağıtacaktır. Ve bunların hepsi bir saniyeliğine döndüğünde, bir başarı mesajı almalıyız ve ardından bizim için sağlanan URL'ye tıklayabilir ve sitemizi canlı olarak görebiliriz.

Böylece başarı mesajımızı alacağız ve sonra devam edip bu URL'yi başka bir sekmede açabiliriz. Ve orada, sitemizin yerel olarak göründüğü gibi göründüğünü görebiliyoruz ve tüm doğru verileri, tüm doğru görüntüleri çekiyor ve hatta tüm ACF içeriğimizi çekiyor. Gönderilerimizin bir kısmı gerçekten harika görünüyor ve Atlas'taki performansımız – Aslında burada gerçekten büyük resimler kullanıyorum, bu yüzden biraz yavaşlık görüyorsanız, bu kesinlikle benim seçimlerimden kaynaklanıyor.

Atlas platformu, modern JavaScript geliştiricilerinin takdir edeceği özelliklerle dolu. Ne yazık ki, bu sunumda hepsini ayrıntılı olarak incelemek için yeterli zaman yok.

Ancak Atlas, başsız ekosisteminizin hem ön hem de arka uç bölümlerindeki önemli ayrıntıları, tek tek derleme günlüklerine ve derleme çıktısına bakabileceğiniz, dağıtımları, kullandığınız ortam değişkenlerini inceleyebileceğiniz tek bir kullanışlı panoda bir araya getirme konusunda gerçekten iyi bir iş çıkarıyor. GitHub deponuza karşı oluşturulan her PR için ek bir ortam oluşturabileceğiniz veya belirli bölümlerini yeniden oluşturmak için ortam web kancaları oluşturabileceğiniz önizleme ortamları gibi etkinleştirebileceğiniz ek ayarlara veya özelliklere erişimin yanı sıra. WordPress'te değişiklik yaparken uygulamanız veya CDN'niz.

Tüm bunlar Atlas platformuyla mümkün hale geliyor ve başsız WordPress ile oluşturmaya başlamanın önündeki engelleri gerçekten azaltıyor.

Vay. Dediğim gibi tebrikler, 25 dakikada anlatılacak çok şey vardı. Lütfen sunumdan sonra pratik yapmaya devam etmekten çekinmeyin ve demo kaynaklarına başlarken herhangi bir sorunuz varsa bana ulaşın. Headless hakkında daha fazlasını öğrenmekle ilgileniyorsanız, ancak bunu yapmak için bir alana ihtiyacınız varsa, ücretsiz bir Atlas Sandbox hesabı için kaydolun. Bugün yaptığımız gibi kendi kod depolarınızı dağıtmanın yanı sıra, bittiği zaman kafasız bir projenin nasıl görüneceğini görmenize yardımcı olabilecek tek tıklamayla Proje yığınları olan önceden hazırlanmış planlarımızdan bazılarını kullanmaya başlayabilirsiniz.

We have a basic scaffold example, a portfolio example with some custom post types, and a new ecommerce example that integrates with big commerce through some of their APIs. Our team and developer relations is really passionate about meeting you wherever you are on your journey towards learning headless. So check out our headless developer's roadmap for a step-by-step series of articles and videos that build on one another to help backfill some of the concepts we've just glossed over today.

The headless ecosystem is young, but it's growing quickly. If you need help on a project, want to talk to some people using headless WordPress in production, or just want to hang out where the magic happens, join the roughly 1,000 other developers in our Discord focused on headless, where we chat, help each other with projects, and help get you moving. Thank you so much for coming to this talk. I look forward to collaborating with you on all of your future headless projects.