DE{CODE}: Atlas için Yeni Özellikler

WP Engine'in Atlas başsız geliştirme araçlarındaki güncellemeler, müşterilerinizin en zorlu gereksinimlerini karşılamanıza yardımcı olacaktır. Ücretsiz bir Sandbox hesabı kullanarak, bu demo size bu yeni özellikleri başsız sitenize nasıl ekleyeceğinizi gösterecek. Şimdiye kadarki en performanslı, güvenli web sitenizi oluşturmaya başlamak için aşağıdaki videoyu izleyin!

Oturum Slaytları

Tam Metin Transkript

KELLEN MACE : Merhaba. Ben WP Engine'deki geliştirici ilişkileri ekibinden Kellen. Bu konuşmada, Atlas ekosistemindeki bazı yeni ve heyecan verici özellikleri keşfedeceğiz. WP Engine kullanıcı portalında nasıl yeni bir Atlas uygulaması oluşturabileceğimizi ve bu portföy planını nasıl seçebileceğimizi göreceğiz. Bunu yaparken, birkaç dakika içinde internette canlı, tamamen gelişmiş bir WordPress sitesine sahip olabiliriz.

Ardından, bu projeyi yerel makinemize nasıl kopyalayabileceğimizi ve yerel geliştirme için nasıl hazırlanabileceğimizi göreceğiz, böylece yeni sitemizde özelleştirmeler yapabiliriz. Sonra dikkatimizi Atlas İçerik Modelleyici'ye çevireceğiz ve onu Fotoğraflar adlı yeni bir özel içerik modeli oluşturmak için nasıl kullanabileceğimize bakacağız.

Ve bu Fotoğraflar içerik modeli, yakın zamanda Atlas İçerik Modelleyici'ye gelen yeni bir özellik olan tekrarlanabilir bir alan da dahil olmak üzere birkaç kendi özel alanına sahip olacak. Son olarak, ön uç JavaScript uygulamamızda bazı özel geliştirmeleri nasıl yapabileceğimizi ve bu özel Fotoğraflar verilerini sorgulayıp ardından sayfaya nasıl işleyebileceğimizi göreceğiz.

Bir WP Engine hesabı oluşturduktan ve kullanıcı portalının Atlas sayfasına giriş yaptıktan sonra, devam edip Yeni Uygulama Oluştur düğmesini tıklayabilirim. Buradan, önceden oluşturulmuş bir site olan bir planla başlayabilir veya mevcut bir depodan çekebiliriz. Bir planla başlayalım. Şimdi hangi planı kullanmak istediğimizi seçebiliriz. Portföy taslağını seçeceğiz ve ardından Devam Et'i tıklayacağız.

Bir sonraki adım, bu uygulamayı GitHub'a bağlamaktır. Bunu yapmak için düğmeyi tıklayacağız ve ardından GitHub'da oturum açacağız. Bundan sonra, uygulamamızın yetkilendirildiğini gösteren bu ekranı göreceğiz. Sırada, bu repoyu gerçekten klonlamamız gerekiyor. Bu yüzden Planı Klonla'ya tıklayacağız ve ardından yeni depomuza bir isim vereceğiz. Ve bu plan şablonunu kullanarak yeni bir depo oluşturmak için düğmeye tıklayın.

Burada, bu yeni uygulama deposunun GitHub hesabımda oluşturulduğunu görebilirsiniz. Şimdi bu repoyu Atlas uygulamamıza bağlamamız gerekiyor. Kullanıcı portalına geri döndüğümüzde, Selected Repository bölümüne ineceğiz. Tüm depolarınıza erişime izin verdiyseniz, onu listede görebilirsiniz. Değilse, Depoları Yönet'e tıklayabilirsiniz.

Bu sayfada, Atlas'ın erişebilmesi gereken depoları seçebileceksiniz. Bu yüzden listeden repomuzu seçeceğiz. Kaydet'e tıklayın ve şimdi kullanıcı paneline döndüğümüzde, listede eklediğimiz repo'yu göreceğiz. Öyleyse devam edin ve onu seçin. Uygulamamız için bir bölge olarak US Central'a bağlı kalacağız. Son olarak, bu Atlas uygulamasını oluşturmak için düğmeye tıklayın.

Burada, uygulamamızın inşa edilmekte olduğuna dair bir bildirim göreceğiz. Bu yüzden ona sadece bir dakika vereceğiz. Atlas uygulamamızın yapımı bittiğine göre, yeni Atlas uygulamamızın internette canlı olarak çalıştığını görmek için bu Atlas URL bağlantısına tıklayabiliriz. Yani ana sayfada en son gönderiler listemizi göreceğiz. Tespitlerimizi göreceğiz.

Portföy sayfasına gidebilir ve portföy projelerimizin listesine buradan göz atabiliriz. Tek bir projeye tıklayacağım. Ardından, bloga göz atacağız. Bu yüzden blog sayfasına gidin ve burada yayın ızgaramıza bakın. Ayrıca, ayrı bir blog yazısı sayfasını da görmek için tıklayabiliriz. Ve sonra hazır, ayarla, tıkla, ana sayfamıza dön.

