Erstellen einer for-Schleife zum Anzeigen dynamischer Daten

Lesezeit: 7 Minuten

Benutzer-Avatar
Todessturm

Ich entwickle derzeit eine benutzerdefinierte WordPress-Vorlage. Innerhalb dieser Vorlage versuche ich, alle Beiträge aus bestimmten Kategorien anzuzeigen, sehe es als eine Art Produktsegment (kein Verkauf oder so). Was ich jetzt habe, ist das dynamische Anzeigen aller Bilder und Titel aller Posts mit all dem Styling und Filtern durch die Einstellungen von ACF.

Was ich erreichen möchte, ist das folgende Ergebnis: (mit Bootstrap).

4 Spalten in jeder Zeile, aber wenn es mehr als 4 Beiträge gibt. (Wenn also eine zweite oder dritte Zeile einer bestimmten Kategorie vorhanden sein muss), erstellen Sie eine Minimierungsfunktion zum Anzeigen von Beiträgen 5 >.

Nach einigen Versuchen bin ich zu dem Schluss gekommen, dass der beste Weg darin besteht, eine for-Schleife zu erstellen. In Kombination mit Filtern würde dies die Ansicht erstellen, die ich zu erstellen versuche. Nachdem ich verschiedene Methoden ausprobiert habe, bin ich leider etwas hängen geblieben. Der Code ist unten gezeigt:

<div id="items">
<?php

    if (have_rows('products_category')) {

        while (have_rows('products_category')) : the_row();

        // Your loop code
        $title = get_sub_field('product_category_name');
        $slug = get_sub_field('product_category_slug');

        /* Start the filter categpries segment */
        $category = get_category_by_slug($slug);
        $filter_id = $category->term_id;
        $filters = array();
        var_dump($filters);
        array_push($filters, $filter_id);
        var_dump($filters);
        array_push($filters, 7);
        var_dump($filters);

        ?>
        <div id="items" class="row products margin-0 justify-content-between">
            <div class=" <?php echo $filter_id ?> ">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 padding-0 padding-b-10">
                    <h2><?php echo $title ?></h2>
                </div>
                <div class="col-lg-12 padding-0">
                    <div id="products" class="row products margin-0 justify-content-between">
                        <?php $argsNew = array(
                            'offset' => 0,
                            'category' => $filters,
                            'orderby' => 'date',
                            'order' => 'DESC',
                            'include' => '',
                            'exclude' => '',
                            'meta_key' => '',
                            'meta_value' => '',
                            'post_type' => 'post',
                            'post_mime_type' => '',
                            'post_parent' => '',
                            'author' => '',
                            'author_name' => '',
                            'post_status' => 'publish',
                            'posts_per_page' => -1,
                            'suppress_filters' => false,
                            'connected_items' => get_queried_object(),
                        );
                        $posts_array = get_posts($argsNew);
                        $number_posts = count($posts_array);
                        echo $number_posts;
                        $i = 0;
                        foreach ($posts_array as $post) : setup_postdata($post);
                        $i++;
                        if($i <= 4) {
                        ?>
                            <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 margin-fix padding-s-15 padding-b-30 image_filter">
                                <?php echo get_the_post_thumbnail($post->ID, '', array('class' => 'img-responsive big_image products_image img_small')); ?>
                                <?php the_title(sprintf('<h2 class="text-center big_image_product_text products_text"><a href="https://stackoverflow.com/questions/49571178/%s" rel="bookmark">', esc_url(get_permalink())),
                                    '</a></h2>'); ?>
                                <?php

                                ?>
                            </div>
                            <?php
                            }
                                else if($i > 4) {
                                    ?>
                    </div>
                        <div class="row">
                            <button data-toggle="collapse" class="btn-collapse" data-target="#products_collapse_<?php echo $filter_id ?>">Show more</button>
                        </div>
                    <div id="products_collapse_<?php echo $filter_id ?>" class="row products collapse margin-0 justify-content-between">
                        <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 margin-fix padding-s-15 padding-b-30 image_filter">
                            <?php echo get_the_post_thumbnail($post->ID, '', array('class' => 'img-responsive big_image products_image img_small')); ?>
                            <?php the_title(sprintf('<h2 class="text-center big_image_product_text products_text"><a href="https://stackoverflow.com/questions/49571178/%s" rel="bookmark">', esc_url(get_permalink())),
                                '</a></h2>'); ?>
                        </div>
                    </div>

                        <?php
                        }
                        endforeach;
                        wp_reset_postdata(); ?>
                        </div>
                    </div>
                </div>
        <?php
        endwhile;
        }
        else {
        // no rows found
            echo "nothing found!";
        }
        ?>
    </div>

AKTUALISIEREN

Ich habe versucht, die for-Schleife mit dem zu erstellen $number_posts und eine Zählmethode, aber leider ist die Ansicht dann stark beschädigt. Also meine Frage ist:

  1. Erstellen Sie eine For-Schleife / einen Zähler, um die Anzahl der Beiträge für jede angezeigte Kategorie zu zählen.
  2. Geben Sie die Ansicht dieser Ergebnisse an:

für -> Punkte 1,2,3,4. Platziere sie in einer Reihe. (1 1 1 1). wenn (mehr als 4 Elemente). Platziere Items > 5 (und so weiter). Unter einem Einsturzblock.

z.B

3 Artikel:

Normal view: 

1 1 1.

7 Artikel:

anzeigen + reduzieren (

 1 1 1 1 
 -collapse button-
 1 1 1 
(more items)

)

Könnte mir jemand in die richtige Richtung zeigen und mir dabei helfen? Danke im Voraus!

PS: Wenn Sie Fragen haben, stellen Sie diese bitte in den Kommentaren unten

  • Was ist die Notwendigkeit für ACF, können Sie Kategorien ohne es durchlaufen?

    – Ali_k

    3. April 2018 um 11:40 Uhr

  • ACF wird benötigt, weil der Client genau auswählen möchte, was angezeigt werden soll und was nicht. Es ist ein dynamischer Aufbau, weil es so angefordert wurde. @Ali_k

    – Todessturm

    3. April 2018 um 12:00 Uhr

  • Ok, gibt es eine Möglichkeit, ein Array der angegebenen Kategorien in ACF zurückzugeben.

    – Ali_k

    3. April 2018 um 12:03 Uhr

  • Können Sie var_dump() dafür verwenden und mir das Ergebnis mitteilen: $specified_cats = get_field( "products_category" );

    – Ali_k

    3. April 2018 um 12:07 Uhr

  • Ja, aber ich denke, Sie stellen die falschen Fragen, weil ich meine Frage weiter aktualisieren muss, also habe ich gerade meine obige Frage aktualisiert, um @Ali_k klarer zu machen

    – Todessturm

    3. April 2018 um 12:10 Uhr

Benutzer-Avatar
Ali_k

Das Feld übernehmen products_category gibt ein Array ausgewählter Kategorie-IDs zurück:
Geben Sie hier die Bildbeschreibung ein

Das wird funktionieren:

<div id="items">
<?php
    // Retrieve all product categories
    $terms = get_terms( 'product_cat' );
    // Retrieve chosen categories to display 
    $specified_cats = get_field( "products_category" );

    // Loop though product cats
    foreach ( $terms as $term ) {

        $filter_id = $term->term_id;
        // If the current product category id is not in the array 'specified_cats' just to the next iteration
        if(!in_array($filter_id, $specified_cats)){
            continue;
        }

        $title = $term->name;
        $slug = $term->slug;


       ?>
        <div id="items" class="row products margin-0 justify-content-between">
            <div class=" <?php echo $filter_id ?> ">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 padding-0 padding-b-10">
                    <h2><?php echo $title ?></h2>
                </div>
                <div class="col-lg-12 padding-0">
                    <div id="products" class="row products margin-0 justify-content-between">
                        <?php 
                        $argsNew = array (
                            'offset' => 0,
                            'orderby' => 'date',
                            'order' => 'DESC',
                            'post_type' => 'product',
                            'post_status' => 'publish',
                            'posts_per_page' => -1,
                            'product_cat'=> $term->name
                        ); 

                        $posts_array = get_posts($argsNew);
                        $number_posts = count($posts_array);
                        $i = 0;
                        foreach ($posts_array as $post) : setup_postdata($post);
                        $i++;
                        if($i <= 4) {
                        ?>
                            <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 margin-fix padding-s-15 padding-b-30 image_filter">
                                <?php echo get_the_post_thumbnail($post->ID, '', array('class' => 'img-responsive big_image products_image img_small')); ?>
                                <?php the_title(sprintf('<h2 class="text-center big_image_product_text products_text"><a href="https://stackoverflow.com/questions/49571178/%s" rel="bookmark">', esc_url(get_permalink())),
                                    '</a></h2>'); ?>
                                <?php

                                ?>
                            </div>

                            <?php
                            }else if($i > 4) {
                                    ?>
                        <div class="row">
                            <button data-toggle="collapse" class="btn-collapse" data-target="#products_collapse_<?php echo $filter_id ?>">Show more</button>
                        </div>
                        <div id="products_collapse_<?php echo $filter_id ?>" class="row products collapse margin-0 justify-content-between">
                            <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 margin-fix padding-s-15 padding-b-30 image_filter">
                                <?php echo get_the_post_thumbnail($post->ID, '', array('class' => 'img-responsive big_image products_image img_small')); ?>
                                <?php the_title(sprintf('<h2 class="text-center big_image_product_text products_text"><a href="https://stackoverflow.com/questions/49571178/%s" rel="bookmark">', esc_url(get_permalink())),
                                    '</a></h2>'); ?>
                            </div>
                        </div>
                        <?php
                        }
                        endforeach;
                        wp_reset_postdata(); ?>
                        <div class="clearfix"></div>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>
        </div>
        <?php
    }

?>
</div>

Der Code ist getestet und funktioniert. Ich habe sogar Bootstrap eingebunden, um sicherzustellen, dass alles richtig funktioniert:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

1369150cookie-checkErstellen einer for-Schleife zum Anzeigen dynamischer Daten

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy