Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Kupası
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Web Sitenizin Başlığına WordPress Widget’ı Ekleme (2 Yol)

Editoryal Not: WPBeginner üzerindeki ortak bağlantılardan komisyon kazanıyoruz. Komisyonlar, editörlerimizin görüşlerini veya değerlendirmelerini etkilemez. Editoryal Süreç hakkında daha fazla bilgi edinin.

Web sitenizin başlık alanına bir WordPress widget’ı mı eklemek istiyorsunuz?

Widget’lar temanızın belirli bölümlerine kolayca içerik blokları eklemenize olanak tanır, ancak her tema bir başlık widget alanı içermez.

Bu makalede, web sitenizin başlığına nasıl kolayca WordPress widget’ı ekleyebileceğinizi göstereceğiz.

How to add a WordPress widget to your website header (2 ways)

WordPress Sitenize Neden Başlık Widget’ı Eklemelisiniz?

Web sitenizin başlığı, ziyaretçilerinizin WordPress web sitenizi ziyaret ederken görecekleri ilk şeylerden biridir. Başlığınıza bir WordPress widget’ı ekleyerek bu alanı okuyucuların dikkatini çekmeye yardımcı olacak şekilde optimize edebilirsiniz.

Çoğu web sitesi başlığı, ziyaretçilerin sitenizde dolaşmasına yardımcı olmak için özel bir logo ve bir gezinme menüsü içerir.

Ayrıca yararlı içerikler, banner reklamlar, sınırlı süreli teklifler, tek satırlık formlar ve daha fazlasını öne çıkarmak için bu alanın üstüne veya altına bir başlık widget’ı ekleyebilirsiniz.

WPBeginner’da, navigasyon menüsünün hemen altında bir başlık eylem çağrımız var.

Header CTA example

Çoğu WordPress teması, sitenin kenar çubuğu ve altbilgi alanlarında widget’a hazır alanlara sahiptir, ancak her tema üstbilgiye widget’a hazır alanlar eklemez.

Editörün Notu: Temanızda widget’a hazır bir başlık alanı yoksa, artık sıfırdan (herhangi bir kodlama yapmadan) tamamen özel WordPress temaları oluşturabilirsiniz.

Ama önce, mevcut temanızdaki web sitenizin başlığına nasıl WordPress widget’ı ekleyeceğinizi adım adım inceleyelim. Doğrudan kullanmak istediğiniz yönteme geçmek için aşağıdaki hızlı bağlantıları kullanın:

Yöntem 1: WordPress Tema Ayarlarından Web Sitenizin Başlığına WordPress Widget’ı Ekleyin

En iyi WordPress temalarının çoğu, istediğiniz gibi özelleştirebileceğiniz bir başlık widget alanı içerir.

İlk olarak, mevcut WordPress temanızın başlıkta bir WordPress widget alanını destekleyip desteklemediğini görmek isteyeceksiniz.

Bunu WordPress tema özelleştiricisine veya WordPress yönetici panelinizin widget alanına giderek bulabilirsiniz. Bunu yapmak için Görünüm ” Özelleştir ‘e gidin ve başlığı düzenleme seçeneği olup olmadığına bakın.

Not: Bir blok tema kullanıyorsanız, yönetici kenar çubuğunuzda bu seçeneği göremezsiniz. Bunun yerine, WordPress Tam Site Düzenleyicisi’ni kullanarak başlığınızı nasıl özelleştireceğinize ilişkin kılavuzumuza bakmalısınız.

Bu örnekte, ücretsiz Astra temasında ‘Header Builder’ adlı bir seçenek bulunmaktadır. Bu özelliği Astra’da nasıl kullanacağınızı göstereceğiz, ancak bunun kullandığınız temaya bağlı olarak farklı görüneceğini unutmayın.

Astra header builder

Buna tıklarsanız, sizi başlığınızı düzenleyebileceğiniz ve widget ekleyebileceğiniz bir ekrana getirir.

Ekranın alt kısmında, başlığın üstündeki ve altındaki alanlarla birlikte başlığı tamamen özelleştirebilirsiniz. Boş alanlardan birinin üzerine gelin ve ‘Artı’ simgesine tıklayın.

Click plus icon

Bu, ‘Widget 1’i seçebileceğiniz bir açılır menü getirir.

Aralarından seçim yapabileceğiniz ek seçenekler vardır, ancak üstbilgiyi widget’a hazır hale getirmek için ‘Widget’ seçeneklerinden birini seçmeniz gerekir.

Select widget 1 option

Başlığınıza bir widget alanı eklemek için başlık özelleştirici bölümündeki ‘Widget 1’ kutusuna tıklayın.

