arama

WordPress Tema Entegre – Header.php Düzenleme

Wordpress
  • paylaş
  • paylaş
  • paylaş
  • paylaş
  • paylaş
  • Serkan Erdoğan

Serimize kaldığımız yerden devam ediyoruz. Geçen dersimizde sitemizin ana sayfasını oluşturan index.php dosyasını düzenleyerek içerikleri dinamik şekilde çekmiştik. Geçtiğimiz ders yazısını merak ediyorsanız ve ya yazımı halen okumadıysanız, bkz ; WordPress Tema Entegre – İndex.php Düzenleme

Şimdi ki ders yazımda ise sitemizin üst kısmında genel görüşü sağlayan ve hatta siteye girenleri ilk karşılayan kısım olan header kısmına bakacağız. Hatırlarsınız ki temamızı parçalarken header.php adında bir dosya oluşturmuş ve header ile alakalı kodları o kısma yerleştirmiştik. Şimdi ise bu dosyayı düzenleyerek dinamik hale getireceğiz.

Konuya daha fazla girmeden önce bir önceki dersteki gibi yapacaklarımızı liste haline getirip o şekilde ilerlemeyi düşünüyorum. Bunu için gelin sizlerle ilerleyiş sıramıza bir göz atalım istiyorum.

Ders İçeriğinin İlerleyiş Sırası

  1. Wp-head barının çekilmesi ve footer.php’de yapılacak düzenlemeler,
  2. Logo ve link gerektiren yerlerin linklerinin ayarlanması,
  3. Navbar’daki menü sisteminin oluşturulabilmesi için functions.php’ye eklenecek kodlar,
  4. Navbar’daki menünün oluşturulması şeklinde ilerleyecek olan dersimiz bu başlık ile son bulacaktır.

Wp-Head Barının Oluşturulması

WordPress ile alakası olan kişiler bunun ne anlama geldiğini biliyorlardır fakat bilmeyenler için benim yinede bir açıklama yapmam gerekecektir. Wp-Head, WordPress sistemine giriş yaptığınızda sitenizde dolaşırken sitenin en üst kısmında bulunan ve size her daim eşlik eden bir bardır. Açıklamam ile alakalı resmi aşağıya bırakıyorum zaten ne demek istediğimi kolayca anlayacaksınız.

WordPress Head Barı

Evet bu barı oluşturmak için öncelikle header.php’de en üst kısıma yani <head> taglarının arasına

1
wp_head();

Kodunu yazıyoruz ve kaydediyoruz bu işlemi gerçekleştirdikten sonra wp-head barımız hemen gelmeyecektir boşluğu oluşacak fakat eklenmeyecektir. Bunun için ise işlemin geri kalanı olan footer.php dosyamızı açıyoruz. Dosyayı açtıktan sonra ise en üst kısıma altta vereceğim kodu yazıp kaydedip tema sayfamızı yeniliyoruz ve wp-head barımız artık mevcut duruma geliyor.

Footer.php’ye yazılacak kod:

1
wp_footer();

Logo ve Link Gerektiren Yerlerin Düzenlenmesi

Bunu da aslında çok basit bir yöntem ile giderebilirsiniz. Geçmiş derslerde verdiğim bazı kodlar vardı, şimdi o kodların benzerlerini sırası ile ne işe yaradıklarını yazarak aşağıdaki listede vereceğim. Bu kodların genel adı ise BlogInfo olarak geçmektedir.

1
2
3
4
5
6
7
8
9
bloginfo('name'); //Blog adınızı yazdırır.
bloginfo('description'); //Blog açıklamanızı yazdırır.
bloginfo('url'); //Blog linkinizi yazdırır.
bloginfo('rss2_url'); //Feed adresinizi yazdırır.
bloginfo('template_url'); //Tema adresini yazdırır.
bloginfo('stylesheet_url'); //Stil dosyası yani Style.css dosyasının yolunu yazdırır.
bloginfo('version'); //Wordpress sürümünü yazdırır.
bloginfo('pingback_url'); //Geri izleme adresini yazdırır.
bloginfo('charset'); //Karakter kümesini yazdırır.

Ayrıca bunun yanında sitemizde bulunan <tittle> tagları içinde bir kod yazmamız ve dinamik hale getirmemiz gerekiyor. Bu kodları da aşağıya yazıyorum.

1
wp_title('«', true, 'right'); //Site başlığını yazdırır.

Functions.php’ye Navbar Kodlarının Eklenmesi

Evet şimdi ise sitemizde bulunan navbar’ı dinamik hale getirmemiz gerekiyor ve bunu her defasında elle yapamayız. Bu işlemi dinamik hale getirebilmek için öncelikle bu özelliği temamıza eklememiz gerekiyor. Bu özellik ekleme işlemlerini de bildiğiniz üzere functions.php dosyasından yapıyoruz. Öncelikle menü oluşturma kodunu aşağıda sizlere veriyorum.

1
2
3
4
5
//Functions.php dosyasında herhangi boş bir yere ekliyoruz.
add_theme_support('menus');
register_nav_menus(array(
'header_menu' =&gt; 'Header Menü'
));

Navbarın Oluşturulması ve Eklenmesi

Az önceki adım ile temamıza menü özelliğini ekledik şimdi ise bu özelliği kullanacağız. Öncelikle bunun için header.php dosyamızda navbar’ın olduğu yere aşağıda verdiğim kodları eklememiz gerekiyor.

1
wp_nav_menu( array( 'theme_location' =&gt; 'header_menu' ) );

Bu işlemden sonra ise menümüz oluşacaktır.  Menüden ise aşağıdaki resimleri takip ederek menü ayarlama işlemlerini yapabilirsiniz.

WordPress Menü Oluşturma-2

WordPress Menü Oluşturma-1

Bu dersimizin ise sonuna gelmiş bulunmaktayız bu işlemler ile header.php alanında yapacağımız işlemler son bulmuştur. Arama kutucuğunun çalışma mantığını ise ilerleyen derslerde anlatacağım, bir sonraki derse kadar sağlıcakla kalın.