Dodanie obrazka do nagłówka
autor: Robert
2 grudnia 2014
Skoro mamy już stworzony cały szkielet naszego motywu możemy zabrać się za jego modyfikacje, którą rozpocznę od dodania obrazka w pliku header.php aby wyświetlał się na wszystkich podstronach.
Zaczniemy od utworzenia w naszym folderze z motywem kolejnego folderu o nazwie „img”, który będzie nam służył do przechowywania obrazów oraz wrzuceniu do niego pliku header.jpg (plik znajduje się w paczce z wersją 0.0.1)
Teraz dopiszemy trochę kodu do naszego pliku header.php
Powyższy kod umieszczamy za zamknięciem znacznika </header>. Jak widzimy, otwieramy sobie kontener z klasą .container-fluid oraz .header-img-wrapper. Pierwsza z nich to Bootstrapowy kontener o szerokości całego ekranu a druga z nich będzie nam służyła do ustalenia tła kontenera. Wewnątrz umieszczamy sobie obrazek, który wrzuciliśmy do nowo utworzonego folderu /img.
W atrybucie „src” obrazka użyłem fukcji <?php bloginfo('stylesheet_directory'); ?>. Warto ją zapamiętać gdyż zwraca ona nam dokładną ścieżkę do naszego folderu z motywem, dlatego przy uruchamianiu templatki na naszej innej stronie nie musimy „na sztywno” tej ścieżki zmieniać.
Jeszcze słowo o ścieżkach w WordPress. Nasz obraz jest pobierany z folderu naszej templatki. Gdybyśmy w pliku chcieli zapisać ścieżkę do obrazka bez użycia w/w funkcji wyglądała by ona tak: http://example.kursbootstrap.pl/wp-content/themes/wordpress-kursbootstrap/img/header.jpg i musiała by być ona przez nas zmieniania ręcznie za każdym razem gdy instalujemy motyw na innej domenie. Użycie funkcji <?php bloginfo('stylesheet_directory'); ?> wygeneruje nam adres naszej domeny i ścieżkę do motywu czyli np http://example.kursbootstrap.pl/wp-content/themes/wordpress-kursbootstrap a nam pozostaje dopisać jedynie /img/header.jpg. Prawda, że łatwiej?:)
Teraz mamy już ładnie wycentrowany obrazek ale po bokach zostały nam białe pola. Tutaj użyjemy klasy .header-img-wrapper. Otwieramy zatem plik style.css i umieszczamy w nim zapis:
Dzięki temu wokół obrazka pojawi się fioletowe tło, które wypełni nam białe elementy.
Pamiętajcie by zapisać wszystkie pliki i wysłać je na serwer jeśli nie pracujecie na localhoście:)
Podgląd aktualnej wersji strony zawsze pod adresem http://example.kursbootstrap.pl
Przejdź do przykładowej strony
