首页 > 解决方案 > 连接到 Wordpress 仪表板默认帖子的自定义轮播代码

问题描述

我是 wordpress 的新手,我的自定义代码中有一个轮播,在我的本地主机中它非常好。但是当我在 wordpress 中传输所有按行显示的帖子时。

我的目标是在我的轮播中滑动每一个帖子。

到目前为止,这是我的代码:

              <?php
          $args = array(
            'post_type' => 'news',
            'posts_per_page' => 3,
            'orderby' => 'post_date',
            'order' => 'DESC',
            'post_status' => 'publish',
            );
            $posts = get_posts( $args );
            foreach ( $posts as $post ):
            setup_postdata( $post );
          ?>               

            
            
            <div id="myCarousel" class="carousel slide">

                <ol class="carousel-indicators black">
                    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                    <li data-target="#myCarousel" data-slide-to="1"></li>
                    <li data-target="#myCarousel" data-slide-to="2"></li>
                </ol>

                <div class="carousel-inner">


                  <div class="item active"> 
                    <div class="col-md-4 col-sm-4 col-xs-12">
                   
                         <a href="<?php the_permalink(); ?>">  
                            <?php if (has_post_thumbnail()) : ?>
                            <?php the_post_thumbnail('imgResize'); ?>
                            <?php else : ?>
                        
                            <img src="<?php echo get_template_directory_uri(); ?>/image/png/default_img.png" alt="img" >
                             
                            <?php endif; ?>
                        </a>
                    </div>
                    <div class="col-md-8 col-sm-8 col-xs-12">
                      <div class="aa-n-about">
                        <p class="date"><?php the_time('Y.m.d'); ?></p>
                          
                          
                        <a href="<?php the_permalink(); ?>">
                            <h5 class="n-title"><?php the_title(); ?></h5>
                        </a>
                            <p class="n-detail"><?php the_content(); ?></p>
                      </div>
                         
                    </div>
                  </div>
                    
                                            
                  
                    
                </div>
                
                <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                    <span class="glypicon glypicon-cheveron-left"></span>
                </a>
                <a class="right carousel-control" href="#myCarousel" data-slide="next">
                    <span class="glypicon glypicon-cheveron-right"></span>
                </a>

              <!-- / News Slides -->

          </div>
            
            
 <?php endforeach; wp_reset_postdata(); ?> 

我知道这个问题对某些人来说很容易。

标签: wordpress

解决方案


我理解您的意思是查询有效并且您的 HTML 内容输出正确,但幻灯片没有“隐藏”,或者换句话说,没有显示为幻灯片。

如果这就是发生的事情,我怀疑这是一个 JS 问题。看起来你正在使用引导程序。检查您是否正在加载轮播所需的 Bootstrap JS。


推荐阅读