WordPress Quicktags API Kullanımı

Aşağıdaki resimde görmüş olduğunuz Metin düzenleme alanı ile ilgili butonların eklenmesini sağlayan bu API kullanımı ise resim aşağısında görebileceğiniz şekilde oluyor.

Aslında bu kod tamamıyla javascript ile ilgili bir durum. Bir PHP bilgisini pek gerektirmiyor. Ama eklenti yapımcıları ve tema yapımcılarının kendi özelliklerini katmasına fayda sağlayacak bir API olduğunu söyleyebilirim.

QTags.addButton( id, display, arg1, arg2, access_key, title, priority, instance );

Buradaki argümanların açıklamaları ise şöyle;

id (gerekli) Butonun kullanılacak ID bilgisi
display (gerekli) Butonun html adı.
arg1 (gerekli) Kod eklemek için bir başlangıç alanı "<span>" gibi ya da başlangıç cümlesi gerektiren açılış argümanı
arg2 (opsiyonel) Kod eklemek için bir kapanış alanı "</span>" gibi "<hr />" gibi kodlari içinse opsiyonel. 
access_key (opsiyonel) Butona erişmek için kısayol tuşu
title (opsiyonel) Butonun üstünde görünecek isim
priority (opsiyonel) Butonun önceliği. 1-9 arası ilk satır, 11-19 arası ikinci satır, 21-29 arası üçüncü satırda görünüt
instance (opsiyonel) Sınırlama için bir bölüm. 

Gördüğünüz gibi bir

<strong></strong>

kodu eklemek için bile bir Quicktag eklenebilir. Keza WordPress Codex alanından alınmış bir örneği aşağıda sizinle paylaşıyorum.

// metin editörüne ekstra butonlar ekleyelim
function appthemes_add_quicktags() {
    if (wp_script_is('quicktags')){
?>
    <script type="text/javascript">
    QTags.addButton( 'eg_paragraph', 'p', '<p>', '</p>', 'p', 'Paragraf etiketi', 1 );
    QTags.addButton( 'eg_hr', 'hr', '<hr />', '', 'h', 'Yatay çizgi etiketli', 201 );
    QTags.addButton( 'eg_pre', 'pre', '<pre lang="php">', '</pre>', 'q', 'PHP formatında pre etiketi', 111 );
    </script>
<?php
    }
}
add_action( 'admin_print_footer_scripts', 'appthemes_add_quicktags' );

Yukarıdaki kodu temanızın içerisinde yer alan functions.php içerisine yerleştirebilirsiniz. Bu php fonksiyonu sizin metin editörü içerisine WordPress Quicktags API kullanarak ekstra butonlar eklemenizi sağlar. Bu örnekte paragraf etiketi açacak bir buton, yatay çizgi ekleyecek bir buton ve özel bir kod reklendiricisi için kullanabileceğiniz PHP dilinde olduğunu eklemiş olan bir pre etiketi için buton eklemiş olacak.

Yukarıda da bahsettiğim üzere bu API javascript ile desteklenmiş, örnek kodda görebileceğiniz gibi admin_print_footer_script aksiyonuna eklenti olarak quicktags javascript dosyası çağırılmışsa bu butonları ekle komutunu javascript dilinde eklemiş oluyoruz.

Bu ve daha fazla bilgi için Sizi WordPress Codex sayfasına alalım. Tıklayınız…

Bunun önüne geçmek için functions.php dosyanıza ekleyeceğiniz ufak bir kod ile sitenizi biraz daha güvenli hale getirebilirsiniz.

Kötü amaçlı linklerden korunmak

Belli açıkları denemek için sitenizin üzerinde link deneyebilirler. Bunları algılayan ve karşı tarafa hata verdirecek olan ko aşağıdaki gibi. Yukarıda da dediğim gibi functions.php dosyasına eklemeniz gerekli.

global $user_ID; if($user_ID) {
    if(!current_user_can('administrator')) {
        if (strlen($_SERVER['REQUEST_URI']) > 255 ||
            stripos($_SERVER['REQUEST_URI'], "eval(") ||
            stripos($_SERVER['REQUEST_URI'], "CONCAT") ||
            stripos($_SERVER['REQUEST_URI'], "UNION+SELECT") ||
            stripos($_SERVER['REQUEST_URI'], "base64")) {
                @header("HTTP/1.1 414 Request-URI Too Long");
                @header("Status: 414 Request-URI Too Long");
                @header("Connection: Close");
                @exit;
        }
    }
}

Selametle

Siz de bunun gibi bir jQuery eklentisi yazabilirsiniz. Çok basit olanını size aktaracağım. Aşağıda anlatacağım eklentiyle bir linke renk değişikliği komutu vereceğiz. Sonra da bunu özelleştirilebilir yapacağız.

jQuery Eklentisi Yazmak

