網(wǎng)站添加專欄
左側(cè)幻燈片 右側(cè)4篇文章
從后臺(tái)column專欄讀取
在index.php heard及footer插入以下代碼
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/swiper.min.css">
<style>
.l_column{width:65.5%;float:left;margin-bottom: 25px;}
.r_column{width:32.5%;background:#ffffff;float:right;margin-bottom: 25px;}
.hr{border-bottom: 1px solid #d3d3d3;}
.img_column{width:100%}
td{
overflow: hidden;
margin-bottom:15px;
padding: 0 15px;
line-height: 1.2em;
color: #616161;
font-family: 'Oswald',Verdana, Geneva, sans-serif;
font-size:1.4em;
}
table{height:368.56px}
td a {color: #616161;}
@media (max-width: 990px) {
.l_column{width:100%;}
.r_column{width:100%;}
}
@media (min-width: 991px) and (max-width: 1200px) {
td{font-size:1.2em;}
}
.swiper-pagination-bullet {
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
font-size: 12px;
color:#000;
opacity: 1;
background: rgba(0,0,0,0.2);
}
.swiper-pagination-bullet-active {
color:#fff;
background: #b93333;
}
</style>
<?php if(have_posts()) : ?>
<!--分類顯示-->
<?php
$cat_3 = get_category_by_slug('column')->term_id;
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;?>
<div class="container">
<div class="l_column">
<?php query_posts('cat='.$cat_3. ',572&showposts=' . $limit=4);?>
<div class="swiper-container " id="swiper-container2">
<div class="swiper-wrapper">
<?php while(have_posts()) : the_post(); ?>
<div class="swiper-slide img_column">
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( ); ?></a>
</div>
<?php endwhile; wp_reset_query();?>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-next swiper-button-white"></div>
<div class="swiper-button-prev swiper-button-white"></div>
</div>
</div>
<div class="r_column">
<table>
<?php query_posts('cat='.$cat_3. ',572&showposts=' . $limit=4);
while(have_posts()) : the_post(); ?>
<tr><td class="hr"><a href="<?php the_permalink(); ?>"><?php the_title(); ?> </a></td></tr>
<?php endwhile; wp_reset_query();?>
</table>
</div>
</div>
<?php endif; ?>
<script src="<?php bloginfo('template_url'); ?>/js/swiper.min.js"></script>
<script>
var mySwiper = new Swiper ('.swiper-container', {
loop: true,
// 如果需要分頁器
pagination: {
el: '.swiper-pagination',
clickable: true,
renderBullet: function (index, className) {
return '<span class="' + className + '">' + (index + 1) + '</span>';
},
},
// 如果需要前進(jìn)后退按鈕
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
autoplay:true,
loop : true,
})
</script>
循環(huán)不讀取column專欄文章
在functions.php中加入
function exclude_category_home( $query ) {
if ( $query->is_home ) {
$query->set( 'cat', '-1131' );
}
return $query;
}
add_filter( 'pre_get_posts', 'exclude_category_home' );