Dolayısıyla bu sayfa geçişlerinin gerçekten hızlı olduğunu fark edebilirsiniz. Bir sayfadan diğerine anında geçiyoruz. Ve bu, başsız bir WordPress mimarisine geçmenin faydalarından biridir. Sırada, bu deneyime güç veren perde arkasındaki WordPress sitesini görelim. Öyleyse WP Engine kullanıcı portalına geri dönelim ve buradan bağlantılı WordPress ortamına giden bu bağlantıya tıklayabiliriz.

Burada, sitemiz için WordPress yöneticisine gönderilmek üzere WP Admin'e tıklayabiliriz. İşte bu deneyime güç veren arka ucumuz. Gönderilere geçelim ve burada bazı sahte blog gönderileriyle önceden doldurulduğunu görebiliriz. Demek yeni sitemiz için tüm bu veriler buradan geliyor. Eklentilere de bir göz atalım. Burada, başsız WordPress geliştirmeyi etkinleştirmek için birkaç eklentinin kurulduğunu ve etkinleştirildiğini görebilirsiniz.

Atlas İçerik Modelleyici'ye özellikle dikkat edelim. Kenar çubuğunda İçerik Modelleyici'ye tıklıyoruz. Burada bize özel iki adet içerik oluşturulduğunu görebilirsiniz, projeler ve referanslar. Ve bunları kenar çubuğunda görebiliriz. Yani projelerimiz, bunların bir listesi, referanslarımız ve bunların bir listesi var. Ön uç sitede gördüğümüz proje ve referans verilerinin geldiği yer burasıdır.

Böylece büyük bir ilerleme kaydettik. Kullanıcı portalından nasıl yeni bir Atlas uygulaması oluşturabileceğimizi gördük. Ve bunu yaptığımızda, yalnızca sitenizin sayfalarına hizmet verecek bir ön uç JavaScript uygulaması oluşturmakla kalmaz, aynı zamanda bu deneyimi güçlendiren ve sizi ikisini birbirine bağlama zahmetinden kurtaran WordPress arka ucunu da oluşturur. Ön uç uygulamasının verilerini WordPress arka ucundan alabilmesi için bu ikisini birbirine bağlar.

Oradan, ön uç uygulamaya bir göz atabildik ve çevrimiçi olarak canlı çalıştığını görebildik, ayrıca WordPress yöneticisinde dolaşıp bazı özel veri türlerini veya veri modellerini ve ayrıca bazı sahte verileri görebildik. bizim için yaratıldı. Yani çok kısa bir süre içinde, şu anda çalışan, tamamen gelişmiş, başsız bir WordPress uygulamamız olduğunu görebilirsiniz.

Peki ya bu noktada değişiklik yapmak istersek? Ya gerçek bir portföy sitesi oluşturuyorsanız ve kendi kendinize bunun gerçekten harika olduğunu düşünüyorsanız. Bu harika bir başlangıç. Ama şimdi bazı değişiklikler yapmak istiyorum. Belki bazı renkleri değiştirmek veya siteme ek sayfalar eklemek için bazı kod değişiklikleri yapmak istiyorum. Bunu nasıl yaparım? Yerel geliştirmeye nasıl başlarım? Sonra öğrenelim.

Başlamak için bağlantıyı GitHub depomuza kopyalayacağız ve ardından projemizi klonlamak için komut satırında git clone'u çalıştıracağız. Buradan, o proje dizinine CD ekleyebilir ve ardından projemizin bağımlılıklarını kurmak için NPM kurulumunu çalıştırabiliriz. Bu bittiğinde, devam edip projeyi bir kod düzenleyicide açacağız.

Ardından, bazı ortam değişkenlerini ayarlamamız gerekiyor. Yani burada bizim için bir örnek dosya oluşturulduğunu göreceksiniz. Ve şimdi bunun doğru değerlere sahip olduğundan emin olmamız gerekiyor. Kullanıcı portalına geri döndüğümüzde, Değişkenleri Yönet'e tıklayacağız ve ardından üretim uygulamasının kullandığı ortam değişkenlerine bir göz atacağız. Devam edin ve her ikisini de kopyalayıp uygulamamıza yapıştırın, böylece yerel uygulamamız üretimin kullandığı ortam değişkenlerinin aynısını kullanır.

Ve buradaki son adım, bu dosyayı yeniden adlandırmak, sonundaki .sample'ı kaldırarak yürürlüğe girmesidir. Şimdi, burada birlikte çalıştığımız ön uç uygulaması, Faust.js üzerine inşa edilmiştir. Ve Faust'un yaptığı veri alma sihrini yapabilmek için GraphQL içgözlem sorgusu denen şeyi çalıştırabilmesi gerekiyor.

Yani bu temelde Faust'un WordPress arka ucuna sorması, hey, GraphQL şemasında sorgulamam için hangi verilere sahipsiniz? Yani bunun çalışması için iç gözlemi etkinleştirmemiz gerekecek. Burada WordPress yöneticisine geri döneceğiz ve GraphQL'e ve ardından kenar çubuğundaki ayarlara gideceğiz.