Aşağıdaki videoyu da izleyebilirsiniz :)

Öncelikle jQuery.noConflict() modunda gitmemiz gerekiyor. Bunun amacı javascript eklentileri ve kütüphaneleri arasında süper popüler olan $ karakterinin çıkartabileceği çakışmaları engellemek. Ayrıca eklentiler (document).ready() fonksiyonunda çağırdığınız basit jQuery kodlarına benzemeyecekleri için kendileri başlı başına bir fonksiyon olmak zorundalar. jQuery kütüphanesi bu fonksiyonun içerisinde $.fn yapsıyla kendi eklenti tanımımızı yapacağımız şekilde yapıyı destekler. Bizim eklentimizin adı “linKrenklendir” olsun. Aşağıda göreceğiniz şekilde bu tanımı $fn.linKrenklendir yapısıyla tanımlayacağız. Ve eklentimizi tüm sitedeki linklerin yeşil renge sahip olması için yapılandıracağız. Hiçbir fazla çabaya gerek kalmadan direkt eklenti içine rengimizi ekleyeceğiz. Buna göre de aşağıdaki en basit haliyle kodumuz şöyle görünecektir.

(function ( $ ) { //Bahsettiğim jQuery.nonConflict durumu için olan başlangıç
    $.fn.linKrenklendir = function() { //fonksiyon tanımımızı yapıyoruz
        this.css( "color", "green" ); //uygulanacak renk bilgisi
        return this;
    };
}( jQuery ));

Aslında bu fonksiyon sadece linkleri değil, uygulanabildiği tüm yazıların renklerini yeşile çevirmeye yarar. Ama biz bunu şimdilik linkler için kullanalım. Bunu bir dosya olarak kaydedelim. linkrenklendir.js adında bir dosyamız olarak dursun bu. Şimdi bunu jQuery ile birlikte sitemizde çağıralım ve uygulayalım.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="dosyayiattiginizkonum/linkrenklendir.js"></script>
<script type="text/javascript">
    jQuery.(document).ready(function($){ //site içindeki jQuery.nonConflict kuralını uyguladık.
        $('a').linKrenklendir(); //fonksiyonumuzu çağırdık ve linkleri yeşile boyadık :)
    });
</script>

Gördüğünüz gibi fonksiyonu yazdığımız javascript dosyasını çağırdık ve sonrasında tek yapmamız gereken yazdığımız fonksiyonu istediğimiz elemente, yani tüm linklere uygulamak oldu. Bunu yaptığınızda sitenizdeki tüm linkler yeşil renge bürünecektir. Umarım şimdiye kadar olan kısmı anlatabilmişimdir.

jQuery Eklentisini Geliştirmek

jQuery eklentileri geliştirilebilirler, eklenti için varsayılan değerler atayabilir, kullanıcıların bunu özelleştirebilmesini sağlayabilirsiniz. Örnek olarak, kullanıcılarınız yeşil rengi istemezler ve bunu mor, pembe vb renklere çevirmek isterlerse kullanabilecekleri bir opsiyon yapalım.

Burada işler aslında biraz kafanızı karıştırabilir ama elimden geldiğince düzgün anlatmaya çalışacağım. jQuery eklentileri tıpkı WordPress eklentileri gibi geliştirilebilirler. Bunu sizin belirleyeceğiz varsayılan opsiyonları kullanarak yaparlar. Bu opsiyonlar $.extend fonksiyonuyla tanımlanmaktadır. Biz eklentimiz için sadece bir varsayılan değer gireceğiz. Ve bunu kullanıcı istediği gibi değiştirecek.

Eklentimiz için varsayılan opsiyonların girileceği komut şöyle olacak;

var secenek = $.extend({
    // Varsayılan renk değerimiz.
    renk: "#537E09" 
}, secenekler );

Gördüğünüz gibi burada bir renk tanımı yaptık. Bunu secenek tanımlaması içerisine yerşleştirdik çünkü bunu aşağıda kullanacağız. Yani kullanıcı renk opsiyonuna bir değer verdiğinde bu varsayılan değer yerine geçecek ve yeni değer eklentide kullanılacak. Bunu eklenti alanına eklediğimizde tüm yapı şu şekilde görünecek.

(function ( $ ) {
    $.fn.linKrenklendir = function( secenekler ) { //seçenekleri kullanabilmesi için secenekler tanımını çağırıyoruz

        var secenek = $.extend({
            // Varsayılan renk değerimiz.
            renk: "#537E09" 
        }, secenekler ); // yukarıda kullanacağımız secenekler değerini burada atıyoruz. extend uzantısında

        return this.css( "color", secenek.renk ); //secenek.renk değeri tanımımızdaki varsayılanı çekiyor, şayet eklenti için belirlenirse onu çekicek
    };
}( jQuery ));

