Jquery ile Wordpress Yorumlarını Hareketlendirin.

27 Nisan 2008 Pazar • Benzer Yazılar • Yazı Bilgileri

jquery.jpg
Merhaba uzun zamandır siteye bir şeyler yazamamıştım. Bu süre zarfında muzikkutum.net adından bir proje ile ilgilendim. Bugün daha önce yazdığım jquery ile ilgili yazılara bir yenisini ekleyerek adım adım wordpress için yorum sayfamızı nasıl jquery kullanarak geliştirebileceğimizi anlatacağım.

1) Dosyalarınızı Yedekleyin

işlemlerimize başlamadan önce dosyalarınız yedekleyin. kök dizininde bulunan wp-comments-post.php ve tema klasörünüzde bulunan header.php ve comments.php dosyalarının bir yedeğini alın.

2) Kodları Eklemeye Başlayalım

1.Adım: İlk olarak temamızın bulunduğu klasördeki header.php dosyasına jquery ve function.js dosyalarımızı gömüyoruz.

<script src="&lt;?php bloginfo('url'); ?&gt;&lt;!--
/jquery.js" type="text/javascript"><!--mce:0--></script>
<script src="&lt;?php bloginfo('url'); ?&gt;&lt;!--
/function.js" type="text/javascript"><!--mce:1--></script>

2.Adım: Şimdi temamızın bulunduğu klasördeki comments.php dosyasını bir editör ile açarak.

 

Yazan kısmın altına.

 

Kodlarını ekliyoruz. Böylece post işlemimizden sonra eklenen yazı bu özniteliği sonuc olan div tagının içinde gösterilecek.

3.Adım: Son olarak yine comments.php dosyasında

<form id="commentform" action="&lt;?php echo get_option('siteurl'); ?&gt;/wp-comments-post.php" method="post">
</form>

Kısmını

<form id="commentform" action="javascript:void(0)" method="post">
</form>
 
Ve yine aynı dosyada
<pre lang="php"><input id="submit" name="submit" type="submit" value="Submit Comment" />

Kısmını ise

<img id="load" style="display: none;" src="&lt;?php bloginfo('stylesheet_directory'); ?&gt;/images/loading.gif" alt="" vspace="3" align="left" />
<input id="submit" onclick="javascript:yorumpost();" name="submit" type="submit" value="Submit Comment" tabindex="5" />

İle değiştiriyoruz. Bu değişiklikerle beraber işlemimizin büyük bir kısmını bitirdik sayılır. Son olarak temamızın bulunduğu klasördeki stil dosyamıza şu kodları ekliyoruz.

.red{
background:#cc0000;
	color:#fff;
	padding: 5px;
}	
 
#sonuc{
padding: 5px;
display: none;
border: solid 1px #fff;
background: #abcdef;
color:#fff;
margin-bottom: 10px;
}

3) Dosyaları Yükleyin

Son olarak buradan indireceğiniz dosyaları uygun yerlere yüklediğinizde script çalışmaya başlayacaktır. jquery.js function.js ve wp-comments-post.php dosyalarını köke loading.gif dosyası ise temanızın bulunduğu klasördeki images klasörüne yükleyin işte bu kadar.

4) Açıklamalar

En Önemli kısıma geldik. Bence yukarıda yazılanları aynen uygulamaktan öte burada açıklayacaklarımı anlamanız daha önemlidir. İşin mantığını anladığımızda bu ve benzeri uygulamaları geliştirmek çok zor değil. en zor tarafı bunu bir makale haline getirmek :) ) Kodları tek tek açıklayacak olursak, önceliklik olarak function.js dosyasından başlayalım.

$.fn.fastSerialize = function() {
    var a = [];
    $('input,textarea,select,button', this).each(function() {
        var n = this.name;
        var t = this.type;
        if ( !n || this.disabled || t == 'reset' ||
            (t == 'checkbox' || t == 'radio') &amp;&amp; !this.checked ||
            (t == 'submit' || t == 'image' || t == 'button') &amp;&amp; this.form.clicked != this ||
            this.tagName.toLowerCase() == 'select' &amp;&amp; this.selectedIndex == -1)
            return;
        if (t == 'image' &amp;&amp; this.form.clicked_x)
            return a.push(
                {name: n+'_x', value: this.form.clicked_x},
                {name: n+'_y', value: this.form.clicked_y}
            );
        if (t == 'select-multiple') {
            $('option:selected', this).each( function() {
                a.push({name: n, value: this.value});
            });
            return;
        }
        a.push({name: n, value: this.value});
    });
    return a;
};
 