Ayarlar sayfasında, Public Introspection'ı Etkinleştir'i gördüğümüz yere ineceğiz ve devam edip o kutuyu tıklayacağız. Hazır buradayken, Grafiksel Hata Ayıklama Modunu da etkinleştirmenizi tavsiye ederim. Bu size gösterilen daha açıklayıcı hata ayıklama mesajları verecektir. Bunu yaptıktan sonra, devam edip değişikliklerimizi kaydetmek için düğmeye tıklayabiliriz. Ve şimdi nihayet terminali açabilir ve NPM çalıştırma oluşturmayı çalıştırabiliriz. Ve bu bittiğinde, son olarak NPM, uygulamamızı yerel olarak çalışır duruma getirmek için dev'i çalıştırır.

Şimdi, bu localhost 3.000 bağlantısına tıklayacağım ve burada sitemizin gerçekten yerel olarak çalıştığını görebiliriz. Bu yüzden sitemizi özelleştirmek için buna biraz içerik eklemek istediğimizi söyledik. Ve artık yerel gelişim için hazır olduğumuza göre, tam olarak bunu yapabiliriz. Diyelim ki bu proje için, sadece blog gönderilerine ve ardından gördüğümüz portföy projeleri ve ayrıca bu referanslar gibi sahip olduğumuz birkaç özel içeriğe sahip olmak istiyoruz.

Bu özel içeriğin ötesinde, daha fazlasını eklemek istediğimizi varsayalım. Blog gönderileri oluşturan ve portföy projeleri oluşturan birinin ötesinde, sitenin ait olduğu müşterinin aynı zamanda bir fotoğrafçı olduğunu ve çektikleri fotoğrafları öne çıkarmak istediğini varsayalım. Bu fotoğrafın verilerini desteklemek için sitemize nasıl özel bir içerik türü veya özel içerik modeli ekleyebiliriz, bunun için sorgulayabilir ve ardından fotoğrafları ön uç uygulamamızda gösterebiliriz? Bundan sonra yapalım.

Bu yüzden buradan WordPress yöneticisine geri döneceğim ve İçerik Modelleyici'ye gideceğiz. Yani daha önce bir kez ekrana çıktık. Projelere ve referanslara göz attık. Bunların, bu planın bir parçası olarak bizim için oluşturulmuş özel içerik modelleri olduğunu görebiliriz. Ve bunların her birine tıklayabilir ve bu modellerin her birinin kendi bireysel alanları olduğunu görebilirim.

Yani projeler, örneğin, bu bireysel alanlara sahip olacaktır. Hem projeler hem de referanslar burada kenar çubuğuna yansıtılır. Ve sonra bunların her biri için alanlar. Bir projeye tıklarsam ve ardından mevcut bir projeye tıklarsam veya Yeni Ekle'ye gidersem, her iki durumda da, tüm bu alanların buraya yansıdığını göreceğiz. Böylece içerik oluşturucularımız, bu verileri girmek için ihtiyaç duydukları tüm alanları görecektir. Elbette.

Özel içeriğimiz için ise yeni bir modele ihtiyacımız var. Bu yüzden devam edeceğim ve buradaki butona tıklayarak yeni bir model oluşturacağım. Bu yüzden bu fotoğrafı arayacağım. Ve çoğul bir isim için, sonuna sadece bir S koyacağız ve buna fotoğraflar diyeceğiz. Bu otomatik olarak oluşturulmuş API tanımlayıcısı - işte bu kimlik - benim için sorun yok. Fotoğraf bana iyi görünüyor. API görünürlüğü için, bu verileri GraphQL aracılığıyla sorgulayabilmek istediğimizden, herkese açık olarak tıkladığınızdan emin olmak istiyoruz. Model ikonumuz için belki kamera gibi bir şey fotoğraflar için uygun olabilir. Ve şimdi Oluştur'a tıklayacağım.

İşte böyle, fotoğraf içerik modelimiz oluşturuldu. Yani bu noktada içerik modeli için ilk alanınızı seçin diyor. Ve bu kayıt itibariyle bunlar, Atlas Content Modeler tarafından desteklenen alan türleridir. Bu sitede öne çıkarmak istediğimiz fotoğraflar için bunlardan birkaçını kullanalım.

Diyelim ki her fotoğrafımıza bir başlık vereceğiz. Bu yüzden Başlık diyeceğim ve ardından API tanımlayıcısı olarak Fotoğraf Başlığı olarak adlandıracağım. Ve GraphQL şemasında bu şekilde mevcut olacak. Bunun içindi. Ve bunu giriş başlığı olarak kullanmak istediğimizi söyleyeceğiz. Ve tek satırlık metin iyidir. Öyleyse devam edin ve Oluştur'u tıklayın.

Bir sonraki alanımız için, fotoğraf için o görüntünün kendisini yakalamak istediğimizi varsayalım. Bu yüzden artıya basacağım. Ve burada yeni bir alan oluşturacağız. Buna tek görüntü diyeceğiz. Ve tür için, aslında, bir fotoğraf olacağı için Medya'yı seçmemiz gerekecek. Bu yüzden ona görüntü adını vereceğim. Ve sonra burada, devam edeceğim ve bunu her gönderi için öne çıkan resim olarak ayarlayacağım. Buna tıklayacağım ve onu da gerekli kılacağız. Yani her zaman orada olacağını biliyoruz. Ve ardından Oluştur'a tıklayın.