Yukarıda eklentimize seçenek ve değeleri atadığımıza göre gelelim kullanımına. Onu da aynen şu şekilde kullanıyoruz. Bu arada jQuery ile atanan renkler css kodları içerisine #537E09 gibi hex kodları da green gibi renk isimleri de verebildiğinizi hatırlatayım. Aşağıdaki kullanım örneğinde ben renk değerini kırmızı rengin karşılığı olan #FF0000 hex kodu kullanacağım.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="yoursitepath/linkrenklendir.js"></script>
<script type="text/javascript">
    jQuery.(document).ready(function($){
        $('a').linKrenklendir({ //eklenti değerlerini atamak için bir iç paranteze ihtiyacımız var { ile bunu sağlıyoruz
        renk : "#FF0000"; //eklentiye kendi renk değerimizi atadık
        });
    });
</script>

En son hale getirdiğimiz kodu alır ve bir javascript dosyası yapar kullanırsanız sanırım doğru şekilde bir eklenti oluşturmuş olacaksınız. Bunun üzeri,nde oynama yapabilir, denemeler sırasında bir sorunuz olursa bana iletişim sayfasından ya da yorum bırakarak ulaşabilirsiniz.

Selametle

Blogger İçin

Kod;

<script Language='Javascript'>
<!--
document.write(unescape('%3C%73%74%79%6C%65%20%74%79%70%65%3D%22%74%65%78%74%2F%63%73%73%22%3E%2F%2A%20%58%4C%53%46%20%32%30%30%37%20%2A%2F%0A%0A%23%6C%69%67%68%74%73%20%7B%0A%20%70%6F%73%69%74%69%6F%6E%3A%61%62%73%6F%6C%75%74%65%3B%0A%20%6C%65%66%74%3A%30%70%78%3B%0A%20%74%6F%70%3A%30%70%78%3B%0A%20%77%69%64%74%68%3A%31%30%30%25%3B%0A%20%68%65%69%67%68%74%3A%38%30%70%78%3B%0A%20%6F%76%65%72%66%6C%6F%77%3A%68%69%64%64%65%6E%3B%0A%7D%0A%0A%2E%78%6C%73%66%2D%6C%69%67%68%74%20%7B%0A%20%70%6F%73%69%74%69%6F%6E%3A%61%62%73%6F%6C%75%74%65%3B%0A%7D%0A%0A%62%6F%64%79%2E%66%61%73%74%20%2E%78%6C%73%66%2D%6C%69%67%68%74%20%7B%0A%20%6F%70%61%63%69%74%79%3A%30%2E%39%3B%0A%7D%0A%0A%2E%78%6C%73%66%2D%66%72%61%67%6D%65%6E%74%20%7B%0A%20%70%6F%73%69%74%69%6F%6E%3A%61%62%73%6F%6C%75%74%65%3B%0A%20%62%61%63%6B%67%72%6F%75%6E%64%3A%74%72%61%6E%73%70%61%72%65%6E%74%20%75%72%6C%28%68%74%74%70%3A%2F%2F%77%77%77%2E%73%63%68%69%6C%6C%6D%61%6E%69%61%2E%63%6F%6D%2F%70%72%6F%6A%65%63%74%73%2F%73%6E%6F%77%73%74%6F%72%6D%2F%6C%69%67%68%74%73%2F%69%6D%61%67%65%2F%62%75%6C%62%73%2D%35%30%78%35%30%2D%66%72%61%67%6D%65%6E%74%73%2E%70%6E%67%29%20%6E%6F%2D%72%65%70%65%61%74%20%30%70%78%20%30%70%78%3B%0A%20%77%69%64%74%68%3A%35%30%70%78%3B%0A%20%68%65%69%67%68%74%3A%35%30%70%78%3B%0A%7D%0A%0A%2E%78%6C%73%66%2D%66%72%61%67%6D%65%6E%74%2D%62%6F%78%20%7B%0A%20%70%6F%73%69%74%69%6F%6E%3A%61%62%73%6F%6C%75%74%65%3B%0A%20%6C%65%66%74%3A%30%70%78%3B%0A%20%74%6F%70%3A%30%70%78%3B%0A%20%77%69%64%74%68%3A%35%30%70%78%3B%0A%20%68%65%69%67%68%74%3A%35%30%70%78%3B%0A%20%2A%77%69%64%74%68%3A%31%30%30%25%3B%0A%20%2A%68%65%69%67%68%74%3A%31%30%30%25%3B%0A%20%64%69%73%70%6C%61%79%3A%6E%6F%6E%65%3B%0A%7D%0A%0A%2E%78%6C%73%66%2D%63%6F%76%65%72%20%7B%0A%20%70%6F%73%69%74%69%6F%6E%3A%66%69%78%65%64%3B%0A%20%6C%65%66%74%3A%30%70%78%3B%0A%20%74%6F%70%3A%30%70%78%3B%0A%20%77%69%64%74%68%3A%31%30%30%25%3B%0A%20%68%65%69%67%68%74%3A%31%30%30%25%3B%0A%20%62%61%63%6B%67%72%6F%75%6E%64%3A%23%66%66%66%3B%0A%20%6F%70%61%63%69%74%79%3A%31%3B%0A%20%7A%2D%69%6E%64%65%78%3A%39%39%39%3B%0A%20%64%69%73%70%6C%61%79%3A%6E%6F%6E%65%3B%0A%7D%0A%0A%2F%2A%0A%2E%78%6C%73%66%2D%6C%69%67%68%74%2E%62%6F%74%74%6F%6D%20%7B%0A%20%68%65%69%67%68%74%3A%34%39%70%78%3B%0A%20%62%6F%72%64%65%72%2D%62%6F%74%74%6F%6D%3A%31%70%78%20%73%6F%6C%69%64%20%23%30%30%36%36%30%30%3B%0A%7D%0A%0A%2E%78%6C%73%66%2D%6C%69%67%68%74%2E%74%6F%70%20%7B%0A%20%68%65%69%67%68%74%3A%34%39%70%78%3B%0A%20%62%6F%72%64%65%72%2D%74%6F%70%3A%31%70%78%20%73%6F%6C%69%64%20%23%30%30%39%39%30%30%3B%0A%7D%0A%2A%2F%3C%2F%73%74%79%6C%65%3E%0A%0A%3C%73%63%72%69%70%74%20%74%79%70%65%3D%22%74%65%78%74%2F%6A%61%76%61%73%63%72%69%70%74%22%20%73%72%63%3D%22%68%74%74%70%3A%2F%2F%77%77%77%2E%73%63%68%69%6C%6C%6D%61%6E%69%61%2E%63%6F%6D%2F%70%72%6F%6A%65%63%74%73%2F%73%6E%6F%77%73%74%6F%72%6D%2F%6C%69%67%68%74%73%2F%73%6F%75%6E%64%6D%61%6E%61%67%65%72%32%2D%6E%6F%64%65%62%75%67%2D%6A%73%6D%69%6E%2E%6A%73%22%3E%3C%2F%73%63%72%69%70%74%3E%0A%3C%73%63%72%69%70%74%20%74%79%70%65%3D%22%74%65%78%74%2F%6A%61%76%61%73%63%72%69%70%74%22%20%73%72%63%3D%22%68%74%74%70%3A%2F%2F%79%75%69%2E%79%61%68%6F%6F%61%70%69%73%2E%63%6F%6D%2F%63%6F%6D%62%6F%3F%32%2E%36%2E%30%2F%62%75%69%6C%64%2F%79%61%68%6F%6F%2D%64%6F%6D%2D%65%76%65%6E%74%2F%79%61%68%6F%6F%2D%64%6F%6D%2D%65%76%65%6E%74%2E%6A%73%26%32%2E%36%2E%30%2F%62%75%69%6C%64%2F%61%6E%69%6D%61%74%69%6F%6E%2F%61%6E%69%6D%61%74%69%6F%6E%2D%6D%69%6E%2E%6A%73%22%3E%3C%2F%73%63%72%69%70%74%3E%0A%3C%73%63%72%69%70%74%20%74%79%70%65%3D%22%74%65%78%74%2F%6A%61%76%61%73%63%72%69%70%74%22%20%73%72%63%3D%22%68%74%74%70%3A%2F%2F%77%77%77%2E%73%63%68%69%6C%6C%6D%61%6E%69%61%2E%63%6F%6D%2F%70%72%6F%6A%65%63%74%73%2F%73%6E%6F%77%73%74%6F%72%6D%2F%6C%69%67%68%74%73%2F%63%68%72%69%73%74%6D%61%73%6C%69%67%68%74%73%2E%6A%73%22%3E%3C%2F%73%63%72%69%70%74%3E%0A%3C%73%63%72%69%70%74%20%74%79%70%65%3D%22%74%65%78%74%2F%6A%61%76%61%73%63%72%69%70%74%22%3E%0A%76%61%72%20%75%72%6C%42%61%73%65%20%3D%20%27%68%74%74%70%3A%2F%2F%77%77%77%2E%73%63%68%69%6C%6C%6D%61%6E%69%61%2E%63%6F%6D%2F%70%72%6F%6A%65%63%74%73%2F%73%6E%6F%77%73%74%6F%72%6D%2F%6C%69%67%68%74%73%2F%2E%2F%27%3B%0A%73%6F%75%6E%64%4D%61%6E%61%67%65%72%2E%75%72%6C%20%3D%20%27%68%74%74%70%3A%2F%2F%77%77%77%2E%73%63%68%69%6C%6C%6D%61%6E%69%61%2E%63%6F%6D%2F%70%72%6F%6A%65%63%74%73%2F%73%6E%6F%77%73%74%6F%72%6D%2F%6C%69%67%68%74%73%2F%2E%2F%27%3B%0A%3C%2F%73%63%72%69%70%74%3E%0A%0A%0A%3C%64%69%76%3E%0A%20%3C%64%69%76%20%69%64%3D%22%6C%6F%61%64%69%6E%67%22%20%73%74%79%6C%65%3D%22%64%69%73%70%6C%61%79%3A%20%6E%6F%6E%65%3B%20%22%3E%0A%20%20%3C%68%31%3E%59%69%6C%62%61%73%69%20%69%73%69%6B%6C%61%72%69%3A%20%3C%2F%68%31%3E%0A%20%20%3C%68%32%3E%48%61%7A%69%72%6C%61%6E%69%79%6F%72%2E%2E%2E%3C%2F%68%32%3E%0A%20%3C%2F%64%69%76%3E%0A%0A%20%3C%64%69%76%20%69%64%3D%22%6C%69%67%68%74%73%22%20%73%74%79%6C%65%3D%22%64%69%73%70%6C%61%79%3A%20%62%6C%6F%63%6B%3B%20%22%3E%0A%0A%3C%2F%64%69%76%3E%0A%3C%2F%64%69%76%3E%3C%73%63%72%69%70%74%20%73%72%63%3D%22%68%74%74%70%3A%2F%2F%77%77%77%2E%73%63%68%69%6C%6C%6D%61%6E%69%61%2E%63%6F%6D%2F%70%72%6F%6A%65%63%74%73%2F%73%6E%6F%77%73%74%6F%72%6D%2F%73%6E%6F%77%73%74%6F%72%6D%2E%6A%73%22%3E%3C%2F%73%63%72%69%70%74%3E%0A'));
//-->
</script>

