Teknik Breakout Zirvesi/2021: [Demo] Kafası olmayan WordPress ile modern deneyimler oluşturmak

HeadPress WordPress Mimarlık, WordPress ile mümkün olandan zarfları teşvik eden deneyimler yaratmak için React gibi modern JavaScript çerçevelerini kullanır. Aşağıdaki videoda, WP motorunun WordPress’in geleceğini şekillendirmeye nasıl yardımcı olduğunu öğrenin.
Video: Bu oturumda başsız WordPress ile modern bir deneyim oluşturan WP Engine Landers Geliştirici İlişkileri Yöneticisi şunları tartışıyor:
Başsız bir içerik dağıtım gösterisi için WP motor geliştirici sitesindeki koddan başlayarak her şey Atlas.
Bu sofistike başsız uygulamayı kullanarak doğrudan site demosu dahil Atlas içerik modeli ve içerik motoru gibi yeni araçlar.
Bence bu gerçekten WordPress başsız oyun değiştiriyor. Olağanüstü bir kullanıcı deneyimi ile başlamadan iyi bir şekilde özel bir içerik oluşturma yeteneğine sahip olmak – türlerini yapan geliştiriciler ve içeriğe girecek yayıncılar için – CMS’yi büyük başsız yapmak için çok önemli.
Matt Landers Komple Metin Transkript: Merhaba, Summit 2021. Ben WP motorundaki geliştirici ilişkileri başkanı Matt Landers. Ve bu oturumda, tüm Atlas demosunu alacağız. Yani, slayt falan yok, sadece kodu göreceğiz, birkaç kod yazacağız ve sonra gelecekte gelecek bazı şeylere bakacağız. Yani, ilk yapacağımız şey başsız geliştirici sitemizi görmek. Bu geliştiriciler.wpengine.com’da. Kodu göreceğiz, sitedeki bazı şeyleri nasıl çözdüğümüzü göreceğiz. Ve sonra gelecek yeni bir araç göreceğiz, Atlas içerik modeli ve birkaç farklı şey yapabileceğimizi ve bu araçla nasıl küçük bir site oluşturabileceğimizi göreceğiz. Bundan sonra, tamamlandıktan sonra içerik motoruna bir bakış göreceğiz. Keynote hakkında biraz duyulmuş olmalısınız. Onu çalıştıran doğrudan siteyi göreceğiz. Ve gelecekte ne olacağı hakkında biraz konuşacağız. Öyleyse, geliştirici sitesini görelim ve görelim. Peki. Yani bu bir geliştirici sitesi. Hiç buraya gelmediyseniz, kontrol etmeniz gerekir. Geliştiriciler.wpengine.com’da. Benimle ve ekibimle iletişime geçebileceğiniz bir bağlantı var. Discord sunucumuz, kesinlikle topluluğumuza katılacak ve girecek ve başsızla ilgili her şey hakkında konuşacak. Her Pazartesi piyasaya sürdüğümüz bir podcast var, görün, podcast kod çözme. Ayrıca video eğitimleri, bloglar ve diğerleri yayınladığımız bir YouTube kanalımız var.
Yani, buradaki ana sayfada, birkaç blogumuz olduğunu göreceksiniz.Bu doğrudan WordPress’ten geldi, sadece gönderileri.Ve sonra burada, birkaç belgeye bir bağlantı var.Şimdi, tüm bu belgeler aslında GitHub’da.Bu yüzden, başsız belgelerimizin çoğunun bu siteye çekildiği bir repo, başsız bir belgemiz var.Yani, bu bizim için bir veri kaynağı.Bu yüzden WordPress, GitHub var ve sonra burada YouTube’dan çektiğimiz videolarımız var.Şimdi, bu videoların da onunla ilgili özel bir yazı türü var, bu da konuşmak istediğim bir şey.Ve şu anda yaptığımız gibi değil, onunla nasıl yapacağımızı göstermek için Atlas İçerik Modelini kullanacağız.Öyleyse şimdi bu video eğitimini nasıl bitirdiğimize biraz dalalım.
Yani, WordPress tarafına gidersem, burada videolar adı verilen özel bir yazı türüm olduğunu göreceksiniz. İşte tüm videolar. Yani her birinin kendileriyle ilgili farklı bir alanı vardır. Video URL’leri, yayın tarihleri ​​ve başlıkları var. Öyleyse bir tane görelim. Bu bir tür özel içeriktir. Burada da SEO verilerimiz var. Ve sonra bu verileri WP GraphQL’e bir kuyrukla geri çekiyoruz. Yani bu, kodumuzda kullandığımız kuyruktur ve tüm bu videoların listesini doğrudan özel gönderi türünden geri çeker. Bu, yayıncımız veya bu verileri düzenleyecek olan herkes için siteye çok yapılandırılmış bir şekilde yerleştirebilmek için bu iyi veri girişi deneyimini yapabilmek gerçekten rahat. Bu, başsız ayarlarda çok yaygındır. Ve bugün yapmanız gereken, bazı eklentilere ihtiyacımız olması. Burada kullandığımız şey, gelişmiş özel alan, kullanıcı arayüzü türü özel yazı ve ardından gelişmiş özel alan için WPGraphql uzantısıdır. Ve yapmamıza izin veren şey, özel yayın türleri şeklinde özel içerik türleri oluşturmak ve daha sonra özel alanlara sahip alanlar eklemek ve daha sonra GraphQL üzerinden sormaktır. Yani bu, başsız bir site inşa etmede çok önemli bir rol. Bu her zaman olur. Ancak bu eklentiyi kullanırken elde ettiğimiz deneyim şu anda çok iyi değil. Bu yüzden, UI tür özel gönderimine gidersem, buraya gelmeliyim, burada gerçekten umursamadığım tüm bu ek veriler, dünyada başsız sorun yok, video gönderimi türümü alıyorum.
Ve sonra aşağı indiğimde, GraphQL’e ekleyebilirim, istediğim yazı türünün adını verebilirim ve tüm bunlar. Dolayısıyla, WordPress’te geleneksel olarak kullanılan özel yayın türleri ile başsız bir senaryoda ne yapmam gerektiği arasında böyle bir karar var. Bu yüzden özel alanıma gitmeliyim ve gerçekten özel gönderi türüme özel bir alan grubu yapmalıyım. Şimdi iki farklı yerde bir şeyler yapıyorum. Böylece bunun tespit edilmemiş bir deneyim olduğunu görebilirsiniz. Gerçekten yapmak istediğimde, sadece özel yazı türüm için bir veri modeli oluşturuyorum ve daha sonra verileri girmem için iyi bir yolum var.
Yani, bu işe yarıyor. Ve bugün yapabilirsiniz. Tüm başsız sitelerimizde kullanıyoruz. Kesinlikle tavsiye. Sitemizde özel bir içerik türü oluşturma konusunda sahip olduğumuz bazı videoları görebilirsiniz. Ve bu, ihtiyacınız olan tüm eklentiler boyunca size rehberlik eder ve baştan kullanarak bir sitenin nasıl oluşturulacağına dair bir demo yapar. Bu nedenle, ayrıntılı olarak çalışmak istiyorsanız kontrol ettiğinizden emin olun. Ama şimdi, siteye gidip bunun nasıl tercüme edildiğini görelim. Bu video öğreticisi ile sonuçlanıyoruz. Bu, ana sayfa için ilk üçünü çiziyor. Ve daha fazla izle veya daha fazla görmeyi tıklarsam, her şeyi görebilirim. Şimdi koda gidip nasıl çalıştığını kontrol edelim.
Şimdi geliştirici sitesi için koddayım. Ve video sayfasında olduğumu görebilirsiniz. Bu bana liste videolarını gösteriyor. Burada sadece grafik düzenleyicide çalıştırdığımız sorum var. Ve sonra bu verileri çizdiğimiz yerde reaksiyon bileşenim var. Ve temelde yapmamız gereken, başsız çerçevemizi kullanıyoruz ve Apollo müşterilerimizi alıyoruz. Sorguyu burada yapıyoruz. Ve sonra biz – o zaman veriler bileşenlerimizde bizim için mevcut olacak, buraya böyle geliyor. Aynı sorguları müşterinin tarafında veya bileşende yaparız. Bu da sunucu tarafında da olacaktır. Yani, çerçevenin çalışma şekli sunucuda sorgu yapmaktır. Videoyu geri alacağız. Apollo önbelleğine kaydedeceğiz ve istemcide de mevcut olduğundan emin olacağız. Önbelleği kurtaracağız. Böylece bu bileşen sunucuda her çalıştığında arama yaparız, videoyu alırız. Ve sonra istemcide veri önbelleğini aldık, böylece bu gerçekten tekrar arama yapmıyor. Bu aramayı sadece bir kez yaptık. Ve bu başsız bir çerçeveyle elde ettiğiniz bir şey. Öyleyse kontrol et. Peki. Böylece bu sürecin nasıl çalıştığını görebilirsiniz. WordPress’ten veri çeken bir reaksiyon bileşenidir. Ve bunu gerçekleştirmek için özel yazı türlerini ve gelişmiş özel alanları kullanmalıyız.
Bu demonun bir sonraki bölümünde, çok benzer ancak Atlas içerik modelini kullanan bir şey yapan bir site oluşturalım. Ve bunun ne olduğunu, nasıl çalıştığını ve sitenize nasıl uygulayacağınızı tartışacağız. Küçük bir sitem var ve koşuyorum. Pek çok şey yapmadım. Başsız çerçeve başlangıç ​​şablonumuzla yeni başladım ve sonra biraz sildim ve sadece çalıştırdığım yerel WordPress sitesinden çıkan yayınların bir listesini görüntüledim. Öyleyse bakalım. Ben sadece yerel siteleri burada çalıştırıyorum. Şimdi bunun için çok fazla değil. Biri henüz kullanmadığımız Atlas İçerik Modeli olan birkaç eklenti var. Şimdi bu demoda kullanacağız. Ancak, başsız çerçevemizin bir parçası olan bir WP Engine Headless eklentisi ve WP GraphQL’im olacak. Yani, burada çok fazla değil. Ve sonra sadece birkaç gönderim var. Öyleyse Visual Studio’ya bakalım. Ve bu benim sahip olduğum yakalama rotası. Bu yüzden sadece bir yakalama rotam var ve bu JS. Ve bu sayfayı görüntüler. Ve burada sadece kazmayacağımız bir düzen bileşeni var. Ve sonra yazıyı tekrarlıyoruz ve ekranda gösteriyoruz. Ve oldukça kolay. Yani, başsız bir çerçeveyle, burada özel bir kuyruk yapmıyorum. Yani GraphQL sorguları falan görmüyorsunuz. Kullanabileceğiniz bir tepki teklifimiz var. Ve nerede olduğunuz URL’ye dayanarak yayınlamak ve sayfada görüntülemek ilginçtir. Peki. Böylece işe yaradı.
Ancak yapmak istediğimiz şey, ekip üyelerinin bir listesini görüntüleme hakkında bir sayfa eklemek istiyoruz. Yani şimdi inşa edeceğiz. Yapmamız gereken ilk şey hakkında bir sayfa oluşturmak. Öyleyse devam edelim ve bunu yapalım. Bu yüzden burada sayfa klasörüme gideceğim. Make.tsx. Ve bunun aktif ve çalıştırıldığından emin olmak için sadece basit bileşenler yapacağım. Öyleyse diyelim. Sadece basit reakt bileşeni. Bu yüzden şimdilik sadece H1 yapacağım. Oraya koy. Biraz daha büyük. Peki. Ve sonra sadece dışa aktarmamız gerekiyor. Mükemmel. Peki. Şimdi sitemize geri dönelim. Ve sayfayı tıklayın. Ve bu kadar. Navigasyon bıçaklarımızı ve dipnotlarımızı kaybettik. Öyleyse devam edelim ve başarılı hale getirelim, çünkü oldukça basit. Projede zaten bir düzen bileşenimiz var, bu yüzden kullanacağım. Peki. Bileşeni içe aktarmam gerekiyor ve iyi olmalı. Onu kurtar. Pekala, hepsi bu. Bir şekilde uzay ile sona erdi. Peki. Yani, şimdi bir başlığımız ve her şeyimiz var, böylece gezinebiliriz, ki bu çok iyi. Mükemmel. TAMAM. Yani, şimdi yapmak istediğimiz şey özel bir içerik türü oluşturmak istiyoruz. Bu nedenle, geliştirici sitesinde videoyu çektiğimizde, gelişmiş bir özel alan, kullanıcı arayüzü türü özel gönderi ve ardından gelişmiş özel alanlar için GraphQL WP’yi kullanıyoruz. Ve sonra içerik türünü yapmak için yaptığımız arayüz çok iyi değil, başsız bir senaryoda mantıklı olmayan birçok şey var.
Yani yapmak istediğimiz şey, özel bir içerik türü oluşturmak için daha verimli bir başsız deneyime sahip olmamızı sağlayan bir şey yapmak. Öyleyse WordPress’i kontrol edelim. Yani, buradayız. Şimdi oynamaya başlayabilmeniz gereken Atlas içerik modelindeyiz. Gördüğünüz sürüm biraz farklı olabilir, ancak konsept aynı. Öyleyse kontrol edelim. Girdiğimde gördüğüm ilk şey sadece bir başlangıç ​​düğmemin olmasıydı. Bu gerçekten iyi bir UX. Bu tür yapmak için iyi bir deneyim yaratmak için tasarımcılarımızla biraz zaman geçirdik. Bu yüzden başlangıç ​​tıklıyorum ve hazırım. Yalnızca yeni bir içerik veya içerik modeli oluşturuyorum. Oluşturacağız – sayfada ekip üyelerinin bir listesini görüntüleyeceğiz. Öyleyse sadece bu ekip üyesini diyelim. Tür bu. Ve sonra çoğul isim bir ekip üyesidir. Ve yangımızın tanımladığı şeyi alacağız. Yani, geri kalan ve WP GraphQL API’sinde görünecek olan budur. Ve sonra bir açıklamamız var. Yani, buna Devrel ekibinin bir üyesi diyeceğim. Ve biz başaracağız. Şimdi bunu yaptığımda, dikkat edeceğiniz ilk şey, burada NAV’ın sol tarafında görünmesini sağladığımızdır. Eğer üzerine tıklarsam, hiçbir şey yapamazsınız. Öyleyse geri dönelim. Birkaç alan eklemem gerekiyor. Bu yüzden buraya girip ilk alanımızı ekleyeceğim. Yani, burada seçebileceğimiz birçok farklı alanımız var. Seçeceğimiz ilk şey sadece sıradan bir metin. Ve oraya ismimize gireceğiz. Bu yüzden ekibimizin her üyesinin adına sahip olmalıyız.
Bu alanı gerekli hale getireceğiz.
Ve bunu girişin başlığı olarak kullanmak istiyoruz. Size sadece bir saniyede ne anlama geldiğini göstereceğim. Ve devam edip başaracağız. Öyleyse ekip üyelerimize geri dönelim ve bir tane ekleyelim. Şimdi ekleyerek tıkladığımızda, burada bir isim alanımız olduğunu görüyoruz. Ve biz sadece dolduruyoruz. Adımı gir. Bunu yayınlayın. Listeme gittiğimde Matt Landers’ı burada gördüm. Çünkü onay kutusuna tıkladığım için. Tekrar kontrol edelim. Yani, bu alana girersem, bu alanı girişin başlığı olarak kullandığı söylenir. Bu, özel sevkiyat türü için tüm girişler listesinde görünecek alandır. Peki. Öyleyse buraya birkaç alan daha ekleyelim. Yani, eğer buraya gidersem, bu artı düğmesini alabilirim. Ve sonra her türlü farklı alanımız var. Bu yüzden sıradan metin alanları kullanıyoruz. Zengin bir metnimiz var, böylece bunu kalın, eğik, her neyse yapmanıza izin verecek. Öyleyse alanlarımızdan biri için kullanalım. Biyografi yapacağız. Peki. Ayrıca profil fotoğrafımıza medya öğeleri ekleyelim. Biz de gerekli hale getireceğiz. Ve sonra editörümüze döneceğiz ve bunu ekleyeceğiz. Diyelim ki – buraya biraz metin ekleyelim. Söyleyeceğim, merhaba, bu Matt. Ama buna cesaret ettim ve her şeyi eğdim. Ve sonra önden çekeceğiz. Ayrıca, fotoğraf yüklemek istiyorum. Burada zaten bir tane var. Ve profil fotoğrafımı ekleyeceğim ve bunu güncelleyeceğiz. Peki. Şimdi ekip üyelerine gideceğim.
Sadece buna sahip olduğumu görüyorsun. Listemi ekleyebilirim. Öyleyse, buraya bazı insanları ekleyelim. Will ekleyelim. Ve buraya resim yükleyeceğim. Ve irade var. Mükemmel. Bunu yayınlayın. Ve şimdilik yapmamız gereken tek şey bu. Şimdi bunu ekleyeceğiz. Peki. Şimdi listemiz var. Will ve Matt var. Ve model içeriğine gidip çok havalı diğer şeyleri görelim. Elips’i buraya koyarsam, GraphQL’de açma seçeneğim var. Bu yüzden üzerine tıklayacağım. Hemen çalışabileceğim sırayı otomatik olarak sıraya koyuyor, her şeyi geri çekiyor. Böylece bu kuyruğu gerçekten koduma kopyalayabilir ve ekip üyelerini geri çekmeye başlayabilirim. Tüm bu verilere ihtiyacım yok, bu yüzden bazılarını kaldırmama izin verin. Profil fotoğrafları hakkında tüm bu verilere ihtiyacım yok. Gerçekten URL’ye ihtiyacım var. Ve çalıştıracağız, her şeyin yolunda olduğundan emin ol. Mükemmel. Peki. Bu sorguyu yalnızca Visual Studio’ya kopyalayacağım. Çek. Ve sırayı buraya koyacağız. Ve buna ekip üyesi diyeceğiz. Ve GQL sorgusunu yapacağız. Bu işlevi içe aktaracağım. Şimdi sorularımız var, her şey burada. Göreceksiniz – ekip üyeleri altında. Bu yüzden verileri her çıkardığımızda bunu hatırlamamız gerekiyor. Bu yüzden ekip üyelerimiz hakkında veri keşfetmeli ve almalıyız. Peki. Öyleyse devam edelim ve bunu yapalım. Bu yüzden sadece useQuery kullanacağız. Bu gösteri için bunu müşterinin tüm taraflarını yapacağız.
Bu, statik siteler yapmakla değil, içerik modelleme ve içerik türlerini çekmekle ilgilidir. Öğrenmek istiyorsanız, sitemizde nasıl yapılacağını gösteren birçok videomuz var. Yani, kontrol edin. Peki. Bu nedenle, GraphQL sorguları yapmamızı sağlayan bir Apollo kancası olan UseQuery kullanarak verileri geri çekeceğiz. Peki. Yani, verilerimiz var. Ve daha iyi bir şeye koymak istiyoruz. Ve buna takım diyeceğiz. Ve ekip üyelerinin nokta verilerini yapın, çünkü yangını ve ardından düğümü tanımlamak için kullanılan şey budur. Peki. Ve sonra bunu tekrarlamak ve tüm ekip üyelerini göstermek istiyoruz. Öyleyse hadi yapalım. Yani sadece takımı yaptık. Orada olduğundan emin olacağım, çünkü kuyruk gerçekleşene kadar orada olmayacak. Ve sonra sadece bir nokta haritası yapacağız. Bundan ekip üyelerini alacağız. Bunun için bir yazım yok ve gösteri amaçları hakkında endişelenmeyeceğim. Ama kesinlikle bazılarını yapmak istiyorum. Ve burada size çok yakında bir çerçevede yardımcı olacağız. Peki. Öyleyse, şimdilik adınızı gösterelim. Yani, sadece isim noktası adını alacağım. Ve ayrılmak iyi olmalı. Hadi kontrol edelim. Sitemize gidin. Ve buradalar. Matt ve olacak. Yani çok basit. İçerik modele içeriğini girebilir, yeni bir içerik modeli oluşturabilir ve ihtiyacım olan alanları ekleyebilirim. Ve sonra çok hızlı bir şekilde çekin, çünkü yalnızca Atlas içerik modelinden sorgu yapabilirim. Öyleyse, devam edip bunu üfleyelim ve daha iyi görünmesini sağlayalım. Yani Li var.