İşte gidiyorsun. İşte ikinci alanımız. Üçüncüsü için bir tanım yapalım. Bu yüzden artıya basacağım. Ve bunun için, bu bir zengin metin alanı olacak. Açıklama diyeceğiz ve bu o alan için işini görecektir. Ve sonra istediğimiz son şey denekler için. Bu nedenle, fotoğrafta gösterilenleri yakalamak için bu alanı kullanacağız. Yani, örneğin günbatımında bir dağ silsilesi fotoğrafıysa, bizim fotoğraflarımızdan birinde olacağı gibi, fotoğraftaki konulardan bazıları dağ, yıldızlar, gökyüzü, bunun gibi şeyler olabilir. Fotoğrafta mevcut olan şeylerin sadece bir listesi.

Bu verileri depolamanın farklı yolları olacaktır. Örneğin, özel bir sınıflandırma oluşturabilir ve ardından bunların her birine terimler atayabilirsiniz. Yani bu fotoğrafların her birinin bir veya daha fazla terimi olabilir. Bunu yapmanın bir yolu bu olurdu. Diyelim ki amaçlarımız açısından, fotoğrafları böyle bir etiket veya taksonomi gibi bir şeye göre gruplamakla ilgilenmiyoruz.

Bunun yerine, bu liste gerçekten sadece sitede görüntüleme amaçlıdır. Sorun şu ki, burada artıya basarsak, onu bir metin alanı yaparız, o zaman sadece bir tane alırız, değil mi? Peki ya daha fazlası varsa? Belirli bir fotoğrafta bu konulardan kaç tanesinin olabileceğini önceden bilemeyiz, değil mi? ACM'nin tekrarlanabilir alanlar özelliğinin gerçekten işe yaradığı yer burasıdır. Öyleyse bunun neye benzediğini görelim.

Bunu burada bir metin alanı yapacağım ve onu konu olarak adlandıracağız. Ve sonra bu alanı tekrarlanabilir yapın. Yani bu anahtardır. Devam edip buna tıklayacağız. Ve onu tek satırlık bir metin alanı olarak tutacağız ve Oluştur'a basacağız. İşte böyle, buradaki fotoğraf içerik modelimiz artık oluşturulmuş oldu. Ve kenar çubuğunda görebiliriz.

Yani buraya Fotoğraflar'a tıklarsam, burada önceden oluşturduğum bir kuklam olduğunu göreceğiz. Ancak Yeni Ekle'yi oluşturursak, bunun yansıttığını göreceksiniz – buradaki alanlar, içerik modelinde eklediklerimizi yansıtıyor. Böylece bir başlık elde ederiz. Bir resim ekleme fırsatı buluyoruz. Fotoğrafın açıklaması için zengin bir metin alanımız ve burada bir veya daha fazla konu eklemek için tekrarlanabilir bir alanımız var.

Öyleyse burada ne yapabileceğimize bir bakalım. Öne Çıkan Resim Ekle'yi tıklayacağım. Ve makinemden birini seçeceğim. Görelim. Yükleme bittiğinde, ona biraz alternatif metin vereceğiz. Bunun gibi beyaz bir çiçek diyeceğiz ve bitti. İşte bizim imajımız. Şimdi geri dönüp ona bir başlık verelim. Bokeh ile beyaz çiçek diyeceğiz. Aynen böyle. Bir açıklama için, bazı güzel beyaz çiçeklerin harika bir çekimi olduğunu söyleyeceğiz. Aynen böyle.

Ve şimdi konularımıza gelecek olursak, kendimize buradaki fotoğrafta ne var diye sorabiliriz. Ve belki yapabiliriz- çiçek bir olabilir. Öğe Ekle'ye tıklayın. Ve arka planı bulanıklaştıran o bokeh efekti de orada. Ve başka bir örnek için, sanırım, ağacın gövdesi veya dalı çekimde olacaktır. O yüzden buraya birkaç tane ekleyeceğiz. Her şeyi yakaladığımızı düşünürsek, devam edip Yayınla'ya basabilirsiniz. İşte başlıyoruz.

Ve sonra fotoğraflara geri döndüğümde, bunu daha önce yaratmıştım. Dağlar serindir. Böyle ayarlanmalıdır. Böylece bir dağ silsilesi fotoğrafı elde edersiniz. Ve sonra işte dağların, yıldızların ve gölgelerin olduğu bir sıradağın harika bir fotoğrafı. Sahip olduğu birkaç konu. Bu bize ön uç uygulamamızda birlikte çalışabileceğimiz en az birkaç gönderi verir.

Bu noktada, bu fotoğraflar için ihtiyacımız olan verileri depolamak için WordPress arka ucunda içerik modelimizi oluşturduk ve ön uç uygulamamızda tüketmeye çalışmak için iki yeni fotoğraf gönderisi oluşturduk. Ve sonra, merak ediyor olabilirsiniz, peki, ön uç uygulamamızda kullanabilmemiz için bu verileri WordPress'ten nasıl çekeceğiz?

Atlas İçerik Modelleyici'nin bunu çok kolaylaştırmak için gösterdiği çok güzel bir özellik var. Burada Content Modeler'a geri dönüp fotoğraf modelimizi bulacağım ve buradaki küçük üç nokta simgesine tıklayacağım. Ve Grafikte Aç'a gideceğim. Yani buna tıkladığım anda benim için oluşturduğumuz bu içerik modelini, fotoğrafları içeren bir sorgu oluşturacak.

Ve bunlardan ilk 10 tanesini kapar ve ardından özel alanlar da dahil olmak üzere oluşturduğumuz tüm alanları içeren aşağıdaki GraphQL parçasını içerir. Fark ederseniz, fotoğraf başlığını ekledik, resmimizi aldık, açıklamayı ve ardından konuları ekledik. Bu, bu verilerin GraphQL şemasında nasıl göründüğünü görmek için çok kullanışlıdır. Öyleyse devam edin ve bu sorguyu yürütmek için bu düğmeye basın.

Ve ön uç JavaScript uygulamamızın aynı GraphQL sorgusunu yürütürse ne geri alacağını görebilirsiniz. Fotoğrafları geri alacaktı. Ve sonra bunun içinde dizi adı verilen, düğüm adı verilen bir nesne olacaktır. Ve bu dizinin içinde buna benzeyen nesneler olacaktır. Bu fotoğrafların her birinin bir başlığı, bir resmi ve daha sonra da açıklaması ve konuları olacaktır.

Yani tam olarak ihtiyacımız olan şey bu. Şimdi bu alanlardan birkaçını kullanacağız. Bu yüzden, WordPress arka ucumuz ve bu fotoğraf verilerini saklama ve ayrıca ifşa etme yeteneği açısından hazırız. Şimdi bunu ön uç JavaScript uygulamamızda nasıl kullanabileceğimize bakalım.

O yüzden oraya geri döneceğiz. Ve bence bunun için iyi bir başlangıç ​​noktası, projelerin bir listesi olan Portföy sayfasına bakmak olacaktır, değil mi? Bu, özel içerik modeli gönderilerinin bir listesi olduğu ve fotoğrafların da olacağı için, bu iki sayfanın pek çok ortak noktası var. Yani bunu bir tür başlangıç ​​noktası olarak kullanabiliriz.

Bu yüzden burada Portföy'e tıklayacağım ve bunun neye benzediğini kendimize hatırlatmak için. İşte böyle, portföy projeleri listesini aldığımız yer burası. O halde şimdi şifreyi kıralım ve ellerimizi biraz kirletelim. Slash projesi olan bu sayfayı takip edeceğiz ve bunun nasıl inşa edildiğini göreceğiz.

Yani Source içinde, Pages'a gideceğim. Ve sonra Project'i bulacağım. İşte burada. Ve bunun içindeki index.js dosyasını açın. Biraz aşağı kaydırın ve bu kullanım düğümü sayfalandırma kancasının kullanıldığını göreceğiz. Ve bu, Hooks klasörünün içindeki bu konumdan gelen bir React kancasıdır. Ve bunun içinde, query.projects diyoruz.

Ve query.projects, projemizin özel gönderi türü, yani projemizin oluşturduğumuz içerik modeli hakkındaki verilere erişmemize izin verecek. Dolayısıyla, query.projects'i arayacağız ve sayfa yüklenir yüklenmez işlemek istediğimiz bazı alanları önceden ileteceğiz. İşte bu dizi burada böyle. Yani bu alanlar sayfanın ilk yüklemesinde oradalar.

Ve sonra, bu sayfanın içeriğini oluşturmaya gerçekten hazır olduğumuzda, bunu yapıyoruz. Bir SEO bileşenimiz, bir başlığımız ve ardından altta bir alt bilgimiz var. Ve sonra buradaki sayfanın ana bölümü, bu ana etiketin içindedir, burada mavi bölümün çekildiği başlığa sahibiz. Ve bunun içinde proje listemizin olduğu bir sarmalayıcı div. Ve ayrıca bu Daha Fazla Yükle bileşeni, altta tıklayabildiğim bu Daha Fazla Yükle düğmesiyle sonuçlanır. Ve sonra bu, daha fazla proje getirir ve onları kullanıcı arayüzüne yerleştirir.

Demek o sayfa böyle inşa edilmiş. Ve dediğim gibi, bunu bizim için bir başlangıç ​​noktası olarak kullanmayı seviyorum. Öyleyse devam edelim ve bu dosyanın tamamını kopyalayalım ve bu dosya yapısını burada taklit edeceğiz. Sayfaların içinde Fotoğraf oluşturacağız. Ardından bu klasörün içinde bir index.js dosyası oluşturacağız. Elbette. Ve bu yeni dosyada içeriği yapıştıracağım. Ancak bazı şeyleri değiştireceğiz, çünkü bunun için proje verileriyle ilgilenmiyoruz, fotoğraf verilerimizi istiyoruz. Öyleyse bunu nasıl yapabileceğimize bakalım.