Bu kodu widget olarak ya da HTML düzenleme yoluyla ekleyebilirsiniz. Hem kar yağdırabilecek hem de ışıkları gösterebilieceksiniz.

WordPress ve diğer siteler için

Header.php düzenlemesi

Temanızın header.php dosyası içerisine head alanının içine aşağıdaki kodları ekleyin.

<style type="text/css">/* XLSF 2007 */

#lights {
 position:absolute;
 left:0px;
 top:0px;
 width:100%;
 height:80px;
 overflow:hidden;
}

.xlsf-light {
 position:absolute;
}

body.fast .xlsf-light {
 opacity:0.9;
}

.xlsf-fragment {
 position:absolute;
 background:transparent url(http://www.schillmania.com/projects/snowstorm/lights/image/bulbs-50x50-fragments.png) no-repeat 0px 0px;
 width:50px;
 height:50px;
}

.xlsf-fragment-box {
 position:absolute;
 left:0px;
 top:0px;
 width:50px;
 height:50px;
 *width:100%;
 *height:100%;
 display:none;
}

.xlsf-cover {
 position:fixed;
 left:0px;
 top:0px;
 width:100%;
 height:100%;
 background:#fff;
 opacity:1;
 z-index:999;
 display:none;
}

/*
.xlsf-light.bottom {
 height:49px;
 border-bottom:1px solid #006600;
}

.xlsf-light.top {
 height:49px;
 border-top:1px solid #009900;
}
*/</style>

<script type="text/javascript" src="http://www.schillmania.com/projects/snowstorm/lights/soundmanager2-nodebug-jsmin.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.6.0/build/yahoo-dom-event/yahoo-dom-event.js&2.6.0/build/animation/animation-min.js"></script>
<script type="text/javascript" src="http://www.schillmania.com/projects/snowstorm/lights/christmaslights.js"></script>
<script type="text/javascript">
var urlBase = 'http://www.schillmania.com/projects/snowstorm/lights/./';
soundManager.url = 'http://www.schillmania.com/projects/snowstorm/lights/./';
</script>
<script src="http://www.schillmania.com/projects/snowstorm/snowstorm.js"></script>

Sonra şu kodu body etiketinden hemen sonraya ekleyin.

<div id="lights" style="display: block; "></div>

Görmeden İnanmam Diyenlere Blogspot Örneği: Oda Oyunları 7/24
İşlem tamamdır. Yok ben illa dosyaları sitemde barındıracağım derseniz aşağıdaki dosyayı indirin ve kodları kendinize göre ayarlayın. Ha bu arada benim sitede kar farklı şekilde yağıyor. Sizde normal kar olacak :D

Hadi Selametle

Bunda bi nebze de olsa faydamız olduysa ne mutlu bize.

Öncelikle açılışta siteyle beraber yüklenen javascript popuplar uzun zamandır bizimle birlikte ama kimi farklı pencerede kimi de rahatsız edici derecede kötü oluyor. jQuery nin hayatımıza girmesiyle birlikte bu işleri yapmak ve insanları rahatsız etmeden site içinde kullanmak daha basit bir hal aldı. İşte aşağıda anlattığım şekilde bunu başarabilrsiniz.

Öncelikle HMTL sayfamızı oluşturalım. Burada yukarıdaki yazıda belirtmiş olduğum document.ready komutu ile çağırma işlemini yapıyoruz. O satırları ayrı bir şekilde işaretledim. Aşağıda javascript dosyasındaki ile karıştırmayın. Burada sitenize eklemeniz gereken alanlar popupContact ve backgroundPopup adlı div alanları. Bunları da işaretledim. Bu kodlar ile açılacaktır Popup. Yapmanız gereken şey işaretli alanlardaki divleri olduğu gibi sitenizde açmak istediğiniz yere eklemek. Tabii css ve javascript dosyalarını da entegre etmeyi unutmadan :D

jQuery popup kodu

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Siteyle birlikte açılan jQuery Popup!</title>
	<link rel="stylesheet" href="general.css" type="text/css" media="screen" />
	<script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script>
	<script src="popup.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
centerPopup();
loadPopup();
});
</script>
</head>
<body>
	<center>
		Açılıyoooor :)
	</center>
	<div id="popupContact">
		<a id="popupContactClose">x</a>
		<h1>Siteyle birlikte açılan jQuery Popup!</h1>
		<p id="contactArea">
			Bu ufak kodlar ve jQuery sayesinde harikalar yaratabiliriz.
			<br /><br />
			Açılışta popup gelmesi için biraz kafa yordum :D ama değdi.
			<br /><br />
			ESC ye popup dışına yada x e basarak kapanabilir.
			<br /><br />
		</p>
	</div>
	<div id="backgroundPopup"></div>
