Nowy wystrój strony

W poprzedniej części kursu pokazaliśmy, w jaki sposób zainstalować skrypt na własnym serwerze i jak uruchomić witrynę opartą na WordPressie. Teraz czas na zaprojektowanie jej szaty graficznej. Opierając się na standardowym szablonie, musisz mieć świadomość, że w sieci może być wiele stron o podobnym układzie graficznym. Aby uniknąć powielania motywu, warto zadbać o indywidualny szablon. W internecie znajdziesz wiele różnych motywów do WordPressa. Podpowiadamy, gdzie szukać, zarówno darmowych, jak i komercyjnych motywów, oraz pokazujemy sposób zainstalowania ich na własnym serwerze.

Dla standardowej instalacji WordPressa wgrywane są trzy szablony: Twenty Fourteen, Twenty Thirteen i Twenty Twelve, z których aktywny jest ten pierwszy. W panelu administracyjnym WordPressa masz dostęp do wielu darmowych motywów, które możesz zainstalować jednym kliknięciem. Szablony możesz też przeglądać po wpisaniu w przeglądarce adresu http://wordpress.org/themes/. W oficjalnej bazie WordPressa znajdują się ponad 2000 motywów, jest więc w czym wybierać, ale bezpłatne szablony są dość minimalistyczne. Poza tym znowu istnieje ryzyko powtarzalności motywów na witrynach.

Profesjonalny motyw do swojej witryny znajdziesz na stronie www.themeforest.net. Są tam ponad 4000 gotowych szablonów w cenach od 25 do 60 dolarów. Większość motywów jest kompatybilna z najnowszymi wersjami WordPressa i większością przeglądarek internetowych. Wiele sprzedawanych szablonów zawiera dodatkowe komercyjne skrypty, które wzbogacają wygląd witryny.

Na łamach witryny ThemeForest jest raz w miesiącu publikowany darmowy plik, dzięki czemu można „ustrzelić” szablon bezpłatnie. Niestety, darmowy plik nie zawsze dotyczy kategorii WordPressa. Mniej popularnym serwisem jest TemplateMonster.com. Ma w bazie ponad 1500 szablonów w cenach od 63 do 75 dolarów.

Zanim zdecydujesz się na zakup komercyjnego szablonu, dokładnie sprawdź jego możliwości. Obie wymienione witryny oferują podgląd pełnej wersji szablonu, dzięki czemu możesz sprawdzić, czy wybrany motyw spełnia twoje oczekiwania.

Po zakupie paczki z plikami zwykle otrzymasz instrukcję dotyczącą instalacji szablonu na serwerze oraz najważniejsze porady dotyczące konfiguracji i modyfikacji szablonu.

Pokazujemy dwa warianty wgrywania nowego szablonu. Pierwszy dotyczy szybkiej instalacji bezpośrednio z panelu administracyjnego, a drugi – komercyjnego szablonu, zakupionego za pośrednictwem jednej z wymienionych w artykule witryn zajmujących się sprzedażą szablonów.

Uruchom przeglądarkę internetową i wpisz adres swojej strony z dopiskiem /wp-admin. Adres witryny powinien wyglądać tak: http://nazwadomeny.pl/wp-admin Pojawi się okienko logowania, wpisz swój login i hasło, a następnie kliknij Zaloguj się.

Z lewego menu wybierz kolejno opcje: Wygląd i Motywy. W okienku zobaczysz listę zainstalowanych szablonów i motyw aktywny, który będzie podświetlony domyślnie na czarno, np. Twenty Fourteen. Jeżeli chcesz się przełączyć na inny z zainstalowanych motywów, naprowadź kursor myszy na jego miniaturkę i kliknij widoczny przycisk Włącz. Zanim jednak dokonasz wyboru, możesz sprawdzić wygląd szablonu, wybierając przycisk Podgląd.

Aby dodać nowy szablon, kliknij w oknie Motywy przycisk Dodaj nowy motyw. Pojawi się lista miniatur dostępnych szablonów. Domyślnie zaznaczona jest zakładka Wyróżniony, w której są prezentowane proponowane szablony. Kliknij zakładkę Popularny, aby przeglądać najpopularniejsze motywy. Możesz też przeglądać szablony, które ostatnio zostały zaktualizowane, wybierając zakładkę Ostatnio modyfikowany.

Jeżeli chcesz dokładnie sprecyzować wyszukiwanie odpowiedniego szablonu, kliknij przycisk Filtr właściwości i na wyświetlonej liście zaznacz interesujące cię elementy, takie jak: układ, kolory i właściwości. Zaznacz przynajmniej jedną opcję, a następnie kliknij przycisk Zastosuj filtry.

Naprowadź kursor na miniaturkę wybranego szablonu, w naszym przykładzie to motyw Hueman. Warto sprawdzić podgląd szablonu, klikając Podejrzyj. Jeżeli motyw odpowiada twoim oczekiwaniom, kliknij przycisk Zainstaluj.

