Wordpress bootstrap carousel loop

Question

Witam, na wstępnie chcę powiedzieć że nie jestem dobry z php. Próbuję dodać do wordpressa carousel wykonaną w bootstrapie taką lecz bez kilku rzeczy. Po dodaniu pętli na stronie jako slajd 1 powtarza się 4 razy, następnie slajd 2 również powtarza się 4 razy.

 

<div class="row">
                            <div class="col-sm-8" id="carousel-bounding-box">
                                <div class="carousel slide" id="myCarousel">
                                    <!-- Carousel items -->
                                    
                                    <div class="carousel-inner">
                                       
                                        
                                        
			<?php $the_query = new WP_Query(array(
			  'posts_per_page' => 4
			  ));
		?>
                                        <?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?>
		
                                        
                                        <div class="active item" data-slide-number="0">
                                        <?php the_post_thumbnail(); ?></div>

                                        <div class="item" data-slide-number="1">
                                        <?php the_post_thumbnail(); ?></div>

                                        <div class="item" data-slide-number="2">
                                        <?php the_post_thumbnail(); ?>></div>

                                        <div class="item" data-slide-number="3">
                                        <?php the_post_thumbnail(); ?></div>

                                       <?php endwhile; ?>
                                    </div><!-- Carousel nav -->
                                    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                                        <span class="glyphicon glyphicon-chevron-left"></span>                                       
                                    </a>
                                    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                                        <span class="glyphicon glyphicon-chevron-right"></span>                                       
                                    </a>                                
                                    </div>
                            </div>

                            <div class="col-sm-4" id="carousel-text"></div>

                            <div id="slide-content" style="display: none;">
                                
                                <div id="slide-content-0">
                                    <h2>jeden</h2>
                                    <p>Lorem Ipsum Dolor</p>
                                    <p class="sub-text">October 24 2014 - <a href="#">Read more</a></p>
                                </div>

                                <div id="slide-content-1">
                                    <h2>dwa</h2>
                                    <p>Lorem Ipsum Dolor</p>
                                    <p class="sub-text">October 24 2014 - <a href="#">Read more</a></p>
                                </div>

                                <div id="slide-content-2">
                                    <h2>trzy</h2>
                                    <p>Lorem Ipsum Dolor</p>
                                    <p class="sub-text">October 24 2014 - <a href="#">Read more</a></p>
                                </div>

                                <div id="slide-content-3">
                                    <h2>cztery</h2>
                                    <p>Lorem Ipsum Dolor</p>
                                    <p class="sub-text">October 24 2014 - <a href="#">Read more</a></p>
                                </div>

                        
                            </div>
                        </div>

Jak usunę:

 <div class="item" data-slide-number="1">
                                        <?php the_post_thumbnail(); ?></div>

                                        <div class="item" data-slide-number="2">
                                        <?php the_post_thumbnail(); ?>></div>

                                        <div class="item" data-slide-number="3">
                                        <?php the_post_thumbnail(); ?></div>

to mam jeden slajd, a chcę pokazywać cztery ostatnie posty. Bardzo proszę o pomoc.

Answer 1

Polecam zastąpić na:

1. Owl Carousel 2
2. Prawidłowa pętla:

 <?php $query = new WP_Query( [
'posts_per_page' => 4,
'post_type' => 'post'
] ); ?>
 <?php if ( $query->have_posts() ) :
// Tutaj daj początek karuzeli + <ul>
 while ( $query->have_posts() ) : $query->the_post(); ?>

//Tutaj daj element <li> <?php the_post_thumbnail ?> </li>
 <?php endwhile; 
 wp_reset_postdata();
// Zamknięcie </ul>
 <?php endif; ?>

Powinno zwrócić 4 wpisy z bloga, jeśli takie istnieją

Comments

Dzięki, przyda się. Chodzi mi o to żeby pobierać z posta obrazek oraz tytuł i kilkanaście znaków take że miniaturka ma być po lewej stronie, a zawartość posta po prawej. Męczę się z tym już kilka dni.

Masz może jakiś pomysł na pętle, która będzie pobierać tylko jeden post (ostatni, przed ostatni dodatni itp.) oraz pętle pokazującą zakres od np. przedostatniego dodanego posta do piątego od końca?

---

Pobierać możesz poprzez funkcje:

1. Tytuł: <?php  the_titile(); ?>
2. Znaki jeśli chodzi o treść to: <?php  the_content ?> lub <?php the_excerpt(); ?>
3. Jeśli chodzi o takie zakresy, ja zazwyczaj używam ACF, podpinam pod to slider, wybieram slajdy które mają być pokazywane na stronie. Ale możesz też wybrać posty które chcesz wyświetlić. Pobierać z custom post type. 
4. Lub poszukaj po prostu na WP_Query

Answer 2

Taka pętla:

 <div class="row">
                    <div class="col-xs-12" id="slider">
                        <!-- Top part of the slider -->
                        <div class="row">
                            <div class="col-sm-8" id="carousel-bounding-box">
                                <div class="carousel slide" id="myCarousel">
                                    <!-- Carousel items -->
                                    
                                    <div class="carousel-inner">
                      

                                        
                                        
			<?php $the_query = new WP_Query(array('posts_per_page' => 4,'post_type' => 'post'));
		?>
                                         <?php if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
                                        <div class="active item" data-slide-number="0">
                                        <?php the_post_thumbnail(); ?></div>
                                       <?php endwhile; ?>
                                        <?php wp_reset_postdata(); ?>
                                        <?php endif; ?>
                                    </div><!-- Carousel nav -->
                                    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                                        <span class="glyphicon glyphicon-chevron-left"></span>                                       
                                    </a>
                                    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                                        <span class="glyphicon glyphicon-chevron-right"></span>                                       
                                    </a>                                
                                    </div>
                            </div>

                            <div class="col-sm-4" id="carousel-text"></div>

                            <div id="slide-content" style="display: none;">
                                
                                <?php if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
                                        <div id="slide-content-0">
                                        <?php the_title(); ?></div>
                                       <?php endwhile; ?>
                                        <?php wp_reset_postdata(); ?>
                                        <?php endif; ?>
                            </div>
                        </div>
                    </div>
                </div>

Pobiera tytuł tylko ostatniego wpisu i dwie miniaturki ostatniego i przed ostatniego wpisu i daje je z lewej strony. Jak wykonać pętle żeby pobierała poprawnie miniaturki ostatnich wpisów?