WORDPRESS-JOOMLA TASARIMLARINI BEDAVA-SİTEM'E UYARLANMASI
| Wordpress-Joomla Tasarımlarını Bedava-Sitem'e Uyarlanması -Önsöz- Merhaba arkadaşlar, Bu dersimizde Wordpress-Joomla'nın nasıl Bedava-sitem ve sadece Html destekleyen sitelere uyarlanabileceği hakkında önbilgiler vereceğim.. Öncelikle şunu bilmeliyiz ki en köklü kodlama dili Html'dir ve fark etmişseniz php,asp vs olarak kodlanmış tüm sitelerin kaynak kodları Html olarak görünmektedir.. zaten bizim işimize yarayan özellik ''Kaynak Kodu'' olacak.. Örnek verecek olursak.. Aşağıda görünen kod kendi tasarımımın başlangıç kodunun PHP'ye dönüştürülmüş biçimidir..
Şimdi vereceğim kodda onun Html versyonudur..
Yani demek istediğim şudur ki kodlar birbirine döüştürülebilir ve ana kodlama dilide Html'dir.. Bunun için Wordpress veya Joomla tasarım diyoruz fakat onlar kendi kodlama dillerini oluşturup (yani css ve html (php) yerine başka bir dil üretmemişler) bir tasarım oluşturmamışlardır.. Bunun için bu iki tasarım Html destekli Bedava-sitem'e çok rahat şekilde dönüştürülebilir.. Not: Dönüştürme işlemi alttaki mesajımda anlatılmıştır.. _________________ Buyutech Splash Ekranları.. En son tumhepsiburada tarafından 16.02.2010 19:09:42 tarihinde değiştirildi, toplam 1 kere değiştirildi |
|||||
  |
|
|
tumhepsiburadatumhepsiburada.tr.gg
Offline
BS-Bağımlısı
Konum: Türkiye.:)
=> Mesaj yolla
 16.02.2010 19:08:31 Mesaj konusu: |
 |
||
| 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:
» 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:BEDAVA-SİTEM.COM-tumhepsiburada.tr.gg kullanıcısından ALINTIDIR.
