WP-DOC

Pisanie motywu

02.01 Utworzenie nagłówka oraz stopki motywu

Ostatnia modyfikacja: 20.05.2021

Po co dzielić motyw?

Jest mnóstwo zalet, za tym aby dzielić kod na osobne pliki, „części”. Dwa z najważniejsze z nich to, przejrzystość kodu oraz łatwość wprowadzania zmian w wyglądzie motywu. Motyw, który stosujemy w kursie jest prosty i minimalistyczny w swojej budowie jak i treści w nagłówku i stopce. Jednak przy bardziej rozbudowanym projekcie, korzyść z dzielenia kodu na części składowe, będzie bardziej odczuwalna i korzystna. Mimo wszystko warto już od samego początku nabierać dobrych nawyków w tworzeniu motywu WordPress.

Dzielimy motyw na pliki

Zanim przystąpimy do wyświetlania postów na stronie, musimy podzielić motyw, plik index.php, na trzy pliki. Każdy plik będzie wyświetlał inną zawartość strony.

  • header.php – będzie stanowił nagłówek naszej strony. Niektóre wtyczki dołączają kod do nagłówka head. Sama nazwa pliku to za mało aby wtyczka mogła dodać kod do motywu, ale o tym za chwilę.
  • footer.php – będzie stanowił stopkę naszej strony. Niektóre wtyczki dołączają kod do stopki strony. Podobnie jak w header.php nazwa pliku to za mało aby wtyczka mogła dodać kod do motywu, ale o tym za chwilę.
  • index.php – ten plik już istnieje ale to właśnie z niego wytniemy część kodu dla header.php i footer.php. Natomiast sam plik będzie odpowiedzialny za wyświetlanie postów na stronie. W kolejnych częściach kursu z index.php wyodrębnimy panel boczny.

Dzielimy kod motywu

Wiemy już jakie pliki musimy utworzyć wewnątrz naszego folderu motywu wpnauka. Są to oczywiście header.php oraz footer.php. Do każdego z nich należy wyciąć kod z pliku index.php jak pokazano na listingach niżej.

header.php – zawartość pliku

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css?family=Barlow:400,400i,700,700i&display=swap&subset=latin-ext" rel="stylesheet">
    <link rel="stylesheet" href="style.css">

    <title>WP-DOC - Pisanie motywów</title>
</head>
<body>
    <nav id="nav">
        <div class="center_page">
            <div class="nav_menu">
                <ul>
                    <li><a href="#">Poznajemy HTML-CSS</a></li>
                    <li><a href="#">Programowanie w PHP</a></li>
                    <li><a href="#">Baza danych MySQL</a></li>
                    <li><a href="#">Kontakt</a></li>
                </ul>
            </div>
        </div>
    </nav>

footer.php – zawartość pliku

<footer id="footer">
    <p>Szablon szkoleniowy motywu WordPpres WP-DOC.</p>
</footer>

</body>
</html>

Po wycięciu powyższego kodu z pliku index.php, w pliku tym powinna pozostać poniższa zawartość.

index.php – zawartość pliku

