WordPress Kod Arşivim – Tema Yapımında Kullandığım Kodlar

wordpress-plugins

Merhaba arkadaşlar. Bu yazımda wordpress tema yapımı sırasında kullandığım kodları ve fonksiyonları açıklamalarıyla beraber sizlerle paylaşacağım. Aralarından bazılarını kendim yazmam gerekti. Örneğin sadece link döndüren kategori fonksiyonu vs. açıklamalarını kodun yanında yapacağım. Sayfa sayfa olması gereken kodları paylaşıyorum. Umarım işinize yarar.

Basit bir temada olması gereken sayfaları yazacağım ve ardından bu sayfalarda kullandığım kodları sırayla sizinle paylaşacağım.

 

style.css -> Tema dizininde olması gerek, temayı wordpress’ in tanıması için gerekli.

header.php-> Hemanın header dosyasıdır. Genelde temanın <html> ile </head> tagleri arasını kapsar. İstenirse body’nin bir kısmı buraya dahil edilebilir.

index.php-> Blog ana döngünün yani son paylaşılan yazıların bulunduğu sayfadır. Genelde döngüden harici olarak slider, carousel vs olur.

sidebar.php-> Sidebarların olduğu sayfadır. Genelde index şablonunda olan tüm sayfalara çağrılır.

footer.php-> Genelde </body> ve </html> tagleri arasını kapsar. Ayrıca çoğu javascript kodlarımızı footer a yazarız. (bu sayede sayfa yüklendikten sonra js kodları yüklenir ve temaya hız kazandırırız.)

functions.php -> Temada olmasını istediğimiz özellikleri fonksiyonları kapsayan sayfadır.

single.php -> Tekil yazı sayfasıdır. Bu sayfada döngülerden ulaştığımız yazıları görüntüleriz. Ayrıca yorum şablonunu bu sayfaya dahil ederiz.

comments.php-> Tema yorum şablonudur. Genelde single.php sayfasına çağrılır.

page.php-> Tekil sayfadır. WordPress’ de eklediğimiz sayfaların görüntülenmesini sağlar.

category.php -> Belirli kategorideki yazıların listelendiği sayfadır.

404.php-> Hata sayfasıdır. İçerik bulunamadı hatasının gösterilmesini sağlar.

search.php-> Arama sonuçlarını gösteren sayfadır. Bu sayfanın olması zorunlu değil zira bu sayfa olmazsa index.php üzerinden arama sonuçları listelenir.

tag.php-> Etiket sayfasıdır. O etiketteki yazıları listeler.

author.php -> Bir yazara ait bilgileri ve yazdığı yazıları gösterdiğimiz sayfa.


 

Sytle.css

WordPress tema tanıma kodları

 


 

Header.php

Html lang 

Temamızın hangi dilde olduğunu arama motorlarına tanıtır.

Meta Charset

Bu html sayfa yapısında karakter kodlamamızın hangi dilde olduğunu arama motorlarına bildirir.

Title – Sayfa başlığı:

3 parametresi vardır. wp_title(‘ayraç’, $goruntuleme, ”ayraclokasyonu’. Şu şekilde kullanabilirsiniz:

 Tema Url Yazdırma

Bu kodu genelde js ve css dosyalarının konumlarını belirtmek için kullanacağız. Echo ile kullanamazsınız çünkü zaten fonksiyonun içinde yazdırılıyor. Değişlene atamak isterseniz. Şu fonksiyonu kullanabilirsiniz;

Worpress’ e header.php yi tanıtma

Bu kodu </head> etiketinden hemen önce yani head taglerı arasında kullanmalıyız. Bu kod headerimizi wordpress’ e tanıtacak.(Zorunludur!)


index.php

Header Çağırma

 Php dosyası include etme(Tema parçası çağırma);

Bu kod inc klasöründeki slider.php yi temaya dahil eder. Ben genelde index sayfalarında slider vs varsa bunu başka bir dosyada yapıp bu kod ile çağırıyorum size de böyle yapmanızı tavsiye ederim .

Ana döngü(loop)

Öne çıkan görsel*

Öncelikle functions.php dosyasından wordpress’ e temamızın thumbnail desteği olduğunu söyleyelim. Function.php ye şu kodları ekleyin:

ardından öne çıkan görseli nerde kullanmak istiyorsak;

kullanımı öğrenmeniz açısından class ve style özelliklerini kullandım, zorunlu değil.

 Yazı linki yazdırma*

linki yazdırır a etiketi içine yazdırmalısınız.

Yazı başlık yazdırma*

Yazı özeti*

 Yazı paylaşım zamanı*

Çıktısı : 25-temmuz şeklindedir. Bir çok kullanımı vardır detaylarını codex‘ den öğrenebilirsiniz.

Yazı kategorisi*

Bu default olarak ayraçlı bir şekilde kategorileri listeler. Fakat bir kategoriyi yazdırmamak isterseniz bu şekilde olmuyor. Bu yüzden benim yazdığım fonksiyonu functions.php ye ekleyin:

ardından kategorileri yazdırmak istediğiniz yerde şu kodu yazın;

bu fonksiyon sayesinde “Slider” adlı kategoriyi yazdırmayabiliyoruz ve ayracımızı span içerisinde yazdırıp class atayabiliyoruz.

Sayfalama

Bu wordpress’ in varsayılan sayfalama mekanizmasıdır. Ben bunun yerine 1-2-3 sayfa şeklinde kullanıyorum bunun için şu kodları kullanmalısınız:

sayfalamayı göstermek istediğiniz yere

functions.php içerisine

 

Dinamik(widget uyumlu) sidebar kaybetme ve çağırma

Sidebar çağırabilmek için öncelikle sidebarımızı functions.php  ile wordpress’ e tanıtmalıyız.

Sonra sidebarımızı istediğiniz yere aşağıdaki kod ile birlikte çağırabilirsiniz.

Footer çağırma

 


 

footer.php

footer’ ı wordpress’ e tanıtma

Bu kodu body tag inin kapanışından hemen önce yazmalısınız.(Zorunludur)

Aynı şekilde burada da bir widget area oluşturabilirsiniz sidebar.php de olduğu gibi öncelikle functions.php’ den kaydetmeniz lazım.


 

single.php

Ana şablon

yazı başlığı, küçük resim, link, zaman ve kategori index.php deki kodlar ile aynı o yüzden yazmıyorum tekrar.

Yazar avatarı*

Bu kod sayesinde yazarın avatarını 35px genişliğinde post-author-img class’ ı ile yazdırabiliyoruz. Fakat bu kodda yazar sayfasına linkleme yok. Bunun için yazar linki kodunu kullanabilirsiniz.

Yazar linki*

Bu kod direkt olarak yazarın görünen adını ve linkini yazdıracaktır.

Yazı içeriği*

Bu kod yazı içeriğinin tamamını göstermemizi sağlıyor.

Yazı Etiketleri*

Bunu yapmak için hazır fonksiyonlar var fakat bana biçimlendirmesi daha kolay geldiği için bu kodu kullanıyorum.

 Yazı paylaş linkleri*

Ben genelde facebook, twitter ve g+ için paylaş linkleri kullanıyorum. Ve bunları sizle css olmadan paylaşacağım isterseniz kendiniz alıp style eklersiniz. Ayrıca google da share link generator diye aratırsanız diğer sosyal medya siteleri içinde kodları bulabilirsiniz.

 Yorum şablonunu çağırma*

Bu kod sayesinde comments.php deki yorum şablonumuzu single.php sayfasına dahil ediyoruz.

Bu sayfada yorum kodlarını paylaşmayacağım çünkü önceki yazımda bunu anlattım.

 


 

 

page.php

Bu sayfa single.php ile hemen hemen aynı tek farkı genelde sayfalarda yorum şablonunu çağırmıyoruz. Ve isterseniz sayfaları tam genişlik yapmak için sidebar ı da çağırmayabilirsiniz.


 

page-custom.php

Aslında böyle bir sayfa yok :D Bu sayfayı özel sayfa şablonları kullanabilmek için oluşturacağız.

 

Özel sayfa şablonu kodu

Bu kodu page-custom.php nin en üstüne(get_header(); fonksiyonundan da üste) yazmalısınız. Ardından wordpress admin panelden sayfa oluştururken sağ tarafta sayfa şablonunuzu seçebilirsiniz.


 

category.php ve tag.php

Bu sayfalarda index.php döngüsüyle aynı döngüyü kullanıyor. Sayfa yapısı genel olarak aynı, sadece başlık farklı:

category.php sayfa başlığı*

aynı şekilde tag.php de aynı kodları içeriyor.

tag.php sayfa başlığı*

 


 

author.php

Yazara ait yazıları listeliyor. Bu sayfayı ben genelde kullanmıyorum ama siz isterseniz diye yinede yazayım. Tek parça olarak atacağım kodun içerisinde açıklamaları yazıyor.

 

 

 


 

Özel Döngü:

üstteki iki satır arasına istediğiniz döngü fonksiyonunu yazabilirsiniz;
resim url: the_post_thumbnail_url();
başlık: the_title();
link: the_permalink();

 


 

NOT : yıldız(*) olan kodları döngü içerisinde kullanmalısınız!

 

Şimdilik aklıma bunlar geldi. Aklıma wordpress’ te kullanandığım/kullanabileceğim kod geldikçe buraya ekleyeceğim. Kolay gelsin, umarım işinize yarar.

Bu arada her türlü yorumunuzu bekliyorum  :)

 

 

Fırat Üniversitesi Yazılım Mühendisliği öğrencisi, bilgisayar ve internet bağımlısı, arada(!) oyun da oynamıyor değil.

Yorum yapmak istemez misin?

  1. 31 Temmuz 2016, 16:45

    Hocam paylaşımların çok güzel, devamının gelmesini istiyoruz. Lakin biraz daha alt düzeyde bilgiler paylaşırsan çok sevineceğiz. Mesala Php’ye yeni baslayanlara taktikler, HTML için en iyi editörler gibi. :)

    • 1 Ağustos 2016, 22:00

      Yarısını yazdığım fakat henüz tamamını yazmadığımdan yayınlamadığım “Web tasarıma başlayanlar için tavsiyeler” makalemi yazmayı hızlandırıyorum o zaman :D

  2. 28 Aralık 2016, 04:51

    Sanırım en güzel döküman bu konuda ///

  3. 12 Ocak 2017, 00:16

    Merhabalar bende amatör olarak wordpress tema geliştiriyorum sayfa tasarım eklentilerinde sıkıntı çıkıyor yaklaşık 2 aydır urasmaktayim ama çözemedim yardım edebilirsiniz bana ? Bana bu mail adresinden olumlu veya olumsuz dönüş yaparsiniz iyi çalışmalar

Yorum yapmak istemez misin?

Bir cevap yazın


Mesajınız onaylanmadan önce yönetici tarafından incelenecektir.