Publikacja przy użyciu WordPress’a (cz.2)

<— Część pierwsza poradnika

Witam w drugiej części poradnika dotyczącego coraz bardziej popularnego skryptu blogowego WordPress. Nie przedłużając, zapraszam do lektury.

Formatowanie tekstu

Jeśli używałeś już popularnych programów do edycji tekstu, takich jak Microsoft Word, czy OpenOffice z pewnością będziesz już znał większość z funkcji edytora wpisów. Jednak dla osób, które nie miały z nimi styczności opiszę wszystkie możliwości formatowania tekstu w WordPress’ie.

Przyciski edytora w WordPress'ie

Ikony edytora

Ikony edytora

Zobaczmy teraz czym charakteryzują się kolejne przyciski. Mamy tu do czynienia z podstawowymi możliwościami tego typu edytorów.

Za pomocą narzędzia pogrubienia możemy wytłuścić zaznaczony fragment tekstu. Najczęściej używamy tego do zaznaczenia ważności jakiegoś wyrazu lub zdania.

Kursywa, czyli przechylenie czcionki zaznaczonej części tekstu stosuję się do cytowania krótkiego tekstu np. jednego wyrazu lub zdania. Prościej mówiąc kursywa zastępuje cudzysłów.

Przekreślenie to po prostu poziomy odcinek przeszywający cały tekst, który zaznaczyliśmy w połowie. Służy to oznaczenia tekstu jako nieaktualnego tak, żeby go nie usuwać.

Lista punktowana umożliwia w łatwy sposób uporządkowanie wielu elementów, bardzo przydaje się gdy wymieniamy coś, a kolejność nie ma znaczenia. Wypunktowany tekst wygląda estetycznie i jest lepiej przyswajalny.

Lista numerowana to nic innego jak lista punktowana z taką różnicą, że zamiast kropek mamy kolejne liczby arabskie zaczynając od jedynki. Służy do tego samego celu, co lista punktowana, jednak kolejność ma tu znaczenie. Przydaje się np. do tłumaczenia kolejności poszczególnych działań, które mają zostać wykonane.

Cytat to nic innego jak wyróżnione pole, które bezpośrednio informuje nas, że wprowadzony tekst jest cytatem. Nadaje się jedynie do wprowadzania dłuższych wypowiedzi.

Wyrównanie umożliwia „przyczepienie” teksu do domyślnej lewej krawędzi, środka lub prawej krawędzi strony.

Linki, czy inaczej nazywane hiperłącza są skrótami do podanej w ich właściwościach strony internetowej. Można ich także użyć do przeniesienia użytkownika do fragmentu tekstu na aktualnej stronie. Przykładem takiego zastosowania jest spis treści na początku strony. Wszystko dzięki tak zwanym kotwicom. Pierwsza ikona służy do utworzenia linku z zaznaczonego tekstu lub później do jego edytowania. Druga ikona usuwa link z zaznaczonego tekstu.

Podzielenie strony to funkcja wykorzystywana przede wszystkim we wpisach na blogu. Użytkownik przeglądając listę wpisów widzi tylko tekst do miejsca podziału. Umożliwia to zachowanie odpowiedniej długości skróconej wersji wpisu. Jeśli użytkownik będzie zainteresowany przeczytaniem pełnej wersji wpisu – kliknie przycisk „Czytaj dalej”, co przeniesie go do pełnego tekstu. Więcej o dzieleniu wpisów w dalszej części poradnika.

Przykład działania słownika w Google Chrome

Przykład działania słownika w Google Chrome

Sprawdzanie pisowni to wbudowana funkcja w WordPress’a, która umożliwia sprawdzenie naszego tekstu pod względem błędów ortograficznych, czy literówek. Domyślnie jest ustawiony język angielski, dlatego należy kliknąć strzałkę i wybrać z listy język polski, następnie można kliknąć ikonę fajki i zobaczyć nasze błędy. Z racji słownika sprawdzającego nasze błędy dynamicznie wbudowanego w większość przeglądarek, funkcja pozostaje dla mnie bezużyteczna, szczególnie że niektóre wyrazy uważa za niepoprawne, mimo że takie nie są.

Pełny ekran powiększa pole edycji tekstu tak, że zajmuje ono całe okno przeglądarki. Warto wcisnąć dodatkowo klawisz (domyślnie) F11, dzięki któremu nasza przeglądarka uruchomi tryb pełnoekranowy. Wygląda to mniej więcej tak:

Tryb pełnego ekranu w edytorze

Tryb pełnego ekranu w edytorze

Dodaj opcje to przycisk, dzięki któremu pojawi się drugi rząd przycisków funkcyjnych, który domyślnie jest ukryty.

Rodzaje tekstu jakimi dysponujemy to różne wielkości nagłówków, standardowy akapit, przechylony adres czy tekst preformatowany, który używa czcionki szeryfowej (ogonki na końcach liter).

Podkreślenie dodaje nam poziomy odcinek pod zaznaczonym tekstem. Jak sama nazwa wskazuje służy do podkreślenia wagi danej wypowiedzi, podobnie jak pogrubienie, jest jednak od niego rzadziej używane.

Wyjustowanie tekstu polega na takim dostosowaniu długości odstępów (spacji) w linijce tekstu, aby cały wiersz zajmował jego pełną szerokość. Przykład wyjustowanego cytatu:

Systemem operacyjnym Amigi jest AmigaOS z interfejsemWorkbench. W momencie wydania AmigaOS był jednym z pierwszych systemów wielozadaniowych na komputery osobiste, znacznie przewyższającym pod tym względem systemy operacyjne produkowane w tamtych latach, na przykład przez Microsoft. Przez lata system Amigi stale ewoluował. Najbardziej znaczące zmiany nastąpiły przy wydaniu wersji 3.x, która w wersji 3.9 była ostatnią obsługującą procesory linii 68k. Wersja 4 systemu została przepisana całkowicie pod procesory PowerPC i jest obecnie nadal rozwijana przez firmę Hyperion Entertainment. Najnowsza wersja AmigaOS oznaczona jest numerem 4.1 i pojawiło się do niej uaktualnienie Update 1. Istnieją również bazujące na AmigaOS systemy rozwijane niezależnie. Zalicza się do nich AROS Research Operating System (AROS) oraz MorphOS. Dla komputerów Amiga powstały również dystrybucje Linuksa oraz NetBSD.

~Wikipedia

Narzędzie kolorowania da nam możliwość zabarwienia na wybrany kolor zaznaczoną część tekstu. Dana wypowiedź jest w ten sposób odpowiednio wyróżniona. Stanowi to jedynie element dekoracyjny i zwykle nie przekłada się na czytelność tekstu. Należy jedynie wziąć pod uwagę, jakiej używamy skórki, ponieważ jasne kolory na jasnym tle nie będą odpowiednio dobrze widoczne, podobnie z kolorami ciemnymi. Strzałka obok przycisku pozwala na wybranie koloru, a sam przycisk do szybkiego kolorowania zaznaczonego tekstu na ostatnio wybrany kolor (widoczny w prostokącie pod literą „A”).

Wklejać tekst możemy przy pomocy dwóch przycisków, które różnią się sposobem wykonywania tej czynności. Pierwszy umożliwia wklejenie tekstu ze schowka w postaci czystej, czyli bez zachowania formatowania. Opcja druga przydaje się gdy chcemy wkleić tekst z programu takiego jak Microsoft Word. W tym przypadku polecam jednak korzystanie ze skrótu klawiszowego Ctrl + V.

Deformatowanie, czyli usuwanie formatowania zaznaczonego tekstu przydaje się gdy nie chcemy, żeby dany fragment posiadał jakiekolwiek wytłuszczenie, przechylenie, nagłówek itp. Zamiast wszystko odznaczać ręcznie, wystarczy użyć deformatowania.

Symbol to przycisk pod którym kryją się różne mniej lub bardziej przydatne znaki, których najczęściej nie można wywołać przy pomocy kombinacji klawiszy.

Akapit zmniejsza (lewy przycisk) lub zwiększa (prawy przycisk) wcięcie tekstu gdy chcemy go podporządkować pod tekst wyższej kategorii (z mniejszym wcięciem). Dla przykładu:

Tekst nadrzędny

Tekst podrzędny

Tekst podrzędny dla podrzędnego

Funkcję tą można porównać do wstawiania tabulacji na początku wiersza w zwykłym edytorze tekstowym (zwykłym w sensie nie-Web’owym). np. Microsoft Word. Warto także wspomnieć o użyciu wcięcia na liście punktowanej i numerowanej, co daje ciekawą możliwość zagnieżdżania podpunktów:

  • tekst
    • tekst
      • tekst
  1. tekst
    1. tekst
      1. tekst

Przycisk cofnij powoduje powrót do czasu sprzed wykonania ostatniej czynności np. skasowania tekstu. Ponów analogicznie umożliwia wznowienie czynności cofniętej.

Pomoc to małe okienko, w którym możemy przeczytać kilka porad dotyczących pisania i funkcji edytora. Znajdziemy tak także przydatne skróty klawiaturowe do wybranych funkcji.

Skróty klawiaturowe