<section id="content">
    <div class="center_page">

        <div class="content_column">

            <div class="content_post">
                <article class="post_article">
                    <div class="post_article_img" style="background: url('images/foto-1.jpg') center center no-repeat; background-size: cover"></div>
                    <div class="post_article_content">
                        <h1 class="post_article_title"><a href="">Lorem ipsum dolor</a></h1>
                        <ul class="post_article_info">
                            <li>Dodano: 25.10.2020</li>
                            <li><a href="">WP-DOC</a></li>
                            <li><a href="">Brak komentarzy</a></li>
                        </ul>
                        <p>Nemo labore nobis, eaque quaerat perspiciatis beatae voluptates doloremque excepturi in corporis veniam rerum temporibus ea aut natus voluptatem assumenda, magni, aliquid commodi laudantium neque deleniti. Vitae quas nobis, nemo voluptate omnis nihil laboriosam perferendis pariatur similique.</p>
                        <p class="para_more"><a href="" class="link_more">czytaj więcej</a></p>
                    </div>
                </article>

                <article class="post_article">
                    <div class="post_article_img" style="background: url('images/foto-3.jpg') center center no-repeat; background-size: cover"></div>
                    <div class="post_article_content">
                        <h1 class="post_article_title"><a href="">Vitae quas nobis</a></h1>
                        <ul class="post_article_info">
                            <li>Dodano: 25.10.2020</li>
                            <li><a href="">WP-DOC</a></li>
                            <li><a href="">2 komentarze</a></li>
                        </ul>
                            <p>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.</p>
                        <p class="para_more"><a href="" class="link_more">czytaj więcej</a></p>
                    </div>
                </article>

                <article class="post_article">
                    <div class="post_article_img" style="background: url('images/foto-2.jpg') center center no-repeat; background-size: cover"></div>
                    <div class="post_article_content">
                        <h1 class="post_article_title"><a href="">Nemo labore nobis</a></h1>
                        <ul class="post_article_info">
                            <li>Dodano: 25.10.2020</li>
                            <li><a href="">WP-DOC</a></li>
                            <li><a href="">Brak komentarzy</a></li>
                        </ul>
                        <p>Enim laborum distinctio debitis, ullam, ex illum nihil modi eligendi sapiente consequuntur ipsum maxime eius totam? Eaque ipsam sapiente magnam, eius fugiat quidem odio sit vero maiores alias, error eveniet, iste magni. Nemo labore nobis, eaque quaerat perspiciatis beatae voluptates doloremque excepturi in corporis veniam rerum temporibus ea aut natus voluptatem assumenda, magni, aliquid commodi laudantium neque deleniti. </p>
                        <p class="para_more"><a href="" class="link_more">czytaj więcej</a></p>
                    </div>
                </article>
            </div>
            <aside class="aside">
                <div class="aside_box">
                    <h2>Najnowsze wpisy</h2>
                    <ul>
                        <li><a href="">Enim laborum distinctio</a><span class="post-date">Data publikacji: 20.11.2020</span></li>
                        <li><a href="">Vitae quas nobis</a><span class="post-date">Data publikacji: 18.11.2020</span></li>
                        <li><a href="">Nemo labore nobis</a><span class="post-date">Data publikacji: 15.11.2020</span></li>
                        <li><a href="">Vitae quas nobis</a><span class="post-date">Data publikacji: 14.11.2020</span></li>
                        <li><a href="">Lorem ipsum dolor</a><span class="post-date">Data publikacji: 10.11.2020</span></li>
                        <li><a href="">Eaque ipsam sapiente magnam</a><span class="post-date">Data publikacji: 09.11.2020</span></li>
                    </ul>
                </div>
                <div class="aside_box">
                    <h2>Kolejny boks</h2>
                    <p>Tutaj kolejny boks z dowolną treścią. W kursie zapoznasz się jak dynamicznie zmieniać zawartość tej części strony.</p>
                </div>
            </aside>
                
        </div>

    </div>
</section>

Funkcje dla header.php

Jak pisałem wyżej niektóre wtyczki oraz sam WordPress mogą dołączać kod do naszego motywu. Zazwyczaj są to pliki css lub js. Aby umożliwić wtyczce tego typu zabieg, musimy dodać funkcję WordPress wp_head(). Funkcję tą dodajemy tuż przed zamknięciem znacznika head , jak to pokazana na listingu niżej.

header.php – dodanie funkcji wp_head() – fragment kodu

<title>WP-DOC - Pisanie motywów</title>
    <?php wp_head(); ?>
</head>

Funkcja language_attributes()

Należało by również zadbać o poprawną wartość atrybut lang w znaczniku html. Tutaj również z pomocą przychodzi nam funkcja WordPress language_attributes(), która automatycznie wykryje język witryny i ustawi odpowiednią wartość dla tego atrybutu.

header.php – ustawienie właściwości atrybutu lang – fragment kodu

<html <?php language_attributes(); ?>>

Jeżeli w panelu administratora WordPress w ustawieniach, język witryny jest ustawiony na „Polski”, to wówczas w kodzie strony atrybut lang będzie posiadał wartość pl-PL jak na listingu niżej. Zmianę języka można dokonać w Ustawienia - Ogólne - Język witryny.

