Program Yapmak | Programcılık Hakkında Her Şey | VİSUAL BASİC 6.0 | C, C++ ve C# Yazılım Dilleri | VB.NET Yazılım Dili

Wordpress Joomla Tasarimi Tr Gg Sitene Uyarla

Wordpress-Joomla Tasarımlarının Bedava-sitem'e uyarlanması

Wordpress ve Joomla'yı çevirmek için öncelikle bir tasarımı ele alalım.. Zaten Joomla ve Wordpress'in tasarım kodlama dilleri aynı (PHP) bunun için tek Wordpress tasarım işimizi görecektir..

Genellikle ilgilendiğim Wordpress tema sitesi www.qualitywordpress.com u kullanıyorum..
Bu adresten Artworks katagorisinden rGrundge Magazine adlı tasarımı Bedava-sitem'e uyarlıyalım öncelikle tasarımın kodlarını indirip gerekli resimleri ve kodları upload edelim..

İndirdiğimiz tasarımın içinden çıkan dosyalar:




Gördüğünüz gibi sadece php kodları mevcut html kodlamasına dair hiçbir şey yok.. Bu klaösr bizim sadece sitemize upload edeceğimiz resimler için işimize yaraıyor ve hazır Css kodunu burdan buluyoruz..

Deneme sitesi olarak kendi sitem olan thbdesign'i kullandığım için resimleri oraya upload edeceğim..

Şimdi upload ettiğimiz tüm resimleri style.css dosyası yani bizim sitemizin stil kodlarının bulunduğu yere aktaralım..

Resimleri tek tek elle yapıştırmaktansa bağlantı adresi ve Notepad'de kullancağımız CTRL+H fonksiyonunu kullanabiliriz..

Örnek olarak tasarımımızın bir resim adresi https://img.webme.com/pic/t/thbdesign/s3.gif
bu adresin sadece isim ve uzantısını siliyoruz yani şu hale gelecek. https://img.webme.com/pic/t/thbdesign/ bu hale geldikten sonra Notepad'de CTRL+H fonksiyonu ile açılan pencede Aranan kısmına style dosyasındaki orjinal resim adreslerinin images/ kısmını yazıyoruz.. Yeni Değer kısmınada https://img.webme.com/pic/t/thbdesign/ yı ekledikten sonra tamama tıklıyor ve tüm resim adreslerini değiştirmiş oluyoruz..




Stil kodumuzda gerekli işlemleri yaptıktan sonra
» Tasarım Ayarları
» Css Design tasarımını seçtikten sonra
» Css Kodu kısmına aşağıdaki kodu ekleyelim:

Kod:

h1#title{display: none;}
h2#title span {display: none;}
div.header{display: none;}
li.nav_element{list-style-type: none;}
li.nav_element{display: none;}


» Bu kodu ekledikten sonra style (stil) kodunu ekleyelim ve css kodunu tamamlayalım..
» İsteyenler klasör içinden çıkan İE 6 için ayar kodunuda ekleyebilirler.

Şimdi buraya kadar uyguladıklarımız Template ile aynı işlemlerdi..
Tasarımın üzeri ve altına eklenecek kodlarımızı bulmaya geldi sıra:
Öncelikle üstteki mesajımı okumuş iseniz orada Kaynak kodundan az buçuk bahsetmiştim. Tasarımı indirdiğimiz sayfadan demo sayfasına girelim ve Tarayımızın kaynak gösterme penceresini açalım.. (Not: Bundan sonrasını resimli olarak anlatacağım.)












Bütün bu kod işlemlerini yaptıktan sonra adım adım Wordpress ve Joomla'yı Bedava-Sitem'e uyarlamayı özetleyelim..

Ana işlemler:
» 1. Adım olarak resimleri kendi sitemize upload ettik
» Sonra resimleri css koduna ekledik
» Css koduna resimleri eklendikten sonra Css Design tasarımında Css kodu kısmına style (stil) kodunu ekledik.

Tasarımın üstü kodlarını ayarlama:
» Tasarımın demo görünümüne giriş yapıyoruz.
» İçeriğin ilk cümlesini kopyalıyoruz..
» Kaynak göstericiye girip kopyaladığımız cümleyi kaynağın içerisinde aratıyoruz.
» Bulduğumuz cümle bizim içerik katmanına yöneltecektir..
» <div="xxx"> şekilde olan içerik başlangıç katmanını buluyoruz.
» Kaynak içerisinde başlangıçta gördüğümüz body tagı ile <div="xxx"> arasındaki kodları kopyalıyoruz (body tagı hariç <div="xxx"> içerik başlangıç tagı dahil olacak şekilde).
» Son olarak o kodları Tasarımın üzerine ekliyoruz..

Not: <div="xxx"> xxx herhangi bir şey olabilir.. Katman adının değişken olabileceğini göstermek için xxx kullanılmıştır...

Tasarımın altı kodlarını ayarlama:
» <div="xxx"> şeklinde başlayan içerik katmanının </div> şeklinde bittiği yeri buluyoruz bunun için demo sayfasına geri dönüp içeriğin en altında ki cümleyi kopyalayıp kaynak içerisinde arattığımızda en alttaki cümlenin altında </div> şeklinde kapanış katmanı bulunmalıdır..
» Kapanış katmanı olan </div> en alttaki </body> tagını buluyor ve </div ile </body> arasındaki kodları kopyalıyoruz. (</body> tagı hariç </div> içerik kapanış katmanı dahil olacak şekilde).
» Sonra tasarımın altındaki kodlar bölümüne kodu yapıştırıyoruz..

Not: Bundan sonra aynı template düzenler gibi kodları sitenizin içeriği ve kendi zevkinize göre düzenleyebilirsiniz..

Eğer örnek kodlar ve tasarımın önizlemesini görmek istiyorsanız: http://thbdesign.tr.gg/ ziyaret edebilirsiniz..

Not: Anlatımda kullanılan tüm linkler anlatım amaçlıdır.. Reklam ile ilgili hiçbir beklentimiz yoktur.. Tek amacımız Tr.Gg'de genel anlatımı geç kalan Wordpress-Joomla'yı uyarlamayı anlatmak..

Anlatım tamamen bana aittir bunun için kaynak göstermeden sitenize eklemeyin!

Kaynak: tumhepsiburada | tr.gg/forum
Sincan Laptop tamiratı ile alakalı içeriklerin bulunduğu web siteden bilgilere ulaşabilirsiniz. Sincan'da laptop tamiratını en iyi yapan yerleri sorgulayabilirsiniz. Cihan KOÇ
=> Sen de ücretsiz bir internet sitesi kurmak ister misin? O zaman burayı tıkla! <=