Witajcie! Zapewne trafiliście wcześniej na mój kurs o Twitter Bootstrap. Z racji tego, że spotkał się on z dużym zainteresowaniem oraz ciepłym przyjęciem, postanowiłem stworzyć także tutorial w którym pokażę Wam jak zakodować własną skórkę dla WordPressa. Nie będę pisał jak zainstalować kopię WordPressa na serwerze bądź komputerze bo na ten temat powstało mnóstwo artykułów, […]
Podstawowa wersja motywu zawiera motyw z niezbędnymi plikami oraz kilkoma elementami służącymi jedynie do zobrazowania jego działania. Kolejne wersje motywu znajdują się niżej i przy każdej wersji zamieściłem opis zmian. Podgląd ostatniej wersji motywu znajduje się pod adresem: http://example.kursbootstrap.pl Postawowa (czysta) wersja motywu Paczka dla WordPress Repozytorium na Github Repozytorium na Github Wersja 0.0.1 Zmiany: […]
Wychodzę z założenia, że każdy z Was ma już zainstalowanego WordPressa. Poniżej instrukcja jak poprawnie uruchomić templatkę nad którą będziemy pracować. Ściągamy paczkę z motywem z TEGO LINKA Logujemy się w naszym zapleczu (wp-admin) Przechodzimy do „Wygląd” -> „Motywy” Na górze strony klikamy „Dodaj nowy” Znów na górze strony klikamy „Wyślij motyw na serwer” Wybieramy […]
404.php – plik odpowiada za wyświetlanie własnej strony błędu 404 comments.php – plik wyglądu listy komentarzy w naszych wpisach custom-page.php – plik wyglądu własnej niestandardowej strony footer.php – plik z wyglądem stopki, który importujemy w innych plikach wyglądu stron functions.php – plik w którym umieszczamy różne funkcje i filtry WordPressa (np. importujemy pliki *.css czy […]
Zacznę od opisu chyba najważniejszego pliku, który znajduje się w folderze naszego motywu. Jest to plik „functions.php”, który pozwala na dodawanie do naszej strony wbudowanych funkcji WordPressowych, wczytywanie zewnętrznych styli CSS i skryptów JS, aktywowanie menu czy miniatur postów, uruchamianie filtrów itp. Plik ten jest wykonywany tylko dla danego motywu i tylko jeśli dany motyw […]
Nasza strona może zawierać kilka menu, każde z nich może pokazywać inne informacje i znajdować się w innym miejscu. W tym wpisie pokażę jak poinformować WordPressa, że chcemy mieć menu i żeby w panelu (Wygląd -> Menu -> Rozmieszczenie) można było przypisać do niego utworzoną przez nas nawigację. W pliku <code>functions.php</code> utworzymy główną nawigację czyli […]
Kolejny wpis dotyczący technicznego przygotowania naszego motywu do prawidłowego wyświetlania. Tym razem poinformujemy WordPressa, że chcemy mieć panel boczny na stronach i ostylujemy go aby wyświetlał się tak jak tego chcemy. Kod do rejestrowania panelu w pliku <code>functions.php</code> wygląda następująco: Zaczynamy od wywołania funkcji register_sidebar ( array( … ) ); Wewnątrz musimy przekazać kilka parametrów: […]
Jak wiecie, przy tworzeniu wpisu w WordPressie można dodać jego „miniaturkę” czy „obrazek wyróżniający”, który będziemy wyświetlali na liście wpisów oraz wewnątrz postu. Aby poinformować WordPressa, że chcemy mieć włączoną możliwość dodawania owych miniaturek, musimy w pliku <code>functions.php</code> umieścić następujący kod: I tyle:) Podczas dodawania nowego wpisu w panelu po prawej pojawi się nam opcja […]
W pliku <code>functions.php</code> możemy także zdefiniować jak będą wyglądały odpowiedzi pod naszym wpisem oraz dodać przycisk odpowiedzi. Funkcja ta zawiera kilka wbudowanych w WordPressa funkcji ale ich nazwy są intuicyjne, więc bez problemu zrozumiecie o co chodzi:) Zaczniemy od kodu: Otwieramy funkcję comments_feed_template_callback($comment, $args, $depth) { … } wewnątrz niej pobieramy sobie zmienną globalną comment […]
Plik naszego nagłówka będzie wyświetlany na wszystkich podstronach naszej strony. Jego zadaniem jest zaimportowanie wszystkich plików CSS i ewentualnie JS oraz otwarcie struktury dokumentu HTML. Oczywiście w pliku header.php nie tylko otwieramy znacznik <html> ale także możemy umieścić w nim jakiś obraz, slider, menu, cokolwiek co chcemy wyświetlać w obrębie całej witryny. Zaczniemy od sekcji […]
Po nagłówku przychodzi czas na stopkę strony. Tutaj póki co opiszę co jest najważniejsze a gdy skończę opisywać poszczególne pliki zajmiemy się jej modyfikacją. Nasz stopka zawiera sekcję footer oraz jej zawartość, zamykamy tutaj także nasz dokument HTML. Co ważne, tuż przed zamknięciem sekcji body musimy umieścić funkcję <?php wp_footer();?>.Funkcja ta podobnie jak funkcja wp_head(); […]
Co prawda piszemy motyw oparty na Bootstrapie ale zawsze musimy dopisać kilka linijek swoich CSSów by wszystko wyświetlało się jak tego chcemy. Plik style.css służy także do opisu naszej skórki, opis ten wyświetla się gdy wejdziemy w panelu WordPressa w Wygląd -> Motywy -> Szczegóły motywu. W pliku, który dla Was przygotowałem znajdziecie takie informacje: […]
Każda strona internetowa zawiera stronę główną, to na niej lądują użytkownicy po wpisaniu adresu w pasku przeglądarki i to z niej przemieszczają się dalej po naszej witrynie. Każdy ma jakąś swoją wizję na stronę główną i każdy tworzy ją tak by mu się podobała i by była czytelna dla użytkowników. Stworzenie podstawowej strony głównej jest […]
Z racji tego, że WordPress jest platformą blogową to warto by było wyświetlać wszystkie nasze wpisy, które do tej pory zamieściliśmy. Do wyświetlenia listy wpisów służy plik index.php w połączeniu z chyba najważniejszą funkcją WordPressa czyli The Loop. Oczywiście listę wpisów możemy wyświetlać nie tylko w tym pliku ale index.php według hierarchii plików jest do […]
Skoro mamy już listę naszych wpisów to teraz musimy wyświetlić pojedynczy wpis, który z niej wybierzemy. Służy do tego plik single.php. Standardowo zaczynamy od pobrania sobie naszego pliku header.php za pomocą funkcji <?php get_header(); ?> a następnie, jak to zwykle bywa w przypadku Bootstrapowych stron otwieramy sobie divy z klasami .container oraz .row. Nasz wpis […]
Nasza strona, prócz wpisów na blogu musi zawierać także zwykłe podstrony na których umieścimy na przykład informacje o sobie. Służy do tego plik page.php Najważniejszym elementem takiej strony jest informacja zawarta w komentarzu na początku jej kodu. Otwieramy znacznik kodu php czyli <?php, następnie otwieramy komentarz czyli /* wewnątrz którego umieszczamy tekst: Template name: Pojedyncza […]
Opisałem już plik page.php, który jest domyślnym szablonem dla wszystkich dodawanych przez nasz stron. Ale oczywiście czasami chcemy by któraś z naszych stron wyglądała całkowicie inaczej. Służy nam do tego plik custom-page.php (WAŻNE! ten plik może mieć dowolną nazwę ale nazwa custom-page.php (niestandardowa-strona.php) jest dla nas zrozumiała, więc użyłem jej w tym kursie). Najważniejszym elementem […]
Bardzo często strony WWW posiadają „panele boczne”, jest to element w którym możemy umieścić nawigację, kalendarz, różne linki itp. WordPress posiada wbudowaną obsługę paneli bocznych i umożliwia umieszczanie w nich widgetów. W tym wpisie dowiecie się jak zaimplementować obsługę paneli i dodać własny. Jak pewnie pamiętacie w tym wpisie napisałem jak w pliku functions.php napisałem […]
Każda witryna posiada stronę błędu 404 czyli „Strona nie znaleziona”, która wyświetla się gdy użytkownik wpisze w pasku adresu zły adres podstrony, gdy pomylimy się w linkowaniu wewnętrznym lub gdy usuniemy wpis a link do niego nadal znajduje się gdzieś na naszej stronie. WordPress posiada wbudowaną obsługę tego błędu i wystarczy w naszej templatce stworzyć […]
Skoro już prowadzimy bloga to chcemy by pod naszym wpisem pojawiały się komentarze. WordPress umożliwia własne ostylowanie pola dodawania komentarzy, więc skoro jest taka możliwość to tutaj również wykorzystamy sobie Bootstrapa. Ten plik jest dość skomplikowany i wykorzystuje wiele z WordPressowych funkcji. Poniżej znajduje się lista wykorzystywanych w pliku comments.php <?php if ( ‚open’ == $post->comment_status […]
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 […]
Zajmiemy się teraz modyfikacją strony głównej czyli pliku front-page.php. Pierwsze co musimy zrobić to dodać sobie 2 nowe strony o nazwach: Galeria Kontakt Przechodzimy do panelu WordPressa i wybieramy „Strony -> Dodaj nową”. W tytule strony wpisujemy „Galeria” i klikamy „Opublikuj”. Czynność powtarzamy dla strony z tytułem „Kontakt” ale tutaj z panelu po prawej wybieramy […]
Zapewne chcemy mieć na swojej stronie coś w rodzaju aktualności. Możemy w nich poinformować klientów o nowej dostawie czy promocji albo naszych czytelników o nowym wpisie. Stworzyłem przykłady 2 boksów by pokazać Wam, że nie musimy się ograniczać do jednej kategorii wpisów. Dodatkowo możemy wyświetlać sobie miniaturki, które dodamy do postów. Kod pętli odpowiedzialnej za […]
Początkowo chciałem by przykładowa strona była ładna i spójna, ale stwierdziłem, że właściwie po co powtarzać niektóre elementy skoro można pokazać wiele różnych rozwiązań. Zatem strona nie będzie bardzo estetyczna ale za to pokażę na niej różne sposoby połączenia Bootstrapa z WordPressem. Dzięki temu do Was będzie należał wybór najbardziej odpowiadających wam elementów i zastosowanie […]