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
Genel bir kural olarak, WordPress temaları içeriğin yanına veya altbilgi alanına kenar çubukları ekleyin. Çok az WordPress teması, içeriğin üzerine veya başlığına widget 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ı '.
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.
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 '.
«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.
Ayrıca bazı premium WordPress eklentilerini keşfedin
diğer kullanabilirsiniz WordPress eklentileri modern bir görünüm vermek ve blogunuzun veya web sitenizin kullanımını optimize etmek için.
Size, bu konuda yardımcı olacak bazı premium WordPress eklentileri sunuyoruz.
1. Smart4y Araç İpucu
Smart4y Araç İpucu bir WordPress Plugin Javascript kitaplığına herhangi bir bağımlılık olmaksızın modern araç ipuçları oluşturmaya adanmış esnek bir araç. Tamamen duyarlıdır ve HTML içeriği ekleme imkanı sunar.
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ı
Le WordPress Plugin Justified, Flickr'da olduğu gibi jQuery kullanarak küçük resimlerinizi hizalanmış bir ızgarada hizalayan duyarlı bir galeri eklentisidir.
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
ce WordPress Plugin Adından da anlaşılacağı gibi, web sitenizde e-posta yayını planlamanıza olanak tanır. “Blog Gönderimi Takip Et” WordPress eklenti uzantılarının bir parçasıdır.
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
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. .
Indir | gösteri | Web hosting
Önerilen Kaynaklar
Web sitenizi oluşturmanıza ve yönetmenize yardımcı olacak diğer önerilen kaynaklar hakkında bilgi edinin.
- WordPress Excel ve Word belgeleri nasıl oluşturulur
- Kontrol panelinin WordPress logosu nasıl özelleştirilir
- Bir WordPress teması düzenlemek için dosyaları bulmak için nasıl
- WordPress web sitenizin CSS’ini kişiselleştirme
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.
...
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!
Header.php ekleyen kod çalışmıyor
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?
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.
Tamam.
🙂 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…
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.
Merhaba Thomas,
Bunun için bir miktar CSS bilgisi gerekiyor. Ancak bu mükemmel WordPress eklentisini öneriyorum: https://codecanyon.net/item/yellow-pencil-visual-css-style-editor/11322180?ref=voirplusgrand