Tema desteği eklemek

0
225
views

tema destegi

Bu yazıyı  yayınlamak için sanırım baya  geç kaldım. Yinede kendimce  codex.wordpress sitesinden aldığım örneklerle anlatmaya çalışacağım dilim döndüğünce.  Bildiğini gibi v3 çıktıktan sonra temanın belirli yerlerine farklı menüler  ekleyebiliyoruz. Ayrıca  bu desteği de ekledikten sonra Admin paneli>Görünüm>Menüler  diye bir sekme eklenecektir. Bu bölümden Kategorileriniz ve sayfalarınız  için yeni menüler oluşturarak  temaya ekleyeceğiniz menü desteği sayesinde temanızın farklı yerlerine farklı kategori  yada sayfalar ekleyebilirsiniz. Sitenin en üstü (header), en altı (footer) ve dilerseniz sidebarda bile menü görüntülenmesini sağlayabilirsiniz.

1. Öncelikle Görünüm>Düzenleyici sekmesinden   menü desteği eklemek istediğiniz şablonu seçip function.php dosyasını  açın ve içine aşağıdaki kodu ekleyin ve function.php dosyasını güncelleyin.

2.  Şimdi sıra geldi menüyü şablonumuza  eklemeye. Yukarıda  kullanabileceğimiz iki adet menü kodu verdik. Primary ve Secondary diye. Primary menüyü  çağırmak için aşağıdaki kodu kullanıyoruz.  Nerede görünmesini istiyorsanız oraya yerleştirin. Header.php yada index.php  dosyalarına  ekleyebilirsiniz aşağıdaki kodları. Yada birini  header.php dosyasına diğerini de footer.php dosyasına ekleyin. Karar size kalmış.

Primary çağırma kodu :

Secondary çağırma kodu :

 

Artık menülerimiz hazır. Eğer doğru yapmışsanız  sonuç olarak aşağıdaki gibi  gözükecektir.

destek

 

Birine sayfaları ekledim diğerine de kategorileri ekledim. Sıra geldi  bunlara  Css  ile ayrı ayrı şekil vermeye.

3. Ben daha öncesinden her menü  için farklı Css kodları hazırladım. Bu yüzden çağırma kodlarını da kendi belirlediğim Css sınıfları ile göstermek istiyorum.

Primary çağırma kodu :

Şimdi  Css sınıflarını da belirledikten sonra sıra geldi Css kodlarını eklemeye. aynı function.php yi açtığınız gibi style.css dosyasını da açın ve içine aşağıdaki Css kodları ekleyip dosyayı güncelleyin.

Primary artık kullanıma  hazır. Sonuç olarak aşağıdaki gibi mavi renkli bir görüntüsü olacak. Daha sonra isterseniz  renklerini değiştirebilirsiniz. Yanlız  tek seviye olduğu için alt kategoriler  eklerseniz  bozuk görünebilir. Yada alt kategoriler görünmeyebilir. Bu tek seviyelidir. Yönetim panelinden sayfa sıralamalarına  dikkat etmediğim için böyle ters bi numaralandırma  oluştu. Yönetim panelinden kategori ve sayfa  sırasını kendiniz  belirliyorsunuz.

destekheader

 

4. Primary  bittiğine göre  Secondary için de bir tane hazırlayalım. Öncelikle aşağıdaki kodu menünün olmasını istediğiniz  bir yere  ekleyin.

Şimdi de sıra geldi Css kodlarını eklemeye. Aşağıdaki Css kodları style.css  dosyasının içine kaydedin.

Secondary için de  Css kodlarını kaydetme işlemini bitirdiyseniz eğer sonuç olarak aşağıdaki gibi  bir menünüz  olacak. Arkaplan rengi yok. Üst ve alt kısımda ince border ile  görünmesini sağlayan iki çizgi var. Mouse ile linklerin üzerine geldiğinizde link arkaplanı turuncu oluyor ayrıca açılan alt kategori çerçevesi de turuncu oluyor. alt linklerin üzerine mouse geldiğinde linklerin arkaplan rengi beyaz  rengine  dönüşüyor. Bence  gayet zarif  ve olduğu gibi kullansanız sitenize farklı bir görünüm vermeye yeter. Değiştirip değiştirmemek size  kalmış tabi. Bu haliyle  her türlü  site rengine uyum sağlayacağını düşünüyorum.

SecondaryTamam

 

 

 

Arkaplan desteği :

Hazır  tema desteklerinden bahsetmişken konuyu  biraz daha genişletelim. Yönetim panelinden bazı şablonları önizlediğimizde  sol tarafta  fazladan birkaç tane özellik olur.  Aşağıdaki resimde  görüldüğü gibi.

supports Bazı şablonlarda herhangi bir Css  kod  bilgisine ihtiyaç olmadan önizleme  bölümünde  arkaplan rengi değiştirme seçeneği eklenebiliyor.  Aşağıdaki kodu kullanarak şablonunuza bu özelliği kazandırabilirsiniz. Bu kodu alıp function.php dosyasına kaydedin

Bu kodu ekledikten sonra ön izleme bölümünden arkaplan rengini değiştirebilirsiniz artık.

 

Bileşen alanları oluşturma :

