Single.php czyli widok pojedynczego wpisu
autor: Robert
24 listopada 2014
Skoro mamy już listę naszych wpisów to teraz musimy wyświetlić pojedynczy wpis, który z niej wybierzemy. Służy do tego plik single.php.
Standardowo zaczynamy od pobrania sobie naszego pliku header.php za pomocą funkcji <?php get_header(); ?> a następnie, jak to zwykle bywa w przypadku Bootstrapowych stron otwieramy sobie divy z klasami .container oraz .row.
Nasz wpis będzie się mieścił w divie z klasą .col-md-8 a pozostałe 4 kolumny wykorzystamy na wyświetlenie panelu bocznego (sidebara).
Zaczynamy od poznanej we wpisie o wyświetlaniu listy wpisów funkcji „The Loop” czyli <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> która w tym przypadku pobierze nam zawartość wybranego wpisu i wyświetli kod HTML, który wewnątrz niej umieścimy.
Lista funkcji użytych w The Loop:
<?php the_title(); ?>wyświetli nam tytuł wpisu<?php the_author(); ?>wyświetli nam autora wpisu<?php the_date(); ?>wyświetli nam datę dodania wpisu<?php echo get_the_post_thumbnail( $page->ID, 'large', array( 'class' => 'center-block img-responsive' ) ); ?>wyświetli nam miniaturę wpisu jako duży obrazek<?php the_content(); ?>wyświetli nam treść wpisu<?php comments_template(); ?>wyświetli nam szablon wyglądu komentarzy pobrany z plikucomments.php
Tak więc zaczniemy od otwarcia diva z klasą .page-header czyli Bootstrapowy nagłówek. Wewnątrz tego diva w znaczniku H2 umieszczamy funkcję <?php the_title(); ?> a wewnątrz znacznika <small> umiescimy funkcję <?php the_author(); ?>. Dodatkowo w znaczniku H4 umieścimy sobie funkcję <?php the_date(); ?> no i zamykamy diva.
Kolejnym elementem jest wyświetlenie treści wpisu. Zaczynamy od otwarcia diva z klasą .col-md-12 wewnątrz którego najpier wyświetlimy sobie naszą miniaturę wpisu za pomocą kodu <?php echo get_the_post_thumbnail( $page->ID, 'large', array( 'class' => 'center-block img-responsive' ) ); ?> gdzie ‚large’ oznacza wielkość obrazka a wewnątrz tablicy array umieszczamy klasy dla naszego obrazka czyli .center-block .img-responsive
Teraz przychodzi czas na wyświetlenie treści wpisu, tutaj wystarczy użyć funkcji <?php the_content(); ?>, która zrobi to dla nas. Na koniec zamykamy diva
Dobrze jest by nasi czytelnicy mogli skomentować nasz post. Otwieramy zatem diva z klasą .col-md-12 i umieszczamy w nim funkcję <?php comments_template(); ?>, która wczyta nam plik comments.php
Pozostaje zamknąć naszą pętlę oraz instrukcję warunkową za pomocą kodu <?php endwhile; ?>, <?php else: ?> oraz <?php endif; ?> oraz domknąć diva z klasą .col-md-8.
Teraz otwieramy diva z klasą .col-md-4 w którym za pomocą funkcji <?php get_sidebar(); ?> wyświetlimy sobie nasz panel boczny i zamykamy wszystkie otwarte divy.
Ostatnie zadanie to standardowo wyświetlenie naszej stopki czyli użycie <?php get_footer(); ?> i w ten sposób stworzyliśmy szablon służący do wyświetlania postów:)
Komentarze: 2 komentarze
marcin 16 września 2015 o 00:05
Hej, jeśli można spytać, to w jaki sposób mogę np: ustawić jakieś konkretne tło dla strony z pojedynczymi wpisami? np: style=”background-color: grey;” którym miejscu można nadać style do strony single, albo do np: custom-page, tak żeby wszędzie był np inny kolor tła?
Odpowiedzmarcin 17 września 2015 o 11:16
Wklejam odpowiedź z maila, jakby ktoś w przyszłości szukał odpowiedzi:
„Co do zmiany tła to hest funkcja is_page -> http://codex.wordpress.org/Function_Reference/is_page
Tworzysz sobie diva dla tła i wpisujesz mu w/w funkcję w miejsce klasy. Wtedy jeśli np. wejdziemy na aktualności to funkcja dopisze taką klasę a CSS zmieni jej tło.”
Dziękuję za pomoc Robert.
Odpowiedz
