wordpress için ajax tab menü yapalım

09 Ağu 07 | Yazar fikirbozan | Konu: wordpress
Etiketler: , , , , ,

wpdestekBirçok Türkçe kaynakta acaba bloguma nasıl ajax yan menü ekleyebilirim diye. Türkçe kaynaklar içinde bulamadım açıkcası. Hele wordpress için olanını hiç bulamadım. Birkaç sitede görmüştüm ve çok hoşuma giti bu ajax tab menü. Bende hemen kendi siteme nasıl eklerim diye araştırmaya koyuldum.

Şimdi hemen anlatmaya başlayayım nasıl yaptım bunu.

  • İlk önce buradan gerekli bazı dosyaları (resimler ve tab değiştirmeyi ağlayan javascript kodları) indiriyoruz.(şifre: fikirbozan.net)
  • Arşivimizi açtıktan sonra “menu” klasöründeki “ajaxtabs.js” dosyasını bir metin editörüyle açıyoruz.(Öyle not defteriyle falan uğraşmayın burdan notepad2 yi indirin. Kodları renklendirir.).
  • 7. satırdaki resim adresinizi kendi sitenize göre düzeltin. (örn: :http://www.siteniz.com/menu/loading.gif)
  • Bu işlemi yaptıktan sonra “menu” klasörünü sitemizin ana dizinine(root) gönderiyoruz. (Yani sitenizin ana dizininde wp-admin,wp-content,wp-includes ve menu klasörleri olmuş olacak)
  • Menümüz için css kodlarımız da burada. Bu kodları temanızın stil sayfasına(css) ekleyin. Bu css kodlarında da tek yapmanız gerekenler resimlerin adreslerini doğru olarak belirtmek. shade.gif ve shadeactive.gif resimlerinin adreslerini de http://www.siteniz.com/menu/shade.gif gibi yazın.
  • Buraya kadar menümüzün stilini belirledik. Şimdi de gelelim asıl meseleye. Sayfamıza nasıl ekleyeceğiz bu menüyü?
  • Sidebar.php dosyamıza nereye menüyü ekleyeceksek oraya bu kodları ekliyoruz.
  • Buradan da tabmenünün içeriğinin alınacağı sayfa örneğini indirin. çıkan sonyazilar.php dosyasını ana dizinimize gönderelim.
  • Az önce yan menümüze birkaç kod eklemiştik. Orada küçük değişiklik yapmamız gerekir. Öncelikle 2. satırda ajaxtabs.js dosyasının yolunu belirtin. Hatırlarsanız ilk başta menu klasörünün içinde bulunuyordu bu ajaxtabs.js dosyası. Eğer anadizine gönderdiyseniz muhtemelen http://www.siteniz.com/menu/ajaxtabs.js şeklinde olacaktır.
  • az önce indirdiğimiz sonyazilar.php dosyasının adresin de yan menüye eklediğimiz kodlardakiyle değiştirin. örn http://www.siteniz.com/sonyazilar.php
  • sonyazilar.php dosyasını incelerseniz, en altta normalde yan menümüzde son yazıları göstermek için kullandığımız kodun olduğunu farkedersiniz. Buraya ne eklemek isterseniz onu yazın.
  • İlk tabda ne olacağına ise yan menümüze eklediğimiz kodlarla karar veriyoruz. Benim verdiğim kodlarda en solda son yorumlar var.Tabii bu eklentinin kodları. Son yorumları göstermek için bu eklentiyi indirmelisiniz
Yazıyı çok beğendim. BlogÖdüllerinde oyum size

Yazıyı beğenediyseniz lütfen bizi takip edin!

33 yorum
Fikrini Söyle »

  1. oyyla.com 10 Ağu, 2007 00:00 :

    Wordpress İçin AJAX TAB MENÜ…

    blogunuza ajax tab menü eklemek ister misiniz. örnek fikirbozan.net…

  2. eylultoprak 11 Ağu, 2007 15:46 :

    hocam selamlar.

    250xp alanım var tab menuyu ikişerli sıra halinde alt altta nasıl dizeriz.

    sağol valla bişi söyleye bilirssen :)

  3. eylultoprak 11 Ağu, 2007 17:05 :

    menu kendini ortaladı ama yazı kutucuklar içinde açılmıyor footer kayıyor.. vs vs.. eksik bir şey yapmadım… temadan olabilir mi…

  4. fikirbozan 11 Ağu, 2007 17:26 :

    tam olarak sorunun ne olduğunu anlamadım? siten üzerinde gösterirsen yardımcı olabilrim ..benim verdiğim kodlar kendi kullandığım kodlardır.

  5. eylultoprak 11 Ağu, 2007 17:30 :

    tamam ekliyorum hemen.

  6. eylultoprak 11 Ağu, 2007 21:28 :

    tab geçişleri problemi için hakki bey’

    şöyle bir çözüm üretmiş

    http://www.hakkiceylan.com/tab-gecislerindeki-problemler/

  7. eylultoprak 11 Ağu, 2007 22:13 :

    geçişler güzel şimdi ie’de sonyazilar.php çalışmıyor..

    ff ‘de sonyazilar.php çalışıyor ama menu bu sefer kayiyor.. Bu tab menu öldürcek beni :)

    fikirbozan bi fikrin var mı

  8. fikirbozan 11 Ağu, 2007 23:17 :

    Bende de iede sorun çıkarıyor. Birkaç gündür onu arıyorum ama bir türlü bulamadım.

  9. eylultoprak 11 Ağu, 2007 23:26 :

    valla yine css ile alakalı.. gkaans.com yada dmry söylemek lazım :) yada onların css bakmak lazım..

    bu arada css tasarımı benim sitede çok kötü gözükdü..

    css’den de anlamam.. nasıl yapcaz hiç bilmiyorum.. tema’dan kaynaklanıyor sanırım.. temanın bi css ile denemek lazım.. oturup kafa yorcaz..

    bu arada sonyazilar.php tema kodlarını yerleştirsek olur mu diye bakim.. ben herşeyi exec-php ile koyuyordum siteye yan menude php kod çalıştırma yani güzel oluyordu.. bu tabbar canımı sıktı ama lazım çok uzayıp gidiyor malesef.. neyse bir değişiklik olursa buraya yazı ver :)

  10. eylultoprak 11 Ağu, 2007 23:45 :

    http://www.eylulgunesi.com/css.gkaans.txt işine yarar sanırım..

    ama ben hala ie’de sonyazilar.php gösteremiyorum.. html gözüküyor ama.. :(

  11. eylultoprak 12 Ağu, 2007 01:01 :

    hocam sonunda kendime göre uyarlamaya başardım.. :) darısı senin ie versiyonunun başına.. :)

    yanlız bir tek sorun kaldı.. ff de sonyazilar.php açılırken.. ie’de açılmıyor.. ie6 bu arada

    buna bir çözüm önerin olabilir mi acaba..

  12. eylultoprak 12 Ağu, 2007 03:32 :

    hocam ie problemini çözdüm..

    sonyazilar.php dosyasına burdan ulaşabilirsin..

    DivShare File - sonyazilar.txt

  13. eylultoprak 12 Ağu, 2007 05:37 :

    Merhaba;

    eğer türkçe karaketer hatasi verirse aşağıdaki dosyayi kullanın..

    DivShare File - turkce_karater_cozumlu_sonyazilar.rar

  14. fikirbozan 12 Ağu, 2007 10:36 :

    Ben verdiğiniz kodları denedim ama olmadı(ie7). Dmry ‘ın anlattığı şeyi yapabilirsek o güzel olacak. Onu denedim oldu. IEde sanırım direk wordpress kodlarını çalıştıramıyoruz. Yoruma cevap gelirse orda çok güzel olacak.

  15. eylultoprak 12 Ağu, 2007 10:41 :

    hocam altıda düzeldi.. sorun yok hem karakter hem açılma problemi giderildi gibi :) ama bi ben denedim

    istersen siteme bir girip ie yedi ile bi bak..

  16. fikirbozan 12 Ağu, 2007 10:51 :

    Yok denedim sizinkini de ama olmadı. Yeni sayfada açılıyor tıkladığım zaman.

  17. eylultoprak 12 Ağu, 2007 10:58 :

    evet o zaman iframe şart keşke yedi olsaydı bende’de

    maintab olmadan kod bi bütün sayılmıyor bunu artırmak lazım.. neyse zaten daha yediye geçmedik tam olarak ziyaretçilerin çoğu altı biraz böyle kullanalım..

    dmry yaptığını bulabilirsen yapa bilirsen sevinirim :)

    burdan da yaz hocam hadi kolay gelsin bu arada tema hoş olmuş.. insanın gözünü fıldır fıldır yapıyor r:)

  18. Wpdestek | Wordpress Destek Sitesi 12 Ağu, 2007 13:26 :

    [...] bir günlükçü tarafından anlatıldı. Fikirbozan‘ın günlüğünde yazmış olduğu wordpress için ajax tab menü yapalım başlıklı yazıda basit bir ajax tab menünün Wordpress günlüklere nasıl entegre [...]

  19. yakuter 12 Ağu, 2007 13:35 :

    Merhabalar. Teşekkürler bu güzel paylaşım için. Wpdestek.com’da da yerini aldı tabi ki ;) Tekrar teşekkürler…

  20. eylultoprak 12 Ağu, 2007 14:24 :

    hocam;

    ben şimdi ie7 versiyon bir pc’de bakıyorum senin dediğin gibi yeni pencerede açılma sorunu yok.. gayet güzel açıldı tab menu içerisinde.. şuan kullandığım dosya turkce karaketer cozumlu son yazılar.. bilgin olsun.

  21. H-Yaman » Haftalık Haber Turu-16 14 Ağu, 2007 00:08 :

    [...] Fikribozan, Wordpress temalarında son zamanlarda bir hayli popüler olan Ajax destekli tab menüleri oluşturmak için çok güzel bir makale yayınlamış. Işınlan [...]

  22. master 14 Ağu, 2007 22:58 :

    teşekkürler anlatım için.
    kaynak: http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/

  23. eylultoprak 16 Ağu, 2007 09:37 :

    html dosyalarda php kodlarını ekleme

    http://bilisimsozluk.com/html-dosyalarinin-icine-php-kodlarini-ekleme.html

  24. Ajax Tab Nasıl Yapılmaz ? | Bigadic Mania™ (O ben oluyorum :)) Kişisel Blog 18 Ağu, 2007 05:11 :

    [...] konuda yazılmış birkaç konu var onları inceleyip sizde yapabilirsiniz. Yenilenen Yan Menü - wordpress için ajax tab menü yapalım - Wordpress üstündeki son yazıları html sayfanızda gösterin Kaynaklarımızıda belirttik [...]

  25. OneDay » Blog Arşivi » Wordpress İçin AJAX Tab Menü 18 Ağu, 2007 15:45 :

    [...] sonunda bir günlükçü tarafından anlatıldı. Fikirbozan‘ın günlüğünde yazmış olduğu wordpress için ajax tab menü yapalım başlıklı yazıda basit bir ajax tab menünün Wordpress günlüklere nasıl entegre [...]

  26. eylultoprak 19 Ağu, 2007 16:49 :

    hocam selamlar;

    http://blog.bigadicmania.com/2007/08/18/ajax-tab-nasil-yapilmaz/

    buraya bi bakarsın.. sende ie7 nasıl çalıştıramadın bilemiyorum hala buda bir çözüm olabilir.. bu arada

  27. fikirbozan 19 Ağu, 2007 16:55 :

    ya oraya baktım ama yani aslında bende öle yapmayı düşünüyorum ama nasıl yapılacağını bilmiyorum anlamadım desem yeridir mesela kategorileri falan nasıl göstercez veya blogroll u?

  28. eylultoprak 19 Ağu, 2007 19:21 :

    hepsini kod koyacaksın o hocam bildiğim wordpress kodu :)

    http://codex.wordpress.org/Template_Tags bak burda hepsi listelenmiş var. zaten yapmışsında bilmeyen için yazıyorum :)

  29. Wordpress İçin AJAX Tab Menü indir-download indir,izle,download,watch,free,mp3,films,dvix 20 Ağu, 2007 16:49 :

    [...] tarafından anlatıldı. Fikirbozan‘ın günlüğünde yazmış olduğu wordpress için ajax tab menü yapalım başlıklı yazıda basit bir ajax tab menünün Wordpress günlüklere nasıl [...]

  30. Wordpress İçin AJAX Tab Menü 24 Ağu, 2007 09:35 :

    [...] günlüğünde yazmış olduğu wordpress için ajax tab menü yapalım başlıklı yazıda basit bir ajax tab menünün Wordpress günlüklere nasıl entegre [...]

  31. Can 21 Oca, 2008 14:29 :

    Böyle bir hata veriyor;

    http://img293.imageshack.us/img293/548/adszmy7.png

    senin şuan sitende sağ üst köşedeki gibi değil sanırım bu seninki hangi ek varmı bir link acaba ?

    bu arada teşekkürler.. :)

  32. fikirbozan 22 Oca, 2008 08:07 :

    @Can
    Uzun bir süredir ilgilenemedim konuyla. Vakit bulduğum bir zamanda bu yazıyı güncelleyeceğim

  33. Burak D. 19 Mar, 2008 18:53 :

    buyrun sitemde uygulanmış halini görebilirsiniz. teşekkürler fikirbozan.. biraz uğraşsam da sonuç güzel

Fikrini Söyle