function yorumpost(){
$('#load').css( {display: 'block'} );
var keyword = $('#commentform').fastSerialize();
$.ajax({
type: 'POST',
url: '../wp-comments-post.php',
data: keyword,
success: function(msg) {
$('#load').css( {display: 'none'} );
$('#sonuc').html(msg);
$('#sonuc').fadeIn(2000);
}});
 
}

Ä°lk olarak fastSerialize fonksiyonundan bahsedelim. fastSerialize kullanıcıların form alanındakileri bilgileri tamamını bie deÄŸiÅŸken olarak almamızı saÄŸlıyor. yorumpost fonksiyonunda var keyword = $(’#commentform’).fastSerialize(); ile id özniteliÄŸi commentform olan deÄŸiÅŸkenleri alarak keyword deÄŸilkenine atıyoruz.
Yorumpost fonksiyonu ilk olarak bizim comments.php sayfasında eklediÄŸimiz loading.gif resmini görünür hale getirerek loading.gif resmimizin görünür hale gelmesini saÄŸlıyor. jquery ile ajax iÅŸlemine baÅŸlıyoruz ve gönderilen deÄŸiÅŸkenlerin metodunu POST olarak belirliyoruz. Yorumları veritabanına ekleyecek dosyamızı da url özelliÄŸi ile belirtiyoruz. Daha sonra $(’#load’).css( {display: ‘none’} ); ile yazı eklendikten sonra loading.gif resmini yeniden görünmez kılıyoruz. ve özniteliÄŸi sonuc olan etiketimizi fadeIn efekti ile sayfaya yazdırıyoruz.
Örnek Kullanımı aşağıdaki formu doldurarak görebilirsiniz. :)

25 Yorum Yapılmış »

  1. admin 27 Nisan 2008 tarihinde şöyle demiş:

    bu benim ilk denemem :)

  2. combola 30 Nisan 2008 tarihinde şöyle demiş:

    deneme 1-2 :) bu jquery’de çok olmaya baÅŸladı ama.

  3. eburhan 3 Mayıs 2008 tarihinde şöyle demiş:

    benim neyim eksik? ben de deneme yapacam :)

  4. selim 5 Mayıs 2008 tarihinde şöyle demiş:

    ah birde turkce yazmayi becerebilsen.
    yazinin icinde kac tane turkce hatasi var?

  5. shaq 17 Mayıs 2008 tarihinde şöyle demiş:

    way amk

  6. faruk 25 Haziran 2008 tarihinde şöyle demiş:

    deneme 3-4 :D

  7. baris 28 Haziran 2008 tarihinde şöyle demiş:

    yeni tema ile beraber form özelliklerini tekrar elden geçirmem gerekecek

  8. Veysel 6 Temmuz 2008 tarihinde şöyle demiş:

    Bu gibi durumlarda önce teşekkür edilir gibi geliyor, irdelemeden önce!
    Sanırım örneği görebilmek için buraya yorum yapmak gerekiyor :)

  9. asdasd 20 Temmuz 2008 tarihinde şöyle demiş:

    asdasdads

  10. MahiriX 1 Ağustos 2008 tarihinde şöyle demiş:

    deneme yapıyoruz

  11. wwwa 20 Ağustos 2008 tarihinde şöyle demiş:

    aaa

  12. oyraca 18 Eylül 2008 tarihinde şöyle demiş:

    çok şık bir paylaşım olmuş

  13. oyraca 18 Eylül 2008 tarihinde şöyle demiş:

    çok şık bir paylaşım olmuşçok şık bir paylaşım olmuşçok şık bir paylaşım olmuşçok şık bir paylaşım olmuşçok şık bir paylaşım olmuşçok şık bir paylaşım olmuşçok şık bir paylaşım olmuşçok şık bir paylaşım olmuşçok şık bir paylaşım olmuşçok şık bir paylaşım olmuşçok şık bir paylaşım olmuşçok şık bir paylaşım olmuşçok şık bir paylaşım olmuşçok şık bir paylaşım olmuşçok şık bir paylaşım olmuşçok şık bir paylaşım olmuşçok şık bir paylaşım olmuşçok şık bir paylaşım olmuşçok şık bir paylaşım olmuşçok şık bir paylaşım olmuşçok şık bir paylaşım olmuşçok şık bir paylaşım olmuşçok şık bir paylaşım olmuşçok şık bir paylaşım olmuşçok şık bir paylaşım olmuşçok şık bir paylaşım olmuşçok şık bir paylaşım olmuşçok şık bir paylaşım olmuşçok şık bir paylaşım olmuş

  14. deneme 23 Kasım 2008 tarihinde şöyle demiş:

    çok şık bir paylaşım olmuşçok şık bir paylaşım olmuşçok şık bir paylaşım olmuşçok şık bir paylaşım olmuşçok şık bir paylaşım olmuşçok şık bir paylaşım olmuşçok şık bir paylaşım olmuşçok şık bir paylaşım olmuşçok şık bir paylaşım olmuşçok şık bir paylaşım olmuşçok şık bir paylaşım olmuşçok şık bir paylaşım olmuşçok şık bir paylaşım olmuşçok şık bir paylaşım olmuşçok şık bir paylaşım olmuşçok şık bir paylaşım olmuşçok şık bir paylaşım olmuşçok şık bir paylaşım olmuşçok şık bir paylaşım olmuşçok şık bir paylaşım olmuşçok şık bir paylaşım olmuşçok şık bir paylaşım olmuşçok şık bir paylaşım olmuşçok şık bir paylaşım olmuşçok şık bir paylaşım olmuşçok şık bir paylaşım olmuşçok şık bir paylaşım olmuşçok şık bir paylaşım olmuşçok şık bir paylaşım olmuş

  15. Hasan 17 Aralık 2008 tarihinde şöyle demiş:

    bu da deneme .. :) )

  16. de 26 Aralık 2008 tarihinde şöyle demiş:

    bu da deneme

  17. sdfsdfsd 3 Ocak 2009 tarihinde şöyle demiş:

    sdfsd sd fsd f

  18. sdfssssss 22 Ocak 2009 tarihinde şöyle demiş:

    fsdfsdf

  19. Angel-A 3 Nisan 2009 tarihinde şöyle demiş:

    nasıl hareket ediyormuş bu yorumlar (:

  20. Namık 6 Nisan 2009 tarihinde şöyle demiş:

    hele gardaş noldi hani referans link caps vs. bişe koyabilirdin hiç bişey olmasa bile bi caps konurdu be usta ferruh.mavitunanın hareketli yorumuna benzer bişeymi bu ? (yorumlara tıklayınca zarrrıt diye açılan(güzel bir efekle açılıyor(küçük dikdörtgen büyüyerek)))

  21. Namık 6 Nisan 2009 tarihinde şöyle demiş:

    2.Adım: Şimdi temamızın bulunduğu klasördeki comments.php dosyasını bir editör ile açarak.

    [Ne yazan kısım bir şey yazmıyorki]

    Yazan kısmın altına.

    [malesef buradada bir şey yazmıyor :D ]

    Kodlarını ekliyoruz. Böylece post işlemimizden sonra eklenen yazı bu özniteliği sonuc olan div tagının içinde gösterilecek.

  22. test 27 Nisan 2009 tarihinde şöyle demiş:

    dfgdfg

  23. batuhan 29 Mayıs 2009 tarihinde şöyle demiş:

    güzel bir örnek olmus. ben de bir deneme yapicam

  24. haçan tömürcü 7 Haziran 2009 tarihinde şöyle demiş:

    bakalım bakalım

  25. ferhat 21 Haziran 2009 tarihinde şöyle demiş:

    güzel bir uygulama olmuş

Çekinmeyin Yorumlarınızı Yazın