</body>
</html>

Sonra da siteye eklediğimiz popup.js özelliklerine göz atalım. Unutmayın ki javascript dosyasını ben yazmadım. Sadece ona uygun olarak bazı değişiklikler yaptım.

jQuery popup javascript dosyası

Popup sisteminin aktifliğini belirleyelim.

//SETTING UP OUR POPUP
//0 means disabled; 1 means enabled;
var popupStatus = 0;

Yükleme ve devredışı bırakma komutları

//loading popup with jQuery magic!
function loadPopup(){
	//loads popup only if it is disabled
	if(popupStatus==0){
		$("#backgroundPopup").css({
			"opacity": "0.7"
		});
		$("#backgroundPopup").fadeIn("slow");
		$("#popupContact").fadeIn("slow");
		popupStatus = 1;
	}
}

//disabling popup with jQuery magic!
function disablePopup(){
	//disables popup only if it is enabled
	if(popupStatus==1){
		$("#backgroundPopup").fadeOut("slow");
		$("#popupContact").fadeOut("slow");
		popupStatus = 0;
	}
}

Ortalayalım…

//centering popup
function centerPopup(){
	//request data for centering
	var windowWidth = document.documentElement.clientWidth;
	var windowHeight = document.documentElement.clientHeight;
	var popupHeight = $("#popupContact").height();
	var popupWidth = $("#popupContact").width();
	//centering
	$("#popupContact").css({
		"position": "absolute",
		"top": windowHeight/2-popupHeight/2,
		"left": windowWidth/2-popupWidth/2
	});
	//only need force for IE6

	$("#backgroundPopup").css({
		"height": windowHeight
	});

}

