Artık uygulamalar o kadar yaygın ve insanları sağladıkları erişim kolaylığına o kadar alıştırdılar ki web tarayıcısına girip bir siteye girmek zor gelmeğe başladı. Dahası dikkat etmiş olabilirsiniz ki artık kullanıcılar sevdikleri sitenin “acaba bir uygulaması var mı” diye araştırır oldular. WordPress site sahipleri ise bu serüvenin çok defa dışında kalmaktadırlar. Çünkü çoğu uygulama yazacak kadar derin kodlama bilgisine sahip değildir veya özel uygulama hazırlatmak için binlerce lira harcamak istemiyorlar.
Sizleri bu dertten kurtarmağa geldim! Bu rehberde WordPress sitenizi nasıl uygulamaya dönüştürebileceğinizi uzun zamandır tecrübe ettiğim bilgilerle anlatacağım. Evvela söylemek lazımdır ki sitenizi web tabanlı uygulama denilen bir PWA uygulamasına dönüştüreceğiz. Bu proje aynı zamanda Google tarafından da desteklenmektedir. Birçok nimeti vardır ve sitenizin Google gözünde de kıymet kazanmasını sağlayabilir.
Dahası kullanıcılarınız ekstra bir yükleme yapmadan tek tıkla uygulamanızı yükleyebilecekler. WordPress sitenizin tam donanımlı bir uygulamadan farkı olmayacak. Mutlaka görmüşsünüz, hatta Twitter, Instagram dahi bunu kullanıyor; sitenin altında uygulamayı ana ekrana eklemenizi söyleyen bir bar çıkar; dahası tarayıcı menüsüne girdiğinizde sitenin uygulamasını yükleyebileceğinizi söyler.
Normal uygulamadan pratikte hiçbir farkı olamayan PWA uygulamanızı hazırlamak için evvela çok küçük boyutlara sahip bir eklenti kuracak ve sonrasında yapacağımız bazı özelleştirmelerle mükemmelleştireceğiz. Adım adım gideceğiz.
Lakin ondan önce çok mühim bir şeyi hatırlatmam gerek. Sitenizi PWA uygulamasını yapmanız için şu üç şeye sahip olmalıdır: Servis Çalışanı, Manifesto ve HTTPS. Bunların birincisi WordPress’in kendisinde zaten var, ikincisi otomatik oluşacak. Lakin sitenizin HTTPS, yani SSL sertifikasına sahip olması manuel olarak tarafınızdan yapılmalıdır. Eğer varsa sıkıntı yok. Yoksa artık birçok hosting firması ücretsiz SSL sağlamakta veya ücretsiz SSL sertifikası olabileceğiniz yerler var. Yakında bununla alakalı bir içerik hazırlayabilirim. Neyse, haydi Başlayalım!
1. PWA eklentisini yükleyin.
Yükledikten sonra etkinleştirin. Aslında işin büyük bir kısmını hallettik. Eklentiyi kurduktan sonra size sunduğu tek bir ayar var. O da kullanıcılar çevrimdışı olduklarında dahi sitenize erişebilmesini sağlayan Offline browsing ayarı. Bu özellik internet tarayıcısının ön belleğini kullanmakta ve sitenizin PWA uygulamasında ön belleğe alınan sayfalara internetsiz de girilmesini sağlanmaktadır.
Bu ayarı açmak için panelinizde Ayarlar > Okuma sayfasına ulaşın ve Offline browsing kutucuğunu işaretleyip kaydedin.
Hazır offline demişken internete erişim olunmadığında gösterilecek bir Çevrimdışı sayfası hazırlamağa ne dersiniz? Merak etmeyin bu daha da basit. En azından size basit bir şekilde sunacağım.
2. Offline sayfası oluşturun.
Bunu yapmak için evvela, mesela cPanel’den Dosya Yöneticisini kullanarak, WordPress’in kurulu olduğu dizine ve oradan da kullandığınız temanın klasörüne girin. Yani /public_html/wp-content/themes/TEMANIZ yolunu izleyin. Dahası “offline.php” isminde yeni bir dosya oluşturun.
Sonrasında bu dosyayı açın ve ziyaretçilerinize internete bağlı olmadıklarını hatırlatan bir sayfa tasarlayın. Eğer bu adımı hızlandırmak istiyorsanız sizlere kendi hazırladığım ve kullandığım kodları sunmak isterim.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bağlantı Yok!</title>
<!-- inline the webpage's stylesheet -->
<style>
body {
height: 100%;
font-size: 100%;
line-height: 1.5;
margin: 0;
padding: 0;
font-family: "Arial", serif;
color: #32373C;
background: #fff;
width: 100%;
max-width: 800px;
margin: auto;
-webkit-font-smoothing: antialiased;
}
button {
display: block;
padding: 10px;
font-size: 16px;
}
</style>
</head>
<body>
<h2>Bağlantı yok!</h2>
<p>Görünüşe göre internete bağlı değilsiniz.<br>
Lütfen bağlantınızın sıhhatini sağlayıp yeniden deneyin.</p>
<button type="button">⤾ Yeniden dene</button>
<!-- inline the webpage's javascript file -->
<script>
document.querySelector("button").addEventListener("click", () => {
window.location.reload();
});
</script>
</body>
</html>
<!-- HALILSN.COM CUSTOM OFFLINE PAGE END -->Sonrasında kaydedin ve önbelleği temizleyin. Bu dosyanın PWA uygulamanız olmasa bile gerekli olduğunu düşünüyorum. Kullanıcılara devrim dışı mesajlar vermeniz onları mutlu edecektir.
3. Uygulama ikonunu ve açılış logosunu ayarlamak
Bazen site ikonunuz uygulama ikonu olmak için uygun değildir, ayarlanması gerekebilir. Uygulama açılışında başka bir logo şekli kullanmak isteyebilirsiniz.
Uygulama ikonunu ayarlarken, buna maskable deniliyor, dikkat etmeniz gereken Android ve iOS uygulama şekilleridir. iOS’de kenarları oval bir kare iken Android’de yuvarlak başta olmak üzere birçok şekil vardır. Burada ikondaki logonun çevresinde yeteri kadar boşluk olmasına itina etmelisiniz.
Kendiniz de yapabilirsiniz, lakin hem fikir vermesi hem detaylıca gözden geçirebilmeniz açısında Maskable.app sayfasına kullanmanızı tavsiye ederim. 512x512px boyutunda güzel ve sade bir maskable resmi ayarlayın.
Açılışta karşımıza çıkacak olan resim site logonuz olabilir. Arkası şeffaf bir png dosyası olması diğer adımlarda yapacağımız tema rengi ayarlamalarında işinizi kolaylaştırabilir. Açılış resmi diyorum ama cihaza ve tarayıcıya göre çeşitli yerlerde de kullanılabilir.
Bu iki dosyayı temin ettikten sonra sitenize yükleyin. Ardından temamızın functions.php dosyasını açın. Hala kapatmadıysanız bir önceki adımda offline.php dosyasını oluşturduğumuz yerde bulabilirsiniz. Kapadıysanız WordPress panelimizde Görünüm > Tema düzenleyici ile de ulaşabilirsiniz.
Sonrasında aşağıdaki kodu functions.php dosyasının en altına yapıştırın. İlk ayarda belirttiğim yere açılış için ayarladığınız resmin, ikincisine de maskable resmin bağlantısını yapıştırıyoruz.
add_filter( 'web_app_manifest', function ( $manifest ) {
$manifest['icons'] = array(
array(
'src' => home_url( 'AÇILIŞRESMİBAĞLANTISI' ),
'sizes' => '512x512',
'type' => 'image/png',
'purpose' => 'any',
),
array(
'src' => home_url( 'İKONRESMİBAĞLANTISI' ),
'sizes' => '512x512',
'type' => 'image/png',
'purpose' => 'maskable',
),
);
return $manifest;
} );Burada şuna dikkat edin: ilgili resmin bağlantısını eklerken alan adınızı yazmayın; yani resmin bağlantısı “halilsn.com/resim.png” ise oraya “/resim.png” gibi sadece yolu yazın. Yoksa çalışmaz.
Açılış resminizin boyutunu koddaki “sizes” kısmına yazınız. Her ne kadar maskable için farklı boyutlandırmalar yapılsa da ben gerek görmemekteyiz. Tek bir tane kafi gelecektir. Lakin her iki resmin de kare olmasına dikkat edin.
4. Uygulama görüntüleme şeklini ayarlayın
Uygulamanız açıldığında tarayıcıda açılmış gibi değil de müstakil bir uygulama imiş gibi kullanılması için yine functions.php dosyasının altına aşağıdaki kodu ekleyin.
add_filter( 'web_app_manifest', function( $manifest ) {
$manifest['display'] = 'standalone';
return $manifest;
} );Eğer alttaki navigasyon menüsünün ve üstteki barın da görünmemesini, bir oyunmuş gibi tam ekran açılmasını istiyorsanız “standalone” yazısını “fullscreen” ile değiştirin. Lakin tavsiye etmem. Çünkü kullanıcıların kontrol tuşlarını ve saati ile bildirim barını görmesini engellediği için bir yerde rahatsız edici olabilir.
5. Tema rengini ayarlayın
PWA uygulamanızın tema rengi varsayılan olarak #fff, yani beyazdır. Lakin eğer temanızda ağırlık renk başka ise veya kendi zevkinize göre değiştirebilirsiniz. Aşağıdaki kodu yine functions.php dosyasına ekleyin.
add_filter( 'web_app_manifest', function( $manifest ) {
$manifest['theme_color'] = '#fff';
return $manifest;
} );İkinci satırdaki #fff ibaresini tema renginize göre ayarlayın. Lakin #ffffff gibi html renk kodu (web colors) kullanmalısınız.
6. Kısa yollar ekleyin
Kullanıcıların uygulamanızın üzerine uzunca basınca çıkan menüdeki kestirmelere tıkladığında direkt seçilen bağlantıya ulaşabilmesi güzel olmaz mıydı? Elbette olurdu. Bunu yapmak için aşağıdaki kodu yine functions.php dosyasına ekleyin.
add_filter(
'web_app_manifest',
static function ( $manifest ) {
if ( ! isset( $manifest['shortcuts'] ) ) {
$manifest['shortcuts'] = array();
}
$manifest['shortcuts'] = array_merge(
$manifest['shortcuts'],
array(
array(
"name" => "Ana Sayfayı Açın",
"short_name" => "Ana Sayfa",
"url" => "/",
"icons" => array( array( "src" => "/wp-content/uploads/home.png", "sizes" => "192x192" ) )
),
array(
"name" => "İrtibata geçin",
"short_name" => "İrtibat",
"url" => "/irtibat",
"icons" => array( array( "src" => "/wp-content/uploads/tel.png", "sizes" => "192x192" ) )
)
)
);
return $manifest;
}
);Yukarıdaki “name” “shot_name” “url” “icons” alanlarını ihtiyacınıza göre düzenleyin. Hatta kestirmeleri çoğaltmanız mümkün; bunun için array kısımlarını şekillendirin, lakin son array’ın sonunda virgül (,) olmamasına dikkat edin.
Uygulamanız için kısa yollar olmazsa olmaz değil, lakin çok faydalı olabileceğini hatırlatmak isterim.
Hazırsınız!
Buraya kadar yaptığımız ayarlamalar ile WordPress siteniz için kusursuz sayılabilecek bir PWA uygulaması oluşturduk. Son defa kontrol etmek için ön belleğinizi silin. Android cihazlarda, özellikle en yaygın olan Chrome tarayıcısında sitenize girdiğinizde ekranın altında sitenin uygulamasını indirmenizi söyleyen bir bar çıkacaktır. Oraya tıklayarak veya menüdeki uygulamayı yükleme bağlantısından tek tıkla uygulama yüklemesi başlatılabilir.
Hatta isterseniz benim O Belde’de yaptığım gibi bu uygulamayı tanıttığınız bir sayfa bile oluşturabilirsiniz.
Şunu da söylemek lazımdır ki PWA projesi veya uygulamaları Apple cihazlarınızda tam manasıyla kullanılamamaktadır. Hep derim bu lafı sevmesem de Apple bazı konularda daha kapalı kalabilmektedir. App Store’u daha fazla düşünüyor olsa da bu bir gün Apple’ın PWA kullanmayacağı manasına gelmez. Yine de bu yaptıklarımız büsbütün geçersiz değil.
iOS cihazlarında sitenizde iken Paylaş > Ana Ekrana Ekle yolunu izleyerek bir uygulama gibi durmasını sağlayabilirsiniz. Açılış ekranı, kestirmeler gibi özellikler çalışmaz ama görünüşü uygulama gibi çalışır.
Benim gibi ileri düzey kodlama bilginiz yoksa bu tür bir PWA uygulaması son derece mantıklı. Çünkü tarayıcı tabanlı olduğundan ve sitenin güncellemesi uygulamanın da güncelleneceği manasına geldiğinden son derece kolay. Elbette ben size bu anlattıklarımı öğrenene kadar epey zaman harcadım. Lakin işin tadı da burada: öğrenebiliyorsunuz ve sizi aşmayacağına eminsiniz.
İşi daha ileri götürmek için PWABuilder sitesini kullanabilirsiniz. Lakin birçok girişimim başarısız olunca uğraşmağı bıraktım. Daha doğrusu istediğim gibi olmadı desek daha doğru olur. Bu site ile WordPress PWA uygulamanızın Android uygulaması dosyalarını oluşturabilir ve Google Play, Galaxy Store gibi mağazalara gönderebilirsiniz. Eğer ilerde bunu tekrar denersem burayı güncelleyeceğim. Şimdi hatırladım: Açılış sayfasını ve görünümü özelleştiremediğim için yapmamıştım. İstek gelirse düzgün bir makale hazırlayabilirim.
Bu makalede PWA ile sitenizin WordPress uygulamasını nasıl yapabileceğinizi ve nasıl özelleştirebileceğinizi anlattım. Geri dönüşlerinizi ve sorularınızı bekliyorum. Yorumlarda buluşalım.
İlk yorum yapan siz olun