http://blog.olicio.us/2009/07/25/floom/
Adresinde bulunan slayt gösterim eklentisini Wordpress'e entegre etmek için oradaki kodları tam olarak hangi dosyalara eklemem lazım bilmiyorum, bu konu yardımlarınızı beklemekteyim, teşekkürler.
ben sayfa olarak hazırlayıp kullandım.
görünümü:
http://img24.imageshack.us/img24/3710/slideea.png Hazırlanışı:
----------------------------------------
Temanızın
style.css dosyasına şu kodları ekleyin:
ul, li { list-style: none; margin: 0; padding: 0; }
#blinds-cont { -webkit-box-shadow: 0 0 40px #000; background: url(bg.png) 0 0 no-repeat; margin: 50px auto; padding: 20px 0 0 0; font-family: 'Georgia', 'Arial Narrow', 'Arial', sans-serif; height: 410px; -moz-box-shadow: 0 0 40px #000; width: 1000px; }
#blinds-cont #blinds { margin: 0 auto; background: url(images/spinner.gif) 50% no-repeat; height: 330px; width: 960px; }
#blinds-cont #blinds .floom_slice { z-index: 10; }
#blinds-cont #blinds .floom_caption { text-shadow: 0 1px 0 #fff; font-size: 1.0em; color: #333; font-style: italic; position: relative; text-align: center; width: 100%; top: 25px; }
#blinds-cont #blinds .floom_progressbar { font-size: 1px; background: #131718; border-bottom: solid 1px #fff; height: 3px; position: relative; z-index: 1000; width: 0; top: 2px; }
#blinds-cont #blinds .floom_container { overflow: hidden; border-bottom: solid 1px #fff; border-top: solid 1px #666; }
#blinds-cont #blinds .floom_vertical { float: left; }header.php dosyanıza
<?php wp_head(); ?>
</head>
kodundan önceye ekleyin:
<script type="text/javascript" charset="utf-8" src="<?php bloginfo('template_directory'); ?>/js/mootools-1.2.2-core.js"></script>
<script type="text/javascript" charset="utf-8" src="<?php bloginfo('template_directory'); ?>/js/mootools-1.2.2.2-more.js"></script>
<script type="text/javascript" charset="utf-8" src="<?php bloginfo('template_directory'); ?>/js/floom-1.0.js"></script>
<script type="text/javascript" charset="utf-8">
window.addEvent('domready', function(e) {
// option 1
var slides = [
{
image: 'nature-photo0.jpg',
caption: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit'
},
{
image: 'nature-photo1.jpg',
caption: 'Excepteur sint occaecat cupidatat non proident'
},
{
image: 'nature-photo2.jpg',
caption: 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.'
},
{
image: 'nature-photo3.jpg',
caption: 'Deserunt mollit anim id est laborum'
},
{
image: 'nature-photo4.jpg',
caption: 'Laboris nisi ut aliquip ex ea commodo consequat'
}
];
// option 2
// var slides = $$('#blinds img');
$('blinds').floom(slides, {
slidesBase: '<?php bloginfo('template_directory'); ?>/slides/',
sliceFxIn: {
top: 20
}
});
});
</script>Gerekli dosyaları
buradan indirip temanıza atın.
Son olarak admin panelinizden
Sayfalar kısmına gelin.
Yeni Ekle deyin. Sayfa başlığını yazıp yan taraftan,
Template kısmından
"slide" yazanı seçin ve yayınlayın...
Notlar:
----------------------------------------
Resimleri yükleyeceğiniz adres
wp-content/themes/sizintemanız/slides konumudur.
Resimleri ekledikten sonra
slide.php içerisindeki resim adlarını değiştirmeniz yeterli.
Uyarı: slide.php içindeki
<div id="blinds">
<!-- <img title="Lorem ipsum dolor sit amet, consectetur adipisicing elit" alt="" src="<?php bloginfo('template_directory'); ?>/slides/nature-photo0.jpg" />
<img title="Lorem ipsum dolor sit amet, consectetur adipisicing elit" alt="" src="<?php bloginfo('template_directory'); ?>/slides/nature-photo1.jpg" />
<img title="Lorem ipsum dolor sit amet, consectetur adipisicing elit" alt="" src="<?php bloginfo('template_directory'); ?>/slides/nature-photo2.jpg" />
<img title="Lorem ipsum dolor sit amet, consectetur adipisicing elit" alt="" src="<?php bloginfo('template_directory'); ?>/slides/nature-photo3.jpg" />
<img title="Lorem ipsum dolor sit amet, consectetur adipisicing elit" alt="" src="<?php bloginfo('template_directory'); ?>/slides/nature-photo4.jpg" /> -->
</div>kısmını değiştirirken baştaki <!-- ve sondaki --> kısımları silmeyiniz.
Yazıları değiştirmek için
header.php dosyasına eklediğiniz
{
image: 'nature-photo0.jpg',
caption: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit'
},
{
image: 'nature-photo1.jpg',
caption: 'Excepteur sint occaecat cupidatat non proident'
},
{
image: 'nature-photo2.jpg',
caption: 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.'
},
{
image: 'nature-photo3.jpg',
caption: 'Deserunt mollit anim id est laborum'
},
{
image: 'nature-photo4.jpg',
caption: 'Laboris nisi ut aliquip ex ea commodo consequat'
}kısmındaki
caption: yazan yerleri düzenlemeniz yeterli.
Slide alanının genişliğini,yüksekliğini
style.css'ye eklediğiniz kodlardan ayarlayabilirsiniz.
Teşekkürler...