Support » Allgemeine Fragen » Loop mit unterschiedlicher Ausrichtung

  • Gelöst mythtakes

    (@mythtakes)


    Hallo liebe WordPress-Commune,

    ich habe eine Frage zu meinem Loop, den ich gerne so wie auf diesem Wireframe anlegen möchte. Die Artikelausrichtung soll dabei immer wechseln. Ein Artikel linksbündig, der folgende Artikel rechtsbündig usw.

    blogtheme

    Kann mir jemand weiterhelfen?

    Vielen Dank schon im Voraus! 🙂

Ansicht von 13 Antworten - 1 bis 13 (von insgesamt 13)
  • Was ist denn „dein Loop“? Verwendest du ein eigenes Template? Hast du ein Child-Theme erstellt? Geht es um den Query-Block im Editor?

    Hallo,
    wenn du dann noch die URL oben einträgst, dann können wir uns das auch ansehen und dir sicher besser helfen. Lies bitte auch noch mal: Bevor du ein neues Thema (Thread) erstellst.
    Dann können wir auch sehen, welches Theme du hast bzw. ob das Theme vielleicht bereits eine entsprechende Option bietet. Noch einfacher ist natürlich, wenn du uns schreibst, welches Theme du einsetzt.
    Viele Grüße
    Hans-Gerd

    Thread-Ersteller mythtakes

    (@mythtakes)

    Ja, ich verwende mein eigenes Template. Und nein, habe kein Child-Theme erstellt. Wollte es am liebsten gleich im PHP schreiben. Aber wenn es eine bessere Lösung gibt, dann bin ich natürlich offen. Verwende bisher lieber den Classic-Editor.

    Ohne den Code deines Templates zu kennen, kann ich dir da nicht helfen.

    Änderungen direkt im Theme haben eine kurze Lebensdauer, weil sie beim nächsten Theme-Update überschrieben werden. Besser wäre es, ein Child-Theme zu erstellen, wenn du die Darstellung nicht mit CSS alleine regeln kannst.

    Thread-Ersteller mythtakes

    (@mythtakes)

    Ne, ich halte das Theme minimalistisch und möchte es selbst schreiben.

    Der Code vom Loop sieht so aus:

    <div class="container">
    	<div class="row">
    		
    		<div style="width: 90%; margin-left: 5%;">
    	   		<?php query_posts('cat=-34'); ?>
    			<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
     
    			<div class="col-xl-12">
    
    					<div id="newest-posts-<?php the_ID(); ?>" class="newest-posts">
    
    					<div class="row">
    						<div class="col-xl-6">
    							<div class="index-entry-media">
    								<img src="<?php echo get_post_meta($post->ID, 'newest-post-index-thumb', true); ?>"/>
    							</div>
    						</div>
    						<div class="col-xl-6">
    
    						<div class="newest-posts-container">	
    
    							<div class="entry-meta">
    												<?php the_category(' / '); ?>
    														<span class="x"> — </span> 
    												<?php comments_popup_link( __( 'Kommentar schreiben' ), __( '1 Kommentar' ), __( '% Kommentare' ) ); ?>
    							</div>
    
    							<h2 class="newest-post-title">
    								<a href="<?php the_permalink(); ?>"><?php the_title() ?></a>
    							</h2>
    
    							<a class="newest-posts-more" href="<?php the_permalink() ?>">zum Artikel</a>
    
    					</div>	
    
    					</div>
    				</div>
     	  
    			</div> <!-- .newest-posts --> 
      		</div> <!-- .col -->   
    	        
    		 
    		   
    		    <?php endwhile; ?>
    		    
    		
    	 
    				<?php wp_pagenavi(); ?>
    
    	    	<?php endif; ?>
    	   
    
    		</div> <!-- .div style -->
    	</div> <!-- .row -->
    </div> <!-- .container -->
    • Diese Antwort wurde geändert vor 5 Monaten, 2 Wochen von mythtakes.
    Thread-Ersteller mythtakes

    (@mythtakes)

    und die Posts sollen sich im Loop so abwechseln wie hier (unter dem Featured Post im Header):

    https://wpthemes.themehunk.com/elanza/?layout=boxed&sidebar=no-sidebar

    Nehmen wir an, deine Loop gibt (natürlich extrem vereinfacht) folgenden Code pro Beitrag aus:

    <img src="thumbnail.jpg" alt="Beitragsbild" />
    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consectetur
      hic, doloribus beatae, placeat cupiditate nostrum neque aliquid nulla
      aperiam dolore sed earum ab labore inventore ipsa officia assumenda
      maiores obcaecati?
    </p>

    Dabei wird das Bild zuerst ausgegeben, darunter der Text. Mit ein wenig CSS kannst du Bild und Text nebeneinander stellen, wobei die Reihenfolge immer gleich bleibt: links das Bild, rechts der Text.
    Die Reihenfolge kannst du zum Beispiel mit CSS Flexbox ändern. Die Vorgabe ist, dass die Inhalte mit flex-direction: row; von links nach rechts nebeneinander gesetzt werden, bis die Zeile voll ist. Mit flex-direction: row-reverse; kannst du das umkehren.

    Um nun die Reihenfolge nur für jeden zweiten Post umzukehren, musst du jedem zweiten Post eine eigene CSS-Klasse zuweisen. Dafür kannst du in der Loop einen Zähler verwenden:

    <?php
    $counter = 0; 
    $class = '';
    
    if ( have_posts() ) {
      while ( have_posts() ) {
      the_post(); 
    
      $counter++;
      if( $counter % 2 == 0 ) {
        $class= 'even';
      }
      echo '<div class="item ' . $class . '">;
        the_tumbnail();
        the_excerpt();
      echo '</div>';
    
      } // end while
    } // end if
    ?>
    

    Nun werden die Beiträge abwechselnd als

    
    <div class="item ">
    <img src="thumbnail.jpg" alt="Beitragsbild" />
    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consectetur
      hic, doloribus beatae, placeat cupiditate nostrum neque aliquid nulla
      aperiam dolore sed earum ab labore inventore ipsa officia assumenda
      maiores obcaecati?
    </p>
    <div>
    

    und (wenn der Zähler eine gerade Zahl hat) als

    
    <div class="item even">
    <img src="thumbnail.jpg" alt="Beitragsbild" />
    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consectetur
      hic, doloribus beatae, placeat cupiditate nostrum neque aliquid nulla
      aperiam dolore sed earum ab labore inventore ipsa officia assumenda
      maiores obcaecati?
    </p>
    <div>
    

    ausgegeben. Dass kannst du mit etwas CSS stylen:

    .item {
      display: flex;
      gap: 10px;
      grid-template-columns: 1fr 1fr;
    }
    
    .even {
      flex-direction: row-reverse;
    }
    

    Nun werden Bild und Text in abwechselnder Reihenfolge ausgegeben.

    (Wie das aussieht, kannst du dir in diesem JSFiddle ansehen: https://jsfiddle.net/Ltc4v7fa/3/)

    In dem Demo-Beispiel wird mit der CSS-Eigenschaft li.post:nth-child(2n) gearbeitet und mal das Thumbnail mit float:right rechts bzw. mit float:left links ausgegeben. Dafür ist dann nicht mal ein Counter nötig – eigentlich solltest du sogar ohne eigenes Template auskommen.

    Thread-Ersteller mythtakes

    (@mythtakes)

    Vielen vielen Dank Bego Mario Garde, das hat mir sehr geholfen und das probiere ich dann gleich mal aus. Und melde mich, falls ich irgendwo einen Denkfehler habe. 🙂

    Thread-Ersteller mythtakes

    (@mythtakes)

    Habe es jetzt mal mit :nth-child probiert und flex-direction probiert. Leider werden jetzt im Loop nur jede <li> angesprochen und nicht nur jede zweite. Weiß jemand wo mein Denkfehler ist?

    https://bit.ly/3QzAFLE

    Tausend Dank schon mal!

    • Diese Antwort wurde geändert vor 1 Woche, 4 Tage von mythtakes.
    Thread-Ersteller mythtakes

    (@mythtakes)

    Jetzt, habe es herausgefunden an was es lag.

    Statt

    li .row:nth-child(2n+1) { background: red !important; flex-direction: row-reverse}

    habe ich direkt das Listenelement angesprochen:

    li:nth-child(2n+1) .row { background: red !important; flex-direction: row-reverse}

    Hallo @mythtakes
    Kannst du das Thema dann bitte als gelöst markieren, wenn das Problem damit für dich behoben ist:
    Gelöst
    Die Option findest du rechts in der Sidebar. Danke.
    Viele Grüße
    Hans-Gerd

    Moderator Bego Mario Garde

    (@pixolin)

    Die Frage ist ja scheinbar beantwortet.
    Ich markiere den Thread als „gelöst“.

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