WordPress 4.3 site icon (favicon) fonksiyonu

WordPress 4.3 Billie sürümünü duyurdu diye bir yazı yazmıştım. Güzel yenilikler olduğundan bahsetmiştim. Bu yazımda site icon denilen ama bizim daha çok favicon diye kullandığımız tarayıcılarda site başlığı yanında çıkan küçük görseli ekleme konusuna değineceğim. Normalde favicon eklemek için html etiketleri kullanırız. Eskiden favicon eklemek için bir satır kod yetiyorken, gerek tarayıcıların gelişmesi gerekse de mobil cihazların favicon kullanması tek satır kod yerine birkaç satır kod eklememizi gerektiriyor.

İşte wordpress yeni sürümünde site_icon fonksiyonu ile bizi bu işten bir nebze kurtarmış gibi. Şöyle ki, yönetim panelinden temanızı özelleştirerek site ikonu seçebilirsiniz. Neticede farklı boyutlarda site ikonu kodu temanıza eklenmiş olur.  İsterseniz adım adım bu işlemi yapalım.

Öncelikle yönetim panelinden Görünüm >  Özelleştir bölümüne giriyoruz. Buradan site kimliği seçeneğini tıklayıp aşağıdaki fotoğrafta gördüğünüz alandan dosyayı seçiyoruz:

• 

  Görünüm > Özelleştir

• 

  Favicon seçimi

Fotoğraf genişliği 512×512 boyutlarında olmak zorunda. Bu nedenle seçeceğiniz fotoğraf eğer 512px x 512px boyutlarında değilse karşınıza kırpma ekranı çıkacaktır. Yüklemiş olduğunuz fotoğrafı kırptıktan sonra yukarıda Kaydet ve yayınla düğmesine tıklayarak işlemi tamamlayabilirsiniz. Bu işlemden sonra temanızdaki kodları incelerseniz aşağıdaki kodların eklendiğinizi göreceksiniz:

<link rel="icon" href="http://www.anarsamadov.net/wp-content/uploads/2015/09/cropped-favicon-32x32.png" sizes="32x32" />
<link rel="icon" href="http://www.anarsamadov.net/wp-content/uploads/2015/09/cropped-favicon-192x192.png" sizes="192x192" />
<link rel="apple-touch-icon-precomposed" href="http://www.anarsamadov.net/wp-content/uploads/2015/09/cropped-favicon-180x180.png">
<meta name="msapplication-TileImage" content="http://www.anarsamadov.net/wp-content/uploads/2015/09/cropped-favicon-270x270.png">

<?php
if ( ! function_exists( 'has_site_icon' ) || ! has_site_icon() ) {
   echo ' <link rel="shortcut icon" href="'.get_stylesheet_directory_uri().'/images/favicon.ico" />';
}
?>

Konuyu paylaşarak destek olacağınızı ümit ediyorum iyi çalışmalar 🙂

kaynak: 

Backward-compatible favicons/icons

https://codex.wordpress.org/Creating_a_Favicon