Z Wordpressem za pan brat
Wordpress umożliwia nie tylko tworzenie witryn webowych, co przedstawiliśmy w poprzedniej części kursu, ale również zamieszczenie w nich treści i spójną zmianę ich wyglądu. Ten bardziej zaawansowany etap omówimy w tym odcinku.
Wiesz już, jak instalować Wordpress na serwerze hostingowym oraz tworzyć pierwsze strony i wpisy (artykuły) oraz zmieniać motyw wyglądu witryny. Tym razem dowiesz się, w jaki sposób wzbogacić wygląd i zawartość witryny, dodając grafiki do wpisu czy strony, zmieniając szczegóły wyglądu motywu oraz uzupełniając zawartość o występujące na wszystkich stronach bloki z treścią, czyli tak zwane widżety. Poznasz kilka podstawowych czynności administracyjnych, dzięki którym będziesz mógł rozszerzyć możliwości utworzonej witryny. Pokażemy ci także, jak instalować wtyczki.
Dodawanie grafik do wpisu
Jeżeli chcesz dodać grafikę do wpisu blogowego czy strony WWW, w trakcie edycji jego treści użyj przycisków Wyślij/Wstaw powyżej okna z treścią.
Krok 1
Ustaw kursor w tekście strony lub notatki w miejscu, w którym chcesz wstawić grafikę. Kliknij przycisk wstawiania grafiki. W zakładce Z komputera kliknij przycisk Wybierz pliki. Pojawi się okno dialogowe, w którym wybierzesz plik do przesłania na serwer Wordpress.
Krok 2
Po przesłaniu pliku graficznego na serwer pojawi się okno konfiguracji grafiki. Możesz ustawić m.in. Tekst alternatywny, jaki pojawi się na stronie, gdy kursor myszy zatrzyma się nad grafiką. Etykieta pojawi się jako podpis obrazka na stronie. Adres URL odnośnika pozwala wstawić pod obrazek odsyłacz do dowolnej strony WWW lub pliku na WWW. Przycisk Adres URL pliku wstawia automatycznie odsyłacz do pełnowymiarowej, oryginalnej wersji obrazka. Adres URL wpisu wstawia odsyłacz do aktualnie edytowanego wpisu.
Krok 3
Ustaw sposób prezentacji grafiki na stronie (oblanie tekstem). Zaznacz pole w opcji Wyrównanie. Wielkość miniatury określisz, zaznaczając jedno z czterech pól w opcji Rozmiar.Grafikę wstaw do wpisu i zatwierdź jej ustawienia przyciskiem Wstaw do wpisu.
Podpis artykułu (wpisu)
Wzorzec podpisu będzie zawierał wewnętrzne dane Wordpressa: datę i czas publikacji lub imię i nazwisko autora, pobrane z jego konta w Wordpressie. Odwołania te to:
- proc.author proc. – pseudonim osoby, która dokonała wpisu i publikacji ze swojego konta w Wordpressie (również imię i nazwisko, jeśli zostały wpisane jako pseudonim w ustawieniach konta)
- proc.date proc. – data opublikowania artykułu
- proc.time proc. – dokładny czas opublikowania
- proc.categories proc. – kategoria, do której jest przypisany artykuł
- proc.tags proc. – słowa kluczowe związane z wpisem
- proc.comments proc. – liczba komentarzy do wpisu
Jeżeli umieścisz wzorzec podpisu w polu Top Meta, podpisy pojawią się u góry artykułu, tuż pod tytułem. Jeśli w polu Bottom Meta – na końcu artykułu.
Modyfikowanie wyglądu motywu – zmiana jego elementów
Wiesz już, jak zainstalować nowy motyw. Możesz w jego obrębie dostosowywać niektóre ustawienia i elementy wyglądu zgodnie z własnymi upodobaniami. Dostosowanie to pokażemy na przykładzie motywu K2.
Zmiana liczby kolumn
W przykładowym motywie K2 możesz ustawić jedną, dwie lub trzy kolumny z treścią. Jedna z nich będzie zawsze zawierała treść wpisu lub strony, pozostałe będą panelami bocznymi, w których możesz umieszczać widżety – skrzynki ze stałą lub dynamicznie uaktualnianą zawartością. W układzie Dynamic columns kolumna z treścią nie będzie zawierała wpisów prezentowanych jeden pod drugim – będzie prezentowany jeden wpis z linkami do poprzedniego i następnego nad kolumną z treścią.
Krok 1
Wejdź do panelu administracyjnego Wordpressa pod adresem http://poradnik-it.hosting.pl/wp-admin/. Rozwiń sekcję Wygląd, która jest dostępna w panelu po lewej stronie, i wybierz Motywy. Następnie kliknij odnośnik K2 Options.
Krok 2
W sekcji wybierz liczbę kolumn, jakie mają się pojawić na stronach witryny. W tym celu rozwiń listę Dynamic Columns i wybierz jedną z propozycji. W naszym przykładzie będzie to Three Columns, czyli witryna zostanie podzielona na trzy kolumny.
Krok 3
Przewiń stronę w dół i naciśnij przycisk Save Changes. Zmiany w liczbie kolumn na twojej stronie zostaną wprowadzone. Zobaczysz je po odświeżeniu witryny.
Widżety
Motyw K2 zawiera wiele widżetów, m.in. Archiwum z odnośnikami do starszych wpisów, Tekst, w który możesz wpisać dowolną zawartość tekstową lub HTML, czy Najnowsze komentarze. Każdy z widżetów konfiguruje się w nieco inny sposób, np. w widżecie Najnowsze komentarze ustalasz tytuł i liczbę wyświetlanych odnośników. Obecność dwóch paneli bocznych w naszym przykładzie to efekt ustawienia trzech kolumn – pierwsza zawiera właściwą treść, druga i trzecia widżety z paneli bocznych, odpowiednio nr 1 i nr 2.
Krok 1
Widżety to bloki z treścią pojawiające się na każdej stronie lub przy dodanym wpisie. Każdy motyw ma inny zestaw widżetów. Wejdź do panelu administracyjnego Wordpressa. Rozwiń sekcję Wygląd i wybierz Widgety.
Krok 2
Przeciągnij i upuść widżet Kalendarz na Panel boczny nr1. Skonfiguruj widżet: w polu wprowadzania tekstu dla tytułu, wpisz na przykład Kalendarz Poradnika IT. Kliknij przycisk Zapisz w polu konfiguracji widżetu.
Podpis artykułu
Każdy artykuł czy wpis na blogu ma podpis w postaci nagłówka pod tytułem lub stopki. Podpis zawiera informacje, takie jak: data publikacji czy imię, nazwisko lub pseudonim autora. Domyślny podpis w motywie K2 jest anglojęzyczny, możesz go jednak zmienić. W tym celu wykonaj następujące czynności.
Krok 1
W panelu administracyjnym Wordpressa rozwiń sekcję Wygląd i wybierz Motywy. Kliknij odnośnik K2 Options. Tę czynność wykonywałeś już w warsztacie „Zmiana liczby kolumn”.
Krok 2
Następnie znajdź sekcję Post Entry. W polu wprowadzania tekstu Top Meta znajdziesz anglojęzyczny wzorzec podpisu artykułu. Właśnie ten podpis chcesz zmienić, dlatego w polu Top Meta zastąp domyślny podpis swoim.
Krok 3
Przewiń stronę w dół i zachowaj wprowadzone zmiany. W tym celu naciśnij przycisk Save Changes. Od tej chwili treści na twojej stronie będą opatrzone podpisem (zaraz pod tytułem notatki). W naszym przykładzie podpis będzie miał formę: Autor: Jan Kowalski, opublikowano 5 stycznia 2011 o 12:27.
Wtyczki do Wordpressa
- Easy Tube – pozwala łatwo wstawiać filmy z YouTube; wystarczy we wpisie czy w treści strony podać adres URL strony z filmem w kwadratowych nawiasach, np. [http://www.youtube.com/watch?v=tsDuzedVb_Y]
- MobilePress – automatycznie wykrywa przeglądanie strony z telefonu komórkowego lub smartfonu i dostosowuje wyświetlaną stronę do wyświetlacza urządzenia
- XML Sitemap & Google News Sitemap Feeds – tworzy „mapę witryny” używaną przez wyszukiwarki; ułatwia informowanie wyszukiwarek o nowych wpisach i stronach w twojej witrynie
- Share This – wyświetla linki do popularnych serwisów społecznościowych, umożliwiając osobom odwiedzającym twoją witrynę udostępnianie jej dalej – swoim znajomym
- Wordpress Database Backup – tworzy kopie bazy danych Wordpressa
- WP Optimize – optymalizuje bazę danych Wordpressa, umożliwia usuwanie za jednym razem wielu komentarzy czy starszych wersji postów sprzed kilku edycji
- Download Counter for Wordpress – jeśli w swojej witrynie udostępniasz pliki do pobrania, ta wtyczka zliczy, ile razy został pobrany każdy plik
Zmiana nagłówka strony na tworzonej witrynie
Na każdej stronie witryny pojawia się nagłówek – kolorowa ramka z tekstem lub baner. Kolor i treść tekstu banera możesz dowolnie zmieniać. W motywie K2 możesz ustawić własny baner. Powinien być obrazem w formacie PNG lub JPEG o rozmiarze 950 na 200 pikseli. Jeśli jest większy, musi zostać przycięty wewnątrz Wordpressa.
Krok 1
W panelu administracyjnym Wordpressa rozwiń sekcję Ustawienia i wybierz Ogólne. W polu Tytuł witryny możesz zmienić tytuł główny. W polu Opis zastąp domyślny napis Kolejna witryna oparta na Wordpressie własnym podtytułem. Kliknij przycisk Zapisz zmiany.
Krok 2
Możesz także zmienić kolor nagłówka. W panelu administracyjnym Wordpressa rozwiń sekcję Wygląd i wybierz Nagłówek (dostępny tylko wtedy, jeśli ustawiłeś motyw K2 lub inny motyw umożliwiający wymianę nagłówka).
Krok 3
W sekcji Tekst nagłówka kliknij przycisk Wybierz kolor. Na kole i kwadracie wskaż wybrany kolor tekstu. Kliknij przycisk Zapisz zmiany.
Krok 4
Następnie ustaw obrazek nagłówka. W panelu administracyjnym Wordpressa rozwiń sekcję Wygląd i wybierz Nagłówek. W sekcji Wyślij obrazek na serwer kliknij przycisk Browse i wybierz z dysku plik z nowym obrazem nagłówka.
Krok 5
Kliknij przycisk Wyślij na serwer. W sekcji Tekst nagłówka zaznacz pole przy Nie w opcji Wyświetlaj tekst. Kliknij przycisk Zapisz zmiany.
Rozbudowywanie Wordpressa przez instalację wtyczek
Funkcje witryny Wordpress można łatwo rozbudować przy użyciu „wtyczek”, czyli zewnętrznych fragmentów kodu. Na potrzeby naszego kursu zainstalujemy i skonfigurujemy wtyczkę Quick Cache przyspieszającą działanie Wordpressa.
Krok 1
W panelu administracyjnym Wordpressa rozwiń sekcję Wtyczki i wybierz pozycję Wtyczki. Kliknij przycisk Dodaj nową. W polu tekstowym pod etykietą Szukaj wpisz całość lub fragment nazwy wtyczki, np. cache. Kliknij przycisk Szukaj wtyczek.
Krok 2
Znajdź wtyczk ę Quick Cache, a następnie kliknij link Zainstaluj w sekcji tego dodatku. W oknie dialogowym z pytaniem o instalację wtyczki naciśnij przycisk OK. Po ściągnięciu i rozpakowaniu kodu wtyczki kliknij link Włącz wtyczkę.
Krok 3
Zainstalowaną wtyczkę powinieneś skonfigurować. Po włączeniu dodatku pojawi się w panelu administracyjnym w lewej kolumnie sekcja wtyczki Quick Cache. Kliknij sekcję Quick Cache, a po rozwinięciu wybierz pozycję Config Options.
Krok 4
Klikając znak + przy pozycji Quick Cache, rozwiń tę sekcję konfiguracji. Z rozwijanej listy pod etykietą Caching Enabled wybierz pozycję ON. Zejdź na dół strony i kliknij przycisk Save Changes.