Bu, bir widget ekleme seçeneğini getirir.

Click widget 1 box

Ardından, sol taraftaki menüde yer alan ‘Artı’ blok ekle simgesine tıklayın.

Bu, başlığınıza eklemek için bir widget seçebileceğiniz bir açılır pencere getirir.

Click plus icon and select widget

Başlığınızı özelleştirmeye devam edebilir ve istediğiniz kadar widget ekleyebilirsiniz.

İşiniz bittiğinde, değişikliklerinizi kaydetmek için ‘Yayınla’ düğmesine tıkladığınızdan emin olun.

Publish header widget changes

Şimdi, başlık alanınızı eklediğiniz widget veya widget’larla birlikte görüntüleyebilirsiniz.

İşte demo sitemizde nasıl göründüğüne dair bir ekran görüntüsü.

Header widget example

Astra kullanmıyor musunuz?

Temanızda zaten bir WordPress başlık widget’ı olup olmadığını görmenin bir başka yolu da WordPress yönetici panelinizde Görünüm ” Widget ‘lar bölümüne gitmektir.

Ardından, ‘Üstbilgi’ veya benzer bir etikete sahip bir widget bölümü olup olmadığına bakın.

Go to widgets section for header widget

Varsa, widget menüsünü getirmek için ‘Artı’ blok ekle simgesine tıklamanız yeterlidir.

Ardından, üzerine tıklayarak istediğiniz widget’ı ekleyebilirsiniz.

Header widget section

Değişikliklerinizi başlık widget alanına kaydetmek için ‘Güncelle’ düğmesine tıkladığınızdan emin olun.

Yöntem 2: WordPress’e Kod Ekleyerek Web Sitenizin Başlığına WordPress Widget’ı Ekleyin

WordPress temanızda başlıkta bir WordPress widget alanı yoksa, WordPress’e kod ekleyerek bunu manuel olarak eklemeniz gerekir.

Bunu daha önce yapmadıysanız, WordPress’te kod kopyalama ve yapıştırma hakkındaki kılavuzumuza bakın.

Ardından, functions.php dosyanıza veya WPCode gibi bir kod parçacıkları eklentisi kullanarak (önerilir) aşağıdaki kod parçacığını ekleyebilirsiniz:

function wpb_widgets_init() {

	register_sidebar( array(
		'name'          => 'Custom Header Widget Area',
		'id'            => 'custom-header-widget',
		'before_widget' => '<div class="chw-widget">',
		'after_widget'  => '</div>',
		'before_title'  => '<h2 class="chw-title">',
		'after_title'   => '</h2>',
	) );

}
add_action( 'widgets_init', 'wpb_widgets_init' );

Daha fazla ayrıntı için sitenizi bozmadan WordPress’e nasıl özel kod ekleyebileceğinize ilişkin kılavuzumuza bakabilirsiniz.

WPCode yöntemi boyunca size yol gösterecektir.

Adding the Code Snippet to WPCode

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

Görünüm ” Widget‘lar bölümüne giderseniz, ‘Özel Başlık Widget Alanı’ etiketli yeni bir widget alanı göreceksiniz.

Custom header widget area

Artık widget’larınızı bu yeni alana ekleyebilirsiniz. Daha fazla ayrıntı için WordPress’te widget ekleme ve kullanma kılavuzumuza bakın.

Ancak, başlık widget’ınız henüz web sitenizde canlı olarak görüntülenmeyecektir. Bunu nasıl yapacağınızı daha sonra göstereceğiz.

WordPress’te Özel Başlık Widget’ınızı Görüntüleme

Artık başlık widget alanını oluşturduğunuza göre, WordPress’e bunu web sitenizde nerede görüntüleyeceğinizi söylemeniz gerekir.

Bunu yapmak için temanızın header.php dosyasını düzenlemeniz gerekir. Ardından, widget’ın görüntülenmesini istediğiniz yere aşağıdaki kodu eklemeniz gerekir:

<?php

if ( is_active_sidebar( 'custom-header-widget' ) ) : ?>
    <div id="header-widget-area" class="chw-widget-area widget-area" role="complementary">
	<?php dynamic_sidebar( 'custom-header-widget' ); ?>
    </div>

<?php endif; ?>

Bu kod, daha önce oluşturduğunuz özel widget alanını web sitenizin başlık alanına ekleyecektir.

Artık WordPress blogunuzu ziyaret ederek başlık widget alanınızı canlı olarak görebilirsiniz.

Header widget live

WordPress Header Widget Alanınızı CSS Kullanarak Stilize Edin

