Bxslider Slide mit 2 Posts

Gelöst

(@nothinghalosix)

Hallo,

ich habe ein cpt Kundenstimme (Feedback Slider) in jedem Slide (bxslider) möchte ich jeweils zwei posts anzeigen lassen. kann mir da jemand helfen?

<ul class="bxslider">
        <?php
            $args = array(
                'post_type' => 'kundenstimme',
                'posts_per_page' => -1,
                'orderby' => 'name',
                'order' => 'ASC'
            );
            $the_query = new WP_Query ($args);
            if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post();
        ?>        
        <li class="">
            <?php $feedback_img = get_the_post_thumbnail_url(); ?>
            <div class="flex flex-wrap mb-4">
                <div class="w-1/4 bg-cover h-48" style="background-image: url('<?= $feedback_img; ?>'); ?>"></div>
                <div class="w-3/4 pl-4">
                    <div class=""><?php the_field('feedback'); ?></div>
                </div>
            </div>
            <div class="border-t-2 border-yellow">
                <h4 class="font-semibold"><?php the_title(); ?></h4>
                <p class="text-sm"><?php the_field('job'); ?></p>
            </div>
        </li>     
        <?php endwhile;endif; ?>
    </ul>

wie kann ich das in meinem Script am besten umsetzen?

danke schon mal & lg

Ansicht von 4 Antworten - 1 bis 4 (von insgesamt 4)

Moderator

Bego Mario Garde

(@pixolin)

vor 3 Jahren, 5 Monaten

Ich verstehe noch nicht, was das Slider-Plugin mit deinem CPT zu tun hat.

Im Moment hast du eine Query, die alle (ich würde das begrenzen) Beiträge des CPT kundenstimmen abruft und dann in einer Loop Custom Fields, ein Beitragsbild und einen Titel ausgibt. Um daraus einen Slider zu machen, musst du noch die Slider-Funktionalität (meistens JavaScript, ggf. jQuery) hinzufügen. Ein schönes Beispiel findest du hier: https://kenwheeler.github.io/slick/

Statt das Rad neu zu erfinden, kannst du aber auch nach einem Plugin für einen Testimonial-Slider suchen, z.B. Testimonial – Best Testimonial Slider Plugin for WordPress – das liefert dir gleich den passenden CPT mit.

Thread-Starter

j_spaceman

(@nothinghalosix)

vor 3 Jahren, 5 Monaten

Hallo,

danke für deine Rückmeldung. Was die Funkionalität zum Slider betrifft ist mir alles klar und funktioniert auch schon. Ich möchte im Slide jedoch 2 Posts anzeigen. Plugins möchte ich so wenig wie möglich verwenden.

Das Ding sollte in etwa so aussehn -> Screenshot

gibts da keine andere Lösung außer Plugins?

Moderator

Bego Mario Garde

(@pixolin)

vor 3 Jahren, 5 Monaten

Irgendwie musst du die Funktionalität ja in WordPress reinbekommen – entweder indem du selber ein Plugin installierst oder indem du ein fertiges Plugins verwendest. Ein Plugin hast du dann so oder so.

Thread-Starter

j_spaceman

(@nothinghalosix)

vor 3 Jahren, 4 Monaten

Ich habs jetzt so gefixed

<ul class="bxslider">
            <?php
                $args=array(
                'post_type' => 'kundenstimme',
                );

                $query = new WP_Query($args);

                if( $query -> have_posts() ) {
                    echo '';
                $i = 0;
                $ids = array();

                while ($query -> have_posts()) : $query->the_post();

                    if($i % 2 == 0) { ?>

                        <li class="">   
                            <div class="flex flex-wrap -mx-2">
                                <?php $loop = new WP_Query( array( 'post_type' => 'kundenstimme', 'posts_per_page' => 2, 'orderby'   => 'rand', 'post__not_in' => $ids ) ); ?>

                                <?php while ( $loop -> have_posts() ) : $loop -> the_post(); ?>

                                <!-- A single feedback -->
                                <?php $feedback_img = get_the_post_thumbnail_url(); ?>
                                <div class="w-full lg: xl:w-1/2 px-4">
                                    <div class="flex flex-wrap">
                                        <div class="w-full md:w-1/4 lg:w-1/4 xl:w-1/4 bg-cover h-64 md:h-40 lg:h-40 xl:h-40" style="background-image: url(<?= $feedback_img; ?>); ?>"></div>
                                        <div class="w-full md:w-3/4 lg:w-3/4 xl:w-3/4 pl-4">
                                            <div class=""><?php the_field('feedback'); ?></div>
                                        </div>
                                    </div>
                                    <div class="border-t-2 border-yellow">
                                        <h4 class="font-semibold"><?php the_title(); ?></h4>
                                        <p class="text-sm"><?php the_field('job'); ?></p>
                                    </div>
                                </div>
                                    <?php $ids[] = get_the_ID(); ?>

                                <?php endwhile; ?>

                            </div>
                        </li>
                    <?php } ?>
                    <?php
                    $i++;
                endwhile;
                }

                wp_reset_query();
            ?>
            </ul>

Diese Antwort wurde geändert vor 3 Jahren, 4 Monaten von j_spaceman.

Ansicht von 4 Antworten - 1 bis 4 (von insgesamt 4)

Das Thema „Bxslider Slide mit 2 Posts“ ist für neue Antworten geschlossen.

Themen-Schlagwörter

Ansichten