WP-DOC

Pisanie motywu

03.06 Wpis na stronie głównej

Ostatnia modyfikacja: 02.11.2021

Na stronie głównej w szczególności strony firmowej, zachodzi potrzeba wyświetlenia pojedynczego wpisu. Może to być wpis opisujący profil firmy coś w stylu „O nas” lub wpis, w którym mamy przygotowany formularz kontaktowy wraz z mapką dojazdu. Czasem nawet jedno i drugie. W motywie, na którym pracujemy wyświetlany wpis opisujący firmę, wygląda to jak na zdjęciu niżej.

Pojedynczy wpis na stronie glowej
Pojedynczy wpis na stronie głównej

Wyświetlenie pojedynczego posta na stronie głównej można zrobić na dwa sposoby. Pierwszy to użycie pętli WordPress Loop wraz z klasą WP_Query z parametrami post_type oraz p. Drugi sposób to użycie funkcji get_post(), za pomocą której uzyskamy wszystkie informacje dotyczące posta.

W motywie wpis ten znajduje się w sekcji <section class="con_aboutas"></section>. Zanim dokonamy jakichkolwiek zmian w kodzie, należy ustalić jaki numer identyfikatora ma nasz wpis. W moim przypadku jest to „Strona” o numerze ID 107.

Wyświetlanie pojedynczego wpisu za pomocą pętli Loop

Aby wyświetlić określony pojedynczy wpis za pomocą pętli, należy wykorzystać klasę WP_Query w ten sam sposób jak przedstawiłem to w 03.05 Sekcje strony firmowej. Natomiast samo wykorzystanie klasy WP_Query zostało szerzej opisane 06.09 WP_Query. Zanim przejdziemy do modyfikacji kodu zobaczmy jak jest zbudowany wpis w strukturze HTML w sekcji <section class="con_aboutas"></section>.

index.php – budowa wpisu „O FIRMIE” w strukturze HTML

<h1 class="title_con">O Firmie</h1>
<div class="abaoutas">
    <div class="aboutas_img" style="background: url('<?php echo get_template_directory_uri(); ?>/images/header_3.jpg') center center no-repeat; background-size: cover"></div>
    <div class="aboutas_content">
        <h2>Nasza Firma</h2>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Debitis ipsum voluptatum officiis cupiditate atque eveniet possimus. Debitis impedit voluptas magni at dignissimos soluta qui iure animi possimus libero repellendus obcaecati nihil ut suscipit, perspiciatis eaque? Sunt, dignissimos. Dolorem, tenetur perspiciatis at aliquam voluptatem laboriosam quaerat odio inventore temporibus similique rerum a maiores reiciendis.</p>
        <p>Adipisci quisquam eius deleniti placeat! Voluptatem, enim repudiandae! Totam quis quae molestias. Quas libero laboriosam enim, blanditiis, sit aliquid esse suscipit inventore, ad consequuntur vitae ducimus similique nisi magnam aspernatur! Unde hic similique debitis assumenda provident.</p>
        <p class="read_more"><a href="#" class="button_read_more">czytaj więcej</a></p>
    </div>
</div>

Do powyższego kodu dodamy klasę WP_Query oraz pętlę Loop. Po tych zmianach kod powinien wyglądać jak na listingu niżej. Aby poniższy przykład zadziałał oprócz parametru p z numerem identyfikatora, w moim przypadku ID jest równe 107, należy dodać parametr post_type z odpowiednią wartością.

index.php – wyświetlanie pojedynczego określonego wpisu

<?php
$new_query_aboutas = new WP_Query(
    array(
        'post_type' => 'page', // page dla strony, jeżeli wpis należy podać post
        'p'         => 107
    )
);

if ($new_query_aboutas->have_posts()) :
    while ($new_query_aboutas->have_posts()) : $new_query_aboutas->the_post();
    ?>
        <h1 class="title_con"><?php the_title(); ?></h1>
        <div class="abaoutas">
            <div class="aboutas_img" style="background: url('<?php the_post_thumbnail_url('large'); ?>') center center no-repeat; background-size: cover"></div>
            <div class="aboutas_content">
                <?php the_content(''); ?>
                <p class="read_more"><a href="<?php the_permalink(); ?>" class="button_read_more">czytaj więcej</a></p>
             </div>
        </div>
    <?php
    endwhile;
    wp_reset_postdata();
else : 
    // Tutaj akcje, jeżeli wpis nie istnieje.
endif;

Wyświetlanie pojedynczego wpisu za pomocą get_post()

Przed zastąpieniem pętli do wyświetlenia określonego posta, zobaczmy czym jest funkcja get_post(). Funkcja ta zwraca informacje dotyczące posta po podaniu numeru identyfikatora (ID) posta. Poniższy przykład zwraca informacje o identyfikatorze posta 107.

Przykład wykorzystania funkcji get_post()

<pre><?php print_r(get_post(107)); ?></pre>

//Poniżej wynik działania powyższego kodu
WP_Post Object
(
    [ID] => 107
    [post_author] => 1
    [post_date] => 2021-01-24 23:15:22
    [post_date_gmt] => 2021-01-24 22:15:22
    [post_content] => Lorem ipsum... //Tutaj zostanie wyświetlona cała treść wpisu
    [post_title] => O Firmie
    [post_excerpt] => 
    [post_status] => publish
    [comment_status] => closed
    [ping_status] => closed
    [post_password] => 
    [post_name] => o-firmie
    [to_ping] => 
    [pinged] => 
    [post_modified] => 2021-09-18 20:49:24
    [post_modified_gmt] => 2021-09-18 18:49:24
    [post_content_filtered] => 
    [post_parent] => 0
    [guid] => http://localhost/wpnauka/?page_id=107
    [menu_order] => 0
    [post_type] => page
    [post_mime_type] => 
    [comment_count] => 0
    [filter] => raw
)

Jak widać funkcja zwraca obiekt WP_Post, za pomocą którego można uzyskać interesujące nas informacje na temat wpisu. Na początku usuńmy pętlę Loop i powróćmy do struktury HTML wpisu. Powinna wyglądać jak na listingu niżej.

index.php – powrót do struktury HTML wpisu

<h1 class="title_con">O Firmie</h1>
<div class="abaoutas">
    <div class="aboutas_img" style="background: url('<?php echo get_template_directory_uri(); ?>/images/header_3.jpg') center center no-repeat; background-size: cover"></div>
    <div class="aboutas_content">
        <h2>Nasza Firma</h2>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Debitis ipsum voluptatum officiis cupiditate atque eveniet possimus. Debitis impedit voluptas magni at dignissimos soluta qui iure animi possimus libero repellendus obcaecati nihil ut suscipit, perspiciatis eaque? Sunt, dignissimos. Dolorem, tenetur perspiciatis at aliquam voluptatem laboriosam quaerat odio inventore temporibus similique rerum a maiores reiciendis.</p>
        <p>Adipisci quisquam eius deleniti placeat! Voluptatem, enim repudiandae! Totam quis quae molestias. Quas libero laboriosam enim, blanditiis, sit aliquid esse suscipit inventore, ad consequuntur vitae ducimus similique nisi magnam aspernatur! Unde hic similique debitis assumenda provident.</p>
        <p class="read_more"><a href="#" class="button_read_more">czytaj więcej</a></p>
    </div>
</div>

Tytuł, obrazek wyróżniający oraz link

Za pomocą funkcji get_post() wyświetlmy tytuł wpisu, obrazek wyróżniający oraz link do całego artykułu. Zmodyfikowany kod powinien wyglądać jak na listingu niżej. Na początku deklarujemy zmienną i przypisujemy do niej funkcję get_post() wraz z identyfikatorem wpisu. W moim przypadku ID wpisu wynosi 107.

index.php – wykorzystanie funkcji get_post()

<?php
$query_aboutas = get_post(107);
?>
<h1 class="title_con"><?php echo $query_aboutas->post_title; ?></h1>
<div class="abaoutas">
    <div class="aboutas_img" style="background: url('<?php echo get_the_post_thumbnail_url($query_aboutas->ID,'large'); ?>') center center no-repeat; background-size: cover"></div>
    <div class="aboutas_content">
        <h2>Nasza Firma</h2>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Debitis ipsum voluptatum officiis cupiditate atque eveniet possimus. Debitis impedit voluptas magni at dignissimos soluta qui iure animi possimus libero repellendus obcaecati nihil ut suscipit, perspiciatis eaque? Sunt, dignissimos. Dolorem, tenetur perspiciatis at aliquam voluptatem laboriosam quaerat odio inventore temporibus similique rerum a maiores reiciendis.</p>
        <p>Adipisci quisquam eius deleniti placeat! Voluptatem, enim repudiandae! Totam quis quae molestias. Quas libero laboriosam enim, blanditiis, sit aliquid esse suscipit inventore, ad consequuntur vitae ducimus similique nisi magnam aspernatur! Unde hic similique debitis assumenda provident.</p>
        <p class="read_more"><a href="<?php echo get_permalink($query_aboutas->ID); ?>" class="button_read_more">czytaj więcej</a></p>
    </div>
</div>

Powyższa zmiana powinna wyświetlić tytuł, obrazek wyróżniający postu oraz posiadać aktywny link do całego artykułu.

Treść wpisu – post_excerpt

Odwołując się do post_content w obiekcie WP_Post, wyświetlimy całą treść artykułu. Jeżeli chcemy wyświetlić tylko część wpisu możemy użyć post_excerpt, pod warunkiem, że zostanie uzupełnione pole Zajawka w opcjach wpisu jak zaprezentowano na zdjęciu niżej. Jeżeli pole to nie zostanie uzupełnione to nic nie zostanie wyświetlone.

Pole Zajawka w ustawieniach wpisu
Przy odwołaniu się do post_excerpt obiekru WP_Post zostanie wyświetlona treść z pola Zajawka.

Treść wpisu – get_extended()

Jeżeli do rozdzielenia tekstu używamy bloku Więcej, jak na zdjęciu niżej i chcemy wyświetlić zawartość znajdującą się tylko nad tym blokiem, wówczas należy skorzystać z funkcji get_extended(). Funkcja ta jako wartość przyjmuje treść postu lub strony. Dzięki obiektowi WP_Post oraz post_content możemy do funkcji przekazać treść wpisu.

Bloki w edytorze WordPress
Blok więcej dzielący wpis.

Zanim wykorzystamy funkcję, zobaczmy w jaki sposób zwraca dane. Na listingu niżej przykład zastosowania oraz wynik działania funkcji get_extended().

Zwracane dane przez funkcję get_extended()

// post_content, to dane zwrócone przez obiekt WP_Post
<pre><?php print_r(get_extended($query_aboutas->post_content)); ?></pre>

// Poniżej efekt powyższego kodu
Array (
    [main] => Lorem ipsum, dolor sit... // Treść znajdująca się przed znacznikiem Więcej
    [extended] => Debitis ipsum voluptatum.. // Treść znajdująca się pod znacznikiem Więcej
    [more_text] => // Niestandardowy tekst "czytaj więcej"
)

Jak widać funkcja zwraca tablicę z trzema pozycjami. Odwołanie się do [main] wyświetli treść wpisu znajdującą się nad blokiem Więcej. Poniższy kod uzupełni brakującą treść w sekcji „O Firmie”.

index.php – wyświetlenie treści wpisu

<?php
$query_aboutas = get_post(107);
?>
<h1 class="title_con"><?php echo $query_aboutas->post_title; ?></h1>
<div class="abaoutas">
    <div class="aboutas_img" style="background: url('<?php echo get_the_post_thumbnail_url($query_aboutas->ID,'large'); ?>') center center no-repeat; background-size: cover"></div>
    <div class="aboutas_content">
        <?php
        $aboutas_post = get_extended($query_aboutas->post_content);
        echo $aboutas_post['main'];
        ?>
        <p class="read_more"><a href="<?php echo get_permalink($query_aboutas->ID); ?>" class="button_read_more">czytaj więcej</a></p>
    </div>
</div>

Strona główna naszego motywu strony firmowej została ukończona. Oczywiście można dodać utworzyć stopkę edytowalną z poziomu panela administracyjnego WordPress. Wbrew pozorom to bardzo ważna część strony. A jej zawartość jest inna na każdej stronie. Pozostałe brakujące elementy jak, wyświetlanie pojedynczych wpisów czy kategorii została omówiona w dziale Budowa motywu – Część I.

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.