WP-DOC

Pisanie motywu

05.03 Pojedynczy wpis w sidebar

Ostatnia modyfikacja: 22.01.2021

W pasku bocznym, możemy wyświetlić pojedynczy wpis, wyświetlając na przykład tytuł, czas publikacji, obrazek wyróżniający oraz treść. W ten sposób można wyróżnić najciekawszy lub najnowszy wpis na blogu. Funkcję którą stworzymy, będzie mieć możliwość wyświetlania dowolnej ilości wpisów w sidebar. Na rysunku niżej (w motywie roboczym) przykładowy post w pasku bocznym.

Motyw z postem w sidebar
Przykładowy motyw. Wyświetlanie postu w sidebar.

Rejestracja sidebar

Dla poprawnego działania całości, trzeba zarejestrować sidebar. Podczas rejestracji w funkcji register_sidebar(), podajemy w jakim elemencie ma być wyświetlany każdy widżet. W moim przypadku rejestracja wygląda jak na listingu niżej. Z poniższego kodu, najważniejszy jest element div z nazwą klasy aside_box. W takim samym div, należy umieścić wpis, aby zachować jednolity wygląd motywu.

Rejestracja sidebar

function reg_sidebar() {
    register_sidebar(array(
        'name'          => 'Panel boczny lewy', 'nazwamotywu',
        'description'   => 'Tutaj przeciągnij widżet.', 'nazwamotywu',
        'id'            => 'sidebar-left'
        'before_widget' => '<div id="%1$s" class="aside_box %2$s">',
        'after_widget'  => '</div>',
        'before_title'  => '<h2>',
        'after_title'   => '</h2>'
    ));
}
add_action('widgets_init','reg_sidebar');

Wyświetlanie danych wpisu

Zanim napiszemy funkcję, która wszystko wyświetli, najpierw należy zapoznać się z funkcją get_post(), która jako argument przyjmuje ID postu, a zwraca tablicę. Przykładowe dane zwracane przez funkcję, będą wyglądać jak na listingu niżej.

Przykładowe dane na temat postu zwrócone przez funkcję get_post()

WP_Post Object
(
    [ID] => 10
    [post_author] => 1
    [post_date] => 2020-11-03 22:27:37
    [post_date_gmt] => 2020-11-03 21:27:37
    [post_content] => Treść wpisu
    [post_title] => Vitae quas nobis
    [post_excerpt] => 
    [post_status] => publish
    [comment_status] => open
    [ping_status] => open
    [post_password] => 
    [post_name] => vitae-quas-nobis
    [to_ping] => 
    [pinged] => 
    [post_modified] => 2021-01-09 20:45:02
    [post_modified_gmt] => 2021-01-09 19:45:02
    [post_content_filtered] => 
    [post_parent] => 0
    [guid] => https://www.adresstrony.pl/?p=10
    [menu_order] => 0
    [post_type] => post
    [post_mime_type] => 
    [comment_count] => 0
    [filter] => raw
)

Przypisując funkcję get_post() do zmiennej w bardzo prosty sposób możemy wyświetlić dowolną informację na temat ID danego postu. Listing poniżej wyświetli tytuł wpisu o numerze ID 10.

Wyświetlanie tytułu postu za pomocą funkcji get_post()

$post = get_post(10);
echo '<h1>'.$post->post_title.'</h1>';

Funkcja wyświetlająca post

Wiemy jak pobrać dane wpisu oraz jak je wyświetlić. W pliku functions.php, utwórz funkcję o nazwie post_sidebar() wraz z zawartością jak na listingu niżej.

functions.php – funkcja post_sidebar()

function post_sidebar() {
    $post_id = get_post(10); // 10 to ID postu, które chcemy wyświetlić
}

Podczas rejestracji sidebar w before_widget oraz after_widget, podaliśmy, że każdy widżet na stronie, ma się wyświetlać w elemencie div o nazwie klasy aside_box. Do funkcji dopiszmy kod wyświetlający element div oraz tytuł postu, jak na listingu niżej.

functions.php – wyświetlanie tytułu wpisu w zarejestrowanym elemencie div

function post_sidebar() {
    $post_id = get_post(10);

    $sider_box  = '<div class="aside_box">';
    $sider_box  .= '<h3">'.$post_id->post_title.'</h3>';
    $sider_box  .= '</div>';

    echo $sider_box;
}