Yani bu sabitin adı projelere atıfta bulunuyor. Öyleyse devam edelim ve bunu ilk adım olarak yeniden adlandıralım. Fotoğraf düğümleri ön geçiş alanları diyebiliriz. Yani bu iyi olacak. Kendi alan listemizi sağlamamız gerekecek. Belki şimdilik veritabanı kimliğini bırakacağız ve birazdan biraz ekleyeceğiz.

Daha aşağıda görelim. Fotoğraf ön geçiş. Ah, isim karıştı. Oraya gidiyoruz. Yani şimdi tekrar eşleşiyorlar. Elbette. O halde, özel içerik türümüz için query.projects yerine query.photos istediğimizi unutmayın. Öyleyse devam edin ve bunu fotoğraf olacak şekilde güncelleyin, hemen orada. Biraz aşağı kaydırın.

Yani bu projeler bileşeni, onu kullanmadığımız için artık geçerli olmayacak. Bu noktada bunu kaldıracağım ve buna ne dersiniz? Sadece sahip olacağız – biz sadece H1 yapacağız. Merhaba yazıyor, sadece burada sayfada bir şeyler oluşturmak için. Ve belki daha fazlasını da yorumlayacağız.

Bu yüzden unuttuğum bir şey var mı diye bir proje araması yapacağım. Evet, sadece birkaç kod yorumu ve ardından buraya çekilen ve artık kullanmadığımız bu bileşen. Bu yüzden o bileşeni sileceğim. Ve bence iyi olmalıyız. Yani bu noktada bunlardan birkaçını kullanmıyoruz, ama sorun değil. Anlık yapacağız.

Bu yüzden buna bir Kaydet vereceğim ve o işlemeyi alıp alamayacağımıza bakacağız. Şimdi ön uç uygulamamızda, bunun gibi Fotoğraf'a gidebilmeliyim. Ve işte başlıyoruz. İşte yeni sayfamız. Merhaba diyor ve çoğu üst bilgi ve alt bilgi gibi portföy projeleri sayfamızla aynı görünüyor.

Hala portföy yazdığını fark ettim ve muhtemelen onu değiştirmek istiyoruz. Yani bunu gerçekten kısaca yapabiliriz. İşte portföy. Fotoğraf diyeceğiz. Ve ayrıca bu noktada, bunu fotoğraflara çevireceğiz. Kaydet. Oraya gidiyoruz. Böylece başlık güncellendi.

Şimdi bu verileri nasıl kullanabileceğimize, fotoğraf verilerimizi nasıl getirebileceğimize ve burada bir liste gösterebileceğimize bakalım. Peki bununla nereden başlayalım? GraphQL'de veya buradaki WordPress yöneticisinde gördüğümüz gibi, sorgumuz kabaca böyle görünecek. Bu alanlara sahip olacak. Öyleyse yapalım. Yani fotoğraf başlığı özel alandır. Ama aslında, bu alanı gönderinin başlığı olarak ayarladığımız için, sadece başlığı kullanabiliriz, çünkü bu– gönderinin başlığı, bu ada sahip özel alanla aynı olacaktır. Yani bunu kullanabiliriz.

Yani bu dizide, sadece veritabanı kimliğini yapmayacağız, aynı zamanda fotoğraflarımız, görsellerimiz, açıklamalarımız ve konularımız için başlık alacağız. O halde bunları da ekleyelim. Resim, açıklama ve ardından konu. Elbette. Sonunda virgüllere ihtiyacın olacak. Oraya gidiyoruz. Bu yüzden, sayfa bittiğinde hemen kullanılabilir olmasını istediğimiz tüm alanlarımızın bu olduğunu düşünüyorum. Yani bu bana iyi görünüyor.

Ve burada gerçekten veri işleme alıp alamayacağımızı test edelim. Yani sahip olduğumuz Merhaba H1'imiz altında, hadi bunu yapalım. JSON.stringify yapacağız ve sonra o şeye geçeceğiz. Bu yüzden burada veri yapacağız ve sayfamıza veri işleme alıp alamayacağımıza bakacağız.

Bu yüzden onu kaydedeceğim ve ön tarafımıza geri döneceğiz. Ve işte orada, elbette. Yani veriler böyle görünüyor. WordPress arka ucumuzdan başarıyla getirdiğimizi görebilirsiniz. Bu düğüm dizisine sahibiz ve daha sonra bu nesnelerin içinde, bireysel fotoğraflarımızın her birini ve tam olarak geri istediğimiz verileri temsil eden, buradaki tekrarlanabilir konu alanımız için bireysel değerlerin her biri dahil.

Yani bu harika. Bu tam olarak ihtiyacımız olan şey. İşleri biraz daha temiz hale getirelim - yani, çok daha temiz, sanırım, verileri bu şekilde sayfaya dökmekten daha. Buradaki sadece bu ön etiket yerine, her bir veri parçamızı eşleyelim ve bunun için sayfada bir kart oluşturalım.

Yapmayı sevdiğim bir şey, oluşturulacak gönderilerimiz olduğunu varsaymadan önce, belki de hiç gönderi olmadığını hesaba katmalıyız, değil mi? Yapmayı sevdiğim bir şey, bileşenlerimin en üstünde, fotoğraflarım var, buna benzer bir şey. Ve sonra böyle data.nodes.length yapıyorum. Ve isteğe bağlı zincirleme için bir soru işareti yapacağız çünkü verilerin var olup olmayacağını henüz bilmiyoruz.