header.php – działanie funkcji language_attributes()

<html lang="pl-PL">

Funkcja wp_title()

Funkcja ta umożliwia dynamiczną zmianę nazwy strony. Nazwa ta jest wyświetlana na przykład na karcie okna przeglądarki. Jej konstrukcja wygląda jak na listingu niżej.

header.php – dodanie funkcji wp_title() – fragment kodu

<title>
    <?php wp_title('-', true, 'right'); ?> Pisanie motywów
</title>

Funkcja z tak wpisanymi parametrami będzie wyświetlać tytuł strony w następujący sposób: Tytuł artykułu / kategorii / strony / autor - jakiś dalszy tekst. W motywie, na którym pracujemy będzie to wyglądać następująco: Tytuł artykułu - Pisanie motywów. Funkcja wp_title() działa w następujący sposób

  1. Pobiera tytuł strony (nazwa kategorii, wpisu, autor);
  2. Wstawia separator, w przykładzie jest to znak „-„;
  3. Separator zostanie ustawiony po prawej stronie tytułu artykułu, co deklaruje „Right”.

Jeżeli chcemy wyświetlić tytuł witryny, który ustawiamy w panelu administratora Ustawienia - Ogólne - Tytuł witryny, należy posłużyć się funkcją bloginfo(), z argumentem name. Poniżej zastosowanie funkcji.

header.php – funkcja bloginfo() – fragment kodu

<title>
    <?php wp_title('-', true, 'right'); bloginfo('name');?> Pisanie motywu
</title>

Powyższy kod na karcie przeglądarki wyświetli:

  • Tytuł witryny Pisanie motywu – na stronie głównej;
  • Tytuł artykułu - Tytuł witryny Pisanie motywu – na stronie z artykułem;
  • Nazwa kategorii - Tytuł witryny Pisanie motywu – na stronie kategorii;
  • Nazwa autor - Tytuł witryny Pisanie motywu – na stronie wpisów autora.

Funkcja bloginfo(), pozwala na wyświetlenie między innymi opisu strony (w przykładzie można zastąpić ręczne wpisanie „pisanie motywu”), czy adresu strony głównej. Szerszy opis funkcji bloginfo() w artykule 06.07 Informacje na temat strony – bloginfo().

Funkcja dla footer.php

Dla stopki wprowadzimy tylko jedną funkcję o nazwie wp_footer(). Podobnie jak funkcja wp_head(), służy głównie do wstawiania kodu przez wtyczki lub system WordPress. Funckje tą dodajemy tuż przed zamknięciem znacznika <body>, jak na listingu niżej.

footer.php – dodanie funkcji wp_footer()

<footer id="footer">
    <p>Szablon szkoleniowy motywu WordPpres WP-DOC.</p>
</footer>

<?php wp_footer(); ?>
</body>
</html>

Funkcje dla index.php

Funkcje get_header() oraz get_footer()

Tym razem omówimy dwie funkcje od razu. Każda z nich działa dokładnie tak samo. Po podziale motywu na osobne pliki należy wskazać, w którym miejscu należy dołączyć nagłówek, a w którym stopkę. Jak pewnie się domyślasz funkcja get_header() dołącza plik header.php, a funkcja get_footer() dołącza plik footer.php. Na listingu niżej zastosowanie obu funkcji.

index.php – dodanie funkcji get_header() oraz get_footer() – fragment kodu

<?php get_header(); ?>
<section id="content">
    <div class="center_page">
        // Tutaj część kodu z artykułami i panelem bocznym
    </div>
</section>
<?php get_footer(); ?>

Po wszystkich zmianach strona na razie wygląda jak na zdjęciu niżej. Jak widać, WordPress nie interpretuje pliku style.css. Jego poprawnym dołączeniem zajmiemy się w kolejnym etapie.

Strona bez użycia CSS
Dotychczasowy wygląd strony.

Czytaj dalej…

02.02 Dołączanie plików – functions.php

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.