WP-DOC

Pisanie motywu

03.05 Sekcje strony firmowej

Ostatnia modyfikacja: 29.09.2021

W motywie który tworzymy, po części nagłówkowej, występują dwie podobne do siebie sekcje. Są one podobne, gdyż w sekcjach tych wpisy pochodzą z kategorii. Wpisy w części „Oferta” będą przypisane do kategorii „Oferta”, natomiast wpisy w części „Blog” będą przypisane do kategorii „Blog”. Na zdjęciu poniżej obecny wygląd omawianych sekcji.

Sekcje strony firmowej
Sekcje strony firmowej. Wpisy każdej z nich przynależą do innej kategorii.

Do pobrania postów w każdej sekcji wykorzystamy pętlę WordPress – Loop. Jednak sama pętla to za mało. Za pomocą klasy WP_Query, zmodyfikujemy zwracane dane przez pętlę. Klasa ta można wprowadzać dodatkowe parametry do pętli WordPress, aby pobrać posty spełniające zdefiniowane parametry.

Sekcja OFERTA

Pierwszą zmianę jaką dokonamy w pliku index.php, będzie dynamiczne pobieranie nazwy kategorii, do której są przypisane wpisy prezentującą ofertę. Za pomocą funkcji WordPress get_cat_name(), wyświetlimy nazwę kategorii o podanym numerze ID. W moim przypadku, kategoria „Oferta” posiada numer ID 18.

index.php – wyświetlanie nazwy kategorii w sekcji „Oferta”

<section class="con_offer">
    <div class="center_page">
        <h1 class="title_con"><?php echo get_cat_name(18); ?></h1>
        // Dalszy kod strony

Pod nazwą kategorii, znajduje się element div o nazwie klasy offer_multi_box. Wewnątrz niego znajdują się trzy elementy div o nazwie klasy offer_box. Jak na listingu niżej. To właśnie ten element będziemy wyświetlać w zmodyfikowanej pętli Loop.

index.php – układ elementów w sekcji „Oferta”

<div class="offer_multi_box">
    <div class="offer_box">
        <h2 class="ofer_box_title"><a href="#" class="link_read_more_offer">Lorem ipsum</a></h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p class="read_more read_more_right"><a href="#" class="button_read_more">czytaj więcej</a></p>
     </div>
    <div class="offer_box">
        <h2 class="ofer_box_title"><a href="#" class="link_read_more_offer">Lorem ipsum</a></h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p class="read_more read_more_right"><a href="#" class="button_read_more">czytaj więcej</a></p>
     </div>
    <div class="offer_box">
        <h2 class="ofer_box_title"><a href="#" class="link_read_more_offer">Lorem ipsum</a></h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p class="read_more read_more_right"><a href="#" class="button_read_more">czytaj więcej</a></p>
     </div>
</div>

Po dodaniu pętli i całej funkcjonalności, czyli wyświetlania tytułu, treści oraz linka do pełnego wpisu, całość powinna wyglądać jak na listingu niżej. Dokładny opis działania pętli wraz z wyświetlaniem poszczególnych elementów został zaprezentowany w artykule 02.05 Wyświetlanie wpisów – pętla.

index.php – dodanie pętli do sekcji „Oferty”

<div class="offer_multi_box">
    <?php
    if (have_posts()) :
        while (have_posts()) : the_post();
    ?>
        <div class="offer_box">
            <h2 class="ofer_box_title"><a href="<?php the_permalink(); ?>" class="link_read_more_offer"><?php the_title(); ?></a></h2>
            <?php the_content(''); ?>
            <p class="read_more read_more_right"><a href="<?php the_permalink(); ?>" class="button_read_more">czytaj więcej</a></p>
         </div>
     <?php
          endwhile;
     else : 
         // Tutaj akcje, jeżeli nie istnieje żaden post.
     endif;
    ?>
</div>

Po zapisaniu pliku i odświeżeniu strony motyw WordPress wyświetli aktualne wpisy. Za pomocą klasy WP_Query, możemy zmodyfikować to co ma wyświetlić pętla. Parametry jakie należy przekazać do WP_Query to z jakiej kategorii wpisy mają zostać załadowane oraz ich ilość. Szablon został napisany w taki sposób, aby wyświetlał 3 wpisy z kategorii oferta. W moim przypadku, jak pisałem wyżej, kategoria „Oferta” posiada numer ID 18. Przed pętlą klasę WP_Query przypiszemy do zmiennej, a wewnątrz klasy zdefiniujemy potrzebne parametry. Następnie zmienną tą przypiszemy do pętli Loop. Należy również pamiętać, aby za pętlą przywrócić zapytanie do pierwotnej postaci. Dokładny opis klasy WP_Query, został przedstawiony w artykule 06.09 WP_Query.

index.php – dodanie klasy WP_Query w sekcji „Oferta”

<div class="offer_multi_box">
    <?php
    $new_query_offer = new WP_Query(
        array(
            'cat'            => 18, // Numer kategorii
            'posts_per_page' => 3   // ilość wpisów do wyświetlenia
        )
    );
    if (have_posts()) :
        while (have_posts()) : the_post();
    ?>
        <div class="offer_box">
            <h2 class="ofer_box_title"><a href="<?php the_permalink(); ?>" class="link_read_more_offer"><?php the_title(); ?></a></h2>
            <?php the_content(''); ?>
            <p class="read_more read_more_right"><a href="<?php the_permalink(); ?>" class="button_read_more">czytaj więcej</a></p>
         </div>
     <?php
          endwhile;
          // Przywracanie zapytania do pierwotnej postaci
          wp_reset_postdata();
     else : 
         // Tutaj akcje, jeżeli nie istnieje żaden post.
     endif;
    ?>