Çoğu yerde  merakla araştıran kişiler vardır. Sidebar yada footere  nasıl fazladan bileşen alanları ekleyebilirim diye. Daha öncesinden yapmaya çalıştığım ama bitiremediğim Maykıl şablonunda kullandığım bileşen alanlarını sizlerle paylaşmak istiyorum. Sidebar  bölümü için  bir tane ve footer bölümü için de  dört tane bileşen alanı hazırlamıştım kendim için. Sizlerde  aynı şekilde alıp temanızda kullanabilirsiniz eğer bileşen alanlarınızın eksikliğinden şikayet ediyorsanız. Aşağıdaki kodu function.php dosyası içine kaydedin.

  • ‘name’ : Bileşe nalanının adı
  • ‘id’ : Çağıracağımız bileşenin idesi
  • ‘before_widget’ : Bileşenden önce ne gelsin ? Buraya bileşen için hazırladığınız Css tasarımını ekleyebilirsiniz. Aynısı  alttaki seçenekler için de geçerli.
  • ‘after_widget’ : Bileşenden sonra ne gelsin ? Genelde  sadece </div>  diye olur ama bu bileşen alanını  kaç tane  div içine eklemenize bağlı tabi.
  • ‘before_title’ : Bileşen başlığından önce ne eklensin ? Gördüğünüz gibi benim eklemiş olduğum class=”footerTitle” ve span kapatma işlemi de aynı şekilde. After titlede görebilirsiniz.
  • ‘after_title’ : Bileşen başlığından sonra ne gelsin ?

Bunlar için gerekli ayarlamaları da Css ile yapmanız gerek.

Şimdi  sıra geldi  bileşen alanlarımızı  sayfaya çağırma. Sidebar.php dosyasını açalım ve içine aşağıdaki kodu ekleyelim. Böylelikle  function.php de belirlediğimiz  bileşen alanlarını sidebara çekebiliriz.

Footer bölümüne  bileşen alanı eklemek  için footer.php  dosyasını  açıp içine aşağıdaki kodu kopyalayın. Dört tane bileşen için hazırlanmış çağırma kodu.

Bu kodları da ekledikten sonra bileşen alanları artık kullanıma hazırdır.

Resmi farklı boyutlarda yükleme

Farklı boyutlarda  resim yükleme nedir ve ne işinize yarayacak ?

Eminim çoğu kişi biliyordur  Wordpress yönetim panelinde  bir yazıya resim yüklerken yüklemiş olduğumuz resim farklı farklı boyutlarda bir kaç tane olarak yüklenir. Başlarda bu durum benim canımı sıkan bir olaydı. Hani neden durduk yere  1 resmi 3 – 4  defa yüklüyor diye söylenirdim kendi kendime.

Diyelim ki bir tane  tema  hazırlıyorsunuz yada temanıza  benzer yazılar gib ekstra bir özellik yükleyeceksiniz. Yazıların altında  gösterilen benzer  yazılara  ait resimler  için 50×50 piksellik bir  resim oldukça iyi bir boyuttur. Hatta 100×100 bile yapabilirsiniz. Bu karar size ve tasarımınıza kalmış birşey. Yazıya  yüklediğiniz  resim boyutu örneğin 4 mb ve  siz  öne çıkarılmış görseli  benzer yazılara çağırdınız. Yazıların altında da  toplamda  6 tane  resimli benzer yazı çıkarsa eğer 4×6 = 24mb alan eder. Ama  böyle değilde  yüklediğiniz resimler  farklı boyutlarda  bir kaç tane  olarak yüklenirse eğer o zaman isteğinize  göre küçük boyda bir resim çağırıp yazının altında görünmesini sağlayabilirsiniz.

Codex.wordpress sitesinden olduğu  gibi aldığım resim boyutlandırma kodları.

Yukarıdaki kod yardımıyla 640 pikselden daha büyük olan resimler öncelikle 640 piksel (büyük), 300×300 piksel (orta) ve 150×150 piksel (küçük) olarak kaydedilecek. Birde  bunun tam boy olanını da eklersek toplamda  4 tane resim yüklenmiş olacak. 100×100 pikselden daha küçük resimleri de olduğu gibi kaydedecek. Bu boyutları hazırladığınız  temalara ve tema özelliklerine göre değiştirebilirsiniz. Mesela anasayfada 500piksel genişliğinde bir çerçeeye 640 piksel resim çağırmak sitenizi sadece yavaşlatacaktır.

Şimdi sıra  geldi bu resimlerin her birini ayrı ayrı çağırmaya. Thumbnail (küçük), medium (orta), large (büyük) ve full (tam boy) resimleri çağırmak için aşağıdaki kodları kullanabilirsiniz.  ‘alignleft’ sizin Css  sınıfınızdır.

Yani düzenlemek için  .alignleft { buraya css değerleri } kullanmanız gerekiyor. Yada kendi hazırlamış  olduğunuz bir Css sınıfını alignleft ile değiştirebilirsiniz.

Altı üstü bir menü desteği eklemekten bahsedecektik konu  buralara kadar uzadı.  Bunlar  dışında temalar  için kullanılabilen destekler yazı formatı,  otomtik rss beslemeleri oluşturma ve header için banner  yükleme diye biliyorum. Banner ve yazı formatı  pek işinize  yaramayabilir. Otomatik rss beslemeleri için de  aşağıdaki  kodu function.php dosyasına yükleyebilirsiniz.

Sayfaya  çekmek için

Örnek :

 

1 oy (1 votes, average: 5,00 out of 5)
Loading...
Önceki İçerikVücuda ejderha dövmesi yapma
Sonraki İçerikÖnceki konu-sonraki kodu

1983 doğumlu, olmayan bir çocuk babası, espirili ve kendini cana yakın zanneden biri işte. Daha ne olsun ?

Paylaş

CEVAP VER

Please enter your comment!
Please enter your name here