WordPress sitenize favicon nasıl eklenir
WordPress siteniz ilk bakışta nasıl güçlü bir görsel kimlik oluşturabilir? Nasıl bir sayfa oluşturursunuz ve yayınınız okyanus sekmesinde öne çıkar? Cihaz boyunca marka tutarlılığını nasıl destekliyorsunuz? Bunların hepsi geniş bir sorudur, ancak favicon’unuzu doğru hazırlamak, üçü için de doğru yönde çok iyi bir adımdır. Favicons, siteniz için tutarlı görsel kimlik oluşturmanın, kullanıcı deneyimini geliştirmenin ve markanızı güçlendirmenin basit bir yoludur. Bu makalede, Favicon – ne olduğu, nereye koyduğunuz ve sitenize nasıl yardımcı olabileceği hakkında bilmeniz gereken her şeyi tartışacağız.
Bu önemli görüntüyü yapmak, önerilen biçimi tartışmak ve WordPress 4.3 ve önceki bir sürümde bir favicon nasıl uygulanacağı konusunda mini bir öğretici tamamlamak için en iyi uygulamayı öğreneceğiz. Başlamak için bazı temel şeyler öğrenelim; Favicon’a alışkınsanız lütfen atlayın. Favicons – Ne, nerede ve neden? Favicons – favori simgenin kısaltması – genellikle web sitesi sayfanızın başlığının yanındaki Tarayıcı sekmesinde görüntülenen küçük bir resimdir. Ayrıca, tarayıcı ve dokunmatik ekran cihazlarının yer işareti listesi, favori ve geçmişinde bulunurlar ve genellikle 16×16 veya 32×32 piksel şeklinde bulunur.
Favicon, web sitenizin markalaşmasında önemli bir rol oynar. Ziyaretçiler tarayıcılarında birçok sekme açtıklarında, bu küçük simge web sitenizin öne çıkmasına ve kullanıcılara hemen içeriğinize geri dönmenin hızlı bir yolunu sunmasına yardımcı olur. Favicon’un dahil edilmesi, kullanıcıya ve gayrimenkul ekranının büyük bir darbe alan küçük bir kısmıdır. En iyi uygulama ve favicons görüntü formatı internetin başlangıcından beri var ve 1999’da Microsoft Internet Explorer 5’i piyasaya sürerek resmi çıkışlarını yaptı. World Wide Web Konsorsiyumu (WC3) birkaç ay içinde standartlaştırdı ve web geliştiricileri favicon görüntülerini yerleştirdi. O zamandan beri Web Etki Alanı Kökleri. Geleneksel ICO dosyasına ek olarak, ana tarayıcıların çoğu şu anda Favicons için PNG ve GIF görüntü formatlarını desteklemektedir ve SVG için çok eşit olmayan destek. En çok desteklenen iki biçimi hızlı bir şekilde tartışalım. ICO görüntü dosyası biçimi ICO dosyası en çok desteklenen Favicon görüntü türü olarak kalır ve en iyi uygulama, PNG kullansanız bile ICO sürümünü dahil etmektir. Bunun nedeni çok açık. Her şeyden önce, Favicon GIF ve PNG birkaç eski tarayıcı tarafından desteklenmez. İkincisi, tarayıcının varsayılan olarak bir favicon aradığı konum çok çeşitlidir ve Favicon.ico varsayılan yoksa döndürülmesi yararlı olmayan bir giriş 404 hatası riski vardır.
ICO görüntü dosyası biçimi bir dosyada birçok resim ve çözünürlük sağlar. Bunu bir dizi görüntü için bir kap olarak düşünebilirsiniz. Bu, favicon’unuzu örneğin 16 × 16, 32 × 32 ve 48 × 48 (Microsoft tarafından önerildiği gibi) gibi çeşitli boyutlarda kaydedebileceğiniz anlamına gelir ve tarayıcı daha sonra görüntülenecek uygun boyutu belirleyecektir. Örneğin Şekil 16×16, sekmede düzgün çalışacaktır, ancak görev çubuğuna veya masaüstüne eklendiğinde çok iyi olmaz. PNG Favicons Görüntü Dosyaları PNG görüntü dosyası biçimi olarak da saklanabilir ve bu format için tarayıcı desteği son zamanlarda W3C tarafından desteklenen PNG ile oldukça kapsamlıdır. PNG kullanmanın ana avantajlarından biri, standart grafik tasarım kullanmayı kullanmanın genellikle çok daha kolay olmasıdır. Photoshop gibi araçlar ve ayrıca sofistike şeffaflık seçenekleri sunar. ICO görüntü dosyası biçimi ayrıca 8 bit alfa kanal şeffaflığını da destekler, ancak iyi bir üreticiyi bulmak bir görev olabilir. Hangisini kullanmalısın? Kısa cevap: her ikisi de. Favicon tercihinizi etiketini kullanarak bildirebilirsiniz, bu da bu etikette PNG favicon’unuzu (veya favicon) belirleyebileceğiniz anlamına gelir ve favicon.ico hala web sitesinde bir yedek olarak kullanılabilir.
Bunu yaparak, Favicon tarayıcı uyumluluk gereksinimlerinin çoğunu karşılayacak ve 404 hatası almayacaksınız. Hücresel platform ne olacak? Akıllı telefonlar ve tabletler son zamanlarda web trafiğinin çoğunu üretmekten sorumludur, bu yüzden düşünmeniz gerekir. Ne yazık ki, hücresel platformlar çözünürlük, ekran boyutu ve işletim sistemleri açısından tarayıcılardan daha da parçalanmıştır. Her şeyi yönetmek için tek bir çözüm yok. Hücresel platforma tam destek eklemeye geldiğinizde, tüm favicon tabanlarınızı kapsayacak şekilde PNG, Apple Touch Icon, Windows 8 karo grafikleri ve diğerleri eklemeniz gerekir. Favicon hile sayfası da mevcut çeşitli seçeneklerin sağlam bir kapsamına sahiptir. Aşağıdaki şeyleri basitleştirmek için, bu makalede temel favicon.ico yapmaya devam edeceğiz. Başlayalım. Favicon Nasıl Yapılır Çok ince kontrollere ihtiyacınız varsa, sitenizi Adobe Photoshop veya GIMP gibi profesyonel görüntü düzenleme programlarında favicon yapmalısınız. Aşağıdaki adımlar arasında Adobe Photoshop CS6’da bir favicon yapmak yer alıyor.
Favicons yapmak için tuval ayarları
Sahip değilseniz, ICO formatı gibi ICO görüntü dosyası formatlarında dosyaları kaydetmenizi sağlayan Photoshop eklentisini indirin.
Photoshop’ta Dosya> Yeni’yi tıklayın ve 72 ppi çözünürlüğe sahip yeni bir 512 x 512 piksel tuval oluşturun. Tuval üzerinde harika çalışmanızı yaratın.
Tasarımınız hazır olduğunda, Resim> Resim Boyutu’nu tıklayın.
Kısıtlama oranları kutusunu kontrol edin ve görüntünün boyutlarını 16 x 16 piksel olarak ayarlayın.
Tasarımınızın daha az bulanık görünmesini sağlamak için Sharp Maske Filtresini kullanın. Dosya> AS Tase’ye tıklayın ve tasarımınızı bir ICO dosyası olarak kaydedin.
Örneğin, bu tüm ihtişamıyla kişisel web sitem için bir favicon:
Grafiksel olarak düşünmeyen (endişelenme – ben onlardan biriyim) favicon görüntüleri yapmanıza yardımcı olmak için çevrimiçi araçlar da kullanabilirsiniz. Tek yapmanız gereken resim seçiminizi aşağıdaki web sitelerinden birine yüklemektir:
Dinamik Sürücü – Favicon Jeneratörü
Favicon.cc
Favicon jeneratörü Bu çevrimiçi araçların çoğu, birçok resim içeren ICO dosyaları üretebilecekleri ek avantajlara sahiptir. Tarayıcı sekmenizde görünen varsayılan favicon’un 16×16 piksel olduğunu unutmayın. Tasarımınızı çok karmaşık hale getirmeyin, yoksa favicon ayrıntılarınız net görülmeyecektir. WPMU Dev Sinus Wave Favicon’un kendisinin çoğu tarafından kullanılan favicon’un iyi bir örnek olduğunu göreceksiniz – nispeten kolay.
Bir Favicon’unuz olduktan sonra, WordPress’e ekleme zamanı. Favicon’unuzu nasıl ekleyebilirsiniz WPMU Dev’de WordPress sitenize bir favicon nasıl ekleneceğiniz konusunda önceki mini öğreticimi bulmuş olabilirsiniz. (2012’de yayınlandı – Time hızlı geçmiyor!) Aşağıda, sitenize sadece birkaç kolay adımda bir favicon nasıl ekleyebileceğinizin biraz güncellenmiş bir sürümüdür. Teknik olarak bunu başarmak için bir eklenti kullanabilirsiniz, ancak elle nasıl yapılacağını bilmek her zaman iyidir. Ayrıca, sitenize diğer gereksiz eklentileri yüklemeniz gerekir.
WordPress 4.3’ünüze WordPress 4.3’e yükselen favicons eklemek, bu yedi basit adımı izleyerek sitenize bir favicon ekleyebilir: WordPress Yöneticisini girin.
Görünüşe tıklayın> Ayarlayın.
Site kimliğini tıklayın.
Site simgesi olduğu söylenen aşağıdaki dosyayı seçin.
Favicon dosyasını seçtikten sonra Dosya Seç düğmesini tıklayın ve Yükle.
Favicon’unuz site kimlik diyaloğundan site simgesinin gölgelik altında görünecektir.
Kaydet ve Yayınla düğmesini tıklayın.
Favicon site simgesi bölümü altında görünür
Ve bitmişsin. Patlama. WordPress ayrıca, favicon olarak yapmak istediğiniz daha büyük görüntünün bir bölümünü seçerek yayınlamadan önce çalışmanızı düzenlemenize olanak tanır. Bu, yüklediğiniz görüntü kare değil, kare değilse kullanışlıdır. WordPress 4.2’de (ve önceki sürüm) bir favicon nasıl eklenir WordPress 4.3’e güncellemeyen kişiler (herhangi bir nedenle; yargılamayacağım ;-)) Favicons eklemek için bu adımları izleyebilir.
Oluşturduğunuz favicon’u FTP istemcinizle sitenizin kök dizinine yükleyin.
Aşağıdaki kodu çalıştırdığınız temanın header.php dosyasına yapıştırın: https://gist.github.com/midoriberlin/111a3ce34672106eb620. Not: URL ve dosya uzantısını değiştirmelisiniz (PNG dosyasından başka bir şey kullanıyorsanız).
Favicon görüntü dosyanızın bir kopyasını geçerli temanızın ana klasörüne yükleyin. Web sitenizin kök dizinine ve tema dizinine bir favicon görüntü dosyası yüklediğinizden emin olmak önemlidir. Üçüncü adımı görmezden gelmek ve nihayetinde favicon’un neden görünmediğini beyninizi sıkmak kolaydır. Sitenizin kök dizinine bir favicon ekleyerek, Favicon’un besleme okuyucularında müşterileriniz tarafından görüldüğünden emin olursunuz. Favicons sarma eğlenceli bir özelliktir ve sitenizin kullanıcılarına somut faydalar sağlar. Yukarıda gösterdiğimiz gibi, WordPress siteniz için de oldukça kolay bir ektir – özellikle en son sürümde. Tartıştığımız birkaç alanı özetleyelim: ICO ve PNG Favicons’ı çeşitli standart tarayıcıları kapsayacak şekilde sağlamak.
Mobil cihazları ve daha geniş kullanım vakalarını hedeflemek için bir Favicon Cilekan tabakası ile daha derine bölün.
Verimli bir şekilde çeşitli favicon boyutları üretmek için favicon.cc gibi çevrimiçi araçlardan yararlanın.
Favicon’unuzu veya daha geleneksel tekniklere geri dönmenin karmaşıklığını ortadan kaldırmak için WordPress Sitesi simgesi özelliğini 4.3+ kullanın.
Favicon’unuz aktif ve çalışıyor mu? Farklı bir ortamda gördüğünüzde sorunlarla karşılaşıyor musunuz? Yorumlarda bizimle iletişime geçin ve bize söyleyin. Etiket:
favicon
Hafta Sonu WordPress Projesi
