Czwarta część mini-kursu nauki programowania szablonów WordPress. W poprzednim wpisie przygotowaliśmy podstawowy kod szablonu. Struktura strony jest podzielona na odpowiednio nazwane pliki PHP, dodaliśmy bibliotekę Bootstrap oraz plik ze stylami i metadanymi projektu. Możemy teraz przejść do kolejnego etapu, czyli załadowania naszego szablonu do WordPress`a i jego aktywację. Następnie zobaczymy jak zaprogramować wyświetlanie treści dodawany w postaci stron w panelu administratora.
~ Rafał, Learn2Code
Aktywacja własnego szablonu w WordPress
Do realizacji instrukcji przedstawionych w tym kroku należy już posiadać aktywną instalację WordPress na lokalnym środowisku.
Na potrzeby tego poradnika korzystam z wirtualnego środowiska programistycznego korzystającego z Vagrant`a i konfiguracji VVV. Instrukcja jak takie środowisko przygotować znajduje się w osobnej, poświęconej serii wpisów. Aby do nich przejść należy kliknąć tutaj.
Jeśli pracujesz na samodzielnie skonfigurowanym środowisku to nie masz powodów do obaw. Lokalnie czy na hostingu, najważniejsze jest, aby był dostęp do plików projektowych WordPress i jego działająca instalacja.
Aktywacja własnego szablonu nie różni się od aktywacji jakiegokolwiek innego szablonu pobranego z internetu. Można to zrobić na dwa sposoby:
- spakować pliki i załadować archiwum w panelu administratora
- utworzyć nowy folder w katalogu themes i do niego wkleić utworzone pliki. Co najmniej należy dodać
style.cssiindex.php
Ze względu na wygodę użyję drugiej metody. Korzystam z wirtualnego środowiska VVV, więc ścieżka w moim projekcie wygląda następująco:
W katalogu themes tworzę nowy folder, który nazwę landing (nazewnictwo dowolne; możesz wybrać inną nazwę) i do niego wkleję nasze pliki.
Następnie w panelu administratora przejść do widoku zmiany motywu Wygląd >> Motywy. Na liście motywów powinien być widoczny nowy. Jego nazwa jest wczytana z pliku style.css, w którym zawarte są metadane projektowe.
(Nie)spodziewane problemy
Po aktywacji szablonu okazało się, że nie wyświetla się on poprawnie. Jest to spowodowane tym, że nie udało się załadować styli… Jest to spodziewane zachowanie. W sekcji <head> strony linkujemy plik style.css. , wskazując jego ścieżkę, względem jej położenia:
<link href="style.css" rel="stylesheet">Niestety, nie podając bezwzględnej ścieżki dla style.css, przeglądarka próbuje go szukać w niewłaściwym miejscu. Nasz plik jednak znajduje się w podfolderze schowanym w wp-themes, nie w folderze nadrzędnym, w którym uruchamiane jest index.php. Ta rozbieżność powoduje problemy. Style Bootstrap ładują się poprawnie, ponieważ linkujemy je z zewnętrznego adresu.
Proste rozwiązanie problemu polega na tym, aby w miejscu, w którym wskazujemy plik style.css, dodać funkcję get_bloginfo('template_directory'), która automatycznie wygeneruje jego aktualną ścieżkę. Podany argument funkcjit ‘template_directory’ spowoduje, że w wyniku działania funkcji otrzymamy ścieżkę do folderu aktualnego szablonu na dysku.
<link href="<?php echo get_bloginfo('template_directory'); ?>"/style.css" rel="stylesheet">Nowe treści na stronie
Kolejny krok to dostosowanie szablonu tak, żeby wyświetlał statyczny tekst. Do tej pory mockup projektu nie uwzględniał miejsca na dłuższy, informacyjny tekst. Należy to zmienić! Zawsze warto dodać kilka zdań opisu produktu lub usługi, którą promujemy na naszym landing page`u. Jak inaczej zachęcić potencjalnych klientów do śledzenia aktualności na ich temat i dopisania się do newslettera?
Aby to osiągnąć należy dopasować szablon głównej części strony, tak aby wyświetlał treści zapisane w bazie danych. To właśnie po to w poprzednim kroku dodaliśmy następujący fragment:
Mechanizmem, z którego korzysta WordPress do wyświetlania treści na stronach (czy to jako listy postów, treści pojedynczego posta lub treści pojedynczej strony; zostało to wyjaśnione na końcu poprzedniej części) jest tzw. pętla (the Loop). Pętla wczytuje informacje z bazy danych, a następnie dodaje je do miejsc na stronie, wskazanych przez odpowiednie wskaźniki (template tags). Należy ją zastosować nawet dla naszego przypadku z pojedyncza stroną. Jest to jak najbardziej poprawne zastosowanie. Pętla wykona się po prostu jeden raz.
Jak widać w kodzie, pętla korzysta z instrukcji warunkowej WHILE, aby dopóki są w bazie danych jakieś posty, wczytywać po kolei ich tytuł i treść. Nie ma tu nigdzie wzmianki o stronie. Jest to niestety mylące, ale należy pamiętać, że WP wszystkie typy (strony archiwalne, załączniki do pobrania, komentarz etc.) traktuje jako post i stąd takie nazewnictwo.
Pokazany kod spowodował pojawienie się nowego tekstu we wskazanym miejscu. Można zadać uzasadnione pytanie dotyczące pozostałych miejsc na stronie. Przecież projekt graficzny wyraźnie wskazuje, ze powinniśmy móc dodać parę zdań komentarza, dodać informacje wyróżniające nasz produkt w postaci listy i uzupełnić stopkę. Aby to osiągnąć będziemy musieli użyć dodatkowych mechanizmów. Te informacje nie są niestety ładowane w pętli, ani nie dotyczą treści tego konkretnego posta. Do tych przypadków trzeba będzie zaprogramować widgety i sidebary. Pamiętajmy, ze treść dodawana w edytorze strony, stanowi jego kontent i jako taka może zostać umieszczona na stronie dzięki funkcji the_title() czy the_content() (obie zostały użyte w przedstawionym powyżej fragmencie). Na tym jej zastosowanie się kończy, bo przecież nie mamy możliwości uzupełnienia pozostałych pól w edytorze strony!
(Nie)spodziewane problemy cz.2
UWAGA! Wprawne oko zauważy, że treść, która pojawiła się na stronie to tekst przykładowego posta! Nie jest to błąd, a niedopatrzenie, na które pozwoliłem sobie w poprzednich akapitach. WP to platforma, której podstawowym przeznaczeniem była blogosfera, dlatego jest domyślnie przystosowany do wyświetlania listy wpisów na blogu. Aby skonfigurować go tak, aby wyświetlał statyczną stronę główną należy wejść do zakładki Ustawienia-> Czytanie i tam odnaleźć pozycję Strona główna wyświetla -> Strona statyczna i z rozwijanego menu wybrać odpowiednią pozycję. Gotowe! Nasza strona główna w końcu wygląda jak należy.
Kod do tego wpisu znajduje się na osobnym branchu. Kod jest dostępny na github, pod linkiem https://github.com/01float/l2c-wordpress-basic-theme/
Mniej statycznego tekstu
Tym razem było mniej programowania. Dzięki temu mogłem poświęcić więcej miejsca na wyjaśnienie mechanizmu dodawania treści postów i stron do naszego szablonu i przedstawienie pętli (the loop), stanowiącej podstawowy mechanizm pracy treścią. Na ten moment szablon jest już aktywowany i można przejść do dalszej jego edycji, żeby zagwarantować użytkownikowi jeszcze większą możliwość modyfikacji z poziomu panelu administratora. Posłużą nam do tego widgety. Więcej o nich w kolejnym wpisie. Zapraszam!