Po instalacji zobaczysz komunikat potwierdzający zainstalowanie motywu. Aby aktywować szablon na swojej stronie, kliknij odnośnik Włącz, a powrócisz do okna z listą zainstalowanych motywów. Od tej chwili twoja strona ma nowy szablon. Aby sprawdzić, jak wygląda, kliknij na górnej belce przycisk z ikoną z symbolem domku i nazwą twojej strony. W naszym przykładzie tworzona strona wygląda tak jak poniżej.

W warsztacie pomijamy opis dokonywania zakupu skryptu komercyjnego. W obu serwisach opisywanych w artykule możesz zapłacić kartą płatniczą lub przez system płatności PayPal. Przygotuj pobraną paczkę plików w formacie ZIP. W ten sposób dokonasz szybkiego przesłania plików na serwer i prostej instalacji w oknie przeglądarki.

Zaloguj się do panelu administracyjnego witryny w sposób opisany w kroku 1 poprzedniego warsztatu.

Z lewego menu wybierz kolejno: Wygląd i Motywy. Następnie w oknie Motywy kliknij przycisk Dodaj nowy i w kolejnym oknie przeglądarki kliknij przycisk Wyślij motyw na serwer.

Na następnej stronie kliknij przycisk Przeglądaj, wskaż na dysku plik w formacie ZIP zawierający paczkę plików szablonu, i zatwierdź wybór przyciskiem Otwórz. Aby rozpocząć przesyłanie pliku na serwer, kliknij przycisk Zainstaluj.

Jeżeli wskazany przez ciebie plik był poprawny, zobaczysz komunikat Motyw został zainstalowany. Aby go aktywować, kliknij odnośnik Włącz. Od tej chwili twoja strona ma nowy, komercyjny szablon. Aby sprawdzić, jak wygląda, kliknij na górnej belce przycisk z ikoną z symbolem domku i nazwą twojej strony.

Zainstalowany motyw często wymaga dodatkowej konfiguracji, różnej dla poszczególnych szablonów. Skorzystaj z dokumentacji dołączonej do twojego motywu i postępuj zgodnie z zawartymi tam wskazówkami.

Jeśli nie masz spakowanej paczki plików z szablonem, możesz przesłać pliki motywu na serwer za pomocą dowolnego klienta FTP, np. Total Commandera. W tym celu musisz połączyć się z serwerem i przejść do katalogu themes, w którym należy założyć folder dla nowego szablonu, a następnie przekopiować do niego zawartość wszystkich plików szablonu. Pełna ścieżka na serwerze powinna wyglądać tak: /wp-content/themes/. Po przekopiowaniu plików na serwer przejdź w panelu do sekcji z motywami i ręcznie aktywuj wgrany szablon.

W każdym szablonie jest miejsce przeznaczone na widżety, w których można umieszczać różne treści i gotowe elementy, takie jak tytuły najnowszych wpisów lub komentarzy, listę kategorii wpisów lub pole wyszukiwania. Widżety są najczęściej wykorzystywane w obrębie paska bocznego (tzw. sidebar) umieszczonego po lewej lub prawej (a czasem po obu) stronie witryny, a czasami dotyczy również stopki witryny (tzw. footer). Cały proces edycji widżetów działa na zasadzie przeciągnij i upuść. Pokazujemy, jak wypełnić widżetami darmowy szablon, którego instalację opisaliśmy w pierwszym warsztacie.

Zaloguj się do panelu administracyjnego witryny i z lewego menu wybierz kolejno: Wygląd oraz Widgety.

Po lewej stronie okna Widgety zobaczysz prostokąty z listą dostępnych widżetów. Po prawej stronie widoczne są pola zarezerwowane dla widżetów. Dla naszego szablonu są 2 paski boczne: Primary widoczny po lewej stronie oraz Secondary wyświetlany po prawej stronie witryny.

W naszym przykładzie lewy pasek jest domyślnie wypełniony, dlatego pokazujemy, jak dodać widżety do prawego paska. W tym celu kliknij szarą strzałeczkę obok nazwy paska bocznego, w naszym przykładzie Secondary. Po rozwinięciu obszaru wybierz widżet z listy dostępnych i przeciągnij go na panel boczny, np. Kalendarz. W ten sposób dodasz kalendarz, na którym będą wyróżnione daty zawierające wpisy.

Otwórz teraz swoją stronę, a zobaczysz dodany widżet w wybranym przez siebie miejscu. W naszym przykładzie kalendarz wygląda tak jak poniżej. Wygląd kalendarza zależy od ustawionego motywu witryny.

Jednym ze sposobów dostosowania widżetów do własnego szablonu jest personalizacja motywu. W tym celu z lewego menu wybierz Wygląd oraz Personalizacja. Bezpośrednio z okna personalizacji możesz zmienić tytuł i opis witryny, przygotować własne menu nawigacyjne, zmodyfikować wygląd strony głównej oraz zdefiniować widżety wyświetlane w paskach bocznych lub w stopce.