Menü ve Reklam Alanı
Sayfayı Paylaş

THB - Ücretsiz Hizmetler

Wp Joomla Uyarlama

<< Wordpress ve Joomla'yı Bedava-Sitem'e uyarlamak için Önsöz yazımızı okumakla başlayabilirsiniz..

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 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:

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 Önsöz sayfamızı 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/ adlı siteyi ziyaret edebilirsiniz..

Anlatım tamamiyle bana aittir. Bunun için kaynak gösterilmeden lütfen sitenize eklemeyiniz..

Bugün 19 ziyaretçi (22 klik) sitemizi ziyaret etti.

Copyright 2012. THB. Tüm hakları saklıdır. Tasarımlayan: Oğuzhan Acımaz.
Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol