Wsparcie » Zaawansowane » Losowe wyświetlanie wpisów w trzech kolumnach

  • artsites

    (@artsites)


    Witam,
    chcę aby na kilku podstronach wyświetlało mi się w losowej kolejności dziewięć wpisów z konkretnej kategorii w trzech kolumnach (po 3 wpisy w kolumnie).

    Jeśli chodzi o podział na kolumny to w sieci znalazłem coś takiego:

    Wiele pętli wyświetlanych w wielu kolumnach.
    
        Pierwsza kolumna, pierwsza pętla: wyświetla wpisy #1-5
        Druga kolumna, druga pętla:    wyświetla wpisy #6-10
        Trzecia kolumna,  trzecia pętla: wyświetla wpisy #11-15
    
    Używając WordPressa i arkuszu stylów CSS ta konfiguracja jest stosunkowo łatwa do wykonania.
    Krok 1: Ustawienie wielu pętli
    
    Pierwszą rzeczą którą chcemy dokonać jest zamiana standardowej pętli WordPressa następującym kodem:
    
    // PIERWSZA PĘTLA: wyświetla wpisy od 1 do 5
    <?php query_posts('showposts=5'); ?>
    <?php $posts = get_posts('numberposts=5&;offset=0'); foreach ($posts as $post) : start_wp(); ?>
    <?php static $count1 = 0; if ($count1 == "5") { break; } else { ?>
    
    <?php the_title(); ?>
    <?php the_content(); ?>
    
    <?php $count1++; } ?>
    <?php endforeach; ?>
    
    // DRUGA PĘTLA: wyświetla wpisy od 6 do 10
    <?php query_posts('showposts=5'); ?>
    <?php $posts = get_posts('numberposts=5&;offset=5'); foreach ($posts as $post) : start_wp(); ?>
    <?php static $count2 = 0; if ($count2 == "5") { break; } else { ?>
    
    <?php the_title(); ?>
    <?php the_content(); ?>
    
    <?php $count2++; } ?>
    <?php endforeach; ?>
    
    // TRZECIA PĘTLA: wyświetla wpisy od 11 do 15
    <?php query_posts('showposts=5'); ?>
    <?php $posts = get_posts('numberposts=5&;offset=10'); foreach ($posts as $post) : start_wp(); ?>
    <?php static $count3 = 0; if ($count3 == "5") { break; } else { ?>
    
    <?php the_title(); ?>
    <?php the_content(); ?>
    
    <?php $count3++; } ?>
    <?php endforeach; ?>
    
    W tym tkwi cała esencja. Mamy trzy pętle, każda wyświetla pięć wpisów. Pierwsza pętla wyświetla pierwsze pięć wpisów, druga pętla wyświetla kolejne pięć wpisów, a kolejna trzecia kolejne pięć wpisów. Ta wielo – pętlowa konfiguracja wyświetla ostatnie 15 wpisów, z których każdy jest unikalny.
    Krok 2: Znaczniki w twoich plikach szablonu
    
    Teraz gdy mamy PHP na mejscu, możemy dodać znaczniki (X)HTML niezbędne do ostatecznej konfiguracji trzech kolumn. Istnieje wiele sposobów by tego dokonać, oto jeden z nich:
    
    <div id="column_01">
    
    	<!—- PIERWSZA PĘTLA -->
    
    </div>
    
    <div id="column_wrap">
    
    	<div id="column_02">
    
    		<!—- DRUGA PĘTLA -->
    
    	</div>
    	<div id="column_03">
    
    		<!-- TRZECIA PĘTLA -->
    
    	</div>
    
    </div>
    
    Tutaj, każda z pętli zostanie umieszczona w swoim własnym znaczniku div, który potem zostanie przekształcony w jedną z trzech kolumn przy użyciu styli CSS. Zauważ iż możesz zmienić nazwę id działu w celu lepszego reprezentowania konkretnej semantyki dokumentu.
    
    Krok 3: Sylizacja kolumn przy wykorzystaniu akruszy stylów CSS
    
    Ostatnim krokiem w tym kursie jest stylizacja znaczników odpowiednimi stylami.
    
    /* trzy kolumnowy układ */
    div#column_01 {
    	float: left;
    	clear: none;
    	width: 30%;
    	}
    div#column_wrap {
    	float: right;
    	clear: none;
    	width: 60%;
    	}
    	div#column_02 {
    		float: left;
    		clear: none;
    		width: 45%;
    		}
    	div#column_03 {
    		float: right;
    		clear: none;
    		width: 45%;
    		}
    
    Sztuczką tutaj jest użycie wartości width która stworzy poprawną szerokość kolumny. Szerokości kolumn są w przybliżeniu równe.

    (Nie wiem czy nie zmieni mi on układu całej strony. Ja chce żeby tak było tylko na kilku stronach)

    Jeśli byłoby to możliwe, to chciałbym, żeby wyświetlały się tylko ikony wpisu ( dopiero po kliknięciu – przejście do całości postu)

    Czy jest ktoś w stanie pomóc mi to edytować?

  • Temat ‘Losowe wyświetlanie wpisów w trzech kolumnach’ jest zamknięty na nowe odpowiedzi.