Temanıza bağlı olarak, başlık widget alanının ve içindeki her bir widget’ın nasıl görüntüleneceğini kontrol etmek için WordPress’e CSS eklemeniz de gerekebilir. Bu birkaç şekilde yapılabilir:

Daha fazla bilgi edinmek için WordPress sitenize nasıl kolayca özel CSS ekleyebileceğinize ilişkin kılavuzumuza bakın.

Bu makalede, WPCode eklentisini ve WordPress Tema Özelleştiricisini kullanarak özel CSS’nin nasıl ekleneceğine hızlıca bir göz atacağız.

Yukarıdaki Yöntem 2’de, functions.php dosyanıza bir kod parçacığı eklemek için WPCode ‘u nasıl kullanacağınızı gösterdik. Özel CSS eklemek için bu eklentiyi de ekleyebilirsiniz.

WPCode’da yeni bir snippet oluşturduğunuzda, sağdaki açılır menüden ‘CSS Snippet’ kod türünü seçtiğinizden ve ‘Otomatik Ekle’ seçeneğinin seçili olduğundan emin olun.

CSS Code Snippet in WPCode

Kod önizleme bölümünde, başlık widget’ınızı şekillendirmek için CSS eklemeniz gerekir.

İşte başlamanıza yardımcı olacak bazı örnek CSS kodları:

div#header-widget-area {
    width: 100%;
    background-color: #f7f7f7;
border-bottom:1px solid #eeeeee;
    text-align: center;
		padding: 20px;
}
h2.chw-title {
    margin-top: 0px;
    text-align: left;
    text-transform: uppercase;
    font-size: small;
    background-color: #feffce;
    width: 130px;
    padding: 5px;
    }

Bundan sonra, ‘Aktif’ ayarının açık olduğundan emin olmanız ve ardından ekranın sağ üst köşesindeki ‘Snippet’i Kaydet’ düğmesine tıklamanız gerekir.

Bunun yerine Tema Özelleştirici ‘yi kullanmak için WordPress yönetici panelinizde Görünüm ” Özelleştir ‘e gitmelisiniz. Bu, WordPress tema özelleştirici panelini getirir. ‘Ek CSS’ sekmesine tıklamanız gerekir.

WordPress customizer additional CSS

Bu, doğrudan temanıza ek CSS eklemenizi ve değişiklikleri gerçek zamanlı olarak görmenizi sağlar.

Yukarıda size gösterdiğimiz CSS kodunu ‘Ek CSS’ kutusuna eklemeniz yeterlidir.

Add CSS code and publish

CSS’nizi eklemeyi tamamladıktan sonra, değişikliklerinizi kaydetmek için ‘Yayınla’ düğmesine tıkladığınızdan emin olun.

İşte özel başlık widget’ının CSS değişiklikleri canlı olarak nasıl göründüğü.

Header widget example after CSS

Umarız bu makale web sitenizin başlığına nasıl WordPress widget’ı ekleyeceğinizi öğrenmenize yardımcı olmuştur. Ayrıca, en iyi WordPress barındırma hizmetinin nasıl seç ileceğine ilişkin kılavuzumuzu ve küçük işletmeler için en iyi canlı sohbet yazılımı uzman seçimlerimizi görmek isteyebilirsiniz.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Açıklama: İçeriğimiz okuyucu desteklidir. Bu, bazı bağlantılarımıza tıklarsanız komisyon kazanabileceğimiz anlamına gelir. WPBeginner'ın nasıl finanse edildiğini, neden önemli olduğunu ve nasıl destek olabileceğinizi görün. İşte editoryal sürecimiz.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Ultimate WordPress Araç Kiti

Araç setimize ÜCRETSİZ erişim sağlayın - her profesyonelin sahip olması gereken WordPress ile ilgili ürün ve kaynaklardan oluşan bir koleksiyon!

Reader Interactions