E tabii yükleme safhasında olacakları belirleyelim. Buradaki document.ready bir butona tıklama durumunda kullanılabilecek düzeyde hazırlanmıştı. Benim kullandığım fonksiyon HTML dosyasında. Yazdım yukarıda.

//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){

	//LOADING POPUP
	//Click the button event!
	$("#button").click(function(){
		//centering with css
		centerPopup();
		//load popup
		loadPopup();
	});

	//CLOSING POPUP
	//Click the x event!
	$("#popupContactClose").click(function(){
		disablePopup();
	});
	//Click out event!
	$("#backgroundPopup").click(function(){
		disablePopup();
	});
	//Press Escape event!
	$(document).keypress(function(e){
		if(e.keyCode==27 && popupStatus==1){
			disablePopup();
		}
	});

});

Sonrasında CSS dosyasını irdeleyelim. Burada kodlarla ilgili body için de düzenleme yapmıştım. Siz ihtiyacınıza göre cssleri sitenize ekleyebilirsiniz.

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
 tfoot, thead, tr, th, td {
border:0pt none;
font-family:inherit;
font-size:100%;
font-style:inherit;
font-weight:inherit;
margin:0pt;
padding:0pt;
vertical-align:baseline;
}
body{
background:#fff none repeat scroll 0%;
line-height:1;
font-size: 12px;
font-family:arial,sans-serif;
margin:0pt;
height:100%;
}
table {
border-collapse:separate;
border-spacing:0pt;
}
caption, th, td {
font-weight:normal;
text-align:left;
}
blockquote:before, blockquote:after, q:before, q:after {
content:"";
}
blockquote, q {
quotes:"" "";
}
a{
cursor: pointer;
text-decoration:none;
}
br.both{
clear:both;
}
#backgroundPopup{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
border:1px solid #cecece;
z-index:1;
}
#popupContact{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:384px;
width:408px;
background:#FFFFFF;
border:2px solid #cecece;
z-index:2;
padding:12px;
font-size:13px;
}
#popupContact h1{
text-align:left;
color:#6FA5FD;
font-size:22px;
font-weight:700;
border-bottom:1px dotted #D3D3D3;
padding-bottom:2px;
margin-bottom:20px;
}
#popupContactClose{
font-size:14px;
line-height:14px;
right:6px;
top:4px;
position:absolute;
color:#6fa5fd;
font-weight:700;
display:block;
}
#button{
text-align:center;
margin:100px;
}

