Ana İçeriğe Geç

WordPress blog başlığına bir widget eklemek nasıl

Divi: Kullanılacak en kolay WordPress teması

Divi: Tüm zamanların en iyi WordPress teması!

daha fazla 901.000 indirmeler, Divi, dünyanın en popüler WordPress teması. Tamamen, kullanımı kolay ve 62 ücretsiz şablonlardan daha fazlasını sunuyor. [Önerilen]

Web sitenizin başlık alanına bir WordPress pencere öğesi eklemek ister misiniz?

Widget'lar, WordPress temanızın belirlenmiş bölümlerine kolayca içerik blokları eklemenizi sağlar.

Bu eğiticide, web sitenizin başlığına nasıl kolayca WordPress widget'ı ekleneceğini göstereceğiz.

not: Bu orta düzey bir öğreticidir. Kod eklemeniz gerekecek WordPress temanızın dosyaları ve bazı CSS’lerde ustalaş.

Ancak herhangi bir değişiklik yapmadan önce yedekleme blogunuza için 5 WordPress eklentileri veya Bir WordPress tema nasıl kurulur et Kaç eklentileri WordPress yüklemeniz gerekir.

O zaman neden burada olduğumuza dönelim. 

Başlığa neden ve ne zaman bir widget eklemeniz gerekiyor?

Widget'lar, WordPress temanızdaki belirli bir alana kolayca içerik blokları eklemenizi sağlar. Bu belirlenmiş alanlara " sidebars "Veya alanları" widget'ları'.

Başlıktaki bir widget alanı, reklamları, en son makaleleri veya ne istersen görüntülemek için kullanılabilir.

Bu etki alanı, tüm popüler web sitelerinde gerçekten önemli bilgiler göstermek için kullanılır.

Çok keşfetmek WordPress'e yükledikten sonra özel widget'lar ekleme

WordPress kafasında bölge widgetisee

Tipik olarak, WordPress temaları içeriğin yanına veya altbilgi alanına kenar çubukları ekler. Çok az WordPress teması, içeriğin üstüne veya başlığa pencere öğesi alanları ekler.

Biz de keşfetmek için tavsiye Fransızca MailChimp öğretici: Bir haber bülteni oluşturmak için tam bir rehber

Bu yüzden bu derste size WordPress web sitenizin başlığına nasıl bir widget alanı ekleneceğini göstereceğiz.

1. Adım: Bir widget alanı oluşturun

Öncelikle özel bir widget alanı oluşturmamız gerekiyor. Bu adım, "içinde özel bir widget alanı görmenize olanak sağlar. Görünüm> Widget'lar WordPress panonuzda.

Bu kodu dosyaya eklemeniz gerekecek functions.php Temanın.

function bpc_widgets_init () {register_sidebar (array ('name' => 'Custom Header Widget Area', 'id' => 'custom-header-widget', 'before_widget' => ' ',' after_widget '=>' ',' before_title '=>' ',' after_title '=>' ',)); } add_action ('widgets_init', 'bpc_widgets_init');

Bu kod, WordPress temanızda yeni bir kenar çubuğu veya widget alanı kaydeder.

WordPress'i yerel olarak hiç kurmadıysanız, öğrenin XAMPP ile bir PC üzerinde yerel WordPress nasıl yüklenir / Windows

Gidebilirsin " Görünüm> Widget'lar Ve "ile işaretlenmiş yeni bir widget alanı göreceksiniz Özel Üstbilgi Widget Alanı '.

yeni WordPress widget bölgesi

Elementor ile web sitenizi kolayca oluşturun

Elementor, profesyonel bir görünüme sahip herhangi bir web sitesi tasarımını kolayca oluşturmanıza olanak sağlar. Kendin yapabileceğin için pahalı ödemeyi kes. [Ücretsiz]

Devam edin ve bu yeni oluşturulan alana bir metin widget'ı ekleyin ve kaydedin.

Ayrıca deneyin widget ekleme rehberimiz.

Adım 2: Widget'ınızı başlıkta gösterin

Web sitenizi ziyaret ederseniz, az önce eklediğiniz metin widget'ini göremezsiniz.

Çünkü size bölgelerinin nasıl görüntüleneceğini henüz göstermedik. özel aletler WordPress.

Bu adımda yapacağımız şey budur.

İşte sizin için de bir listesi Blogunuzun kazancını artırmak için 5 Kritik WordPress eklentileri

