Her web sitesi sahibinin veya içerik oluşturucunun karşılaştığı sorunlardan biri, web sitelerini görsel olarak nasıl daha ilgi çekici hale getirebilecekleri ve kullanıcı tutma oranını nasıl artırabilecekleridir. Faydaları oldukça açık, bir ziyaretçi sitede ne kadar uzun süre kalırsa, haber bülteni abonelikleri, satış veya reklam geliri şansı o kadar yüksek olur. Yararlı ve ilgi çekici içerik oluşturarak ziyaretçilerin ilgisini çekebilirsiniz. Fakat ziyaretçilerin ilgisini çekmek ve sitenizde daha uzun süre kalmalarını sağlamak için özenle seçilmiş widget’lar da ekleyebilirsiniz. Bununla birlikte kullanmak için tam olarak doğru sayıda widget bulmanız gerekir, çünkü çok az veya çok fazla olması size geri tepebilir. Bu durum kısmen, tema geliştiricilerin neden varsayılan widget alanları oluşturduklarıdır. Bu alanlar, kullanıcıların farklı pencere öğelerini sürükleyip bırakmalarına olanak tanır. Aynı pencere öğesi alanları, içeriğin farklı sayfalarını veya bölümlerini hedefleyebilir. Varsayılan widget alanlarının sayısı, temaya bağlı olarak büyük ölçüde değişebilir. Fakat kaç tane olursa olsun, ihtiyaçlarınıza göre uyarlanacak daha fazla özel pencere öğesi alanı ekleme seçeneğine sahip olmak oldukça yararlı olabilir. Bu yüzden ek pencere öğesi alanlarının nasıl oluşturulacağını açıklayan bu kapsamlı kılavuzu yapmaya karar verdik. Bu makalede belirtilen adımları kullanarak, ziyaretçilerinin dikkatini çeken ve onları meşgul eden çarpıcı bir web sitesi oluşturabilirsiniz.
Makalenin belirli bir bölümüne atlamak isterseniz, aşağıdaki bağlantılardan birine tıklamanız yeterlidir:
-
Widget alanları eklemek için temaya özgü seçenekleri kullanma
-
Widget alanları eklemek için özel kod oluşturma
-
Ek ipuçları
WordPress’te widget alanları nasıl eklenir
Özel widget alanları ekleme sürecine girmeden önce bunun ileri düzey bir konu olduğunu belirtmemiz gerekiyor. Bu yüzden önceki WordPress bilginize bağlı olarak bazı ek araştırmalar yapmanız ve hatta profesyonel yardım almanız gerekebilir. Fakat devam etmeyi seçerseniz, önce bir site yedeklemesi yapmanızı öneririz. Süreci, dikkatle izlemeniz gereken daha küçük adımlara ayırdık. Bu adımlara kapsamlı açıklamalar eşlik eder ve makalenin sonuna doğru bazı yararlı ipuçları ve örneklerle eşleştirilir. O halde, daha fazla uzatmadan başlayalım.
Widget alanları eklemek için temaya özgü seçenekleri kullanma
Özel pencere öğesi alanları eklemenin en kolay yolu, temanızda varsa yerleşik tema seçeneklerini kullanmaktır. Örneğin tüm premium WordPress temalarımızda böyle bir seçenek vardır. Görünüm > Pencere Öğeleri’ne giderek temanızın aynı özelliklere sahip olup olmadığını inceleyebilirsiniz. Özel widget alanları oluşturmak/eklemek için bir seçenek veya alan olup olmadığını kontrol edin. Aşağıdaki ekran görüntülerinde, temanın seçeneklerini kullanarak özel pencere öğesi alanları eklemek için örnek olarak Manon temasını kullandık. İçinde, ihtiyacınız olan bölüm basitçe Özel Widget Alanı olarak adlandırılır ve ekranın sağ alt kısmına yakın bir yerde bulunur.
Bu durumda, özel bir widget alanı eklemek için tek yapmanız gereken, yeni widget alanınızın adını girmek ve Widget Alanı Ekle düğmesine basmaktır. Daha sonra mevcut widget alanları listesinin sonunda boş bir widget alanı görünecektir.
Özel pencere öğesi alanları, varsayılan olanlara çok benzer. Onları ayıran en önemli şey, sağ köşedeki X’e basarak özel alanınızı silme seçeneğidir. Widget alanı oluşturduktan sonra sol taraftaki Kullanılabilir Widget’lar bölümünden widget’ları normal şekilde sürükleyip bırakarak ekleyebilirsiniz.
Yeni pencere öğesi alanınız ve içeriği hazır olduğunda, geriye kalan tek şey onun istediğiniz yerde görünmesini sağlamaktır. Nerede olduğuna bağlı olarak tema içindeki farklı seçenekleri değiştirmeniz gerekir. Örneğin yeni oluşturduğunuz widget alanını blog kategorilerinizde ve etiketlerinizde bir kenar çubuğu olarak kullanmak istiyorsanız, bunu Tema Seçenekleri > Blog > Blog Listeleri bölümündeki uygun seçenekleri ayarlayarak yapabilirsiniz. Aşağıdaki ekran görüntüsünde gösterildiği gibi, açılır menüyü kullanarak arşiv sayfalarında (kategoriler ve etiketler) kenar çubuğunuz olarak manuel olarak özel bir pencere öğesi alanı seçebilirsiniz.
Benzer şekilde, ekran görüntüsünde de vurgulanan Arşiv Sayfaları için Kenar Çubuğu Düzeni seçeneğini ayarlayarak kenar çubuğunun düzenini, yani konumu ve genişliğini ayarlayabilirsiniz. Tek bir blog gönderisinde kenar çubuğu olarak özel bir pencere öğesi alanı da ayarlayabilirsiniz. Bunu yapmak için, seçtiğiniz gönderiyi bulup açmanız, ardından ona ait olan yukarıdakilere eşdeğer seçenekler kümesini bulmanız gerekir. Öncekiyle aynı mantığı izleyerek, bu seçenekler Tema Gönderisi bölümünde yer alacaktır (bizim durumumuzda, Kenar Gönderisi bölümü). Orada, açtığınız belirli gönderi için geçerli olan kenar çubuğu ve kenar çubuğu düzeni seçeneklerini bulacaksınız.
Bir sonraki bölüme geçmeden önce bir şeyi açıklığa kavuşturmalıyız – kenar çubuğu ile pencere öğesi alanı arasındaki fark. Kısa açıklama, hiçbir fark olmadığı ve bu iki terimin birbirinin yerine kullanılabileceğidir. Bunun nedeni, WordPress’in ilk yıllarında yalnızca kenar çubuğunun mevcut olmasıdır. Fakat WordPress kodu geliştikçe üstbilgiye, altbilgiye veya diğer tema tanımlı alanlara widget ekleme seçeneği mümkün hale geldi. Böylece, widget ekleyebileceğiniz tüm alanlara atıfta bulunan widget alanı terimi doğdu. Yeni terim günümüzde yaygın olsa da, tüm bu alanlar için, özellikle geliştiriciler arasında, kenar çubukları teriminin kullanımına da rastlayabilirsiniz.
Premium WordPress Teması
Widget alanları eklemek için özel kod oluşturma
Temanız daha önce açıklanan seçeneklerden yoksunsa veya yalnızca daha fazla esneklik istiyorsanız, ek pencere öğesi alanları oluşturmak için özel kodlama yapmanın yolu budur. Konu biraz kodlama yoğun olduğundan, kodlamaya aşina değilseniz ek geliştirici yardımı bulmanızı öneririz. Ne yapmayı seçerseniz seçin, takip etmesi daha kolay olsun diye süreci üç kolay adıma ayırdık. Bu adımlar şunlardır: widget alanını kaydetme, widget’ları ekleme ve widget alanını web sitesinde gösterme. Bundan sonraki bölümde bazı ek ipuçlarına da yer verdik.
-
Widget alanını kaydetme
WordPress web sitenize widget alanları eklemenin ilk adımı kayıttır. Her widget alanı önce register_sidebar işlevi kullanılarak kaydedilmelidir. Bu durum temanızın functions.php dosyasına aşağıda verilene benzer bir kod eklemenizi gerektirir.
function register_custom_widget_area() { register_sidebar( array( 'id' => 'new-widget-area', 'name' => esc_html__( 'My new widget area', 'theme-domain' ), 'description' => esc_html__( 'A new widget area made for testing purposes', 'theme-domain' ), 'before_widget' => '<div id="%1$s" class="widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<div class="widget-title-holder"><h3 class="widget-title">', 'after_title' => '</h3></div>' ) ); } add_action( 'widgets_init', 'register_custom_widget_area' );
Temanızın functions.php dosyasını düzenlemek, FTP kullanımını gerektirir, bu nedenle devam etmeden önce bu konuyu okumak isteyebilirsiniz. Hazır olduğunuzda, bir register_sidebar işlevinin sahip olabileceği bağımsız değişkenlerin listesini açıklamalarıyla birlikte inceleyebilirsiniz.
Bunlar şunlardır:
-
id – bir pencere öğesi alanının benzersiz tanımlayıcısı
-
isim – Görünüm > Widget’lar’da görüntülenecek olan widget alanının adı
-
açıklama – içinde görüntülenen ve Görünüm > Widget’lar’da görünen widget alanının açıklaması
-
sınıf – widget alanına atanabilen ve daha sonra widget alanını CSS ile özelleştirmenize yardımcı olacak ek CSS sınıfı
-
before_widget – widget alanına ait her widget’tan önce eklenen bir HTML kodu bloğu
-
after_widget – widget alanına ait her widget’tan sonra eklenen bir HTML kodu bloğu
-
Before_title – görüntülendiğinde pencere öğesi alanı başlığından önce eklenen bir HTML kodu bloğu
-
after_title – görüntülendiğinde pencere öğesi alanı başlığından sonra eklenen bir HTML kodu bloğu
-
Widget’ları widget alanına ekleme
Kayıttan sonra, ikinci adım herhangi bir WordPress kullanıcısı için çok tanıdık olmalıdır. Widget’ları yeni oluşturulan widget alanı içine sürükleyip bırakmayı içerir. Bunu yapmak için Görünüm > Widget’lar’a gidin, oluşturduğunuz widget alanını bulun ve istediğiniz widget’ları buraya ekleyin.
-
Widget alanını web sitesinde gösterme
Fakat widget alanını kaydettikten ve boş olmadığından emin olduktan sonra bile sitenizde otomatik olarak gösterilmeyecektir. Görünmesi için, oluşturduğunuz belirli kenar çubuğunu, yani pencere öğesi alanını “çağıran” ek kod eklemeniz gerekir. Girmeniz gereken kod şuna benzer:
<?php if ( is_active_sidebar( 'new-widget-area' ) ) : ?> <div id="secondary-sidebar" class="new-widget-area"> <?php dynamic_sidebar( 'new-widget-area' ); ?> </div> <?php endif; ?>
Bu kodu, temanın şablon dosyalarından birinin içine yerleştirmeniz gerekir. Hangi dosyayı kullanacağınız tamamen yeni pencere öğesi alanınızın nerede gösterilmesini istediğinize bağlıdır. En yaygın seçenekler, sidebar.php, header.php veya footer.php dosyalarıdır. Kullanacağınız dosyayı seçtikten sonra, eklemeniz gereken kodun bileşenlerini göz önünde bulundurabilirsiniz.
Widget alanını göstermekten sorumlu olan dynamic_sidebar işlevidir. Bir widget alanının önceden kaydedilmiş bir adını veya kimliğini geçerli parametreler olarak kabul eder. Widget alanını bir div etiketiyle sarmak gerekli değildir. Fakat sayfalarınızın HTML’sini daha yapılandırılmış hale getirdiği için bunu öneririz. Hatta bu div’lere kimlikler veya sınıflar da ekleyebilirsiniz. Bu durum daha sonra bu içeriğin stilize edilmesini çok daha kolay hale getirecektir. Son olarak kodu is_active_sidebar koşullu etiketiyle daha fazla sararak, parçacık alanının yalnızca eklenmiş parçacıklar varsa gösterilmesini sağlıyoruz.
Ek ipuçları
Yukarıda açıklanan adımları kullanarak, artık temel işlevlere sahip özel bir pencere öğesi alanına sahip olmalısınız. Fakat isterseniz bazı şeyleri geliştirme seçeneğiniz de var. Ele almak isteyebileceğiniz en belirgin iki nokta, eklenen pencere öğesi alanının görünürlüğünü sınırlamak ve stilini iyileştirmektir. Her ikisini de aşağıda ele alacağız.
Koşullu etiketleri kullanma
Bazı widget alanları her sayfada kullanılabilirken, diğerleri yalnızca seçilen birkaç sayfada kullanılabilir. Örneğin belirli bir kenar çubuğunu yalnızca belirli bir sayfa türünde (örneğin gönderi kategorileri) göstermek isteyebilirsiniz. Bu ayarlar ve işlevler, genellikle varsayılan widget alanı olması durumunda tema seçenekleri kullanılarak elde edilir. Fakat kod kullanarak oluşturduğunuz pencere öğesi alanlarında aynı şeyi elde etmek için koşullu etiketler ve ifadeler kullanmanız gerekir. Cevian temasını kullanarak size adımları ve birkaç koşullu etiket örneğini göstereceğiz.
Örnekler:
-
is_single koşullu etiketini kullanarak, yeni pencere öğesi alanının nerede gösterileceğini belirtebiliriz. is_single işlevi, kullandığı parametrenin bir varsayılana mı yoksa özel bir gönderi türüne mi ait olduğunu belirler. Sayfalar ve ekler dışında herhangi bir gönderi türü için kullanılabilir. Parametre bir gönderi kimliği, başlık, bilgi veya bunları birleştiren bir dizi olabilir. Örneğimizde, bir dizi gönderi kimliği kullandık.
if ( is_single( array( '831', '1193') ) && is_active_sidebar( 'new-widget-area' ) ) { ?> <div id="secondary-sidebar" class="new-widget-area"> <?php dynamic_sidebar( 'new-widget-area' ); ?> </div> <?php }
Yukarıdaki kod, eklenen widget’lara sahipse oluşturduğunuz yeni widget alanını gösterir. Widget alanı, yalnızca kimlikleri 831 ve 1193 olan gönderilerde gösterilecek şekilde ayarlanmıştır. Gönderi kimliklerimizi, gönderinin URL’sini kullanarak öğrenebilirsiniz. Tek bir gönderiyi düzenlerken, URL’nin “post=”tan hemen sonraki kısmı gönderinin kimliğini gösterir.
Aynı kodu, varsayılan tema kenar çubuğunu gösteren kodun hemen önüne, sidebar.php dosyasına yerleştirebilirsiniz. Bu durumda, iki parçalı bir kenar çubuğunuz olabilir ve sonuç aşağıdaki ekran görüntüsüne benzer.
-
is_singular koşullu etiketinin kullanımı, yukarıda açıklanan is_single one kullanımına çok benzer. Tek fark, is_singular’ın, parametrenin sayfalar ve ekler dahil olmak üzere varsayılan veya özel herhangi bir gönderi türüne ait olup olmadığını belirleyebilmesidir. Parametre, tek bir yazı tipi bilgisi veya bir yazı tipi bilgisi dizisi olabilir.
function portfolio_after_content_widget_area() { if ( is_singular( 'portfolio-item' ) && is_active_sidebar( 'new-widget-area' ) ) { ?> <div id="secondary-sidebar" class="new-widget-area"> <?php dynamic_sidebar( 'new-widget-area' ); ?> </div> <?php } } add_action(...