Bir günlük Çerez bırakarak açmak

Aşağıdaki bir ve birden çok yoruma istinaden çok sorulan bir soruyu da yanıtlayayım böylelikle. Popup u çerez kullanarak günde bir kere açmak için aşağıdaki scripti /head alanından önce ekleyin. Bu kodu eklediğinizde lütfen ilk kodda paylaştığım document.ready içeren scripti tamamiyle kaldırın. Çerez kodunun çalışmama ihtimali var kaldırmazsanız. Buna ek olarak ilk verdiğim cookie kodu çalışmamıştı. Bundan dolayı özür dilerim. Ancak çalışan bir tane yazmayı başardım. Kodda çok bir değişiklik göremeyebilirsiniz ancak ek olarak body alanına bir adet onload kodu eklemeniz gerekmekte. Bunu da kodun altına ekledim.

Not: Ekteki dosyada bu verdiğim kodu bulamazsınız. Onun için buradan kopyalayıp yapıştırın lütfen.

<script type="text/javascript">
function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
  {
  x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
  y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
  x=x.replace(/^s+|s+$/g,"");
  if (x==c_name)
    {
    return unescape(y);
    }
  }
}

function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}

function checkCookie()
{
var a=getCookie("popupbirkereacil");
if (a!=null && a!="")
  {

  }
else 
  {
	centerPopup();
    loadPopup();
    setCookie("popupbirkereacil",a,1);
  }
} 
</script>

body alanına onload olarak eklediğinzde şu şekilde görünmesi gerekir.

<body onload="checkCookie()">

Örneğe bakalım :) tıklayın bu yazıya.

Bir kere açılan örneğe bakalım :).

Örneklerde de nasıl çalıştığını görebilrisiniz. Eğer kafanıza yatmayan bir kısım varsa yorum bırakabilirsiniz. En kısa sürede size cevap veririm.Örnekteki Dosyaları indirmek için aşağıdaki indirme linkine tıklayın.

Hadi Selametle…

Kodu Ekliyorum aşağıya. Kodun altında örneğe ait bir link te bulacaksınız;

<!DOCTYPE HTML>
<html>
<head>
<meta content=”text/html; charset=UTF-8″ http-equiv=”content-type”/>
<center><title>HTML5 Drag and drop demonstration</title>
<style type=”text/css”>
#boxA, #boxB, #boxC {
float:left; width:165px; height:165px; padding:10px; margin:10px;
}

#boxA { background-color: #474747; }
#boxB { background-color: #474747; }
#boxC { background-color: #474747; }

#drag, #drag2, #drag3 {
width:30px; height:30px; padding:5px; margin:5px;
-moz-user-select:none;
}
#drag { background-color: #e8e8e8;}
#drag2 { background-color: orange;}
#drag3 { background-color: purple; border:3px brown solid;}

</style>
<script type=”text/javascript”>
function dragStart(ev) {
ev.dataTransfer.effectAllowed=’move’;
//ev.dataTransfer.dropEffect=’move’;
ev.dataTransfer.setData(“Text”, ev.target.getAttribute(‘id’));
ev.dataTransfer.setDragImage(ev.target,0,0);
return true;
}

function dragEnter(ev) {
var idelt = ev.dataTransfer.getData(“Text”);
return true;
}

function dragOver(ev) {
var idelt = ev.dataTransfer.getData(“Text”);
var id = ev.target.getAttribute(‘id’);
if( (id ==’boxB’ || id ==’boxA’) &amp;&amp; (idelt == ‘drag’ || idelt==’drag2′))
return false;
else if( id ==’boxC’ &amp;&amp; idelt == ‘drag3′)
return false;
else
return true;
}

function dragEnd(ev) {
ev.dataTransfer.clearData(“Text”);
return true
}

