WP-DOC

Pisanie motywu

02.03 Ozdobna grafika w motywie

Ostatnia modyfikacja: 19.01.2021

W motywie, na którym pracujemy nie ma ozdobnych grafik. Natomiast grafiki, które będą się pojawiać obok wpisów, będą dodawane za pomocą panelu administratora jako obrazek wyróżniający. Jednak na czas nauki pisania motywu wykorzystamy te grafiki, aby wyświetlić je za pomocą funkcji get_template_directory_uri(). Funkcja ta zwraca adres folderu bieżącego motywu. Przykładowy adres będzie mieć postać http://www.xyz.pl/wp-content/themes/folder-motywu. Oczywiście w znaczniku img w atrybucie src można ręcznie podać adres strony wraz z nazwą pliku. Rozwiązanie to jednak jest kłopotliwe, szczególnie w przypadku kiedy nie wiadomo pod jakim adresem strony, będzie działał napisany przez nas motyw. Dzięki zastosowaniu funkcji get_template_directory_uri(), kod motywu staje się bardziej elastyczny, a co za tym idzie będzie poprawnie wyświetlał wszystkie grafiki nie zależnie od adresu witryny.

Obrazek wyróżniający dla artykułu, będzie dodawany za pomocą panelu administratora WordPress. Aby było to możliwe, należy napisać odpowiednią funkcję w pliku functions.php. Z braku grafik ozdobnych w motywie, na którym pracujemy, wykorzystamy grafiki artykułów do prezentacji funkcji get_template_directory_uri().

Dodanie funkcji get_template_directory_uri() do motywu

Obecnie w szablonie w pliku index.html, gdzie znajdują się artykuły (na razie statycznie) są podlinkowane zdjęcia do artykułu. W kodzie wygląda to jak na listingu niżej. Zdecydowałem się na umieszczenie grafiki jako stylu, gdyż w ten sposób zdjęcie będzie odpowiednio przycinane oraz będzie się automatycznie dopasowywać w zależności od szerokości okna przeglądarki. Dodatkowo jest to zdjęcie czystko dekoracyjne nie wnoszące nic do treści.

index.html – link do grafiki

<div class="post_article_img" style="background: url('images/foto-1.jpg') center center no-repeat; background-size: cover"></div>

Zwróćmy uwagę na to, że ozdobna grafika znajduje się wewnątrz folderu images. Dlatego przed nazwą pliku zdjęcia, należy podać nazwę tego folderu. W motywie, na którym pracujemy funkcja get_template_directory_uri(), zwróci taki adres localhost/wpnauka/wp-content/themes/wpnauka. Jest to ciąg znaków, dlatego do jej wyświetlenia musimy użyć echo. Całość powinna wyglądać jak na listingu niżej. Nie zapomi dodać znaku / przed nazwą folderu images.

index.php – dodanie funkcji get_template_directory_uri(), dla prawidłowego linkowania grafiki.

<div class="post_article_img" style="background: url('<?php echo get_template_directory_uri(); ?>/images/foto-1.jpg') center center no-repeat; background-size: cover"></div>

Oczywiście funkcję tę należy dodać we wszystkich trzech grafikach motywu.

Funkcja get_template_directory_uri() w znaczniku img

Prawidłowe linkowanie obrazu w znaczniku img w atrybucie src, będzie wyglądało jak na listingu niżej.

Przykład linkowania zdjęcia w znaczniku img atrybucie src.

<img src="'<?php echo get_template_directory_uri(); ?>/images/foto-1.jpg'" alt="Przykładowy tekst">

Czytaj dalej…

02.04 Obrazek wyróżniający – opcja w WordPress

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.