Dosyayı düzenlemeniz gerekecek header.php WordPress temanıza ekleyin ve widget'ları görüntülemek istediğiniz yere bu kodu ekleyin.


 
 
 
 

Değişikliklerinizi kaydetmeyi unutmayın.

Daha sonra web sitenizi ziyaret edebilirsiniz ve başlıkta metin widget'ini göreceksiniz.

akılda demo site

Sonuç mutlaka en çekici olmayacak. Bu yüzden CSS'e ihtiyacınız olacak, böylece doğru şekilde görüntüleyebileceksiniz.

3 Adım: CSS başlıklarınıza stil katın

WordPress temanıza bağlı olarak, başlık ve pencere öğesi alanının nasıl görüntülendiğini kontrol etmek için bir miktar CSS kodu eklemeniz gerekecektir.

Bunu yapmanın en kolay yollarından biri CSS Hero kullanmaktır. İkincisi, bir WordPress temasının CSS'sini değiştirmek için sezgisel bir kullanıcı arayüzü kullanmanıza izin verir.

Bunu keşfetmenizi de öneriyoruz Yellow Pencil WordPress eklentisi ile neler yapabilirsiniz?

Eklenti kullanmak istemiyorsanız, ziyaret ederek WordPress temanıza özel CSS ekleyebilirsiniz. " Görünüm »Kişiselleştir WordPress temasını özelleştirmek için.

Ayrıca bizim makalemizi okuyun. Blog trafiğini iyileştirmek için 10 WordPress eklentileri

Bu, WordPress Özelleştirici arayüzünü görüntülemenize izin verecektir. " Ek CSS '.

ek css WorDPress

En iyi WordPress temalarını ve eklentilerini mi arıyorsunuz?

Envato'daki en iyi eklentileri ve WordPress temalarını indirin ve web sitenizi kolayca oluşturun. 49.720.000 indirme işleminden daha fazla. [ÖZEL]

«Sekmesi ek CSS İçinde " Customizer Sağ taraftaki önizlemedeki değişiklikleri görüntülerken özel CSS'nizi eklemenize olanak tanır.

Bu eğitici yazının özündeki nedenlerden dolayı, bu alanı afiş reklamlarını görüntülemek için tek bir widget veya özel bir menü widget'ı eklemek için kullanacağınızı varsayıyoruz.

Başlamanıza yardımcı olacak bir CSS örneği:

div # başlık-eklendi alan {genişliği: 100%; Arka plan renkli: #f7f7f7; Çerçeve-alt Katı #eeeeee 1px; text-align: center; } H2.chw başlıktaki {kenar üstü: 0px; text-align: left; Metin-dönüşümü: büyük harf; yazı tipi boyutu: küçük; Arka plan renkli: #feffce; en: 130px; dolgu: 5px; }

İşte özel widget'ımızın Yirmi Onyedi tema başlığında nasıl görüneceği.

demo teması yirmi on yedi wordpress

Ayrıca bazı premium WordPress eklentilerini keşfedin  

Modern bir görünüm kazandırmak ve blogunuzun veya web sitenizin rahatlığını artırmak için diğer WordPress eklentilerini kullanabilirsiniz.

Size, bu konuda yardımcı olacak bazı premium WordPress eklentileri sunuyoruz.

1. Smart4y Araç İpucu

Smart4y Tooltip, JavaScript kitaplığına herhangi bir bağımlılık olmadan modern araç ipuçları oluşturmaya adanmış esnek bir WordPress eklentisidir. Tamamen duyarlıdır ve HTML içeriği ekleme imkanı sunar.

Smart4y Tooltip Duyarlı WordPress Eklentisi

WYSIWYG editörü, herhangi bir kod girmek zorunda kalmadan her ipucunu görsel olarak oluşturmanıza izin verir, ancak istekliysanız her zaman yapabilirsiniz.

Ayrıca bizim keşfetmek Blogunuzdaki makaleleri değerlendirmek için 10 WordPress eklentileri

Diğer özellikleri: Oluşturucu sayfa desteğioldukça duyarlı bir düzen, tüm araç ipuçları için genel parametreler tanımlama veya her bir araç ipucu için belirli parametreler tanımlama yeteneği, önceden tanımlanmış görsel efektler için destek, araç ipucunun yeniden boyutlandırılmış pencerede konumunun hesaplanması, ayrıntılı belgeler, vb….

İndir | Demo | Web hosting

2. Yaslandı

WordPress Justified eklentisi, küçük resimlerinizi Flickr'da olduğu gibi jQuery kullanarak haklı bir ızgarada düzenleyen, duyarlı bir galeri eklentisidir. 