Zamiast sięgać po mysz, by kliknąć przycisk na pasku narzędzi, możesz skorzystać z poniższych klawiszy dostępu. W Windowsie i Linuksie kombinacja to Ctrl + litera. Na Macintoshu używane są klawisze Command + litera.

Litera Działanie Litera Działanie
c Kopiuj v Wklej
a Zaznacz wszystko x Wytnij
z Cofnij y Ponów
b Pogrubienie i Kursywa (pochylenie)
u Podkreślenie 1 Nagłówek 1
2 Nagłówek 2 3 Nagłówek 3
4 Nagłówek 4 5 Nagłówek 5
6 Nagłówek 6 9 Adres

Poniższe skróty opierają się na innych klawiszach dostępu: Alt + Shift + litera.

Litera Działanie Litera Działanie
n Sprawdź pisownię l Wyrównaj do lewej
j Wyjustuj tekst c Wyśrodkuj
d Przekreślenie r Wyrównaj do prawej
u  Lista punktowana a Wstaw odnośnik (link)
o 1. Lista numerowana s Usuń odnośnik (link)
q Cytat m Wstaw obrazek
g Pełny ekran t Wstaw tag „Więcej” (dzielenie)
p Wstaw znak nowej strony h Pomoc
e Przełącz do trybu HTML
Szerokość edytora w trybie bezrozproszeniowego pisania
Alt + Szersze Alt – Węższe
Alt 0 Domyślna szerokość
Przycisk dodawania medium

Przycisk dodawania medium

Wstawianie obrazków

Obrazki w WordPress’ie możemy wstawiać na dwa sposoby. Jednym z nich jest skorzystanie z biblioteki mediów, jednak najczęściej obrazki musimy użyć we wpisach lub stronach, dlatego twórcy umożliwili przesyłanie ich bezpośrednio podczas edycji tekstu w edytorze. Służy do tego dedykowany przycisk mediów widoczny nad przyciskami edytora, obok napisu Wyślij/wstaw. Oczywiście mówiąc medium mam na myśli również muzykę i filmy, które można dodać tym sposobem, jednak obrazki są najczęściej wykorzystywane przy wstawianiu, dlatego to na nich się skupimy. Po kliknięciu na ikonę mamy do dyspozycji okienko przesyłania.

Okno przesyłania w WordPress'ie

Okno przesyłania w WordPress’ie

Widzimy tutaj informację, że możemy przesyłać pliki jedynie do 8 MB. Między innymi z tego względu biblioteka mediów nie nadaje się zbytnio do czego innego jak obrazków. Pliki przesyłać możemy na 2 sposoby. Jeśli wasza przeglądarka obsługuje tryb przeciągania w HTML5 to najprostszym sposobem jest złapanie kursorem wybranego pliku z pulpitu lub katalogu i przeciągniecie go na oznaczone przerywanym prostokątem pole. W przypadku popularnych przeglądarek Google Chrome, Firefox lub nowej wersji Opery nie będzie problemu z użyciem tej funkcji. Istnieje również druga metoda. Wystarczy kliknąć przycisk Wybierz pliki, po czym wyświetli się okno wyboru, gdzie zaznaczamy pliki, które chcemy przesłać.

Przeciąganie pliku na okno przesyłania

Przeciąganie pliku na okno przesyłania

Jeśli obrazek, który chcemy przesłać do naszego WordPress’a jest już w internecie i dysponujemy jego linkiem, to nie ma potrzeby zapisywania go na dysku i przesyłania ręcznie, ponieważ uploader ma wbudowaną funkcję dodawania obrazków jedynie z użyciem adresu URL. Plik jest kopiowany z serwera, na którym się znajduje i przesyłany do bazy plików WordPress’a, dzięki temu możemy korzystać ze wszystkich funkcji formatowania obrazka i nie ma ryzyka, że obrazek nie będzie już dostępny pod pierwotnym linkiem, ponieważ jego kopia oddzielnie będzie na naszej stronie.

Przesyłanie obrazka z adresu URL

Przesyłanie obrazka z adresu URL

Po udanym wysłaniu upragnionego obrazka czas na jego wstawienie i edycję poszczególnych właściwiści, czy szczegółów. Do większości z nich mamy dostęp tuż po wysłaniu (przed wstawieniem).

Edycja parametrów obrazka

Edycja parametrów obrazka

Tutaj powinien być obrazek

