Popüler Aramalar:  TLS Nedir?  MyBB SSL Ayarları  MyBB 1.8 Linkleri Gizleme Eklentisi  Wordpress LiteSpeed Cache Ayarları  Wordpress Eklentisiz Breadcrumb  Yandex Webmaster
WordPress PWA for WP Eklenti Ayarları Nasıl Yapılır?

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

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.

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

Wordpress PWA for WP Eklenti Ayarları Nasıl Yapılır? -1
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.

  1. 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.

  2. 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.

  3. 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.

  4. 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.

  5. 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.

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? – 2
Wordpress PWA for WP Eklenti Ayarları Nasıl Yapılır? -3
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.

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
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
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
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.

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

 Yazı Bağlantısını Kopyala & Paylaş

Benzer Yazılar

  • WordPress İçin İki Adımlı Kimlik Doğrulama Nasıl Kurulur? Google Authenticator Ayarları Nasıl Yapılır?

    WordPress İçin İki Adımlı Kimlik Doğrulama Nasıl Kurulur? Google Authenticator Ayarları Nasıl Yapılır?

    Wordpress'in admin paneline veya kullanıcı hesaplarına giriş kısmı kişisel bilgilerinize, değerli içeriğinize ve işiniz için değerli olan birçok şeye giriş noktasıdır. Bizim için bu kadar önemli olan bir alanın saldırganlar tarafından da ele geçirilmek istenmesi kadar doğal bir şey yoktur. Bunun için zorlayarak giriş yapma adını verdiğimiz brute force (kaba…
  • WordPress’te Favicon Nasıl Eklenir?

    WordPress’te Favicon Nasıl Eklenir?

    Favicon internet sitenizin web tarayıcısında ki sayfa başlığında görüntülenen küçük bir ikondur. Favicon, tarayıcıların geçmişinde, yer imleri sekmesinde ve internet sitenizin görsel bir kimliğe ihtiyaç duyduğu her yerde gözükmektedir, kullanılmaktadır. Wordpress'te Favicon Nasıl Eklenir? Oldukça basit ve küçük bir detaydır favicon, çoğu zaman unutulur ancak unutulmaması gereken bir özelliktir. Sitenizin…
  • WordPress’te Birden Fazla Yazı Kısaltma Fonksiyonu Nasıl Yapılır?

    WordPress’te Birden Fazla Yazı Kısaltma Fonksiyonu Nasıl Yapılır?

    Wordpress'te varsayılan olarak blog yazıları 55 kelime kısaltılmakta. Wordpress'in yazı uzunluğu filtreleme fonksiyonu kullanılarak bu varsayılan değeri değiştirebiliyoruz ve bu değiştirdiğimiz de sadece bir yerde kullanabiliyoruz, peki ya birden fazla alanda farklı kelime uzunlukları kullanmak istiyorsak? Birden fazla yazı türüne sahip bir internet sitesi geliştiriyorsanız, her farklı alan için farklı…
  • WordPress Easy WP SMTP Eklentisinde Önemli Güvenlik Açığı!

    WordPress Easy WP SMTP Eklentisinde Önemli Güvenlik Açığı!

    Geçtiğimiz hafta Wordpress'in en çok kullanılan mail işlemcisi eklentisi olan Easy WP SMTP'nin yapmış olduğu bir güncelleme çok önemli bir güvenlik açığına neden oldu. Wordpress'in paylaştığı verileri göre 300,000 site tarafından aktif olarak kullanılmakta olan bu eklentinin 1.3.9 sürümünde meydana gelen güvenlik açığı bir çok internet sitesini etkilemiştir. Blog yazımda…
WordPress PWA for WP Eklenti Ayarları Nasıl Yapılır? için Yorum'da Bulun

Bu yazıya şimdiye kadar 6 Yorum yapılmıştır.

  • Yorum Sahibi
     Yanıtla
    VURAL Ziyaretçi

    hocam anlamadığım konu diyelim bu pwa yı kurduk ardından AMP eklentiyi kaldırıp silmemiz gerekli mi ?
    Ayrıca 2 yıldır amp kullanıyorum PWA geçersem linklerin yapısı etkilenecek mi

    • Yorum Sahibi
       Yanıtla
      Hüseyin Körbalta Yazar 

      Merhaba,

      AMP eklentisini kaldırmanız gerek yok. PWA olayı internet sitenizin bir mobil uygulamasını herhangi bir android programlaması yapmadan native uygulama olarak kullanıcıların telefonlarına indirmelerini sağlayan bir araçtır. Aynı bir mobil uygulama gibi sitenizi uygulamaya çeviriyor ve telefonlara indirilmesini sağlıyor. Kullanıcı sitenizi mobil uygulamanızı kullanır gibi kullanıyor, tüm olay bu.

  • Yorum Sahibi
     Yanıtla
    VURAL Ziyaretçi

    değerli anlatmınız için teşekkürler aynı ayarları uyguladım amp kaldırmadım mobil girdiğimde amp tema geliyor pwa tema gelmiyor normalmıdır ?

    • Yorum Sahibi
       Yanıtla
      Hüseyin Körbalta Yazar 

      Merhaba,

      PWA teması yoktur hocam, blog yazımda gösterdiğim şekilde mobilde sayfanın en alt kısmında sabit olarak eklenti ayarlarınızda belirlediğiniz site ismiyle ana ekrana ekle diye bir alan ortaya çıkar. Mobil tarayıcınızın çerezlerini temizleyerek kontrol edin,yine bir farklılık yok ise eklenti ayarlarınızı kontrol edin.

  • Yorum Sahibi
     Yanıtla
    Barış Ziyaretçi

    Hocam ayarları birebir yaptım ancak sitenin alt kısmında bildirim çıkmıyor. İlla chrome mobil uygulamasında sağ üstteki menüye girip manuel olarak ana ekrana ekle seçeneğini seçmem gerekiyor. Cache uygulamasından, cloudflaredan aynı zamanda telefondan da önbelleği sildim. Sıkıntı nedir?

    • Yorum Sahibi
       Yanıtla
      Hüseyin Körbalta Yazar 

      Merhaba,

      Yazımda bahsettiğim eklenti AMP eklentisi ile birlikte kullanılmaktadır. Yazımda bahsettiğim AMP for WP – Accelerated Mobile Pages eklentisi ile birlikte kullanmanızı tavsiye ederim. Eğer, başka bir amp eklentisi kullanıyorsanız pwa eklentisiyle uyumlu çalışmıyor olabilir, mobil temanızın pwa ile uyumlu olması gerekiyor bu yüzden yazımda bahsettiğim pwa eklentisi ile amp eklentisini aynı geliştirme ekibi yapmakta ve bu yüzden uyumlu bir şekilde çalışmaktadır.

      Ayrıca, mobil chrome tarayıcınız güncel değil ise güncellemenizi tavsiye ederim. PWA 100% tüm tarayıcılar tarafından henüz desteklenmiyor. Bkz: https://caniuse.com/#feat=web-app-manifest

Bir Cevap Yaz

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

 Lütfen, en az 15 karakterli bir yorum belirtiniz.

 Lütfen,isminizi belirtiniz.
 Lütfen, kullanmakta olduğunuz bir e-mail adresi giriniz.
 Yukarıda ki alanı işaretlemeniz zorunludur.Aksi takdirde yorumunuz gönderilemeyecektir.

izmir escort