Ich habe diese Codezeile, die Beiträge aus einem bestimmten Beitragstyp generiert:

    <div class="row">

        <?php
            $args = array(
                'post_type' => 'cases',
                'posts_per_page' => 3,
                offset => 2
            );
            $the_query1 = new WP_Query( $args );
            if ( $the_query1 -> have_posts() ):
            while ( $the_query1->have_posts() ): $the_query1->the_post();
        ?>

        <div class="col-sm-4">
            <div class="case-container">
                <div class="case-info-triple">
                    <h4 id="case-title"><?php the_title(); ?></h4>
                    <p id="case-type"><?php the_field('case_type') ?></p>
                    <p id="case-desc"><?php $caseteaser = get_field('case_content', false, false); echo substr($caseteaser, 0, 200); ?></p>
                    <img src="Diensten - zeo9-arrow.png" /><a href="<?php the_field('case_url') ?>">Bekijk deze case</a>
                </div>
            </div>
        </div>

        <?php endwhile; wp_reset_postdata();?>
        <?php endif;?>

    </div>

Das erzeugt dies:

enter image description here

Ich möchte jedoch, dass alle drei 'case-info-triple' Elemente eine eigene eindeutige ID haben. Zum Beispiel <div class="case-info-triple-1">, <div class="case-info-triple-2">, <div class="case-info-triple-3"> und dann wieder <div class="case-info-triple-1">, <div class="case-info-triple-2"> usw. usw.

Siehe entsprechende Quelle:

enter image description here

Wir zeigen vorerst 3 Beiträge pro Seite, aber wir werden es in Zukunft auf 9 ändern. Grundsätzlich hat jedes erste, zweite und dritte Info-Element eine eigene Farbe und ich brauche eine eindeutige ID, damit ich sie mit CSS formatieren kann.

Wie geht man das an?

0
Mike. D 19 Jän. 2019 im 13:06

3 Antworten

Beste Antwort

Initialisieren Sie vor Ihrer while-Schleife eine Variable:

$cnt = 0;

Dann können Sie in Ihre while-Schleife Folgendes einfügen:

$classID = $cnt++%3;

Um den Zähler und dann den Modul um 3 zu erhöhen. Sie können dies für eine beliebige Anzahl von Spalten anpassen. Wenn Sie 3 als Modul verwenden, wird eine Zahl zwischen 0 und 2 erzeugt. Verwenden Sie dann hier die classID:

<div class="case-info-triple<?php echo '-'.$classID; ?>">

Oder Sie können die Variable $cnt überspringen und das Inkrement gleichzeitig mit dem Echo der classID wie folgt ausführen:

$classID = 0;

while($classID <= 5) { ?>
    <div class="case-info-triple<?php echo '-'.$classID++%3; ?>">text</div>
<?php }
1
Chris Strickland 15 März 2019 im 05:35

Es gibt viele Optionen, aber Sie verwenden eine Zählervariable und fügen diese im Klassennamen hinzu, um sie eindeutig zu machen. In Ihrem Code können Sie beispielsweise Folgendes tun: -

<div class="row">

<?php
    $args = array(
        'post_type' => 'cases',
        'posts_per_page' => 3,
        offset => 2
    );
    $the_query1 = new WP_Query( $args );
    if ( $the_query1 -> have_posts() ):
    $id = 1;
    while ( $the_query1->have_posts() ): $the_query1->the_post();
    $infoClassName = "case-info-triple-"+$id;
?>

<div class="col-sm-4">
    <div class="<?php echo $infoClassName; ?>">
        <div class="case-info-triple">
            <h4 id="case-title"><?php the_title(); ?></h4>
            <p id="case-type"><?php the_field('case_type') ?></p>
            <p id="case-desc"><?php $caseteaser = get_field('case_content', false, false); echo substr($caseteaser, 0, 200); ?></p>
            <img src="Diensten - zeo9-arrow.png" /><a href="<?php the_field('case_url') ?>">Bekijk deze case</a>
        </div>
    </div>
</div>

<?php $id++; ?>
<?php endwhile; wp_reset_postdata();?>
<?php endif;?>
1
DeepCode 19 Jän. 2019 im 10:20

Können Sie Ihrem Array Argumente hinzufügen, die Zeilen angeben (3 Zeilen mit 3 Beiträgen)?

$args = array(
  'post_type' => 'cases',
  'posts_per_row' => 3,
  'rows_per_page' => 3,

Bewegen Sie dann Ihr HTML im Skript, damit Sie einen Abschnitt if... elseif... else einfügen können, um die Benennung von <div class="case-info-triple-1">, -2 oder -3 basierend auf der Postreihe zu automatisieren .

1
elbrant 19 Jän. 2019 im 10:21