Od razu po wysłaniu w tym samym jeszcze okienku wyświetla nam się lista wszystkich atrybutów każdego obrazu (domyślnie wszystkie są rozwinięte).

  1. Tytuł – tutaj wpisujemy porządkową nazwę naszego obrazka. Będzie ona służyła do jego wyszukania w zbiorze mediów, a także wyświetla się w dymku po zatrzymaniu kursora na obrazku.
  2. Tekst alternatywny – jeśli obrazek w jakiś sposób przestanie istnieć na serwerze, lub jego ścieżka dostępu (link) się zmieni i WordPress nie będzie mógł go zlokalizować w podanym miejscu, to wtedy wyświetli się wpisany w tym polu napis zamiast obrazka. Daje to możliwość sprecyzowania co kryło się wcześniej pod tym napisem i przywrócenie właściwego pliku.
  3. Etykieta – służy do publicznego nazwania pliku. Tekst ten będzie się wyświetlał pod obrazkiem. Każdy obrazek w tym poradniku ma etykietę.
  4. Strona obrazka

    Strona obrazka

    Opis – przyda się tylko nielicznym. Domyślnie w WordPress’ie po kliknięciu na obrazek jesteśmy przenoszeni do wydzielonej dla niego strony. Ten sposób jest jednak niepraktyczny, ponieważ ludzie przeglądający dany artykuł wolą, żeby obrazek wyświetlił się bezpośrednio w powiększeniu przy pomocy wtyczki, a nie na oddzielnej stronie. Wyjątkiem są sytuacje, gdy chcemy aby obrazek mógł być komentowany. W takiej sytuacji po kliknięciu obrazka zostaniemy przeniesieni na dedykowaną mu stronę. Opis jest właśnie tym tekstem, który wyświetli się pod obrazkiem na tej stronie.

  5. Adres URL odnośnika – link do którego zostaniemy przeniesieni po kliknięciu na obrazek. Kliknięcie Brak usunie tą funkcję (czyszcząc pole), a obrazek nie będzie linkiem (brak akcji po kliknięciu). Adres URL pliku wstawia w miejsce odnośnika bezpośredni adres do obrazka, dzięki temu osoba klikająca zobaczy na stronie tylko obrazek w pełnym rozmiarze. Adres URL tego załącznika przeniesie nas po kliknięciu do strony obrazka, gdzie będzie można go skomentować i przeczytać jego opis.
  6. Wyrównanie – dopasowuje obrazek do tekstu. W przypadku opcji Brak zostanie on wklejony jak zwykły tekst i na około niego nie będzie żadnego innego tekstu, jedynie nad i pod spodem obrazka. Po wstawieniu istnieje także możliwość jego wyrównania do środka lub prawej strony, jednak tekst nadal nie będzie przechodził na boki. Pozostałe opcje rozmieszczenia pozwalają na zakorzenienie obrazka w tekście, czyli tekst będzie naokoło obrazka bez względu gdzie się znajduje.
  7. Rozmiar – wybieramy tutaj w jakim rozmiarze chcemy obrazek wstawić do wpisu. Dostępne są trzy podstawowe opcje – miniatura, średni, duży (dostępność zależy od wielkości obrazka) i pełny rozmiar.
Teraz mamy możliwość wstawienia obrazka do wpisu, ustawienia jako ikony wpisu lub zwykłego usunięcia z biblioteki mediów.
Zakładki przy dodawaniu mediów

Zakładki przy dodawaniu mediów

Omówiliśmy już dwie z czterech zakładek okna dodawania mediów. Pozostałe dwie zakładki są biblioteką mediów. Różnica polega na tym, że galeria wyświetli nam jedynie obrazki, które dodaliśmy przy pomocy przycisku nad edytorem w danym wpisie, jednocześnie klasyfikując go do galerii danego wpisu. Biblioteka mediów to wszystkie pliki jakie wstawiliśmy na serwer bez względu jak (byle poprzez bibliotekę mediów).

Galeria

Galeria

W galerii mediów wpisu mamy do dyspozycji całą listę wysłanych plików, ale jak już wspominałem – tylko tych, które wysłaliśmy bezpośrednio we wpisie.

Po rozwinięciu możemy edytować szczegóły każdego pliku dokładnie tak jak opisałem to wcześniej. Dodatkowo pod listą plików mamy możliwość wstawienia galerii, jako jeden obiekt. Wielu osobom może się to przydać, ponieważ umożliwia za jednym zamachem umieszczenie całej, ładnie prezentującej się galerii wpisu. Ustawić możemy rodzaj odnośnika obrazka, czyli obrazek (po kliknięciu) może prowadzić bezpośrednio do pliku lub do strony medium, gdzie można go skomentować. Kolejkować obrazki na liście możemy poprzez własny sposób, ręcznie przestawiając je na liście, alfabetycznie według tytułu, według daty wysłania lub losowo. Później wybieramy czy chcemy kolejność od początku do końca czy na odwrót. Liczba kolumn określa nam szerokość galerii, proponuję potestować, aby wybrać odpowiednią liczbę. Na koniec możemy wstawić galerię.

Edycja parametrów obrazka

Opcje obrazka

Opcje obrazka

Wracając do pojedynczych obrazków – po wstawieniu i kliknięciu na niego kursorem w edytorze wyświetlą nam się dwie ikony. Pierwsza z nich prowadzi do okna opcji obrazka, a druga do jego usunięcia z wpisu (nie z biblioteki, możemy go wstawić ponownie).

Po kliknięciu na ikonę edycji ukarze nam się okienko, w którym będziemy mogli edytować wszystkie opcje dotyczące wstawionego obrazka.

Okno edycji opcji obrazka wstawionego do wpisu różni się przede wszystkim dodatkowymi opcjami rozmiaru, czy położenia względem tekstu.

Okno opcji obrazka

Okno opcji obrazka

Jak widzimy pierwsza zakładka nie różni się zbytnio poza podglądem obrazka względem tekstu. Możemy dzięki temu od razu zobaczyć jak zachowa się obrazek, gdy naokoło siebie będzie miał tekst, jak zostanie wyrównany itp. Dodatkowo po lewej stronie umieszczone są różne opcje rozmiaru obrazka, po najechaniu widzimy od razu jak dana wielkość się prezentuje.

Druga zakładka

Druga zakładka

W drugiej zakładce mamy bardziej zaawansowane ustawienia, dzięki którym możemy zmienić lub poprawić źródło obrazka w przypadku, gdy link jest błędny. Ustawienia szerokości pozwalają określić jak obrazek będzie skalowany we wpisie. Opcje takie, jak klasa CSS, style i właściwości obrazka nie są potrzebne zwykłemu użytkownikowi, więc nie zostaną opisane, podobnie jak zaawansowane opcje odnośnika.

Ikona wpisu

Ikonę wpisu możemy wstawić na dwa sposoby. Pierwszym z nich jest wysłanie obrazka na serwer poprzez uploader mediów i wybranie opcji Użyj jako ikony wpisu.

Użyj jako ikony wpisu

Użyj jako ikony wpisu

Drugą opcją jest użycie linku Ustaw ikonę wpisu w małym box’ie, który domyślnie znajduje się jako ostatni w prawej kolumnie okna edycji wpisu.

Ustaw ikonę wpisu

Ustaw ikonę wpisu

Dzięki tej opcji zyskamy ładnie prezentującą się ikonę wpisu widoczną na liście wpisów bloga.

Ikona wpisu

Ikona wpisu

Dzielenie wpisów

Przycisk dzieleniaZ wykorzystaniem przycisku dzielenia Więcej możemy w łatwy i praktyczny sposób podzielić nasz wpis na część wstępu i resztę. Wystarczy w odpowiednim miejscu umieścić znacznik. W edytorze wstawienie go wyświetla się jako pozioma, kropkowana linia na całą szerokość edytora w WordPress’ie, zakończona napisem More…. Po opublikowaniu nie jest w żaden sposób dostrzegalny. Jego obecność możemy poznać jedynie po sposobie jego działania.

Linia podziału wpisu w edytorze

Linia podziału wpisu w edytorze

W tym przypadku celem było zawarcie we wstępie listy zmian w najnowszej wersji programu, a jeśli odwiedzający zechce obejrzeć screen aplikacji, poczytać o nim więcej informacji lub wystawić komentarz – może zrobić to po kliknięciu przycisku rozwinięcia.

Porównajmy zatem jak na blogu wyglądał nasz wpis bez użycia funkcji dzielenia.

Pełny wpis (z http://blabla.ppa.pl/)

Pełny wpis (z http://blabla.ppa.pl/)

Nie wygląda to zbyt estetycznie, ponieważ jeśli ktoś nie jest zainteresowany tą informacją, to mimo wszystko musi przewinąć całą stronę, co może frustrować i odwracać uwagę od interesujących nas informacji.

Skrócony wpis (z http://blabla.ppa.pl/)

Skrócony wpis (z http://blabla.ppa.pl/)

Teraz wygląda to znacznie lepiej. W tym przypadku wyświetla nam się niewielki, ale widoczny napis (więcej…), dzięki któremu po przeczytaniu wstępu będziemy mogli przejść do rozwinięcia.

Zakończenie

Podobnie, jak w poprzedniej części mam nadzieję, że wszystko co opisałem było wystarczająco zrozumiałe i pomocne przy nauce blogowania w WordPress’ie.

Top