WordPress-Fotoğrafçılar için Justified eklentisi,

Galerilerinizi rakiplerinizden ayıran özellikler getiriyor!

Başlıca özellikleri: duyarlı düzen, özel köprü efektleri, otomatik ızgara yeniden hizalama,  bir kısa kod editörü, görünüm etamamen özelleştirilebilir, p desteğigörüntüleyenler ve diğerleri…

Indir | gösteri | Web hosting  

3. E-postaları Planla

Adından da anlaşılacağı gibi bu WordPress eklentisi, web sitenizde e-posta yayınını planlamanıza olanak tanır. WordPress eklentisi olan "Follow My Blog Post" eklentisinin bir parçasıdır. E-postaları Planla Blog Postamı Takip Et wordpress eklentisi

Artık e-postalarınızın yayınlanmasını saatlere, günlere veya haftalara göre planlayabileceksiniz.

Ayrıca bizim makalemizi okuyun. Web sitenizdeki haritaları kullanmak için 10 WordPress eklentileri

Çevrimiçi Mağazanızı kolayca oluşturun

WordPress'te fiziksel ve dijital ürünlerinizi satmak için ücretsiz WooCommerce, en iyi e-ticaret eklentilerini indirin. [Önerilen]

Her bir bildirim için her bir e-posta yerine tüm bildirimler için birleşik bir e-posta gönderme imkanı sunar ve ayrıca farklı e-postalar için farklı e-posta şablonları tanımlayarak son olarak e-postalarınızın daha kolay anlaşılır olmasını sağlar. .

Indirgösteri |Web hosting

Önerilen Kaynaklar

Web sitenizi oluşturmanıza ve yönetmenize yardımcı olacak diğer önerilen kaynaklar hakkında bilgi edinin.

Sonuç

İşte bu! Hepsi bu ders için, umarım WordPress temanızın başlığına bir widget alanı eklemenize yardımcı olur. Çekinme En sevdiğiniz sosyal ağlarda arkadaşlarınızla paylaşın

Bununla birlikte, ayrıca bize danışabilirsiniz kaynakların bulunduğuİnternet siteleri oluşturma projelerinizi yürütmek için daha fazla elemana ihtiyacınız varsa, WordPress blog oluşturma.

Öneriniz veya yorumunuz varsa, bunları bölümümüzde bırakın. Yorumlar.

...

Bu makale yorumları 8 içeriyor

  1. Selam! Bu makalenin başında kullanılana benzer bir "bilgi kutusu" nu, "İndir" ve "E-tablolar" ın yanındaki tıklanabilir düğmeler dahil olmak üzere nasıl yerleştireceğimi bana söyleme şansınız olup olmadığını bilmek isterim. düzen çok güzel. Teşekkür ederim!

  2. Efendim, denedim. Aslında, pencere öğeleri sayfası, pencere öğelerinin eklenmesini tanımlayan çıktıdır. Ve onu ekledim. Adım 2 kodu php başlığına giremediğinde. Tahmin et 2, hata nedir efendim?

  3. Yeni bir pencere öğesi alanı oluşturmak için gösterilen ilk kodda "function" yazarak başlayın, ancak "function" ile başladığını söyleyebilirim. Aslında bu kodun, onu yazarken yanlış yapan birkaç hatası vardır. Düzeltilmesini takdir ediyorum.

  4. 🙂 Her şey yolunda, sadece tavsiyesinde bulunan hiç kimse kodu “functions.php !!! 'ye nereye ekleyeceğini açıklamıyor !!! " Bu önemli! Herkes "farklı" temaları kullanır…

  5. Merhaba,

    Bu destekler için teşekkür ederiz.

    Arama çubuğumu kişiselleştirilmiş başlığa nasıl ekleyeceğimi biliyordum. Öte yandan stili kişiselleştirmek için daha karmaşık ...

    Arka plan renginin yanı sıra boyutu, konumu (başlığın tüm genişliğini kaplamaması) değiştirmek istiyorum.

    şimdiden teşekkürler.

YORUM BIRAKIN

E-posta hesabınız yayımlanmayacak. Doldurulması zorunlu alanlar * ile işaretlenmiştir *

Bu site, istenmeyenleri azaltmak için Akismet'i kullanıyor. Yorum verilerinizin nasıl kullanıldığı hakkında daha fazla bilgi edinin..

Başa dönüş
7 hisseleri
hisse1
cıvıltı
Enregistrer6