Support » Allgemeine Fragen » Loop mit unterschiedlicher Ausrichtung

  • 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 9 Antworten - 1 bis 9 (von insgesamt 9)
  • Moderator Bego Mario Garde

    (@pixolin)

    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.

    Moderator Bego Mario Garde

    (@pixolin)

    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 1 Woche, 3 Tage 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

    Moderator Bego Mario Garde

    (@pixolin)

    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/)

    Moderator Bego Mario Garde

    (@pixolin)

    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. 🙂

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