Ve sonra bunu böyle bir Boolean'a atacağız. Yani, bu noktada başarısız olursak ve veriler tanımsızsa, bu yanlış olarak değerlendirilecektir. Render edilecek fotoğrafımız yok diyeceğiz. Aksi takdirde, bu dizinin uzunluğuna kadar inebilirsek, hiç gönderi yoksa sıfır veya bir veya daha fazla olur. Dolayısıyla, bu tamsayıyı bir Boolean'a çevirirsek, bize fotoğraflarımızın olup olmadığını söyleyecektir. Yani sıfırsa, bu yanlış olacaktır. Bir veya daha fazlaysa, havePhotos doğru olur.

Bu bilgiyle, buradaki bileşenimizin içinde bazı kararlar verebiliriz. Öyleyse bunu nasıl yapabileceğimizi bulalım. Diyeceğim o ki, eğer fotoğraflarımız varsa, o zaman bir şeyi işlemek isteriz. Diyeceğiz - bakalım. data.photos yapmak istiyoruz ve sonra bunların haritasını çıkaracağız. Yani her fotoğraf için bir şeyler yapacağız.

O halde ilk başta kolay bir şeye geri dönelim. Geri döneceğiz – bakalım. Bir H2 yapacağız, ne dersiniz, çünkü bu bizim kartlarımızdan biri gibi olacak. Ve sonra bunun gibi photo.title diyeceğiz. Elbette. Böylece fotoğraflarımızın her birinin haritasını çıkaracağız. Ve bunların her biri için, o fotoğrafın başlığını içeren bir H2 döndürürüz. Elbette.

Yani, gerçekten işlenecek fotoğraflarımız varsa, bunların hepsi bizim istediğimiz şey. Ama yapmazsak alternatif ne olacak? Burada başka bir yan tümcemiz olacak ve hadi başka bir şey oluşturalım. Paragrafa ne dersin? Ve gösterilecek fotoğraf yok diyeceğiz. Yani şimdi onu kurtarırsak, işte başlıyoruz. Şimdi yazı başlıklarımızın burada görüntülenmesini alıyoruz.

Öyleyse, bunu burada biraz daha fazla özellik yapalım. Başka bir şey iade etmek istediğimizi söyleyeceğiz. Elbette. Ve bunların her biri için, sadece bazı stilleri, buraya önceden yazdığım bazı satır içi stilleri kopyalayacağım, sadece bunları yazmamıza zaman kazandırmak için. Bu yüzden sarmalayıcı div'e sahip olacağım. Ve bunun içinde, sahip olduğumuz H2'yi eski haline getirebiliriz. Bu yüzden başlık ile bir H2 yapıştıracağım.

Başlıktan sonra açıklamayı göstermeye ne dersiniz? Sıradaki bunu yapabiliriz. Yani bu photo.description olacak, bunun gibi. Ama onu kendi başına, örneğin bir kabın içi gibi, bunun gibi oluşturamayız. Bunu yapmaya çalışırsak, bu bizim için pek işe yaramayacaktır, çünkü HTML kaçmayacaktır. Bunu kaydedersem, artık sayfada kaçan HTML'nin gösterildiğini görebilirsiniz ki bu bizim istediğimiz şey değil.

Yani React, HTML ile çalışmak için güvenli olan ve bu şekilde kaçmaya gerek olmayan bir yardımcı programa sahiptir. Ve bu, div kullanmak ve ardından bunun gibi tehlikeli bir şekildeSetInnerHTML kullanmaktır. Ve ona, bir özelliğin çift alt çizgi HTML olduğu bir nesneyi iletebilirsiniz.

Ve sonra ona ilettiğiniz değer, kaçmadan işlemek istediğiniz şeydir. Yani bizim için bu, tıpkı bunun gibi bir fotoğraf.tanım olacaktır. Ve sonra bu div kendini giydirebilir. Elbette. Şimdi bunu kurtaracağım. Ne aldığımızı göreceğiz. Serin. Yani artık HTML'miz artık kaçmıyor. Bu yüzden bana iyi görünüyor.

Yani bu harika. Öne çıkan görsele ne dersiniz? Yapabileceğimiz şey, bunu sıfırdan yazmak. Öne çıkan resim URL'sini alabilir ve bir resim etiketine sahip olabilir ve bunu URL olarak iletebiliriz. Ve sonra tarayıcı bir görüntü oluşturur ve onu o kaynağa yönlendirir.

Bununla birlikte, bu proje, bu plan kod tabanını incelerseniz, aslında tam olarak bu amaç için önceden oluşturulmuş bir bileşene sahiptir ve bu bileşene özellikli görüntü adı verilir. Yani bizim için kullanmamız mükemmel olurdu. Bu yüzden, bileşenler dizinimizden bir grup farklı bileşeni içe aktardığımız yere biraz yukarı kaydıracağım. Ve burada öne çıkan görsel denen uca bir tanesini etiketleyeceğim, aynen böyle. Artık öne çıkan görselimizi istediğimiz yerde render edebiliriz.