</div>

Od teraz na stronie w sekcji „Oferta” zostaną wyświetlone wpisy z określonej kategorii, a ich ilość będzie wynosić 3 posty. Linki przycisków oraz nagłówka w każdym z postów również są aktywne. Jednak aby zobaczyć cały artykuł, należy stworzyć plik singe.php, który będzie otwierał cały wpis. Więcej o tym przeczytasz w Części I 02.09 Pojedynczy Wpis. Dlatego nie będę się o tym rozpisywał w tej części kursu.

Zmodyfikowana pętla w taki sposób wyświetli najnowsze 3 wpisy z kategorii. Jeżeli chcemy ręcznie ustawić kolejność, wówczas należy skorzystać z takich parametrów jak post__in oraz orderbyW pierwszym parametrze definiujemy ID postów w kolejności jakie mają być wyświetlane. Natomiast typ sortowania dla orderby przypisujemy post__in, czyli 'orderby' => 'post__in'. Jednocześnie należy pamiętać o usunięciu parametru posts_per_page, gdyż liczba wyświetleń wpisów będzie zależna od ilości argumentów w post__in oraz parametru cat. Drugim rozwiązaniem ustawienia kolejności postów jest skorzystanie z wtyczki Simple Custom Post Order. Wtyczka ta umożliwia ustawianie kolejności postów metodą „przeciągnij-upuść”. Jest to lepsze rozwiązanie, gdyż nie trzeba edytować kodu przy zmianie kolejności lub kiedy stroną zarządza osoba nie potrafiąca programować.

Sekcja BLOG

W tej sekcji wykorzystamy ten sam mechanizm co w sekcji „Oferta”. Różnica będzie polegać na parametrach dla klasy WP_Query oraz układzie elementów HTML. Zanim zmodyfikujemy kod sekcja „Blog” blogu wygląda jak na listingu niżej.

index.php – sekcja „Blog”

<section class="con_blog">
    <div class="center_page">
        <h1 class="title_con">BLOG</h1>
        <article class="blog_box">
            <div class="blog_content">
                <h2 class="blog_content_title"><a href="#">Szablon szkoleniowy WP-DOC</a></h2>
                <p class="blog_content_data">26 stycznia 2021</p>
                <div class="blog_content_text">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    <p class="read_more"><a href="#" class="button_read_more">czytaj więcej</a></p>
                </div>
            </div>
            <div class="blog_img" style="background: url('<?php echo get_template_directory_uri(); ?>/images/header_1.jpg') center center no-repeat; background-size: cover"></div>
        </article>
       // Tutaj pozostałe wpisy z szablonu
        <p class="read_more read_more_center"><a href="#" class="button_read_more button_read_more_big">ZOBACZ WSZYSTKIE WPISY</a></p>
    </div>
</section>

Modyfikację sekcji „Blog” zaczniemy od funkcji get_cat_name(), która wyświetli nazwę kategorii. Następnie umieścimy klasę WP_Query z parametrami kategorii oraz ilości wyświetlanych postów. W pętli Loop wyświetlamy elementy wpisu (tytuł, adres, treść, obrazek wyróżniający).

index.php – dodanie klasy WP_Query w sekcji „Blog”

<section class="con_blog">
    <div class="center_page">
        <h1 class="title_con"><?php echo get_cat_name(17); ?></h1>
        <?php
        $new_query_blog = new WP_Query(
            array(
                'cat'            => 17, // ID kategorii, w moim przypadku to 17
                'posts_per_page' => 3 // ilość wyświetlanych wpisów
            )
        );
        if ($new_query_blog->have_posts()) :
            while ($new_query_blog->have_posts()) : $new_query_blog->the_post();
        ?>
            <article class="blog_box">
                <div class="blog_content">
                    <h2 class="blog_content_title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                    <p class="blog_content_data"><?php echo get_the_date(); ?></p>
                    <div class="blog_content_text">
                        <?php the_content(''); ?>
                        <p class="read_more"><a href="<?php the_permalink(); ?>" class="button_read_more">czytaj więcej</a></p>
                    </div>
                </div>
                <div class="blog_img" style="background: url('<?php the_post_thumbnail_url('large'); ?>') center center no-repeat; background-size: cover"></div>
            </article>
            <?php
            endwhile;
            wp_reset_postdata();

        else : 
            // Tutaj akcje, jeżeli nie istnieje żaden post.
        endif;
        ?>
        <p class="read_more read_more_center"><a href="<?php echo get_category_link(17); ?>" class="button_read_more button_read_more_big">ZOBACZ WSZYSTKIE WPISY</a></p>
    </div>
</section>

Link do kategorii

Na listingu wyżej w linii 33 pod wszystkimi wpisami znajduje się przycisk ZOBACZ WSZYSTKIE WPISY, który prowadzi do wszystkich wpisów kategorii. Aby przycisk posiadał prawidłowy adres do kategorii wykorzystałem funkcję get_category_link(), która jako argument przyjmuje ID kategorii. W odsyłaczu można podać adres na sztywno, na przykład https://www.strona.pl/blog. Do otwierania wszystkich wpisów kategorii należy utworzyć plik category.php jak zostało to opisane w artykule 02.08 Wpisy z kategorii, dlatego też tutaj nie będę się rozpisywał na ten temat.

Czytaj dalej…

03.06 Wpis na stronie głównej

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.