yakuter » Dinamik Olarak Sitil Değiştirmek

POPÜLER ARAMALAR: reklam, pazarlama, iş,
kod, wordpress, eklenti, web, teknoloji,
programlama, tasarım, ajax, linux, Pardus, blog

26 Kasım 2006

Dinamik Olarak Sitil Değiştirmek

Etiketler: betik, Css, dinamil, Javascript, kod, stil değiştirmek
Kategori Css, Web | Toplam 491 kez okunmuş | 2 Yorum

Sitil diyerek artık günümüzün vazgeçilmezi olan sitelerimize şekil veren CSS dosyalarını kastediyorum. Farzedin ki siteniz turuncu ağırlıklı fakat kullanıcıların sitenizin rengini istedikleri zaman değiştirebilmesini istiyorsunuz. Bunu yapmak düşündüğünüzden çok daha kolay. Tek yapmanız gereken sitil dosyasınızın(.css) dinamik olarak değiştirilebilmesini sağlamak. Gelelim bunu nasıl yapacağınıza.

Bunu yapmanın birçok farklı yolu var. Genel olarak makalelerimde yapmaya çalıştığım gibi bu yazımda da amacım size işin mantığını anlatmak. Üzerine kat döşemek size kalmış ;)

Ben kendi yöntemim olan php ile çerezleri kullanarak sitenin sitil dosyasını değiştirmeyi göstereceğim. Çalışma mantığı şöyle:

Kullanıcı sitenizde Mavi ve Turuncu isimli iki bağlantı görecek. Mavi'ye tıklayınca degistir.php isimli dosyaya mavi değişkeni gidecek. Bu dosya sizin belirleyeceğiniz bir ismiyle içinde mavi değerini almış değişkeni barındıran bir çerez yaratıp yeniden kullanıcıyı sitenize yönlendirecek. Siteniz, açılırken önceden oluşturulmuş çerezi kullanıcının bilgisayarında arayacak ve eğer yaratılmışsa siteniz, kullanıcının belirttiği renkte açılacak site.

Öncelikle sitemin "turuncu.css" ve "mavi.css" isimli iki adet sitil dosyası olduğunu varsayıyorum. Turuncu'da tüm linklerin ve başlıkların turuncu, mavide de mavi olduğunu düşünün.
Not: Wordpress için düşünürsek mutlaka temanızın bir de "style.css" dosyası olması gerekiyor.

Yazının devamında belirteceğim "stil_degiskeni" yazan yerlere kendi isteğiniz doğrultusundadiğer sitelerden ayırt edilebilecek bir isim yazınız. Sitenizin ana dizininde "degistir.php" isimli bir dosya yaratın ve içine şu kodu ekleyin:

Düz Metin

<?php
$theStyle = $_GET['stil_degiskeni'];
setcookie("stil_degiskeni", $theStyle, time()+36000, "/", "");
header("Location: index.php");
exit;
?>

Sitenizin/temanızın < head > ... < / head > etiketlerinin arasına şu kodları yazın.

Düz Metin

<?php
if (isset($_COOKIE["stil_degiskeni"])) $cerez=$_COOKIE["stil_degiskeni"];
switch($cerez)
{
case "turuncu":
break;
case "mavi":
case "":
$cerez = "mavi";
break;
}
$adres=get_bloginfo('template_directory'); //Eger wordpress degilse buraya sitenizin adresini yazin.
$cerez='<link rel="stylesheet" href="'.$adres.'/'.$cerez.'.css" type="text/css" media="screen" />';
echo $cerez;
?>

Bu kodun anlamı şudur. Eğer çerez oluşturulmuşsa kullanıcının bilgisayardaki çerezden sitenin renk değişkenini alıyor ve siteniz belirtilen sitil dosyası ile açılıyor aksi halde yani çerez yaratılmamışsa yine varsayılan olarak mavi.css dosyası ile açılacaktır. Eğer Wordpress için oluşturuyorsanız bu dediklerimi sitil dosyalarınız temanızın içinde olmalı.

Son olarak kullancılarımıza sitemizin rengini değiştirecekleri bağlantıları sunucaz.

Düz Metin

<a href="degistir.php?stil_degiskeni=mavi&phpMyAdmin=kg4cOVPgi2dQIEGuJWfgcJ1d8o4">Mavi</a>
<a href="degistir.php?stil_degiskeni=turuncu&phpMyAdmin=kg4cOVPgi2dQIEGuJWfgcJ1d8o4">Turuncu</a>

Umarım beğenirsiniz. saygılar sevgiler ;)

“Dinamik Olarak Sitil Değiştirmek” için 2 Yorum

1 inFoAnaLiZ
20 Ekim 2007, 21:11

aynı işlemi javascript kullanarak yapmıştım ilgilenen arakdaşlar için yazmam da sakınca yoktur umarım. style dosyanızın içinde oluşturduğunuz herhangi bi stil tagı nı cookie ile pc ye kaydediyoruz bu örnekten yapamıyabilirsiniz biraz karışık oldu :) mail atarsanız örnek dosya gönderebilirim.

var cookieDate = new Date();
cookieDate.setTime(cookieDate.getTime() + 24 * 60 * 60 * 1000);
document.cookie = “cookie1=stil_adi;expires=” + cookieDate.toGMTString();

çağırmak içinde :

var cookieData = new String(document.cookie);
var cookieHeader = “cookie1=”;
var cookieStart = cookieData.indexOf(cookieHeader) + cookieHeader.length;
var cookieEnd = cookieData.indexOf(”;”, cookieStart);

if(cookieEnd == -1){
cookieEnd = cookieData.length;
}

if(cookieData.indexOf(cookieHeader) != -1){
document.body.className = cookieData.substring(cookieStart, cookieEnd);
}
else {
document.body.className=”stil_adi”;
}

Not: stil_adi yazan yerlere kendi oluşturduğunuz stil adını girmelisiniz.
2 Th3.Azad
09 Mart 2008, 22:35

yakuter abı elıne saglık guzel anlatım olmuş ama kafama takılan bişi oldu iznin ile sormak istiyorum
” Mavi ”

burdaki

” &phpMyAdmin=yYJagP2GMTjYWKdoJvI28ho4Hl3 ”

sorgusu neye göre oluşturuldu anlayamadım açıklarsan sevinirim
kolay gelsin..