wp网站添加专栏 左侧幻灯片 右侧4篇文章

网站添加专栏
左侧幻灯片 右侧4篇文章
从后台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>';
        },
    },
    
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    autoplay:true,
    loop : true,
  }) 
  </script>

循环不读取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' );