Fotoğraf açıklamamızla birlikte bu div'in olduğu yerin hemen altında, öne çıkan görselimizi oluşturacağız. Ve bu bir görüntü desteği gerektirir. Ve buraya geçirmemiz gereken şey, bu görüntü için tüm düğüm. Yani bizim için bu photo.feauredimage.node olurdu, tıpkı bunun gibi. Ve bence bu, imajımız için işe yaramalı. Bu yüzden onu kurtaracağım ve tabii ki, işte başlıyoruz. Sayfamız buraya yeniden yüklendiğinde, şimdi başlığımız, açıklamamız ve ardından görüntülenen fotoğrafımız var. Aynı şekilde bir sonraki fotoğrafımız için de o resim listede gösteriliyor.

Yani bu harika. Büyük ilerleme kaydediyoruz. Son olarak, fotoğrafta yer alan konular için tekrarlanabilir alanımızla ilgilenmek oldu. Yani yapacağım şey, burada bir paragraf oluşturacağım ve onu kapatacağım. Ve sonra bu paragraf etiketinin içinde, bazı kıvrımları açabilir ve aynı fotoğraf konularımızı yapabiliriz. Ama şimdi birleştirmenin sonuna değineceğiz. Ve [DUYULMUYOR]'a virgül, boşluk ile birleştirmek istediğimizi söyleyeceğiz, aynen böyle. Ve bunu kurtaracağım.

Sıcak yeniden yüklememiz gerçekleştiğinde, aşağı kaydırabilmeliyim. Ve tabii ki, işte başlıyoruz. Yani listede gösteriliyorlar. Kullanıcı bunların ne olduğundan emin olmayabilir. Yani belki uygulamamızda, geri dönüp bir tür etiket ekleyebiliriz, oraya Konular belki diyen küçük bir şey, bunun gibi. Konular çiçek, bokeh, dal. Ve sonra buradaki diğer fotoğrafımız, sadece bir örnek olarak dağ, yıldızlar, gölgeler konularına sahiptir.

Bu yüzden burada duracağız, ancak bu sayfayı ne kadar çabuk bir araya getirebildiğimi görebilirsiniz. Sanırım yukarıdaki merhaba dünyamızdan kurtulmalıyız. Buna pek ihtiyacımız yok. Veya merhaba kelime. Bu yüzden onu kaldıracağım. İşte oradayız. Yani, dediğim gibi, bunu ne kadar çabuk bir araya getirebildiğimizi görebilirsiniz.

Portföy listesi sayfasından kodumuzu temel alarak, burada fotoğraf listesi sayfamızı oluşturabildik ve ardından her bir fotoğrafı tek tek haritaladık ve bunun için Atlas İçerik Modelleyici özel alanlarına (başlık, açıklama, resim, ve sonra buradaki konu için tekrarlanabilir alanlarımız. Bu nedenle, kendi projelerinizde bununla güçlendiğinizi hissetmenizi çok isterim.

Projenizin çoğunu sizin için halledebilecek bu büyük avantaj olarak planlarımızdan birini almak isterseniz, birçok ayak işi yapılır. Ve oradan, bizim bu konuşmada yaptığımıza benzer bir şey yapabilirsiniz. Daha da özelleştirebilir ve kendi özelleştirmelerinizi ve diğer içerik modellerini vb. ekleyebilirsiniz.

İzlediğiniz için çok teşekkürler. Umarım bu konuşma gerçekten yararlı olmuştur ve size Atlas ekosisteminde ortaya çıkan ve çıkmaya devam edecek olan tüm harika özellikler hakkında iyi bir fikir vermiştir.

SUNUCU: DE{CODE} 2022'nin özeti bu. Umarım bunu ilham verici bulmuşsunuzdur ve daha fazla WordPress uzmanlığı ve yeni topluluk bağlantıları ile ayrılıyorsunuzdur. Kaçırmış olabileceğiniz herhangi bir şeyi yakalamak veya bir videoyu tekrar izlemek için Cuma gününden itibaren sitede kayıtlı içeriğe dikkat edin.

Sponsor ortaklarımıza son bir teşekkür etmek istiyorum: Amsive Digital, Box UK, Candyspace, Drewl, Elementary Digital, Illustrate Digital, Kanopi Studios, Springbox, Studio Malt, StrategiQ, WebDevStudios ve 10Up. DE{CODE} bağış toplama etkinliğimize bağışta bulunduğunuz için çok teşekkür ederiz. Cömertliğini gerçekten takdir ediyoruz.

Şimdi, katılımcı merkezimizde ve oturumlarımızda bizimle etkileşim kuran herkes için, ilk üç kazananı seçeceğiz ve DE{CODE} sonunda ödülünüzü nasıl alacağınızı size bildireceğiz. Gelecekteki etkinliklerimizde şahsen veya sanal olarak sizi tekrar görmeyi dört gözle bekliyoruz. Size en son WordPress geliştirme trendleri ve WordPress sitelerini daha hızlı oluşturmak için bunları nasıl uygulayabileceğiniz hakkında daha fazla bilgi vermek için sabırsızlanıyoruz.

benden bu kadar. Bize katıldığınız için çok teşekkür ederiz ve kendinize iyi bakın.