目录
首页 笔记 详情

WordPress 主题添加幻灯片功能


在 wordpress 主题使用中,有个别的主题并没有幻灯片功能,需要我们手动添加该功能,成本过高,今天给大家分享一组不错的后台幻灯版发布的代码,同时也可以运用在前台调用,可以说是华丽丽的前端幻灯片了,我们以默认的 wordpress 主题为例,讲解下如何为 wordpress 主题添加一个幻灯片发布功能,直接调用推荐的文章或多个栏目的最新文章作为幻灯片,代码如下:

		<!--切换-->
		<div class="qh fl">
			<?php $ii = 1;
				$args = array('posts_per_page' => 4, 'orderby' => 'date', 'cat' => array(1, 4), 'meta_key' => '_thumbnail_id');
				$loop = new WP_Query($args); ?>
			<div class="focusBox">
				<ul class="pic">
					<?php if ($loop->have_posts()) : while ($loop->have_posts()) : $loop->the_post(); ?>
						<li><a href="<?php the_permalink(); ?>"
						       target="_blank"><?php the_post_thumbnail(); ?></a></li>
					<?php endwhile;endif; ?>
				</ul>
				<div class="txt-bg"></div>
				<div class="txt">
					<ul>
						<?php if ($loop->have_posts()) : while ($loop->have_posts()) : $loop->the_post(); ?>
							<li>
								<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
							</li>
						<?php endwhile;endif; ?>
					</ul>
				</div>
				<ul class="num">
					<?php if ($loop->have_posts()) : while ($loop->have_posts()) : $loop->the_post(); ?>
						<li><a><?php echo $ii;
									$ii++; ?></a><span></span></li>
					<?php endwhile;endif; ?>
				</ul>
			</div>
			<?php wp_reset_query(); ?>
			<script type="text/javascript">
				jQuery(".focusBox").slide({
					titCell: ".num li",
					mainCell: ".pic",
					effect: "fold",
					autoPlay: true,
					trigger: "click",
					startFun: function (i) {
						jQuery(".focusBox .txt li").eq(i).animate({"bottom": 0}).siblings().animate({"bottom": -36});
					}
				});
			</script>
		</div>

 


写笔记

咨询

您的电子邮箱地址不会被公开。 必填项已用*标注