WP & JQuery - R10.net

29-08-2009, 20:47:12

Merhaba,

Şurdaki gibi bir menüye ihtiyacım var sitemin bir sayfasında. Ama JQuery hakkında hiç bilgim yok ve nasıl entegre edebileceğimi anlayamadım açıkçası.

Yardımcı olabilecek var mı?

Teşekkürler.

29-08-2009, 21:22:43

#2

niphell

edit

header.php ye jquery.js yi eklemeyi unutma

bide istediğin bu şekildeyse tabi

29-08-2009, 21:35:49

#3

KMLGRLR

Hayır ben bunu yazı içindeki başlıklarımda kullanmak istiyorum.

Header.php'ye js dosyalarını entegre ettim. İstersen özel mesajla uygulamak istediğim sayfayı gönderebilirim.

29-08-2009, 21:40:12

#4

niphell

yazı içinde div-ul-li gibi taglar çalışmaktadır bu durumda

    <script type="text/javascript">
        $(document).ready(function(){
            $('div.accordion1').accordion({
                acik:1,
                baslik:'<div class="menuTitle">Fade - ul </div>',
                hiz:150,
                etiket:'ul',
                effect:'fade',
                style:'menu'
            });
        });
    </script>

bunu header.php de <body> den sonra ekle

<div class="accordion1">
        <ul title="Baslık bir">
            <li><a href="#">Madde 1</a></li>
            <li><a href="#">Madde 2</a></li>
            <li><a href="#">Madde 3</a></li>
        </ul>
    </div>

bu koduda yazı içine uygula

29-08-2009, 21:44:31

#5

KMLGRLR

Olmadı Niphell malesef.

29-08-2009, 21:57:06

#6

niphell

bende bi deneyim bakalım localde

29-08-2009, 22:03:00

#7

~~Kavi~~

Üyeliği durduruldu

akordiyonlu hazır wp teması var

onu bul editle

29-08-2009, 22:08:49

#8

niphell

anlatımına geçelim

indir: http://blog.weboutbox.com/ornekler/a.../accordion.rar
tema klasörüne at: accordion.js, jquery.js
indirilen css/style.css aç: div.accordionBaslik{ dan sonuna kadar kopyala
tema style.css aç: en sona yapıştır
header.php aç: </head> dan öncesine aşağıdakileri yapıştır

<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/jquery.js"></script>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/accordion.js"></script>

<body> den sonrada aşağıdakileri yapıştır

<script type="text/javascript">
$(document).ready(function(){
$('li.accordion1').accordion({
acik:1,
baslik:'<div class="menuTitle">Bölümler</div>',
hiz:150,
etiket:'ul',
effect:'fade',
style:'menu'
});
});
</script>
yeni bir yazı girerkende bu şekilde gir

<ul>
<li class="accordion1">
<ul title="Part 1">
<li>Embed kod</li>
</ul>
<ul title="Part 2">
<li>Embed kod</li>
</ul>
<ul title="Part 3">
<li>Embed kod</li>
</ul>
<ul title="Part 4">
<li>Embed kod</li>
</ul>
</li>
</ul>

yazıyı kaydet

son olarakta güle güle kullan

29-08-2009, 23:29:00

#9

ronya

niphell adlı üyeden alıntı: mesajı görüntüle

anlatımına geçelim

...

Denedim güzel oldu.

Şu şekilde güzel olur bloglarınızda
Part1 olarak adlandırılan her butona bir kategori koyup tıklandığında o kategoriye ait yazılar çıkar,kullanışlı ve değişik bir menü olur.

<li class="accordion1">
<ul title="Part 1">
<li>
<?php
query_posts('cat=219&posts_per_page=10');
//cat=5 kategorinin ID'si, posts_per_page=-1 bütün yazılar.

while (have_posts()) : the_post(); ?>
<div style="margin-left:10px;">
<li><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></li> </div>

<?php endwhile; ?>

</li>
</ul>
Kırmızı kodlar menünün kodları onların arasına yeşil kodu yerleştiriyorsunuz.
Yeşil koddaki mavi sayı kategori numarası , pembe ise menü açıldığında gözükmesini istediğiniz yazı adeti.

Yapamayan olursa yazsın yardımcı olayım.