Index.php czyli lista naszych wpisów na blogu
autor: Robert
24 listopada 2014
Z racji tego, że WordPress jest platformą blogową to warto by było wyświetlać wszystkie nasze wpisy, które do tej pory zamieściliśmy. Do wyświetlenia listy wpisów służy plik index.php w połączeniu z chyba najważniejszą funkcją WordPressa czyli The Loop.
Oczywiście listę wpisów możemy wyświetlać nie tylko w tym pliku ale index.php według hierarchii plików jest do tego przeznaczony.
Jak już pewnie zauważyliście w pliku front-page.php mamy sekcję Template name:, znajdziemy ją również w tym pliku. Chodzi o to by stworzyć sobie stronę np. „Blog” i wybrać oraz z listy szablon „Wpisy na blogu”. W ten sposób nasza podstrona „Blog” będzie korzystała z pliku index.php i będzie wyświetlać nasze posty.
Kolejnym elementem jest <?php get_header(); ?> czyli pobranie naszego pliku header.php i co za tym idzie, wyświetlenie nagłówka strony.
Teraz otworzymy sobie standardowy Bootstrapowy kontener, rząd oraz kolumnę o szerokości 8. Dlatego 8 bo obok będziemy wyświetlali sobie panel boczny (sidebar) o szerokości 4 ale o nim za chwilę.
Przechodzimy do naszej głównej pętli The Loop, która zaczyna się tak: <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>, co oznacza: Jeśli istnieją jakieś posty to niech pętla przechodzi poprzez ich listę i wczytuje każdy z nich po kolei.
W tym momencie WordPress będzie dla każdego istniejącego postu generował nam kod, który znajduje się przed <?php endwhile; ?> czyli przed zakończeniem pętli while.
Lista funkcji użytych wewnątrz The Loop
<?php the_permalink(); ?>generuje nam link do naszego wpisu<?php the_post_thumbnail( $size = 'thumbnail'); ?>pobierze oraz wyświetli nam miniaturkę wpisu<?php the_title(); ?>wyświetla tytuł naszego wpisu<?php the_excerpt(); ?>wyświetla skrócony opis wpisu czyli jego pierwsze 2-3 zdania
Nasza lista wpisów będzie korzystała z Bootstrapowego elementu Media, który bardzo fajnie się do tego nadaje.
Tak więc zaczynamy od otwarcia diva z klasą .media wewnątrz którego umieszczamy link z klasą .pull-left oraz prowadzący do <?php the_permalink(); ?> i zamykamy diva.
Następnie otwieramy diva z klasą .media-body, w jego wnętrzu umieszczamy link prowadzący do <?php the_permalink(); ?> a jako opis linka używamy elementu h4 z klasą media-heading i wewnątrz znacznika wywołujemy funkcję <?php the_title(); ?>.
Po zamknięciu linka wywołujemy funkcję <?php the_excerpt(); ?>, która wyświetli nam kilka zdań o wpisie. Niżej pozostaje nam tylko wyświetlenie przycisku czyli elementu „anchor” z linkiem do <?php the_permalink(); ?> oraz klasą .btn btn-default. Zamykamy sobie diva .media i dodajemy sobie element <hr> aby oddzielić kolejne wpisy poziomą kreską.
Wewnątrz instrukcji <?php else: ?> możemy umieścić sobie informację o braku wpisów (np. <p>Wpisów brak!</p>
Na koniec zamykamy naszą instrukcję warunkową if za pomocą <?php endif; ?> oraz naszego diva z klasą .col-md-8 kończąc w ten sposób blok odpowiedzialny za wyświetlanie wpisów.
Jak napisałem na początku, wyświetlimy sobie jeszcze panel boczny. W tym celu otwieramy sobie diva z klasą .col-md-4 a w jego wnętrzu umieszczamy kod <?php get_sidebar(); ?>, który pobierze nam zawartość pliku sidebar.php.
Zamykamy pozostałe otwarte divy czyli te z klasami .row oraz .container. Dołączamy naszą stałą stopkę czyli plik footer.php za pomocą funkcji <?php get_footer(); ?> i mamy gotową stronę, która pokaże nam wpisy które umieściliśmy na naszym blogu:)