83 yorumBir Cevap Bırakın

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Rob Hartman says

    This tutorial was PERFECT and I’ve successfully created the header widget, super light and no impact on page speed. I had hoped that I could use the same approach to add a widget area to my footer, and replace all Header related reference in both the Functions and footer.php – but in this instance the widget area was not registered.

    Does this approach ONLY apply to the header area?

    Regardless, thanks for a super concise tutorial.

    • WPBeginner Support says

      The code should work even in a footer but your theme may not display the footer on every page as a common reason.

      Yönetici

  3. Sjoerd says

    Hi! Thanks for the tutorial. What if I want to show the widget area above the primary menu instead of right below it?

    • WPBeginner Support says

      That would depend on your specific theme, we would first recommend reaching out to your specific theme’s support to see if they have a built-in method for what you’re wanting to do or have recommended settings.

      Yönetici

  4. Muhammad Kashif says

    Hello, I added the custom header widget successfully, but after updating the theme my custom header widget is not working ? Please tell me the solution! Looking forward to your response. thanks

  5. Jim Rolt says

    Excellent code snippets which I was able to adapt and style to do the jobs I wanted. Many thanks for this

  6. Vildan says

    Hi WP Beginner,

    How do I get the widget area in the header on the right side of the menu? I want to add the ADD TO CART icon in there.

    • WPBeginner Support says

      For placement, it would depend on the specific theme you are using, if you check with your theme’s support they should be able to let you know what part of your header.php file to add the code to or if they have a built-in method to do so.

      Yönetici

  7. Bathri Vijay says

    Thank You WPBeginner Editorial Team giving a perfect blog to the beginners and middle class coders. It is a big platform to learn and to execute WordPress. You were the big reason for the success of many bloggers and business owners.

  8. zambol says

    Thanks for the tutorial. it works but the trouble I have is that it’s not responsible for mobile devices. is it possible to make the sidebar responsible?

    • WPBeginner Support says

      I believe you mean responsive in which case, we sadly do not have a recommended method for making this widget responsive at the moment.

      Yönetici

    • WPBeginner Support says

      Depending on your specific theme, if there is content before the header.php content, you would want to reach out to the theme’s support

      Yönetici

  9. dav says

    hello,
    I would like to make an header like the one in the first picture on the top of this page ( the list 25 website).
    How can I make It?
    Please help me!

  10. GoosePT says

    Hello!

    Perfect tutorial.

    Im using it to create a Topbar, but im facing a problem the widgets (in my case 2) are one below the other.

    How can I make them to be displayed side by side?

  11. Mikhail Koval says

    What would I have to put in the header.php to ONLY show on the home page but not show on other pages?

      • Anna says

        Hi, this is really what I’m looking for and it would be great if I could get it to work! Creating the widget area works fine, displaying it does unfortunately not.. I would also like to display it only on the start page.
        I´m not sure
        1) where in the header file to put the display code
        2) where to put this “only-on-startpage”-code and what code goes on line 2
        I understand if my questions are too basic to bother with, but I would be really grateful if someone has time and patience for it anyway..:-) Thanks in advance!!

        • WPBeginner Support says

          Hi Anna,

          These are perfectly reasonable questions.

          1. You need to put the display code based on where you want to display the header widget. For example, your theme’s header.php file may have a section to display site title, logo, description, and navigation menus. They will probably be wrapped around div tags. You will put your header widget code before or after these areas. If you are unsure, you can place the code at the end of the header.php file.

          2. If you only want to display the widget area on your website’s front page then you can use conditional tags like this:

          if ( is_front_page() ) {
          // your widget display code goes here 
          
          } 
          
        • Anna says

          OK, I cheated and put the widget-code in the front-page.php instead, it worked! Thanks :-)!

    • Anna says

      Hi again, it became visible on start page with css positioning!

      Now it’s only the question of how to put together the only-on-start-page-code with the visibility code…

      Thanks again for kindness and patience..)

  12. Paul Johnson says

    Great tutorial thanks. I am trying to implement the JetPack Cookie Consent Widget and despite following your instructions the Cookie Consent bar still appears at the bottom of the page.

    Is it possible the widget is overriding the code?

  13. Keu says

    Does this still work for Twentyseventeen? The functions.php part works fine, but the header.php part doesn’t.

  14. thomas evans says

    Hello
    pls can someone here help me as how to make this responsive on any mobile device?

    i want to insert a google adsense code here for ads 728 x 90 banner sizes but any time i do so, it shows perfectly on desktops but on mobile devices it becomes weird.
    thank you

  15. Anubhav Bhatt says

    I have successfully created a header widget and It was really easy, thanks to you all. But I actually wanted it in the POSTS, not on the Homepage because I’m using Nikko Portfolio theme and it looks awful.
    Please Help.

  16. Jeffrey says

    I placed the code in my functions.php file and added my widget code in the header.php file and added my widget text and saved.
    When I move on to editing pages, upon clicking Update, I get a white screen and can’t see my page.
    I then have to go back to /wp-admin to see the dashboard. There are no console errors when I click update but just a white screen.

  17. Derek says

    This is great for that header advertizment thing, but what I want to do is add a pay pal donation button to my header. (Right side) cant believe there is no video tutorials out there on how to make a a widgetized header space to drag your pay pal widget into so that it appears on the right side of your header.. i can imagine there is alot of people who could benefit from an instructional on this.

  18. Stephen Crawford says

    This is a great tutorial, but I would like to create a widget area that can be placed above the header area would that also be possible?

  19. Joey says

    Just updated everything and it’s working great on my desktop. Now, if you could tell me how to get the widget to display on my mobile device that would be great! Did I mess something along the way?

  20. Mark says

    Hi, many thanks for writing this, it has helped me massively. However, with my website: how do I get the widget to appear at the far right hand side. When I use the option to show search field in the header, this is the place I want it to go?

    Thanks in advance! :)

  21. Linda Holiner says

    I am confused. I don’t understand how to get an image into the widget and let the user change the image. I don’t see where your image is coming from.

  22. Thomas says

    Would it be possible to make a tutorial about how to make a TopBar with sections (Social media icons, Notice, Search, Woocommerce cart).

    No plugin does really do that well

    Thanks

  23. Tim says

    If i want to add multiple custom widget areas do i need to add a new function to functions.php for each? or just add them in the area i want?

  24. fahad says

    I managed to use the widget in the navigation bar instead of the header area as I wanted to add a language toggle option at this section. I have a small problem where I can’t move the language two flags to the any horizontal location. I tried to add margin-right: 100px; to the advanced CSS section but it didn’t change. It might be something else centering all the navigation content but I want to make sure if it could be fixed with the widget.

    • Courtney says

      Hey how did you edit the code to put it in the nav bar? I’m currently trying to do the same thing without any luck.

  25. Leanore says

    When I attempt to add more than one custom widget area, I receive a 500 Error on my website. Is there a reason for this? Is it possible to create more than one custom widget area for a theme?

  26. nina says

    Hi! When i try to update the function.php file, there is this fatal error:
    Fatal error: Cannot redeclare wpb_widgets_init()
    I am not sure if i did a wrong edit. Could you help

    • WPBeginner Support says

      Hey Nina,

      This means that wpb_widgets_init function already exists in your functions.php file. You will have to replace it like wpb2_widgets_init to make it unique or remove the previous code that you added.

      Yönetici

  27. Sam says

    Hello,

    Thanks so much for this, it is really helpful.

    One issue I am running into: My widget is just a menu of a couple of text links to pages. Here is my site:

    See how the text is all the way against the right side of the header area? I would like to use a right margin to line it up under “Contact” without turning the margin area white.

    Also, would love to make the text black. :)

    Many thanks if you can help with these tweaks!

    Sam

  28. Tommy says

    Your blog is most helpful. Thank you for helping us made modifications to Twenty Seventeen. People like you make using a new wordpress theme like Twenty-seventeen much easier.

    I am relatively new to word press and would like to try some additional modifications to Twenty seventeen.

    I would like to create a new widget for wp pages. I am trying to figure out how I can take your blog information on how to make a new widget for the header and apply it to a wp page in the twenty seventeen theme. I am getting stuck.

    Could you show us now to create a new widget for a page? That would be awesome.

    Thanks
    Tommy

  29. Bobby_qw says

    Thank you very much Mr. Admin.You are teahing to us ‘how to make our own web site. l always follow your posting and l make my own web site. Thank you very much.

  30. Shane Cunningham says

    I used this and though it worked in adding a custom widget area to the top of my page, i could not get it to align with the other items in the header (company logo and nav menu) in Cherry. No matter where I put it in the header.php, it either appeared above or below the other items. I wanted to use it to create a phone number block between the logo and the nav menu. Though I could get it to center in correct spot horizontally, i could not get it to appear between them. To give you a better idea of what I need, imagine that on this very page’s header, you wanted to move the nav menu justified to the right and put your 800 number between it and the “wpbeginner” logo. How could I use this code (or a variation of it) to do that?

  31. Kristin says

    Thank you so much for this (and all) of your detailed tutorials! Could you please tell me how to implement a header widget, excluding the Homepage?

    • Massimo says

      In the code that you added to header.php change the first line:
      if ( is_active_sidebar( 'custom-header-widget' ) ) : ? >
      with this one:
      if ( is_active_sidebar( 'custom-header-widget' ) && ! is_front_page ) : ?

    • Massimo says

      Sorry, I missed something!
      The line that you have to add is:
      if ( is_active_sidebar( 'custom-header-widget' ) && ! is_front_page() ) : ?>

Bir Cevap Bırakın

Yorum bırakmayı seçtiğiniz için teşekkür ederiz. Lütfen tüm yorumların yorum poli̇ti̇kasi uyarınca denetlendiğini ve e-posta adresinizin yayımlanmayacağını unutmayın. Ad alanında anahtar kelime KULLANMAYIN. Kişisel ve anlamlı bir sohbet edelim.