WordPress Tema Yapımı #Ders2

İlk dersimizde wordpress tema yapımına giriş yapmış ve style.css dosyamızı oluşturmuştuk. İlk dersimizde kodlayacağımız temayı aynı olsun beraber kodlayalım demiştim. İndirdiğiniz dosya içeriğinde resimdeki gibi dosyalar göreceksiniz.

İndirdiğimiz template içeriği..

templatemo_style.css ‘i ilk dersimizde style.css ‘e eklediğimiz için bununla yapacağımız bir işlem bulunmuyor.

index.html ve index.php, header.php ‘yi Notepad++ ile açıyoruz. index.html ‘yi de tarayıcınızla açın alacağınız kısımları görmeniz gerekiyor.

Header.php için alacağımız kodlar.

Header.php Yapımı

Açtığınız boş header.php ‘ye alttaki kodu ekleyin.

Dipnot: Şayet farklı bir template yapıyorsanız javascript v.b kodlar mevcutsa bunlarıda ilgili alanlara eklemeniz gerekir. Bu temada olmadığı için üsteki kodlar yeterlidir. Bu işlemin kodu bu sayfada da yer alıyor.

Üstteki kodları ekledikten sonra templatedeki logo ve menüdeki linklerin kodunu header.php ‘ye eklememiz gerekiyor. Tabi wordpress kodları yapılmış haliyle..

Template içeriğindeki kodlar.

Home
Archives
Recent Posts
Photo Gallery
Company
Contact Info.

Üsteki kodların wordpress kodları ile düzenlenmiş hali.

Ana Sayfa

templatemo_menu_section divi içerisindeki menü için sayfaları gösteren wordpress kodunu kullandık.

İndex.php Yapımı 1.Aşama

Sadece alttaki kodu index.php‘yeekleyin.

Bu işlem sonrası sitenizin görünümü için themes klasörüne şu ana kadar yaptığımız kısmıyla yükleyip önizleme yapabilirsiniz. Header.php ‘nin yapılı olduğunu göreceksiniz.

Önizleme:

Gördüğünüz gibi buraya kadar bir sorun gözükmüyor. Ana sayfa ile yan yana olan sayfalar sitenizdeki sayfa linklerini otomatik çeker.

İndex.php Yapımı 2.Aşama ve Sidebar.php’yi Çağırmak

İndex.php‘ ye eklediğimiz kodun geri kalan işlevlerini ve anasayfada gelecek yazılarımızı listeyeceğiz.
Template içerisindeki kodlar.

Blog Post Title One goes here


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nec dui. Donec nec neque ut quam sodales feugiat. 
Nam vehicula dapibus lectus. Integer imperdiet pretium dolor. Vivamus felis. Vivamus vulputate vehicula mi. Maecenas consectetur purus. 
Vestibulum id mi vitae nunc vulputate ullamcorper. Donec feugiat orci sed sapien. Fusce risus sem, egestas quis, imperdiet id, pellentesque vel, tortor. Fusce ante. Nunc at mi nec urna mollis ullamcorper.
Quisque ut odio. Etiam fringilla vestibulum nulla. Suspendisse venenatis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi dapibus dolor sit amet metus suscipit iaculis. Quisque at nulla eu elit adipiscing tempor. 
Nunc at lectus. Curabitur eros massa, auctor sed, viverra vel, vestibulum vitae, leo. Mauris sapien est, placerat vitae, rhoncus eu, feugiat id, elit. Suspendisse auctor accumsan ipsum. Etiam pretium. Duis id turpis in massa vulputate ultrices.



Posted By: Site Admin

Category: Flash Templates

Date:  20 September 2024                    




Blog Post Title Two goes here


Pellentesque lectus justo, fermentum in, ornare vitae, vehicula eu, felis. Duis faucibus, massa vitae dictum facilisis, ipsum nibh facilisis nisi, ut scelerisque metus enim in tortor. 
Mauris in sapien in massa pellentesque viverra. Quisque venenatis fringilla eros. Etiam in lorem ac nulla imperdiet sodales. Phasellus in justo at lectus pulvinar ultrices. Mauris ultrices sollicitudin turpis. Fusce non lacus et lorem ornare interdum. 
Nunc eget urna. Mauris vestibulum felis eget tortor. Praesent mattis varius quam. Vestibulum ullamcorper ipsum nec augue. Vestibulum auctor odio eget ante. Nunc commodo, magna pharetra semper vehicula, dui ligula feugiat elit, et euismod nunc orci ut libero.




Posted By: TemplateMo

Category: CSS Templates

Date: 15 August 2024

Üsteki kodlar yazılarımızı gösteren işleve alttaki kodlar ile dönüşecektir. Tabi ben kodların arasında karşılaştırdığınızda göreceksiniz sidebar.php ‘yi çağıran koduda ekledim. +++++++++ ile ayırdım.

+++++++++





+++++++++









  




Yazar: 

Kategori: 

Tarihi: 

Yorum:

Tekrar hatırlatmak isterim. Kodları karşılaştırın normal templatedeki yerlerine eklediğim wordpress kodları ne işe yaramış anlayacaksınız. Bunun için ilgili wordpress kodları yazıma bakabilirsiniz.

Üsteki işlemden sonra sayfamızı şimdilik kaydedin. (Sonrasında yine açıp footer.php kodu ekleyeceğiz.)

Sidebar.php İçerik Yapımı

Template içeriğindeki yan menü(sidebar) kodları.

Advertisements








                        
 






Categories



Web Design
JavaScripts
CSS Templates
Flash Templates







About This Blog


This is a free  website blog template provided by TemplateMo. Feel free to download, modify and use this layout for any blog  templates.

Boş olan sidebar.php dosyamızı açıp alttaki kodları ekliyoruz.

Sponsor / Reklam








                         
 






Kategoriler











Arşivler

Üstteki kodlarda reklam alanındaki resim yolu için wordpress kodu ekledik. Kategoriler alanını çağıran kodu ekledik ve “About This Blog” alanını Arşivler olarak değiştirdik.

Not: Sidebar.php ‘de bu alanları bileşen olarak yaparsak direk Görünüm > Bileşenler kısmından düzenleyebileceğiz. Tabi reklam alanı kısmınıda tema paneli yaptığımızda ordan kontrol edilecek şekilde düzenleyeceğiz. Epey uzun bir ders olacak gibi. Takipte kalın 3. Ders ile devam edeceğiz. 😉