Dodanie boksów na stronie głównej
autor: Robert
3 grudnia 2014
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 szablon „Własna pojedyncza strona”.
Teraz otwieramy sobie plik front-page.php i za zamknięciem diva z klasą .col-md-12 w którym znajduje się Jumbotron wklejamy następujący kod:
Właściwie nie ma tutaj co opisywać, gdyż korzystamy z samego HTMLa bez żadnych funkcji WordPressa. Tworzymy sobie trzy divy z klasą .col-md-4 .col-sm-4 dzięki czemu na komputerach i tabletach będziemy widzieli 3 boksy obok siebie. Na smartfonach boksy ustawią się pod sobą. Wewnątrz każdego boksu umieszczamy sobie Bootstrapowy panel czyli diva z klasą .panel .panel-default a w nim link prowadzący do naszego bloga czyli „/blog” oraz do nowo utworzonych stron: Galerii („/galeria”) oraz Kontaktu czyli („/kontakt”). Wewnątrz elementu a czyli linka umieszczamy ikonę „Font Awesome” adekwatną dla każdej podstrony. Pod każdym linkiem dorzucamy dodatkowo przycisk, który również prowadzi do odpowiedniej podstrony.
Czego nie umieścicie w pliku front-page.php, będzie się wyświetlało na Waszej stronie głównej dlatego eksperymentujcie z jej wyglądem i dopasowujcie ją do siebie. Później umieszczę na niej coś w rodzaju aktualności czyli 2 ostatnie wpisy na blogu z odpowiednią kategorią.
Komentarze: 5 komentarzy
Łukasz 1 marca 2016 o 12:58
Witam,
Mam podobne pytanie jak Natalia, tzn. jak wywołać Stronę lub Wpis (w zasadzie bardziej interesuje mnie wywołanie Stron) w dowolnym miejscu w kodzie. Myślę, że wtedy mógłbym ładnie zaszyć całą strukturę serwisu dla łatwej edycji przez samego klienta. Bez tego nie ma szans, aby „Kowalski” pilnował siatki gridu bootstrapa (z doświadczenia wiem, że wszystko rozsypują), a tak będą tylko mogli zmienić treść i tyle 🙂
No chyba, że jakaś wtyczka by ten problem rozwiązała, ale wątpie… Site Builder nie ma bootstrapa, Builder Woorockets nie ma zarządzania gridem itd itd
Ogólnie zastanawiam się jak najprościej robić serwisy pod klienta i pod to aby sam jakoś to edytował bez wiedzy html
Z góry dzięki za info, Łukasz
OdpowiedzRobert 1 marca 2016 o 13:11
Ogólnie to za wyświetlenie treści tego co wpiszesz w edytorze WordPressa odpowiada funkcja the_content(); -> https://developer.wordpress.org/reference/functions/the_content/
Musisz ją umieścić wewnątrz the_loop. Ale tutaj faktycznie użytkownik może pomieszać w HTMLu.
Jeśli chcesz by udostępnić klientowi tylko wybraną możliwość jak np. upload zdjęcia czy pole w którym może wpisać tylko jedną linijkę tekstu, a później sam w kodzie zadecydować, jak i gdzie to wyświetlić to skorzystaj z Advanced Custom Fields. To wtyczka z ogromem możliwości ale trzeba spędzić trochę czasu by ją poznać:) -> http://www.advancedcustomfields.com/
Odpowiedz
