Dodanie aktualności na stronie głównej
autor: Robert
9 grudnia 2014
Zapewne chcemy mieć na swojej stronie coś w rodzaju aktualności. Możemy w nich poinformować klientów o nowej dostawie czy promocji albo naszych czytelników o nowym wpisie.
Stworzyłem przykłady 2 boksów by pokazać Wam, że nie musimy się ograniczać do jednej kategorii wpisów. Dodatkowo możemy wyświetlać sobie miniaturki, które dodamy do postów.
Kod pętli odpowiedzialnej za wyświetlanie aktualności otoczyłem Bootstrapowym panelem a poszczególne wpisy są elementami Media i wygląda on następująco:
Zanim zacznę opisywać kod, jeszcze jedna ważna sprawa. Musicie zalogować się do swojego panelu WordPress, przejść do Wpisy -> Kategorie i dodać 2 kategorie: Aktualności lewa i Aktualności prawa. (Nazwy dowolne, za chwilę opiszę gdzie je podajemy).
Elementu panel mam nadzieję, że nie muszę opisywać, przechodzimy zatem już do samego kodu PHP. Zaczniemy od otwarcia znacznika php czyli <?php. Następnie tworzymy sobie tablicę $args, której podamy najważniejsze dla nas parametry:
'numberposts' => 2,Oznacza ile postów chcemy wyświetlić na stronie (w tym przypadku 2)'order'=> 'DESC',Oznacza sposób sortowania postów, wybieramy DESC czyli sortowanie od tyłu a więc najnowszy post (ostatni w bazie) będzie wyświetlany jako pierwszy'orderby' => 'date',Ustalamy kryterium sortowania, w tym przypadku będzie to data dodania wpisu'category_name' => 'aktualnosci-lewa'Wcześniej mówiłem, że nazwa kategorii może być dowolna. W moim przypadku stworzyłem kategorię Aktualności lewa, jeśli stworzycie taką samą to zobaczycie, że jej „uproszczona nazwa” toaktualnosci-lewa. Możecie stworzyć dowolną kategorię a w tym miejscu musicie podać jej uproszczoną nazwę
Teraz pobierzemy sobie wszystkie posty, które pasują do naszych argumentów zapisanych w zmiennej $args i zapiszemy je do tablicy $postlist za pomocą WordPressowej funkcji get_posts( $args ), która jako parametr przyjęła naszą tablicę $args.
Funkcja get_posts() pobiera tablicę argumentów i na jej podstawie zwraca tylko te posty, których kryteria w w/w tablicy umieściliśmy. Do tej funkcji można podać ich bardzo wiele i dzięki temu dokładnie sortować swoje wpisy a ich lista znajduje się TUTAJ
Kolejnym elementem jest uruchomienie pętli foreach, która pobiera nam po kolei posty z tablicy $postlist i pozwala nam na „ubranie” ich w kod HTML wedle naszego uznania.
Aby wpisać teraz kod HTML musimy zamknąć znacznik PHP, inaczej otrzymali byśmy błąd i strona nie wyświetliła by się. Zamykamy go zatem poprzez ?>.
Pora teraz na nadanie wyglądu. Zaczynamy od otwarcia diva z klasą .media wewnątrz którego umieszczamy link z klasą .pull-left prowadzący do funkcji <?php the_permalink(); ?>, która wygeneruje nam linka do wpisu. Jako treść linka umieszczamy instrukcję warunkową IF if ( has_post_thumbnail() ) { the_post_thumbnail('thumbnail'); } , która sprawdzi czy nasz wpis posiada miniaturkę i jeśli tak, to ją wyświetli, na koniec zamykamy linka </a>.
Teraz otworzymy sobie diva z klasą .media-body. Najpierw umieszczamy wewnątrz niego linka prowadzącego ponownie jak powyżej do funkcji <?php the_permalink(); ?> a jako treść linka umieszczamy funkcję <?php the_title(); ?>, która pobierze nam tytuł naszego wpisu. Dodamy sobie jeszcze datę opublikowania wpisu, tutaj z pomoca przychodzi funkcja <?php the_time('j F, Y'); ?>. Parametry (j F, Y) spowodują wyświetlenie daty w formacie „10 czerwca, 2014”.
Skoro mamy już tytuł autora i datę to przydało by się wyświetlić trochę treści. Tutaj skorzystamy z może znanej Wam już z wpisu o liście wpisów na blogu funkcji <?php the_excerpt(); ?>, która to wyświetla kilka pierwszych zdań wpisu czyli tzw „zajawkę”
Pod wpisem dobrze jest umieścić jeszcze przycisk, który przeniesie nas do naszego posta. Tworzymy sobie zatem linka, który znów prowadzi do funkcji <?php the_permalink(); ?> i już:)
Teraz zamykamy sobie naszą pętlę foreach za pomocą <?php endforeach; ?> i domykamy wszystkie otwarte divy czyli te z klasami .media-body oraz .panel
Pozostaje nam zapisać plik, dodać testowy wpis w utworzonej wcześniej kategorii, odświeżyć stronę główną i podziwiać jak pojawia się on w utworzonym przez nas panelu.
Przejdź do przykładowej strony