function dragDrop(ev) {
var idelt = ev.dataTransfer.getData(“Text”);
ev.target.appendChild(document.getElementById(idelt));
ev.stopPropagation();
return false; // return false so the event will not be propagated to the browser
}

</script>
</center></head>
<body>
<h1>Drag and drop HTML5 demo</h1>
<div>there are many other variables that can be used also, we will coer this another day.
</div>

<div id=”boxA”
ondragenter=”return dragEnter(event)”
ondrop=”return dragDrop(event)”
ondragover=”return dragOver(event)”>

<div id=”drag” draggable=”true”
ondragstart=”return dragStart(event)”
ondragend=”return dragEnd(event)”>drag me</div>

<div id=”drag2″ draggable=”true”
ondragstart=”return dragStart(event)”
ondragend=”return dragEnd(event)”>drag me</div>

<div id=”drag3″ draggable=”true”
ondragstart=”return dragStart(event)”
ondragend=”return dragEnd(event)”>drag me</div>

</div>

<div id=”boxB”
ondragenter=”return dragEnter(event)”
ondrop=”return dragDrop(event)”
ondragover=”return dragOver(event)”>
</div>

<div id=”boxC”
ondragenter=”return dragEnter(event)”
ondrop=”return dragDrop(event)”
ondragover=”return dragOver(event)”>
</div>
<div style=”clear:both”>Example created by <a href=”http://html5tutorial.net/”>HTML Tutorials</a>.</div>
</body>
</html>

Örnek linki için tıklayın…

Selametle…

Müşterileri bir kenara bırakır, maillerine hiçbir suretle kendim dönüş yapmazsam günüm gayet iyi geçiyor. Bugün sanırım bir istisna oalcak. Patron atsın mailleri bundan sonra değil mi :)

Bizim gibi kişilerin sıkıntısı müşteri ile iyi bir uyum tutturamamak oluyor bazen. Bu her iki taraftan da kaynaklanabiliyor. Bence ofislerdeki kişilerin (tasarım ve kodlama yapanların) müşterileri ile tam bir iletişimde olmaları sağlanmalı ya da hiç iletişim olanağı verilmemeli müşterilere. Msn ve diğer iletişim yollarında dakikalarca onların yazılarını okumaya, telefonda dert yandıklarında çözümün bir iki fare tıkıyla bitmeyecek birşey olduğunu onlara anlatmak zorunda olmak sıkıyor canımı.

Bu kısımda müşterinin sabırsızlığı saniyede 15 kere sayfa yenilemesiyle devam edince iş çığırından çıkıyor. Bugünden bir alıntı (msn üzerinden)

M: Serkan Bey

Ben: buyrun

M: Sizden bir yarım saat önce site üzerinde döner alan içidneki resimlerin bazılarında photoshopla düzeltmeler istemiştik. bu işlem hala gerçekleşmemiş görünüyor. Ne zaman yapmayı planlıyorsunuz?

Ben: Evet biliyorum. Elimdeki işimi bitirir bitirmez o konu ile ilgilenmeyi düşünüyorum.

M: Ama saat beş olmak üzere

Ben: Ne var ki 5 te?

M: Biz firmadan 5 buçukta çıkıyoruz.

Ben: Site 24 saat yayında ve siz her dakika ona erişebilme durumundasınız. Bu işlemin yapılması ile satin beş olmasında sanırım bir sıkıntı yok.

…

diye devam eden bir konuşma yığını ve harcanmış 10 dakika. Patron çıkmadan bakmak istiyormuş dediğinde ben de ona güzel bir çift laf edecektim ama yazmadım. Neyse istedikleri iş yarın sabaha kaldı artık ben de birazdan çıkacağım.

Maalesef bunlarla karşılaşıyoruz. Hani yemek yemeyen ve  durmadan gece gündüz bilgisayar başında tüneyen baykuşlar mı sanıyorlar bizi bilemiyorum. Biraz bilinçlen ey yönetici vasıflı müşterim!

Hadi Selametle

—————-
Yazı Biterken Çalıyordu valla: Evanescence – Going Under

Linkler:

Kısalink altında bulduğum link:

http://bilenkazanir.mynet.com/mesajb.asp?nop=nop&m=HACKED ßY TAKEN – MYNET BİLEN KAZANIR TAKEN TARAFINDAN HACKLENMİŞTİR – GEÇMİŞ OLSUN

Benim deneme yoluyla yaptığım link:

http://bilenkazanir.mynet.com/mesajb.asp?nop=nop&m=BURADA ASLINDA BİRŞEY VAR :)

Önizleme:

Kod burada;

Öncelikle temamızdaki functions.php dosyasının bir yedeğini alarak açınız. Eğer yoksa siz oluşturunuz. Ardından ?> kodundan önce şu kodu ekleyiniz;

add_filter('login_errors',create_function('$a', "return null;"));

Bütün Yapmanız gereken bu! Hadi Selametle…