Zmienna $sider_box będzie przechowywać cały element div wraz z zawartością. Zauważ, że do łączenia ciągu łańcucha znaków należy użyć .=. Na końcu funkcji za pomocą echo z języka PHP, zmienna ta jest wyświetlana. W pliku sidebar.php należy wywołać funkcję post_sidebar(), aby wyświetlić zawartość zmiennej $sider_box, jak na listingu niżej.

sidebar.php – wywołanie funkcji

<?php
post_sidebar()
?>

Tytuł wpisu

Tytuł wpisu powinien być również linkiem do całego artykułu. Funkcja get_permalink() sama wygeneruje adres url do wpisu. Wystarczy podać ID postu, do którego ma zostać wygenerowany link.

functions.php – zamiana nagłówka na link do całego wpisu.

function post_sidebar() {
    $post_id = get_post(10);

    $sider_box  = '<div class="aside_box">';
    $sider_box  .= '<h3><a href="'.get_permalink($post_id->ID).'">'.$post_id->post_title.'</a></h3>';
    $sider_box .= '</div>';

    echo $sider_box;
}

Data wpisu

Datę wpisu wygenerujemy za pomocą funkcji get_the_date(). Funkcja przyjmuje dwa parametry:

  1. Format daty – więcej o formatowaniu daty dowiesz się z wpisu 06.01 Data i godzina postu
  2. ID postu, którego data ma zostać wyświetlona

Na listingu niżej wyświetlanie daty publikacji postu.

functions.php – data publikacji postu

function post_sidebar() {
    $post_id = get_post(10);

    $sider_box  = '<div class="aside_box">';
    $sider_box  .= '<h3><a href="'.get_permalink($post_id->ID).'">'.$post_id->post_title.'</a></h3>';
    $sider_box  .= '<p>'.get_the_date('j F Y',$post_id->ID).'</p>';
    $sider_box  .= '</div>';

    echo $sider_box;
}

Obrazek wyróżniający

Obrazek wyróżniający wpisu, zostanie wyświetlony jako tło elementu div. Elementowi temu, dodaj dowolną nazwę klasy, a w pliku style.css zdefiniuj jego szerokość na 100% a wysokość na około 120px. Natomiast sam element div, będzie posiadał styl liniowy background, do którego przypiszemy adres url obrazka wpisu. Adres url obraza pobierzemy za pomocą funkcji get_the_post_thumbnail_url(), która przyjmuje dwa parametry:

  1. ID postu, którego obrazek ma być wyświetlony
  2. Wielkość obrazka – więcej na temat miniatur postów dowiesz się z 06.08 Miniatury postów

functions.php – wyświetlanie obrazka wyróżniającego wpisu

function post_sidebar {
    $post_id = get_post(10);

    $sider_box  = '<div class="aside_box">';
    $sider_box  .= '<h3><a href="'.get_permalink($post_id->ID).'">'.$post_id->post_title.'</a></h3>';
    $sider_box  .= '<p>'.get_the_date('j F Y',$post_id->ID).'</p>';
    $sider_box  .= '<div class="aside_post_img" style="background: url(\''.get_the_post_thumbnail_url($post_id->ID,'medium').'\') center center no-repeat; background-size: cover;"></div>';
    $sider_box  .= '</div>';

    echo $sider_box;
}

Jeżeli chcesz wyświetlić grafikę w znaczniku img, musisz zastosować funkcję get_the_post_thumbnail().

Treść wpisu

Wyświetlając treść wpisu i odwołując się bezpośrednio do $post_id-&gt;post_content, wyświetlimy cały wpis. Możemy odwołać się do $post_id-&gt;post_excerpt, pod warunkiem, że zostało wypełnione pole Zajawka w panelu administracyjnym podczas tworzenia wpisu, jak na rysunku niżej.

Panel administracyjny, pole do wprowadzenia zajawki.
Pole do wprowadzenia zajawki

Do oddzielenia zajawki do całości treści, najczęściej używa się bloku czytaj dalej, w głównym oknie do wprowadzania treści, jak na rysunku niżej.

Główne okno wprowadzania treści - blok czytaj dalej
Element blokowy CZYTAJ DALEJ do oddzielania treści.

Do uzyskania treści, która znajduje się przed oraz za czytaj dalej, uzyskamy dzięki funkcji get_extended(). Funkcja ta jako parametr przyjmuje ciąg znaków. W naszym przypadku będzie to cała treść wpisu. Następnie funkcja ta zwróci tablicę z podziałem na treść przed czytaj dalej oraz po czytaj dalej. Dla zrozumienia jak działa funkcja, przypiszmy ją do zmiennej a następnie za pomocą funkcji PHP print_r, wyświetlmy jej zawartość, jak na listingu niżej.

functions.php – działanie funkcji get_extended

function post_sidebar {
    $post_id = get_post(10);
    $content_post = get_extended($post_id->post_content);

    print_r($content_post);

    $sider_box  = '<div class="aside_box">';
    $sider_box  .= '<h3><a href="'.get_permalink($post_id->ID).'">'.$post_id->post_title.'</a></h3>';
    $sider_box  .= '<p>'.get_the_date('j F Y',$post_id->ID).'</p>';
    $sider_box  .= '<div class="aside_post_img" style="background: url(\''.get_the_post_thumbnail_url($post_id->ID,'medium').'\') center center no-repeat; background-size: cover;"></div>';
    $sider_box  .= '</div>';

    echo $sider_box;
}

To co wyświetli funkcja print_r(), będzie wyglądać jak na listingu niżej. Oczywiście ilość tekstu, oraz akapitów, będzie uzależniona od wpisu.

Wynik działania funkcji print_r()

Array ( 
[main] =>Vitae quas nobis, nemo voluptate omnis nihil laboriosam perferendis pariatur similique. Nihil corporis laudantium exercitationem ullam, magnam expedita, odit repudiandae odio dicta quaerat blanditiis consequatur vero error! Officia dolorem adipisci, inventore quas animi velit.
[extended] =>Vitae quas nobis, nemo voluptate omnis nihil laboriosam perferendis pariatur similique. Nihil corporis laudantium exercitationem ullam, magnam expedita, odit repudiandae odio dicta quaerat blanditiis consequatur vero error! Officia dolorem adipisci, inventore quas animi velit.

Vitae quas nobis, nemo voluptate omnis nihil laboriosam perferendis pariatur similique. Nihil corporis laudantium exercitationem ullam, magnam expedita, odit repudiandae odio dicta quaerat blanditiis consequatur vero error! Officia dolorem adipisci, inventore quas animi velit.
[more_text] => 
) 

Mając wiedzę, jak działa funkcja get_extended() i jaką tworzy tablicę możemy odwołać się do tej tablicy, do klucza [main], która przechowuje treść przed czytaj dalej. Uzupełniona funkcja, będzie wyglądać jak na listingu niżej. Pamiętaj o usunięciu funkcji print_r().

functions.php – wyświetlanie treści wpisu

function post_sidebar() {
    $post_id = get_post(10);
    $content_post = get_extended($post_id->post_content);

    $sider_box  = '<div class="aside_box">';
    $sider_box  .= '<h3><a href="'.get_permalink($post_id->ID).'">'.$post_id->post_title.'</a></h3>';
    $sider_box  .= '<p>'.get_the_date('j F Y',$post_id->ID).'</p>';
    $sider_box  .= '<div class="aside_post_img" style="background: url(\''.get_the_post_thumbnail_url($post_id->ID,'medium').'\') center center no-repeat; background-size: cover;"></div>';
    $sider_box  .= '<div>'.$content_post['main'].'</div>';
    $sider_box  .= '</div>';

    echo $sider_box;
}

Przycisk do wpisu

Ostatnim elementem będzie przycisk w stylu czytaj więcej. Wykorzystamy tą samą funkcję, którą użyliśmy do utworzenia linku z nagłówka. Dlatego uważam, że wyjaśnienia są zbędne. Poniżej na listingu kod przycisku.

functions.php – przycisk/link do wpisu

function post_sidebar() {
    $post_id = get_post(10);
    $content_post = get_extended($post_id->post_content);

    $sider_box  = '<div class="aside_box">';
    $sider_box  .= '<h3><a href="'.get_permalink($post_id->ID).'">'.$post_id->post_title.'</a></h3>';
    $sider_box  .= '<p>'.get_the_date('j F Y',$post_id->ID).'</p>';
    $sider_box  .= '<div class="aside_post_img" style="background: url(\''.get_the_post_thumbnail_url($post_id->ID,'medium').'\') center center no-repeat; background-size: cover;"></div>';
    $sider_box  .= '<div>'.$content_post['main'].'</div>';
    $sider_box .= '<p><a href="'.get_permalink($post_id->ID).'">czytaj więcej</a></p>';
    $sider_box  .= '</div>';

    echo $sider_box;
}

Wprowadzanie kilku ulepszeń

Funkcja jest gotowa i wyświetla post w pasku bocznym. Do każdego elementu blokowego warto dodać klasy a w pliku style.css, nałożyć odpowiednie style dla poszczególnych elementów. Oprócz odpowiedniego wyglądu warto dodać kilka poprawek opisanych niżej.

ID postu jako argument funkcji

Podczas wywołania funkcji post_sidebar() w pliku sidebar.php, warto podać ID postu, niż podawać je w pliku functions.php. W ten sposób przekażemy ID do funkcji. Natomiast w nawiasach nazwy funkcji, zmienna $id odbierze zdeklarowaną wartość. Zmodyfikuj kod w obu plikach jak na listingu niżej, aby przekazać ID postu do funkcji.

sidebar.php

<?php
post_sidebar(10);
?>

functions.php

function post_sidebar($id) {
    $post_id = get_post($id);
    $content_post = get_extended($post_id->post_content);

    $sider_box  = '<div class="aside_box">';
    $sider_box  .= '<h3><a href="'.get_permalink($post_id->ID).'">'.$post_id->post_title.'</a></h3>';
    $sider_box  .= '<p>'.get_the_date('j F Y',$post_id->ID).'</p>';
    $sider_box  .= '<div class="aside_post_img" style="background: url(\''.get_the_post_thumbnail_url($post_id->ID,'medium').'\') center center no-repeat; background-size: cover;"></div>';
    $sider_box  .= '<div>'.$content_post['main'].'</div>';
    $sider_box .= '<p><a href="'.get_permalink($post_id->ID).'">czytaj więcej</a></p>';
    $sider_box  .= '</div>';

    echo $sider_box;
}

Funkcja pobierająca ID, umożliwia wyświetlenie więcej niż jednego posta w sidebar. W pliku sidebar.php, należy wywołać kilka razy funkcję z dowolnym ID postu. Dodatkowa korzyć z tego rozwiązania to szybsza edycja, gdyż plik w pliku sidebar.php szybciej wprowadzimy nowy numer ID postu, niż w pliku functions.php, który potrafi zawierać dużo więcej linii kodu.

Ukrywanie postu z sidebar, kiedy ten jest czytany

Jeżeli użytkownik kliknie link do postu z sidebar, lub trafi na niego z innego miejsca, to można go ukryć, aby nie promować posta, który aktualnie jest czytany. Do pobrania aktualnego ID posta posłuży funkcja get_the_ID(). Następnie w instrukcji warunkowej if sprawdzimy, czy jest on różny od ID posta podanego jako argument funkcji. Jeżeli obie wartości będą różne post w pasku bocznym będzie wyświetlany, kiedy będą takie same, post zostanie ukryty. Na listingu niżej kod z wykorzystaniem funkcji get_the_ID().

functions.php – sprawdzanie czy aktualny post, to post z sidebar

function post_sidebar($id) {
    $post_id = get_post($id);
    $current_id = get_the_ID();
    $content_post = get_extended($post_id->post_content);
    
    if($id != $current_id) {
        $sider_box  = '<div class="aside_box">';
        $sider_box  .= '<h3><a href="'.get_permalink($post_id->ID).'">'.$post_id->post_title.'</a></h3>';
        $sider_box  .= '<p>'.get_the_date('j F Y',$post_id->ID).'</p>';
        $sider_box  .= '<div class="aside_post_img" style="background: url(\''.get_the_post_thumbnail_url($post_id->ID,'medium').'\') center center no-repeat; background-size: cover;"></div>';
        $sider_box  .= '<div>'.$content_post['main'].'</div>';
        $sider_box .= '<p><a href="'.get_permalink($post_id->ID).'">czytaj więcej</a></p>';
        $sider_box  .= '</div>';

        echo $sider_box;
    }
}

KOMENTARZE

Jeżeli masz pytanie lub sugestie dotyczącą artykułu to napisz komentarz. Wartościowe komentarze zostaną umieszczone jako opinie warte uwagi.

Napisz komentarz

Wszystkie pola są obowiązkowe. E-mail nie będzie udostępniony, ani wykorzystywany do rozsyłania wiadomości reklamowych.

Jeszcze nikt nie napisał komentarza.