Wordpress PWA Eklenti Ayarları Nasıl Yapılır? - Hüseyin Körbalta

Günümüzde artık birçok işlemi mobil cihazlar ile gerçekleştiriyoruz. Hal böyle olunca günümüzde internet sitelerinin %30'unu oluşturan Wordpress'de bu yeni nesil teknolojilere açık kaynaklı olmasından ötürü geliştirici insanlar tarafından uyum sağlamasına yardımcı olunuyor. Daha önce ki blog yazımda PWA'nın ne olduğunu, ne anlama geldiğini ve çalışma mantığından bahsetmiştim. Bu yazımda ise Wordpress tabanlı bir internet sitesi PWA yapısını sitesine nasıl uygulayacak, PWA for WP eklenti ayarlarını nasıl yapılandıracak bundan bahsedeceğim. İlgini Çekebilir: Progressive Web App (PWA) Nedir? Ne İşe Yarar? PWA for WP Eklenti Ayarları Nasıl Yapılır? Wordpress PWA for WP Eklenti Ayarları Nasıl Yapılır? -1 Wordpress'te eklenti kütüphanesinde pwa olarak arama yaptığınız da karşınıza bir çok geliştirici tarafından sunulan PWA eklentilerini görebilirsiniz. Hepsini denemedim ancak büyük bir kısmı AMP ile uyumlu olarak çalışmıyordu. İnternet sitenizde hem amp hem de PWA kullanmak istiyorsanız aradığınız eklenti PWA for WP & AMP eklentisidir. Ben kişisel blog sayfamda AMP eklentisi olarak Ahmed Kaludi, Mohammed Kaludi adlı geliştiricilerin yapmış olduğu AMP for WP – Accelerated Mobile Pages adlı eklentiyi kullanmaktayım. PWA eklentisi olarak yine bu geliştiricilerin geliştirdiği pwa eklentisi kullanıyorum. Bunu tercih etmemin sebebi hem AMP kullanmaya devam ediyorum hem de PWA'nın sunduğu özelliklerden de faydalanabiliyor. Çok fazla lafı uzatmadan adım adım PWA for WP & AMP eklenti ayarlarını nasıl yapılandırılacağını anlatmaya. Gerekli süre: 20 dakika. Eklenti ayarları yapmadan önce hali hazırda kullanmış olduğuğunuz bir PWA eklentisi veya farklı bir AMP eklentisi var ise onları devredışı bırakmanızı ve ftp'nizden eklenti dosyalarını silmenizi tavsiye ederim. Wordpress PWA for WP Eklentisini Yüklemek & Aktif Etmek Wordpress eklenti kütüphanesi ya da ftp kullanarak eklentiyi internet sitemize yüklemek ve aktif etme aşamasıdır. PWA for WP Eklenti Genel Ayarlarının Yapılandırılması Eklentinin temel, basit genel ayarlarının yapılandırılması aşamasıdır. PWA for WP Design (Tasarım) Ayarlarının Yapılandırılması Uygulamanız için bir iki renk ayarının yapıldığı aşamadır. PWA for WP Push Notification Ayarları (Tercihe Göre) Bu ayar henüz beta aşamasında olduğu için kullanıp, kullanmamak tamamen sizin tercihinize göredir. Test edip, çalışmadığını bildirmek isterim. PWA for WP Advanced (Gelişmiş) Ayarlarının Yapılandırılması Detaylı olarak gelişmiş ayarların yapılandırılması aşamasıdır. Wordpress PWA for WP Eklentisini Yüklemek & Aktif Etmek Ftp kullanarak yüklemek isteyenler için aşağıda ki butona tıklayarak eklentinin indirme sayfasına gidebilir, "Download" adlı mavi butona tıklayarak eklenti dosyalarını bilgisayarlarına indirebilir ve ftp yardımı ile eklentiyi kurabilirler. PWA for WP Eklentisini İndirmek İçin Tıklayın FTP Olmadan Wordpress admin panelinden Eklentiler -> Yeni Ekle yolunu takip ederek, açılan sayfada arama kutusuna PWA for WP & AMP adlı ve geliştirici olarak Ahmed Kaludi, Mohammed Kaludi olan eklentiyi kurup, etkinleştirerek ilk adımı tamamlamış olacaksınız. PWA for WP Eklenti Genel Ayarlarının Yapılandırılması Wordpress PWA for WP Eklenti Ayarları Nasıl Yapılır? - 2 Wordpress PWA for WP Eklenti Ayarları Nasıl Yapılır? -3 Resimlerde ki numaraları takip ederek ayarların ne anlama geldiğini öğrenerek, kendi sitenize göre ayarlarınızı yapılandırın. Benim size aktaracağım kendimin deneyip, olumlu sonuçlar aldığım ayarlardır. 1- Wordpress Non-AMP ayarı AMP olmayan yani masaüstü tasarımınızın da PWA yapısında olmasını sağlayan bir özellik. Test ettim, çalışmıyor. Bu yüzden bu ayarda eğer tik var ise tiki kaldırıyoruz. 2- AMP kısmına gelecek olursak bu ayar ise sitenizde bir AMP eklentisi kullanıyorsanız PWA'nın bu amp eklentisi ile birlikte çalışmasını sağlamak adına AMP seçeneğine tik koyuyorsunuz. Tekrar hatırlatayım, yazımda referans aldığım pwa eklentisi ve amp eklentisini geliştiren kişiler aynı kişiler yani benim için sorun teşkil etmediği için resimde gördüğünü AMP seçeneğine tik koydum. Siz AMP eklentisi olarak farklı bir eklenti kullanıyorsanız, test edip, çakışma yapıp, yapmadığını gözlemlemeniz gerekiyor. AMP'yi hiç kullanmıyorsanız sitenizde bu seçenekte ki tiki kaldırabilirsiniz. 3- HTTPS ayarı, PWA eklentisi sadece HTTPS (SSL) kullanan sitelerde çalıştığı için, sitenizde SSL yok ise PWA eklentisini kullanamazsınız. 4- Gerekli ayarlamaları kendinize göre yaptıktan sonra ayarların geçerli olması için "Save Settings" butonuna basarak ayarlarımızı kaydediyoruz. İlgini Çekebilir Kişisel Blog ya da Bloglar İçin SSL Gerekli Midir? HTTPS Sadece Güvenlik İçin Mi Var? TLS Nedir? Ne İşe Yarar? TLS ve SSL Arasındaki Farklar Neler? General (Genel) Ayarlar 5- App Name - Ayarın isminde de anlayacağınız için internet sitemiz bir uygulama olarak kullanıcının telefonuna yükleneceği için bu uygulamanın bir ismi olması gerekiyor. Bu yüzden bu alana genelikle internet sitelerinin title kısmı başlık kısmı ekleniyor. Maximum 75 karakter olmasını tavsiye ederim, diğer türlü uzun isimler kötü gözükmekte mobilde. 6- App Short Name - Aynı şekilde uygulamanızın kısa adını yazıyorsunuz. Maximum 40 karakter olmasını tavsiye ederim. 7- App Description - Uygulamanız için bir açıklama belirtmeniz gerekiyor. Bu kısma sitenizde kullandığınız açıklamayı girebilirsiniz. Maximum 160 karakter olmasını tavsiye ederim. 8- App Icon - Uygulamanız için bir simge, ikon ayarlamanız gerekiyor. Eklentide bu ikon ile ilgili ölçüler verilmemiş ancak benim kullandığım ölçü 192x192px boyutlarında PNG formatında bir ikon tercih etmenizden yanadır. 9- App Splash Screen Icon - Bu ayar uygulamanız açıldığı sırada kullanıcın mobil cihazında birkaç saniye belirecek olan bir ara geçiş görseli için bir görsel ayarlamanızı sağlıyor. Yine eklenti ayarlarında bu görselin ölçüleri ne yazık ki bulunmuyor ancak benim kullandığım ölçü 512x512px boyutlarında ve yine PNG formatında bir görseldir. 10- Offline Page - Bir önceki blog yazımda bahsettiğim gibi kullanıcı çevrim dışı da olsa, interneti kapalı dahi olsa pwa ile oluşturmasına yardım ettiğiniz uygulamaya girerek internet sitenizi dolaşabilir demiştim. Bu ayar şu işe yarıyor kullanıcı internete bağlı iken hiç ziyaret etmediği sayfanızı çevrımdışı açtığında karşısına çıkmasını istediğiniz sayfayı belirliyorsunuz. Yani, bir nevi kullanıcıya kardeşim wifi'ni aç öyle gel dediğiniz uyarı sayfası gibi. Örnek olarak benim kullandığım sayfadır. Bkz: https://huseyinkorbalta.com/cevrimdisi-sayfa/ 11- 404 Page - İnternet sitenizde olmayan bir sayfaya erişim yapılmak istendiğinde kullanıcıza göstermek istediğiniz hata ya da uyarı sayfasıdır. Bu ayarın default olarak kalmasını tavsiye ederim, hali hazırda bir 404 hata sayfanız mobil tasarımınız da vardır diye düşünüyorum. Ya da mobil kullanıcılarınıza farklı bir 404 hata sayfası göstermek istiyorsanız o sayfayı bu ayar kısmından seçebilirsiniz. 12- Orientation - Bu ayar uygulamanızın kullanıcının telefon ekranında dikey mi, yatay mı yoksa kullanıcının tercih ettiği, kullandığı pozisyona göre mi olacağını belirlediğiniz ayar kısmıdır. 3 seçenek var; Follow Device Orientation- Kullanıcının cihazına göre ayarla. Telefonu yada cihazı yatay diyorsa sende yatay ol, dikey tutuyorsa dikey olarak siteyi uygulama içerisinde aç anlamına geliyor.Portrait - Kullanıcı ne seçmiş olursa olsun bu uygulamayı her zaman dikey görünümde çalıştır anlamına gelmektedir. Tavsiyem de bu seçeneğin seçilmesidir.Landscape - Kullanıcı ne seçmiş olursa olsun bu uygulamayı her zaman yatay görünümde çalıştır anlamına gelmektedir. Gerekli ayarları yaptıktan sonra "Save Settings" diyerek ayarların kaydedilmesini ve aktif olmasını sağlayabilirsiniz. PWA for WP Design (Tasarım) Ayarlarının Yapılandırılması Wordpress PWA for WP Eklenti Ayarları Nasıl Yapılır? -4 1- Background Color - PWA ile oluşturduğunuz uygulamayı kullanıcı açtığı zaman, internet siteniz açılmadan önce bir 5-6 saniyelik ekranda gözüken bir ara geçiş ekranı mevcut işte bu ayar sayesinde bu geçiş ekranının arka plan rengini belirliyorsunuz. 2- Theme Color - Kullanıcı internet sitenizi uygulama dışında, tarayıcı ile ziyaret ettiğinde kullandığı tarayıcının rengini kullanır. Tarayıcı da ve uygulamada istediğiniz rengin kullanılması için bu ayarı kullanabilirsiniz. Örnek canlı görüntü aşağıda ki görselden görebilirsiniz. (Adres satırı, 4.5G, şebeke sinyali, saat bilgilerini vs olduğu alanın rengini belirliyorsunuz bu ayar sayesinde.) Wordpress PWA for WP Eklenti Ayarları Nasıl Yapılır? -5 PWA for WP Push Notification Ayarları (Tercihe Göre) Bu seçenek beta aşamasında olduğunu söylemem gerekiyor. Bu özellik şuan için çalışmıyor, bunu zaten eklenti yapımcıları da ayar kısmında belirtiyorlar. Ha yine de uğraşmak isteyen olursa diye birkaç bilgi vereyim. Bu bildirim özelliği, Google'nin belli bir noktaya kadar ücretsiz olarak sunduğu bir hizmet olan Firebase kullanmakta. Detaylı bilgiyi Google'nin firebase sayfasını inceleyerek edinebilirsiniz. Bu ayara hiç dokunmadan, olduğu gibi bırakabilirsiniz. PWA for WP Advanced (Gelişmiş) Ayarlarının Yapılandırılması Wordpress PWA for WP Eklenti Ayarları Nasıl Yapılır? -6 Bu sayfayı açtığınızda oldukça detaylı bir ayar sayfası karşınıza çıkacak ve gözünüz bir anda korkacak korkmayın, çok fazla kurcalamanız gereken bir yer değil. Çok spesifik ayarlamalar yapmayı seven birisi değilseniz bu ayarlardan önemli olanları yapmanız yeterli. Ben de o önemli ayarlardan bahsedeceğim. 1- CDN Compatibility - Bu ayar internet sitenizde CDN servisini kullanan eklenti veya dosyaların PWA ile çakışmasını engellemek için aktif edilmesi gereken önemli bir ayardır. CDN hakkında bir bilginiz yok ise aşağıda listelediğim blog yazılarım ilginizi çekecektir. İlgini Çekebilir CDN Nedir ? En İyi CDN Servisleri Ücretsiz 10 GB CDN Hizmeti + WP Fastest Cache CDN Ayarları CDN Kullanımı Google Sıralamanızı Nasıl Geliştirebilir? 2- Offline Google Analytics - PWA'nın internet olmadan da kullanabildiğini söylemiştim, internet olmadan sitenizi gezen, kullanan kullanıcılar hakkında bilgi edinmek istiyorsanız bu ayarı aktif edebilirsiniz. Kullanıcı internete bağlı olmadan pwa ile oluşturduğunuz uygulamayı kullanıyorsa ve sitenizde dolaşıyor, bu ayarı aktif ettiğinizde Google Analytics bu çevrımdışı hareketleri kaydediyor ve kullanıcı cihazınız internete bağladığı anda da size bu verileri google analtytics hesabında gösteriyor. Bu ayarı aktif etmenizi tavsiye ederim. 3- Force Update Service Worker - Bu ayarın tam olarak ne işe yaradığını bilmiyorum. Ayarı baya bi' kurcaladım, numaraları düşürdüm, yükseltim, sildim bir hata veya fark göremedim. Bu yüzden bu ayarında olduğu gibi bırakılmasını tavsiye ediyorum. 4-Add To Home On Element Click - Bu ayara hiç dokunmayın, olduğu gibi kalsın. 5- Custom Add To Home Banner - Bu ayar yazıda ki görselimde tikli olarak gözüküyor ancak test etmek için tik koydum, ne işe yaradığını anlamak için ancak sonuç bir şey fark etmedim. Eklentide bir fark yaratığını, bir şeyleri değiştirdiğini görmediğim için bu ayarı varsayılan olarak (tiksiz) bırakmanızı tavsiye ediyorum. 6- OneSignal Compatibility - Sitenizde tarayıcı bildirimleri göndermek için Wordpress'in bir diğer eklentisi olan OneSignal Push Notification adlı eklentiyi kullanıyorsanız, PWA for WP eklentisi ile uyumlu çalışması için bu ayarı aktif edin ve OneSignal eklentisi için gerekli olan ayarlamaları yapın. Ayar seçeneğinin alt kısmında OneSignal eklentisi için izleyeceğiniz yol basitçe anlatılmış. 7- UTM Tracking - İnternet sitenizde Google Adwords vb reklam kampanyası, anket araştırmaları gibi bir takım veri çalışmaları yapıyorsanız bu verilerin sonuçları, gelen/giden kullanıcılar gibi bilgileri kaydediyorsanız ve bunları yaparken UTM teknolojisini kullanıyorsanız bu özelliği aktif ederek, gerekli alanları doldurmanız yeterli olacaktır. Resimde numaralandırdığım 8-9-10 ve 11 numaralı ayarları olduğu gibi bırakmanızı tavsiye ediyorum. Çok spesifik bir ayarlama içerisinde değilseniz bu ayarlar eklenti yapımcıları tarafından tavsiye edilen ayarlardır. Kendi sitenizin ihtiyaçlarına göre bu ayarları kurcalayabilirsiniz ancak varsayılan ayarda kalmasını tavsiye ederim. Gerekli tüm ayarlamaları yaptıktan sonra "Save Settings" butonuna tıklayarak ayarların geçerli olmasını sağlayabilirsiniz. Tebrikler! Wordpress tabanlı internet sitenizin PWA for WP eklenti ayarlarını başarılı bir şekilde yapılandırdınız. Ayarlar ile ilgili sormak istediğiniz bir şey olursa yorum yazmaktan çekinmeyin. Tebrikler

WordPress PWA for WP Eklenti Ayarları Nasıl Yapılır?

Son Yorumlar

Kategoriler