私は本当にこの問題に苦労しています..
私のワードプレス index.php でサイクル経由で特集記事のスライドショーを表示したいのですが、まあ.. ワードプレスではできません。
最初に、サイクルとスクリプトをヘッダーにエンキューしました。
<?php
wp_enqueue_script('jquery.cycle.all.min', '/wp-content/themes/black1/js/jquery.cycle.all.min.js', array('jquery'));
wp_enqueue_script('jquery_script', '/wp-content/themes/black1/js/jquery_script.js');
?>
これは私のjQueryスクリプトです:
$(document).ready(function(){
$('#slideshow').cycle({
fx: 'fade'
});
});
次に、このコードをテンプレートの index.php に配置して、注目のカテゴリに最近の 5 件の投稿を表示します。
<div id="slideshow">
<?php query_posts('cat=88&showposts=5'); ?>
<?php while (have_posts()) : the_post(); ?>
<div class="slideshow_post">
<div class="slideshow_overlay">
<h2 class="topTitle"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
<p class="byline"><?php echo get_post_meta($post->ID, 'beschreibung', true); ?></p>
</div>
<a class="slideshow_pic" href="<?php the_permalink() ?>"><img src="images/testbild.jpg" alt="test"/></a>
</div>
<?php endwhile;?>
オーバーレイなどでかなりきれいに見えますが、まったくアニメーション化されません。5 つの投稿が上下に配置されるだけです。
そして、ここに私のCSSがあります:
#slideshow {
width: 700px;
height: 400px;
background: #ccc;
margin: 0 0 20px 0;
border: 1px solid #ddd;
}
.slideshow_post{
width: 640px;
height: 360px;
background: #777;
padding: 2px;
position: relative;
}
.slideshow_overlay {
width: 640px;
height: 100px;
position: absolute;
background: url(images/overflow.png) repeat;
clear: none;
bottom: 0;
}
a.slideshow_pic{
width: 640px;
height: 360px;
overflow: hidden;
padding: 0;
}
本当に私を設定するのは、css などを使用したこのアニメーションがすべて新しい html ページで機能したという事実です。???
私は何を間違っていますか?
ドイツからのご挨拶 KAiN