H2’ye koyacağımız bir isme ihtiyacım var. Bunu UL’ye de sarmadım, fark ettim. Sargı. Bu şekilde mermi alamadım. Peki. Gittiklerinden emin olun. Oraya gidiyoruz. İyi görünüyor. Şimdi biyografimize girelim. Yani, biyografimiz için, DIV’e koymalıyız, çünkü HTML olacak. Öyleyse, tehlikeli olmayan tehlikeli olmayan HTML kullanarak ondan kurtulalım, çünkü bu verilerin nereden geldiğini biliyoruz. Kullanıcı tarafından girilen veriler varsa, bunu yapmanıza gerek yoktur. Ancak bu verilerin nereden geldiğini biliyoruz ve buna inandık. Peki. Bu yüzden bir DOT Bio üyesi yapacağız. Ve sonra da imajımıza sahip olacağız. Bu resmi biçimlendirmek için çok şey yapmayacağım. Aslında neye benzediğini bilmiyorum. Ve kaynak yalnızca DOT profili PIC DOT Media öğesi URL’sinin bir üyesi olacak, sanırım. Bakalım. Evet. Medya Öğesi URL’si. Peki. Mükemmel. Onu kurtar. Sayfamıza dönün. Ve buradayız. Ve formatı da zengin metnimizden aldığımızı göreceksiniz. Yani bu oldukça havalı. Yani, model içeriğinden, hepsini çok hızlı bir şekilde yapabiliriz. Bunu ACF ile veya özel gönderi türünde ve bunların hepsinde yaptıysanız, deneyim neredeyse bu kadar iyi ve pürüzsüz değildir. Yani, buraya yeni girdik. Başkalarını yapabiliriz. Buna bir şey deyin. Sadece bir test yapacağız. Bunun için. Ve bunu tekrar görebiliyoruz. Yani, bunu buraya eklediğimiz kadar hızlı. Sayıları ekleyebiliriz.
Mesela bir test numarası alanı oluşturalım. Tamsayılarınız veya ondalık sayılarınız olabilir. Bunun için. Bir boole. Nasıl göründüğünü görün. Teste gidin. Yeni bir tane ekleyin. Ve şimdi bu sayı alanına sahip olduğumuzu göreceğiz. Bu yüzden yapamam – bu oldukça garip olan numaraları yazmama izin ver. Ama ben de var – tür numaralı bir metin kutusu var. Ve sonra Boolean için onay kutusuna tıklayabilirim. Ve her şey güzel. Yani, bu harika. Yani gelecekte yapacağımız şey daha fazla alan türü eklemek ve daha iyi bir deneyim kazanmak için tekrarlamaya devam etmektir. Bu yüzden, lütfen bundan çıkın ve kontrol edin, onunla birkaç şey yapın ve Discord sunucumuz hakkında bize geri bildirim verin. Ve bize fikrinizi söyleyin. Bence bu gerçekten WordPress başsız oyun değiştiriyor. Olağanüstü bir kullanıcı deneyimi ile başlamadan iyi bir şekilde özel bir içerik oluşturma yeteneğine sahip olmak – türlerini yapan geliştiriciler ve içeriğe girecek yayıncılar için – CMS’yi büyük başsız yapmak için çok önemli. Yani, kesinlikle, lütfen kontrol edin. Oraya git ve onunla birkaç site inşa et. Şimdi, Atlas’a yaptığımız siteyi kullanalım. Yani, yapacağımız şey kullanıcının portalında bir proje oluşturmak, sonra repo’umuzu oraya bağlamak ve internette çalıştırmaktır. Yani, Atlas’ın çalışma şekli onu GitHub hesabınızla bağlamaktır. Bu yüzden, kullanıcının portalına gideceğim, Atlas’a gideceğim ve yeni bir uygulama için tıklayacağım. Buraya girdiğimde GitHub’a bağlanacak. Repo’ya Atlas’a erişim verdim.
Şimdi listemde görüyorum. İşte, Zirve 2021. Üzerine tıklayın. Bölgemi, ABD Merkezi’ni seçeceğim. Ve sonra hangi dalları kullanmak istediğimi söylemeliyim. Ana şubeyi kullanacağım. Ve çevre üretimimi arayacağım. Yani burası ön uç atlası için birkaç uygulama yapabilirsiniz. Ve bağlandığınız dallara dayanır. Yani, ana şubeyi kullanıyorum, sahip olduğum tek şey bu. Ancak bir geliştirici dalınız varsa, bir geliştirici ortamı oluşturabilirsiniz. Ayrıca, ödev yoluyla birleştirmeden önce birine ne tür bir şey gibi göstermek istiyorsanız, özelliklerin veya başkalarının şubeleri için de çok şey yapabilirsiniz. Ayrıca bunu WordPress sitesine bağlamanız gerekir. Yani, zaten, demo zirvesi 2021 var. Ve sonra bazı çevresel değişkenler yapmam gerekiyor. Öyleyse alalım. Koddan almam gerekiyor. Eğer buraya gelirsem, yerel bir dosya dot env dot var. Endişelendiğim tek çevresel değişken bir sonraki genel WordPress URL’sidir. Burada olan şey, ona bu çevresel değişkenin adını ve değerini verebileceğim ve daha sonra benim için ve düğüm işlemimin süreç süresini benim için kullanılabilir olacak. Peki. WordPress sitesini hazırladım. Ve HTTPS Summit 2021 Demo Dot WP Motor Powered Dot Com’daydı. [Innherent] Pekala. Öyleyse devam edelim ve uygulamayı yapalım. Yani, uygulama oluşturuluyor. Bittiğinde, yeni bir URL alıp internette görebileceğiz. Öyleyse kontrol edelim.
Burada göreceğiz, kullandığımız, hangi alanda olduğumuz ve kodun oluşturulduğu gibi ne kullandığımız hakkında tüm bilgiler var. Kod yapıldıktan sonra, burada günlük yapısını görüntülemek için başka bir parçamız olacak. Yani, bir hata falan varsa, orada görünecektir. Peki. Dağıtılmasını bekleyeceğim ve inceleyeceğim. Peki. Böylece sitemiz seferber edildi. Ve şimdi tıklayıp kontrol edebileceğimiz bir URL var. WpenginePowered.com’da. Ve bu kadar. Çok hızlı. Eğer tıklarsam, modelle yaptığımız özel içerik türü için tüm verilerimizi girdiğini göreceğiz. Yani, bu inanılmaz. Aynı şekilde küçük bir site oluşturabiliriz. Özel bir içerik türü oluşturmak için Modelor İçerik Atlas’ı kullanın. Ve sonra onu Atlas platformuna yaydık ve çok hızlı bir şekilde internette çalıştırdık. Github hesabımızı yeni bağladık. Ve ne olacak, platform kodumuzu söylediğimiz şubelerden çekiyor, NPM kurulumunu çalıştırıyoruz. Sonra NPM Run WPE Dash Build’ı çalıştırıyoruz. Statik dosyalar ya da ne yapmanız gereken şey yapma şansınız budur. Ve sonra siteyi her çalıştırdığımızda NPM başlangıç ​​çalıştırırız. Ve 8080 limanında yürümelidir. İşte böyle yapıyoruz. Bu ve yürüyün. Ve ayrılmaya hazırız. Şimdi, yapmak istediğim şey, içerik makinesi hakkında biraz bilgi verin, bir gösteri gösterin ve gelecekte ne yapacağımızı söyleyin. Peki. Haydi Yapalım şunu. Şimdi gördüğünüz şey, bir içerik makinesinde çalışan bir site. Torquemag sitesini çoğaltıyoruz.
İo başka bir WordPress kurulumuna gittik ve onu içerik makinesine bağlıyoruz. Öyleyse, bir içerik makinesi nedir, ister ön ucunuz arasında olsun, bir düğüm uygulaması veya başka bir şeysiniz ve WordPress’te arka uç. Ve WordPress’ten içerik makinesine veri emiyoruz. Şimdi ön ucunuzda, doğrudan WordPress ile konuşmak yerine, içerik motoruyla konuşabilirsiniz. Şimdi sorun, küresel ve çok hızlı dağıtılmasıdır. Yani, şimdi bu sitede statik nesiller falan yok. Sadece dinamik bir sayfa açtık ve bu çok hızlı. Öyleyse tıklayalım ve bakalım. Böylece tıkladığımızda bunun çok hızlı olduğunu görebilirsiniz. Tıpkı neredeyse statik bir siteden beklediğiniz gibi, değil mi? Ve bunların hepsi oluyor çünkü ortada çok hızlı bir veri katmanımız var. Yani, bu siteyi diğer tork sitelerimize karşı görürseniz, aynı görünüyor, aynı verileri çiziyoruz. Ve bu çok hızlı. Ve sahip olduğumuz şema, WordPress’ten doğrudan alabileceğinizden çok daha basit. Yani, şu anda hiçbir şey söz vermiyorum, ama size sadece içerik makinesinin kısa bir resmini vermek istiyorum, ne gelecek. Yani, kesinlikle burada kal. Ve onunla oynamak istiyorsanız beta için liste. Yakında serbest bırakacağız. Bu oturum için notta bir bağlantı var. Tıklayın, kaydolun ve beta’nın bir parçası olun. Umarım bu Atlas demosundan hoşlanırsınız. Burada WP motorunda kafa olmadan HeadPress ile ilgili yaptığımız her şeyden çok memnunum.