在自定义帖子类型滑块上添加导航链接
Adding navigation links on custom post type slider
我正在从头开始研究Wordpress主题。我有几个部分,其中一个显示视频和一些推荐。我设法构建(像这样:http://www.wpbeginner.com/wp-tutorials/how-to-add-rotating-testimonials-in-wordpress/)一个不错的动态推荐滑块,使用自定义帖子类型(其中每个推荐都是一个帖子)和一个隐藏和显示每个帖子的脚本,进行简单但有趣的过渡。
现在我需要在滑块下添加一个类似轮播的导航(带有那些漂亮的小点)。问题是:我尝试了很多解决方案,但没有一个奏效。有人能为我照亮一盏灯吗?
这是我用来显示自定义帖子循环的代码:
<div class="depo-wrap">
<div class="depoimentos">
<?php
$args = array( 'post_type' => 'testimonial', 'posts_per_page' => 10 );
$loop = new WP_Query( $args );
if ( $loop->have_posts() ) : while ( $loop->have_posts() ) : $loop->the_post();
$data = get_post_meta( $loop->post->ID, 'testimonial', true );
static $count = 0;
if ($count == "1") { ?>
<div class="slide" style="display: none;">
<div class="citacao"><?php the_content(); ?></div>
<div class="info-pessoal"><?php echo $data[ 'nome-pessoa' ]; ?><span> | </span><?php echo $data[ 'local-origem' ]; ?></div>
<div class="cargo"><?php echo $data[ 'cargo' ]; ?></div>
</div>
<?php } else { ?>
<div class="slide">
<div class="citacao"><?php the_content(); ?></div>
<div class="info-pessoal"><?php echo $data[ 'nome-pessoa' ]; ?><span> | </span><?php echo $data[ 'local-origem' ]; ?></div>
<div class="cargo"><?php echo $data[ 'cargo' ]; ?></div>
</div>
<?php
$count++; }
endwhile;
endif; ?>
</div>
</div>
这是使一切正常工作的脚本:
$(document).ready(function(){
$('.depoimentos .slide');
setInterval(function(){
$('.depoimentos .slide').filter(':visible').fadeOut(1000,function(){
if($(this).next('.slide').size()){
$(this).next().fadeIn(1000);
} else {
$('.depoimentos .slide').eq(0).fadeIn(1000);
}
});
}, 15000);
});
TL;DR:我这里有这段代码,我正在尝试添加一些类似旋转木马的项目符号,甚至是一些下一个/上一个按钮。我只想为我在 Wordpress 中使用自定义帖子类型创建的这张推荐幻灯片添加一个导航。
添加引导轮播有效(谢谢@Enrico)!以下是经过一些修改的代码:
<div id="carousel-depoimentos" class="carousel slide carousel-fade" data-ride="carousel" data-interval="1000">
<div class="carousel-inner depoimentos">
<?php
$args = array( 'post_type' => 'testimonial', 'posts_per_page' => 1 );
$loop = new WP_Query( $args );
if ( $loop->have_posts() ) : while ( $loop->have_posts() ) : $loop->the_post();
$data = get_post_meta( $loop->post->ID, 'testimonial', true );
{ ?>
<div class="item active">
<div class="citacao"><?php the_content(); ?></div>
<div class="info-pessoal"><?php echo $data[ 'nome-pessoa' ]; ?><span> | </span><?php echo $data[ 'local-origem' ]; ?></div>
<div class="cargo"><?php echo $data[ 'cargo' ]; ?></div>
</div>
<?php
}
endwhile;
endif;
wp_reset_postdata();
?>
<?php
$args = array( 'post_type' => 'testimonial', 'posts_per_page' => 10, 'offset' => 1 );
$loop = new WP_Query( $args );
if ( $loop->have_posts() ) : while ( $loop->have_posts() ) : $loop->the_post();
$data = get_post_meta( $loop->post->ID, 'testimonial', true );
{ ?>
<div class="item">
<div class="citacao"><?php the_content(); ?></div>
<div class="info-pessoal"><?php echo $data[ 'nome-pessoa' ]; ?><span> | </span><?php echo $data[ 'local-origem' ]; ?></div>
<div class="cargo"><?php echo $data[ 'cargo' ]; ?></div>
</div>
<?php
}
endwhile;
endif;
wp_reset_postdata();
?>
</div>
</div>
相关文章:
- 使用数据幻灯片到和javascript将类添加到转盘导航
- 如何将jQuery文件添加到导航网站
- 使用 jQuery 添加键盘导航
- 在我的玉石模板中添加导航栏
- 在自定义帖子类型滑块上添加导航链接
- 如何一次为所有屏幕添加导航栏
- 在javascript图像滑块上添加导航
- 我如何添加导航箭头上的“JQuery照片滑块与半透明标题”
- 在滑块下面添加导航按钮
- 使用JavaScript动态添加导航到图库
- 仅使用JavaScript向幻灯片库添加导航控件
- 如何添加导航按钮到我的网站
- 在使用react-native-meteor时,为react-native-navigation添加导航栏按钮
- 在我的下拉菜单中添加导航和导航药丸
- 如何动态添加导航栏到jQuery移动应用程序
- 离子菜单,如何避免默认添加导航图标的隐藏类
- 如何在灯箱库中添加导航
- 使用scrollTo插件和点击并保持功能来添加导航元素到页面
- 如何使用jQuery UI选项卡在选项卡内容下添加导航
- 如何在没有ng-include的情况下为AngularJS模板添加导航侧边栏和页脚