Bootstrap Grid im Query Loop

Hi Leute,

ich habe da ein Problem mit einem Grid Layout, erstellt mit Bootstrap. Es geht genau um einen „9er“ Grid auf großen Bildschirmen ( größer als 992px) 3 Reihen und drei Spalten mit jeweils 3 Posts pro Reihe. Und auf kleinen Bildschirmen ( kleiner als 992px) dann ein 10er Grid mit zwei Spalten jeweils zwei Posts pro Reihe. Hier mal ein kleines Beispiel etwas abgespeckt: https://jsfiddle.net/ucg8khh8/1/

Das Problem liegt jetzt an der Anpassung an ein responsives Design.
Aktuell habe ich eine nicht zufriedenstellende Lösung. Ich habe zwei query have_posts(); Schleifen am laufen. Die ich jeweils gegenseitig mit visible an den entsprechenden Bildschirmbreiten wiedergebe. Problem hierbei ist ich muss zweimal die selbe Abfrage starten. Kann das meine Pagespeed stören? Ich gehe jedoch davon aus deswegen suche ich nach einer besseren Lösung.

Meine beiden Abfragen werden also geladen und dann dementsprechend „versteckt“ oder visible gemacht. (Den ganzen Code gibt es unten).
<div class='device-check visible-md visible-lg visible-xs' data-device='md lg xs'> <!--Unsichtbar bei col-sm--> Hiermit mach ich die Abfrage für das 9er Grid unsichtbar für die Größe 720px bis 920px. Danach mache ich es ähnlich in dem ich die Abfrage für das 10er Grid unsichtbar für alle anderen Größen und somit visible für 720px bis 920px mache.

Nun die Frage: Gibt es hier eine alternative Lösung? So das ich nur eine Abfrage starten kann. Ich hoffe ihr versteht was ich meine.

Hier sind meine beiden Abfragen:

<div class='device-check visible-md visible-lg visible-xs' data-device='md lg xs'> <!--Unsichtbar bei col-sm-->
	<?php
	// Ein erstes Query
$args = array(
                'post_type' => 'post',
                'post_status' => 'publish',
                'posts_per_page'=>9,
                'order'=>'DESC',
                'orderby'=>'date'
                );
$next_the_query = new WP_Query( $args );

		?>
		<?php 
		$rowCount = 1;
	
   if ( $next_the_query->have_posts() ) {
    while ( $next_the_query->have_posts() ) {
        $next_the_query->the_post();
				
		if ( $rowCount == 1 )
		{ 
			echo '<div class="row">';
			get_template_part( 'content', 'grid' ); // Raster aus der content-grid.php
				$rowCount++;	
		} 
		else if ($rowCount == 2 ) {
			get_template_part( 'content', 'grid' ); // Raster aus der content-grid.php
				$rowCount++;			
			}			
		else {
			get_template_part( 'content', 'grid' ); // Raster aus der content-grid.php
			echo '</div>';
				$rowCount = 1;
		}

    } } else {
        // Keine Beiträge gefunden
    }
    ?>
    <div class="row">
    <div class="col-md-12 mittig">
			<?php the_posts_pagination(); ?>
		</div>	</div>
   <?php
    wp_reset_postdata();
?>
</div> 
		
<div class='device-check visible-sm' data-device='sm'> <!--Nur sichtbar bei SM -->
		<?php
	// Ein zweites Query
$args = array(
                'post_type' => 'post',
                'post_status' => 'publish',
                'posts_per_page'=>10,
                'order'=>'DESC',
                'orderby'=>'date'
                );
$next_the_query = new WP_Query( $args );

		?>
		<?php 
	$rowCount = 1;
	
   if ( $next_the_query->have_posts() ) {
    while ( $next_the_query->have_posts() ) {
        $next_the_query->the_post();
				
		if ( $rowCount == 1 )
		{ 
			echo '<div class="row">';
			get_template_part( 'content', 'grid' ); // Raster aus der content-grid.php
				$rowCount++;	
		} 
		else if ($rowCount == 2 ) {
			get_template_part( 'content', 'grid' ); // Raster aus der content-grid.php
				$rowCount++;			
			}		
				else if ($rowCount == 3 ) {
			get_template_part( 'content', 'grid' ); // Raster aus der content-grid.php
				$rowCount++;			
			}	
		else {
			get_template_part( 'content', 'grid' ); // Raster aus der content-grid.php
			echo '</div>';
				$rowCount = 1;
		} 

    } echo '</div>'; } else {
        // Keine Beiträge gefunden
    }
    ?>
    <div class="row">
    <div class="col-md-12 mittig">
			<?php the_posts_pagination(); ?>
		</div>	</div>
   <?php
    wp_reset_postdata();
?>
</div>

Hier ist noch mein Bootstrap Grid aus der content-grid.php Datei

	<div class="col-md-4 col-sm-6 col-xs-12">
		<div class="fenster abgerundet">
				<div class="raster-Thumbnail">
					<?php //Thumbnail anzeigen
					if ( has_post_thumbnail() ) {
					the_post_thumbnail('post-thumbnail', ['class' => 'img-responsive', 'title' => 'Vorschau']);
					} else {
						?> <img src="<?php bloginfo('template_url'); ?>/rasterVorschauStandard.png" alt="Vorschau <?php the_title(); ?>" class="img-responsive"/>
						<?php } ?> 
						<div class="raster-Kategorie col-md-12"> <!--Kategorie-->
							<?php the_category(); ?>
					</div>
				</div>
				
			<div class="row">
			<div class="col-xs-12">
			<div class="text">
			<h2><?php the_title(); ?></h2>  <!--Überschrift--> 
				<p>Hier kommt der einleitende Satz. Dolor sit amet, consetetur sadipscDolor sit amet, consetetur sadipsc ing elitr, sed.</p>
				<div class="row"><div class="col-md-12 mittig weiter-lesen"><a href="<?php the_permalink(); ?>k">Weiter Lesen</a></div></div></div></div>
			
		</div>
	</div>
	</div>

• Dieses Thema wurde geändert vor 7 Jahren, 3 Monaten von juicylung.