Web Sitesi Üstbilginize WordPress Widget’ı Ekleme

Web sitenizin başlık alanına bir WordPress widget’ı eklemek istiyor musunuz? Widget’lar, temanızın belirlenmiş bölümlerine kolayca içerik blokları eklemenizi sağlar. Bu makalede, sitenizin başlığına nasıl kolayca bir WordPress widget’ı ekleyeceğinizi göstereceğiz.


Sitenizin başlığına bir WordPress widget'ı ekleyin

Not: Bu orta seviye bir öğreticidir. WordPress tema dosyalarınıza kod eklemeniz ve CSS yazmanız gerekir.

Sitenizde Neden ve Ne Zaman Bir Başlık Widget’ına İhtiyacınız Var??

Widget’lar, WordPress temanızdaki belirli bir alana kolayca içerik blokları eklemenizi sağlar. Bu belirlenmiş alanlara kenar çubukları veya widget’a hazır alanlar denir.

Reklamlarda, son makalelerde veya istediğiniz herhangi bir şeyi görüntülemek için başlıkta veya içerikten önceki widget’a hazır bir alan kullanılabilir.

Bu alana ‘Ekranın alt kısmı’ denir ve tüm popüler siteler bunu gerçekten önemli şeyler göstermek için kullanır.

Popüler List25 web sitesindeki başlık bölümü

Genellikle, WordPress temaları içeriğin yanına veya altbilgi alanına kenar çubukları ekler. Çok fazla WordPress teması, içeriğin üstüne veya başlığa widget’a hazır alanlar eklemez.

Bu nedenle bu makalede, WordPress web sitenizin başlığına bir widget alanının nasıl ekleneceğini ele alacağız.

1. Adım. Üstbilgi Pencere Öğesi Alanı Oluşturma

İlk olarak, özel bir widget alanı oluşturmamız gerekiyor. Bu adım, özel widget alanınızı Görünüm »Widget’lar kontrol panelinizde.

Bu kodu temanızın function.php dosyasına eklemeniz gerekecek.

işlev wpb_widgets_init () {

register_sidebar (dizi (
‘name’ => ‘Özel Başlık Widget Alanı’,
‘id’ => ‘Özel-başlık-eklendi’,
‘before_widget’ => ”,
‘after_widget’ => ”,
‘before_title’ => ‘

‘,
‘after_title’ => ‘

‘,
));

}
add_action (‘widgets_init’, ‘wpb_widgets_init’);

Bu kod, temanız için yeni bir kenar çubuğu veya widget’a hazır bir alan kaydeder.

Şimdi gidebilirsin Görünüm »Widget’lar sayfasında, ‘Özel Başlık Widget Alanı’ etiketli yeni bir widget alanı göreceksiniz..

Özel başlık widget alanı

Devam edin ve bu yeni oluşturulan widget alanına bir metin widget’ı ekleyin ve kaydedin. Widget ekleme hakkında ayrıntılı talimatlar için WordPress’te widget ekleme ve kullanma kılavuzumuza bakın.

2. Adım: Özel Başlık Widget’ınızı Görüntüleyin

Web sitenizi şimdi ziyaret ederseniz, yeni oluşturulan başlık widget’inize yeni eklediğiniz metin widget’ını göremezsiniz.

Bunun nedeni, WordPress’e bu widget alanının nerede görüntüleneceğini henüz söylemediğimiz için.

Bunu bu adımda yapalım.

Temanızdaki header.php dosyasını düzenlemeniz ve bu widget’ı özel widget alanınızı görüntülemek istediğiniz yere eklemeniz gerekir.

<?php

if (is_active_sidebar (‘özel başlık-widget’)): ?>

<?php dynamic_sidebar (‘özel üstbilgi-widget’); ?>

<?php endif; ?>

Değişikliklerinizi kaydetmeyi unutmayın.

Artık web sitenizi ziyaret edebilirsiniz ve üstbilgi pencere öğesi alanınızı göreceksiniz.

Unstyled başlık widget'ı

Biraz cilasız göründüğünü göreceksiniz. Daha iyi görünmesi için CSS’ye ihtiyacınız olacak yer burası.

3. Adım: Başlık Widget Alanınızı CSS Kullanarak Biçimlendirin

Temanıza bağlı olarak, başlık pencere öğesi alanının ve içindeki her pencere öğesinin nasıl görüntüleneceğini denetlemek için CSS eklemeniz gerekir.

Bunu yapmanın daha kolay yolu CSS Hero eklentisini kullanmaktır. Herhangi bir WordPress temasının CSS’sini değiştirmek için sezgisel bir kullanıcı arayüzü kullanmanızı sağlar. Daha fazla ayrıntı için CSS Hero incelememize bakın.

Bir eklenti kullanmak istemiyorsanız, temanıza şu adresi ziyaret ederek özel css ekleyebilirsiniz: Görünüm »Özelleştir sayfa.

Bu, WordPress tema özelleştirici arayüzünü başlatacaktır. “Ek CSS” sekmesini tıklamanız gerekecek.

WordPress temasına özel CSS ekleme

Tema özelleştiricideki ek CSS sekmesi, canlı önizlemede görünen değişiklikleri izlerken özel CSS’nizi eklemenizi sağlar.

Bu öğretici adına, bu alanı yalnızca banner reklamları görüntülemek için tek bir widget veya özel bir menü widget’ı eklemek için kullanacağınızı varsayıyoruz..

İşte başlamanıza yardımcı olacak bazı örnek CSS’ler.

div # header-widget-area {
genişlik:% 100;
arka plan rengi: # f7f7f7;
kenar-alt: 1px katı #eeeeee;
metin hizalama: merkez;
}
h2.chw-title {
kenar boşluğu: 0 piksel;
metin hizalama: sola;
metin dönüşümü: büyük harf;
yazı tipi boyutu: küçük;
arka plan rengi: #feffce;
genişlik: 130 piksel;
dolgu: 5 piksel;
}

Özel başlık widget alanımız varsayılan Yirmi Onyedi temasına böyle bakıyordu.

Üstbilgi widget'ının önizlemesi

CSS’yi temanıza uyacak şekilde ayarlamanız gerekebilir. WordPress widget’larına nasıl özel stiller ekleyeceğimize ilişkin kılavuzumuza göz atın.

Bu makalenin, sitenizin başlığına nasıl bir WordPress widget’ı ekleyeceğinizi öğrenmenize yardımcı olacağını umuyoruz. Siteniz için en yararlı 25 WordPress widget’ımızın listesini de görmek isteyebilirsiniz.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me