Frontity ile WordPress Web Uygulaması Nasıl Oluşturulur (4 Kolay Adımda)
Başsız İçerik Yönetim Sistemi (CMS), çevrimiçi varlığınız üzerinde daha fazla kontrol sağlayabilir. Ancak, kullanıcıların onunla etkileşime girebilmesi için bir ön uç yapmalısınız. Burası, başsız ayarların geleneksel web sitesi üreticilerinden çok daha karmaşık hale gelebileceği yerdir. Neyse ki, başsız WordPress yapılandırmanız için güzel bir ön görünüm oluşturmanıza yardımcı olabilecek bir çerçeve var. Frontity buraya geldi. WordPress’i dikkate alarak özel olarak tasarlanan bu React Framework’ün başsız web sitenizde veya web uygulamanızda sunabileceği birçok şey vardır.
Bu makalede, bu çerçevenin ne olduğunu ve neden kullanmak isteyebileceğinizi keşfedeceğiz. Daha sonra size Frontity’yi kullanarak bir WordPress web uygulamasının nasıl oluşturulacağını, ayarlanacağını ve yayınlanacağını göstereceğiz. Başlayalım! Frontity’ye giriş (ve neden kullanmak isteyebilirsiniz) Frontity Framework, web siteniz için reaksiyon tabanlı ön uç oluşturmanızı sağlar. Bu, Headless WordPress web sitesi oluşturmak isteyen geliştiriciler arasında Frontity’yi çok popüler hale getiriyor. Bu başsız ortamın bir parçası olarak, WordPress’i ön uçtan ayıracaksınız. Bu yalnızca bir veritabanı, Yönetici Gösterge Tablosu ve İçerik Yönetimi aracınızı bırakır.
Başsız bir şekilde ayrılarak, olağan WordPress sınırlarından bağımsız olarak kendi ön ucunuzu tasarlama ve inşa etme özgürlüğüne sahip olacaksınız. WordPress’i tek sayfa uygulaması (SPA) veya hücresel uygulama gibi yeni bir bağlamda bile kullanabilirsiniz. Frontity kullanarak bir ön uç oluşturduğunuzda, bu çerçeve verilerinizi API REST aracılığıyla kullanacaktır. Bu daha sonra bu verileri bir spa olarak yapacaktır. SPA geleneksel web sitelerinden farklıdır, çünkü ziyaretçilerin bir sayfadan diğerine gezinmeleri gerekmez. Tersine, Frontity, sunucudan aldığı yeni verilerle aynı sayfayı dinamik olarak yeniden yazacaktır. Bu, sayfanızın yükleme süresini azaltabilir. Frontity, tam şarjlı bir HTML dosyası ile isteklere yanıt verir. Bu, özel olarak ilk içerik boyası için gereken süreyi azaltır, bu da sayfayı hissedilen sayfayı yüklerken dramatik bir etkiye sahip olabilir. Bu performans iyileştirmesi ziyaretçi deneyimi için çok iyidir. Çalışmalar, sıradan internet kullanıcılarınızın sabırsız olduğunu, insanların yüzde 40’ının yüklenmesi üç saniyeden fazla süren bir web sitesinden ayrıldığını gösteriyor. Sayfa yükleme süresini azaltarak, ziyaretçileri web sitenizde daha fazla zaman geçirmeye teşvik edebilir ve bu da dönüşümü teşvik etmeye yardımcı olacaktır. Google, sayfa hızını sıralama faktörü olarak kullandığını doğruladığından, arama motoru optimizasyonunda (SEO) bir artış yaşayabilirsiniz.
Ön Frontity (4 adımda) kullanarak bir WordPress web uygulaması nasıl oluşturulur Frontity kullanarak bir web uygulaması oluşturmak için bir WordPress kurulumuna ihtiyacınız var. Bir web sunucusunda barındırabilir veya yerel olarak barındırabilirsiniz. Ayrıca Node.js. Bu çalışma zamanı ortamını yüklemediyseniz, resmi web sitesinden indirebilir ve yükleyebilirsiniz. Bu hazırlık ile bir web uygulaması oluşturmaya hazırsınız. Adım 1: Komut satırından Frontity ile etkileşime giren yeni Frontity projenizi oluşturun, bu nedenle komut istemi (Windows) veya Terminal (macOS) başlatarak başlayın. Daha sonra aşağıdaki komutu kullanarak bir ön proje oluşturabilirsiniz: NPX Frontity Create My Project.ini Project-I adlı bir proje oluşturun. Frontity sizden ön ucunuzun temasını seçmenizi isteyecektir:
Bu ön cephenin ilk teması olduğu için Mars’ı kullanacağız. Seçiminizi yapın ve Frontity temanızı klonlayacak ve gerekli tüm dosyaları ve bağımlılıkları içeren yerel bir dizin oluşturacaktır:
Bu dosyaları komut satırından düzenleyeceğiz. Bu, terminal veya komut isteminin projenizin kök dizinine yol açması için dizini (CD) değiştirmeniz gerektiği anlamına gelir. Varsayılan olarak, Frontity kullanıcı dizininizde bir proje oluşturur, böylece komutunuz şuna benzer: CD /Kullanıcılar /My Project.
Bu değişikliği yaptıktan sonra dosyanızı kaydedin. Web tarayıcınızda, reddetme düğmesini tıklayın. Geçerli sayfa, doğrudan WordPress’inizin arkasından çizilen içeriği görüntülemek için güncellenmelidir. Bu noktada Mars menüsü hala birkaç demo içeriği içeriyor. Ziyaretçiler web sitenizde gezinecekse, bu yer tutucu bağlantısını değiştirmeniz gerekir. Rontity.settings.js dosyasında paket bölümünü bulun. Bu bölüm web sitenizi tanımlar: Artık her bağlantıyı kendi içeriğinizle değiştirebilirsiniz. Örneğin, https://mysite.com/contact’a bağlantı kurmak istiyorsanız, aşağıdakileri kullanacaksınız:
“Paketler”: [{“Name”: “@Frontity/Mars-Theme”, “State”: {“Tema”: {“Menu”: [“İletişim”, “/iletişim/”], …. .. …]], menünüze daha fazla bağlantı eklemek için durulayın ve tekrarlayın. Girdiğiniz bilgilerden memnun kaldığınızda, değişikliklerinizi kaydedin ve tarayıcınızı yenileyin. Menü artık belirttiğiniz tüm sayfalara bir bağlantı içermelidir. Adım 3: Ön temayı ayarlayın Başsız bir WordPress mimarisi ile ilişkili en büyük avantaj olabilir, kendi ön ucunuzu tasarlama özgürlüğüdür. Frontity ile tema dosyasını düzenleyerek ön ucunuzu ayarlayabilirsiniz. Projenizde/Mars-Temal Dizininizde bulacaksınız: Ön ucunuzu ayarlamanın birçok yolu var, ancak basit bir şeyle başlayalım. Bu bölümde, başlık bileşeninde kullanılan yazı tipinin rengini değiştireceğiz. Bu değişikliği yapmak için/mars-tema/src/bileşenlere gidin. Düzenleme için artık header.js dosyasını açabilirsiniz. HTML’de renk renk kodu kullanılarak tanımlanır. Metin düzenleyicinizde aşağıdaki bölümü bulun: const container = styled.div` genişlik: 848px; Max-Width:%100; Kutu Boyutlandırma: Sınır Kutusu; Dolgu: 24 piksel; Renk: #fff; Ekran: Flex; Esnek yönlendirme: sütun; Gerekçelendirme-İçerme: Uzay-Çizgi; ; Başlığın renk kodunun #FFF olduğunu görebiliriz. Bu yüzden metin beyaz görünüyor. #FFF’yi seçtiğiniz HTML renk kodu ile değiştirerek yazı tipi rengini değiştirebilirsiniz. Örneğin, başlık metnini sarı olarak değiştirebilirsiniz:
Bu değişikliği yaptıktan sonra metin dosyanızı kaydedin ve tarayıcınızı yenileyin. Başlığın şimdi yeni renk kodunuzu yansıtacak şekilde güncellenmesi gerekir. Hangi farklı efektler yapabileceğinizi görmek için çeşitli tema dosyalarını keşfetmek için zaman ayırmanızı öneririz. Adım 4: Projenizi Yayınlayın Ön ucunuzdan memnun kaldıktan sonra, ön projenizi üretime uygulayabilirsiniz. Bir -üretim paketini hazırlamak için, terminal pencerenizde veya komut isteminizde aşağıdaki komutu çalıştırın: NPX Frontity Build. Bu, projenizin kök dizininde bir yapı klasörü üretecektir. Bu klasör, React uygulamanızı ve sunucu node.js’inizi içerir: Bu derleme klasörünü uygulama node.js. Örneğin, aşağıdaki komutu kullanarak standart Node.js uygulaması gibi projeleri çalıştırabilirsiniz: NPX Frontity Service. Veya projenizi AWS Lambda, Netlify veya Google işlevlerini kullanarak uygulayabilirsiniz. Ancak, sunucu olmayan bir çözüm arıyorsanız, Frontity ekibi Vercel’i önerir. Frontity önerisini takip etmek istiyorsanız, bir Vercel hesabı oluşturmalı ve aşağıdaki komutu çalıştırmalısınız: NPX Vercel Giriş. Sorulduğunda, Vercel giriş bilgilerinizi girin. Ardından, projenizin kök dizininde bir Vercel.json dosyası oluşturun. Bu dosyada aşağıdakileri ekleyin: {“sürüm”: 2, “Builds”: [{“src”: “package.json”, “kullan”: “@frontity/şimdi”
}]} Vercel.json dosyanızı kaydettikten sonra aşağıdaki komutu çalıştırın: NPX Vercel. Sorulduğunda, projenizi hazırlamayı ve uygulamayı seçin. Artık proje kapsamınızı ve mevcut projelere başvurup başvurmadığınızı seçebilirsiniz. Yeni bir projeye başvurursanız, açıklayıcı bir isim verebilirsiniz. Ayrıca projenin bulunduğu yerel dizini de belirlemeniz gerekir. Bu bilgileri girdikten sonra Vercel, proje URL’inizi ve proje ayarları URL’nizi ayarlayacaktır. URL ayarları, uygulamanıza daha fazla alan ekleme gibi görevleri yapabileceğiniz bir Vercel konsolu başlatır. Hepsi bu – web uygulamanız artık aktif! Sonuç Başsız CM’leriniz için bir ön uç inşa ederken, karmaşıklığa kapılmak kolaydır. React ve WordPress için optimize edilmiş bir çerçeve seçerek, bu yapılandırmaların çoğunu hızlandırabilir ve doğrudan ön ucunuzu eğlence oluşturabilirsiniz. Arayüzünüzü ön çerçeveyi kullanarak yapmaya karar verirseniz, şu dört basit adımı izleyin: Yeni Bir Frontity Projesi oluşturun.Cepheyi WordPress’e bağlayın. Frontity temasını ayarlayın. Projenizi yayınlayın. Ön çerçeve hakkında bir sorunuz var mı? Aşağıdaki yorum bölümünde bize bildirin!
