Kurs tworzenia stron internetowych na WordPress

Uwaga

Aktualnie zmienił się sposób instalacji aplikacji (jest dużo bardziej czytelny). Proponuję zacząć w tym miejscu – Własna strona w WordPress

Notka od autora

Poniższy poradnik „o tworzeniu strony internetowej” nie był sponsorowany przez nikogo, a wybór firmy hostingowej padł na etapie tworzenia wspomnianego artykułu. Zależało mi tylko i wyłącznie na tym, aby za jak najniższą cenę zyskać jak najwięcej. Początkowo szukałem darmowych hostingów, ale albo trzeba było podać numer karty kredytowej (jeden z zagranicznych), albo nie było obsługi SSL.

Zanim rozpoczniesz czytanie powinieneś posiadać adres e-mail. Jeżeli nie masz to możesz go założyć bezpłatnie. Więcej o tym napisałem w poradniku Jak założyć za darmo skrzynkę pocztową (maila)

Serwer, hosting, domena i SSL

Serwer to komputer (w uproszczeniu) na której przechowywana będzie Twoja strona. Im lepszy serwer tym strona będzie działała stabilniej, ładowała się szybciej i oferowała więcej miejsca.

Hosting zaś to usługa utrzymywania strony na serwerze. Kiedy szukasz miejsca na swoją stronę, szukasz najczęściej dobrego hostingu w ramach którego otrzymujesz dostęp do serwera, instalatora aplikacji i możliwości zakupu domeny.

Domena to (w uproszczeniu) adres pod jakim będzie dostępna strona. Indywidualne domeny są płatne, ale często możesz korzystać z darmowej – generowanej automatycznej. Kupujesz je na okres 1 roku. Później możesz je przedłużyć (należy o tym pamiętać, gdyż w przeciwnym razie ktoś inny może ją przejąć). Pierwszy rok zwykle jest tani.

SSL umożliwia tzw. bezpieczne połączenie. Wszystkie strony korzystające z certyfikatu SSL zaczynają się od https://. Może być płatny bądź darmowy i aktualnie stał się na tyle znaczącym standardem, że przeglądarki informują użytkownika o „niebezpiecznym” połączeniu, jeżeli strona zaczyna się od http://. Musisz go mieć.

Hosting

Na co zwracać uwagę?

Ilość parametrów określających hosting jest duża. Poniżej kilka wybranych:

• Ilość miejsca na dysku. O ile nie potrzebujesz dużych galerii ze zdjęciami, filmami i plikami to w zupełności powinno Ci wystarczyć nawet 1GB. Sama strona zużywa zwykle kilkadziesiąt megabajtów.
• Transfer (ruch, przepustowość) (GB / miesiąc). Użytkownicy przeglądający Twoją stronę pobierają jej fragmenty na swój komputer.. tym samym „zużywają” transfer. Po jego przekroczeniu strona nie będzie się wyświetlać do końca okresu rozliczeniowego (np. do końca miesiąca). Później transfer się „odnowi” i strona ponownie będzie dostępna. Wiele hostingów nie posiada limitu transferu.
• Instalator aplikacji. Za pomocą tego narzędzia można jednym kliknięciem zainstalować i często wstępnie skonfigurować aplikację (np. stronę, sklep internetowy, forum). Jest to duże ułatwienie – szczególnie dla początkującego. Ilość aplikacji, które można zainstalować jest różna (3-500), ale zwykle potrzebujesz jedną.
• Certyfikat SSL. Bez niego przeglądarki będą uznawały Twoją stronę jako „niebezpieczną” co może zrazić użytkowników.
• Adres e-mail. W przypadku płatnego hostingu to w zasadzie standard.
• Wsparcie techniczne. W darmowych usługach czasami go nie ma lub jest ograniczony. Wielu udostępnia możliwość kontaktu 24/7 z czego prywatnie korzystałem nieraz.

Wybieramy hosting

Początkowo chciałem oprzeć ten poradnik na darmowym hostingu, ale pojawiły się komplikacje i uznałem, że jeżeli potrzebujesz strony to koszt 120 zł brutto rocznie jest do zaakceptowania (pierwszy rok zwykle jest nieco tańszy ze względu na niższy koszt zakupu domeny – w wybranym przykładzie jest to 70 zł brutto).

Po przejrzeniu ofert, wybrałem SeoHost, który na dzień dzisiejszy oferuje w planie Hosting SSD NVMe H1 2GB miejsca na dysku SSD, nielimitowane transfery, domeny i darmowy certyfikat SSL. Prywatnie na dzień dzisiejszy korzystam z innego usługodawcy, ale zwyczajnie ta oferta wydała mi się na tyle sensowna, że dla celów poniższego artykułu zakupię i stworzę stronę na tym serwerze. O ile nie planujesz udostępniać dużych plików to 2GB powinno wystarczyć w zupełności. Należy przy tym pamiętać, że część zasobów przeznaczysz zapewne na skrzynkę pocztową. Moim zdaniem 500MB wystarczy co po odliczeniu samej strony da Ci ok. 1,4GB na dane (zdjęcia, pliki itd.).

Poniższa instrukcja będzie zbliżona u innych, więc jeżeli czujesz się na siłach to możesz wybrać inną firmę i posiłkować się poniższym artykułem.

Robimy zakup

Wejdź na Domeny -> Wyszukiwarka domen i w pole wyszukiwania wpisz tą która Cię interesuje. Jeżeli jest wolna to możesz ją dodać do koszyka. Ja wybrałem domenę winart.pl

Kolejnym elementem będzie wybór samego serwera.

Z menu wybierz Serwery -> Superszybki Hosting NVMe i następnie wybierz właściwy i kliknij Uruchom

W kolejnym kroku kliknij Zamawiam

Następnie musisz się zarejestrować lub zalogować (jeżeli już posiadasz konto – przycisk do logowania jest na dole strony). Po rejestracji otrzymasz maila na swoją skrzynkę pocztową w którym musisz potwierdzić, że podany przez Ciebie adres e-mail jest prawidłowy – klikając w przesłany link.

Po zalogowaniu będziesz miał na liście zamawiane usługi (dział Finanse -> Usługi do opłacenia gdyby ktoś zgubił). Na tym etapie wybierz też czy chcesz fakturę czy kupujesz jako osoba prywatna.

Konfiguracja serwera

Po opłaceniu możesz przejść do konfiguracji. Zakładając serwer powinieneś otrzymać maila z danymi do logowania do panelu w którym możesz tą operację wykonać. Jeżeli nie widzisz maila od SeoHost o tytule w stylu „Twój nowy serwer został uruchomiony!” to sprawdź czy nie wpadł przypadkiem do spamu (tak było u mnie). Możesz wymusić ponowne wysłanie maila i zresetowanie hasła.

Przejdź do menu Serwery i wybierz pierwszy na liście (ten który kupiłeś) – klikając w nazwę użytkownika podświetloną na zielono. Jeżeli nie znasz hasła możesz je teraz zresetować (otrzymasz maila z nowym). Skopiuj nazwę użytkownika (login) i kliknij w link do panelu zarządzania.

Podaj login i hasło. Po zalogowaniu musisz podpiąć domenę do serwera. W tym celu kliknij w pierwszą pozycję na górze – Konfiguracja domen. Trafisz na listę z listą domen podpiętych pod serwer. Wybierz Dodaj następną domenę (na górze) i następnie wpisz zakupioną (w naszym przypadku winart.pl) oraz klikasz Utwórz.

Po utworzeniu dostaniesz informację, że się udało. Klikasz w domek (home) na górze i wybierasz z listy domenę którą właśnie utworzyłeś – w naszym przykładzie winart.pl. Wrócisz do znanego wcześniej menu, ale tym razem wszystko co robisz będzie dotyczyło zakupionej domeny.

Zanim przystąpisz do instalacji, warto zmienić niektóre ustawienia SSL. Wybierz Certyfikaty SSL. SSL powinien być zainstalowany i podpięty do domeny, ale Ciebie interesuje darmowy Let’s Encrypt. Wybierz właściwą (odznacz pozostałe pozycje) i kliknij Zapisz. Po kliknięciu może nie być żadnej reakcji – poczekaj chwilkę.. Zostaniesz przeniesiony do kolejnego okna z informacją, że operacja zakończyła się sukcesem.

Wróć z powrotem do certyfikatu i ustaw przekierowania. W tym celu na górze kliknij na tutaj:

W ten sposób przejdziesz do konfiguracji, gdzie możesz wymusić przekierowanie. Niezależnie od tego czy użytkownik będzie wpisywał www.winart.pl czy winart.pl – zawsze trafi na winart.pl. Technicznie strona z www i bez www to dwie różne strony i lepiej, aby się nie dublowały (choć to raczej historyczny problem). Po wykonaniu operacji kliknij Zapisz.

Instalacja aplikacji

Możesz teraz przystąpić do instalacji aplikacji i tym samym uruchomić stronę. Znajdź pozycję w zakładce na dole „Opcje zaawansowane” – Installatron Application Installer – i kliknij w link.

System zarządzania treścią (CMS) – to aplikacja (strona), która w łatwy sposób pozwala na pisanie tekstów, tworzenie menu, rozbudowywanie serwisu itp. bez znajomości programowania. Jednym z najpopularniejszych CMS-ów na dzień dzisiejszy (i od wielu lat) jest WordPress.

Znajdź kategorię „Systemy zarządzania treścią” i wybierz pierwszą na liście – WordPress Blog. Kliknij ikonkę i zacznij instalację.

W kolejnym oknie musisz określić parametry:

• Domena – wybierasz tą którą oczywiście kupiłeś. Zwróć uwagę, by zaczynała się od https://
• Login administratora (na samym dole) – jak będziesz się logował do aplikacji – zapamiętaj go, albo wpisz własny
• Hasło – wpisz własne, albo zapamiętaj wygenerowane (przycisk pokaż hasło)
• Tytuł strony – będzie się wyświetlała na belce strony (na górze) i w głównym miejscu na stronie
• Motto WWW – dodatkowe zdanie opisujące stronę

Kliknij zainstaluj i poczekaj chwilę. Po instalacji możesz wejść na swoją stronę. Na starcie przeglądarka może Cię poinformować, że połączenie nie jest bezpieczne, a samo dostanie się do strony jest mocno utrudnione. Może się też zdarzyć, że nie ma wcale dostępu do strony. W takim układzie poczekaj kilkadziesiąt minut / godzin – jest to związane ze świeżym zakupem domeny i certyfikatem SSL. W najgorszym przypadku strona może pojawiać się i znikać przez 24h. Nie należy się tym przejmować. Po zadanym czasie powinna już się pojawić na stałe.

Konfiguracja strony

Aby dokonać zmian w nowo utworzonej witrynie musiz się zalogować do panelu administracyjnego. W tym celu wpisz po adresie strony /admin np. https://winart.pl/admin. Podaj login i hasło, które ustawiłeś wcześniej.

Znajdujesz się w „kokpicie”, czyli miejscu które zawiera najważniejsze elementy / statystyki (taka strona startowa). Po lewej madx menu, które pozwoli Ci skonfigurować stronę, dodać wpis czy zainstalować moduły:

• Wpisy – artykuły (podpięte pod kategorie), kategorie (każdy artykuł musi przynależeć do jakiejś kategorii), tagi. Na górze strony jest także przycisk „Dodaj”, który pełni podobną rolę, ale tworzy od razu nowy artykuł.
• Media – grafiki, filmy, pliki.. Najczęściej nie będziemy korzystać z tego menu bezpośrednio, gdyż zdjęcia do artykułu dodajemy często w trakcie jego pisania.
• Wygląd – szablon graficzny i zmiana położenie różnych elementów, dodawanie nowych elementów w różne miejsca na stronie
• Wtyczki – nowe funkcjonalności darmowe bądź płatne
• Użytkownicy – baza użytkowników serwisu
• Narzędzia – programy uruchamiane jednorazowo w celu wykonania jakiejś operacji
• Ustawienia – ustawienia strony

Nie zawsze po wejściu w daną stronę w menu widzisz wszystko. Część rzeczy jest ukrytych (np. podczas dodawania kategorii masz nieco więcej możliwości niż pozornie to widać). Aby odkryć poszczególne elementy kliknij w przycisk Opcje ekranu – znajduje się na górze i zawiera różne pozycje w zależności od tego gdzie aktualnie się znajdujemy. Zaznaczając elementy odkrywamy poszczególne funkcjonalności.

Zainstaluj pierwsze wtyczki (pluginy)

W pierwszym etapie konfiguracji witryny zrób 2 rzeczy w witrynie:

• wyłącz ją dla zwiedzających
• przygotuj pod obsługę SSL – https://

Możesz się do tego celu posłużyć wtyczkami (pluginami, dodatkami). Wtyczki pozwalają rozszerzyć funkcjonalność Twojej strony o nowe elementy i będziesz z nich korzystał często (szczególnie na początku). Większość tego typu dodatków zawiera 2 wersje (bezpłatną i premium, czyli płatną). WordPress umożliwia zainstalowanie tylko darmowych wersji. Premium wykupuje się najczęściej na stronie autora, ale sama wtyczka przy wielu okazjach będzie Cię próbowała do tego nakłonić informując co zyskasz. Oczywiście płatne wersje mają zwykle więcej do zaoferowania, niż darmowe. W praktyce jednak do większości stron wystarczą ich darmowe odpowiedniki.

Instalowanie wtyczki jest banalne. W menu Wtyczki wybierasz Dodaj nową. W prawym górnym rogu wyszukujesz tą która Cię interesuje – bezpośrednio po nazwie lub po zastosowaniu (np. table jeżeli potrzebujesz czegoś co obsługuje bardziej zaawansowane tabele). W każdą z wyszukanych pozycji możesz kliknąć i zobaczyć jej opis, oceny użytkowników oraz czy została przetestowana z bieżącą wersją WordPressa (zwykle nie ma to większego znaczenia). Jeżeli zakupisz wtyczkę poza sklepem to załadujesz ją poprzez przycisk „Wyślij wtyczkę na serwer” (przycisk na górze).

Zainstaluj najpierw Simple WP Maintenance Mode, która pozwoli nam wyłączyć naszą witrynę. W tym celu wpisz w pasek wyszukiwarki jej nazwę.

Jak widać wtyczka dostała 4 / 5 gwiazdek. Możesz podejrzeć opinie oraz jak działa klikając w link. Spójrz na Opis i następnie przejdź do Oceny.

Masz tutaj szereg informacji – przede wszystkim to, że wtyczka była zaktualizowana 8 miesięcy temu, nie była testowana z nową wersją WordPressa oraz jednemu z użytkowników nie działała. Mi osobiście nie sprawia problemów. Kliknij Zainstaluj.

Po pobraniu i instalacji musimy ją włączyć. Przy okazji usuniemy te, których nie będziemy używać i zaktualizujemy te, które wymagają aktualizacji. Przejdź do menu Wtyczki -> Zainstalowane wtyczki, a następnie

• Usuń Akismet antyspam – służy do kontroli spamu w komentarzach. Wymaga rejestracji. Osobiście nie miałem potrzeby jej używać.
• Usuń Hello Dolly
• Zaktualizuj Limit Login Attempts Reloaded – o ile wymaga aktualizacji
• Włącz Simple WP Maintance Mode – którą właśnie zainstalowaliśmy

Po włączeniu uruchom witrynę w nowej przeglądarce (nie karcie), przejdź do trybu incognito / inPrivate (różnie się to nazywa w różnych przeglądarkach) lub po prostu wyloguj się na chwilę (prawy, górny róg ekranu). Przy próbie wejścia na stronę pojawi się komunikat, że witryna jest wyłączona. Ten komunikat zobaczą wszyscy niezalogowani użytkownicy. Jeżeli będziesz zalogowany to oczywiście będziesz widział swoją stronę.

Zaloguj się ponownie. Zainstaluj Really Simple SSL i kliknij włącz. Po tej operacji przeniesie Cię do „konfiguracji” wtyczki (w razie czego można ją znaleźć w menu Ustawienia -> SSL). Wybierz „Dalej aktywuj SSL”.

I to wszystko. Komunikatami w zasadzie nie musisz się zbytnio martwić na tym etapie.

Pozostałe ustawienia

Zanim przejdziemy dalej ustaw jeszcze kilka rzeczy

• w menu Ustawienia -> Ogólne, ustaw strefę czasową na PL (UTC +1) oraz zmień formatowanie daty / godziny. Aby zapamiętać zmiany kliknij Zapisz zmiany
• w menu Ustawienia -> Bezpośrednie odnośniki w Popularne ustawienia zaznacz Nazwa wpisu. Chodzi o sposób jak mają tworzyć się linki do poszczególnych elementów strony. Wybierz Zapisz zmiany.

W ten sposób wstępnie skonfigurowaliśmy witrynę, a dopóki nie skończymy nad nią pracować, nikt z odwiedzających (także google) nie będzie oglądał naszych eksperymentów.

Tematyka strony, wybór szablonu i tłumaczenie

Ten temat w zasadzie powinien być na samym początku artykułu (albo w najgorszym wypadku na etapie wyboru domeny). Zakładam jednak, że jak tworzysz witrynę to wiesz od początku o czym ona będzie. O ile wcześniejsze rzeczy były uniwersalne, o tyle teraz Twoje wybory będą zależne od tego o czym jest strona.

Szablon graficzny określa cały wygląd strony i ułożenie poszczególnych elementów (menu, paska bocznego, nagłówka, stopki itp.). Może też zawierać dodatkowe funkcjonalności (np. slider, czyli zmieniające się obrazki). Inne wymagania stawiasz witrynom, których celem jest sprzedaż produktów (np. sklepom internetowym), inne blogom, firmom czy stronom społecznym.

Tematyką strony, którą tworzę to szeroko rozumiana „kultura i sztuka”.

Wejdź w Wygląd -> Motywy. Jest tam zainstalowanych domyślnie kilka szablonów. Jeżeli żaden z nich Ci nie pasuje to naciśnij Dodaj (przycisk na górze lub po prawej stronie). Teraz możesz wyszukiwać spośród wielu tysięcy i wybrać ten, który będzie Ci odpowiadał. Zasady pracy z motywami w katalogu są takie same jak przy wtyczkach. Domyślnie są darmowe, ale jeżeli potrzebujesz czegoś więcej – musisz zapłacić. Jeżeli z jakiś powodów nie znajdziesz motywu, który Cię zainteresuje, możesz skorzystać z dedykowanych stron, które je sprzedają i zainstalować ręcznie (przycisk „Wyślij motyw na serwer”).

Ja skorzystałem z drugiej opcji, czyli „wysłania motywu na serwer”. Motyw możesz włączyć zaraz po instalacji w menu Wygląd -> motywy i naciśnij przycisk „Włącz”.

Po tej operacji może Cię przenieść automatycznie do menu konfiguracyjnego motywu. W zależności od szablonu będzie się ono różnić. WordPress zawiera jednak mechanizmy, które pozwalają samodzielnie skonfigurować wiele elementów bez udziału dedykowanego szablonu. Później wrócę do tematu szablonu.

Język polski

Niektóre z szablonów i wtyczek nie posiadają języka polskiego, albo dostępne tłumaczenie nie jest kompletne czy też zadowalające. W takiej sytuacji przyda się bardzo fajna i darmowa wtyczka Loco Translate. Pozwala ona na dodanie dowolnego języka i przetłumaczenie pluginów, szablonów lub samego WordPressa. Oczywiście twórcy wspomnianych wtyczek i templatek muszą to oprogramować – uwzględnić różne języki podczas pisania skryptu. Jest to jednak standard i taka opcja powinna być dostępna w większości udostępnionych dodatków. Sam korzystam z Loco Translate, głównie przy tworzeniu wtyczek do WordPressa.

Płatne szablony

W Internecie znajdziemy również sklepy sprzedające szablony takie jak Elegant Theme, gdzie po zakupie rocznej subskrypcji lub stałego dostępu dostajemy dostęp do setek szablonów i dodatkowych narzędzi pozwalających w przystępny sposób dostosować wygląd.

Treść

Technicznie strona już jest w dużej mierze gotowa. Resztę rzeczy doszlifujemy pod koniec. Skup się teraz na treści. Zanim zaczniesz pisać artykuły stwórz kategorie.

Kategorie

Tematyka mojej witryny dotyczy sztuki. Podzielę stronę na kategorie:

• Aktualności – krótkie artykuły z informacją o aktualnościach w świecie sztuki
• Kultura i sztuka – zawartość encyklopedyczna
  • współczesność
  • antyk
  • prehistoria
• Artykuły – różne artykuły związane z tematem
• Wydarzenia – wystawy i inne wydarzenia
• Muzea – najsłynniejsze muzea na świecie i w Polsce (katalog)
• Sklep – planowany sklep z dziełami różnych artystów
• Kontakt – formularz kontaktowy

Oprócz tego na stronie znajdzie się krótki artykuł wprowadzający „o co chodzi z tą sztuką?”. Będzie się odpalał w momencie uruchamia strony lub po kliknięciu w logo. Nie będzie do niego dostępu z poziomu menu.

Sklep jest rozwojowym elementem i w tym momencie nie będę go implementował. Tym samym nie będzie widoczny na stronie.

Aby podzielić stronę na kategorie wejdź w menu Wpisy -> kategorie i dodaj je. Możesz też wybrać kategorie nadrzędną (dla elementu współczesność kategorią nadrzędną jest Kultura i sztuka). Tak wyglądają dodane kategorie.

Kategoria Uncategorized jest kategorią domyślną, wybieraną jak zaczynasz pisać artykuł. Jedna z kategorii musi być domyślna. Nie możemy jej usunąć. Później ją zmienię na Aktualności, bo tam będzie powstawało najwięcej nowych treści. Wtedy usunę Uncategorized. Jeżeli chcesz możesz jej teraz nadać inną nazwę (np. Pozostałe)

W kolumnach mamy nazwę kategorii, opis, nazwę która będzie częścią adresu oraz ilość przypisanych artykułów.

Tekst

Do każdej kategorii utworzę teraz artykuł. Nie będę go na razie pisał, a jedynie umieszczę tekst Lorem Ipsum, aby zobaczyć jak będzie prezentował się na stronie. Wykorzystam też tymczasowo jakąś grafikę.

Tekst Lorem ipsum jest używany powszechnie do tego typu celów.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Aby dodać nowy artykuł przejdź do Wpisy -> dodaj nowy. Pojawi się edytor w którym możemy zacząć pisać naszą frazę. Pojawi się edytor (jego nazwa to Gutenberg). W skrócie Ci go omówię.

• Tytuł artykułu – na górze („Pierwszy bardzo ważny artykuł”). Inaczej temat – wyświetli się w artykule i na listach.
• Bloki – pod tytułem (wszystkie „Lorem ipsum”). Standardowym blokiem jest akapit, czyli tekst. Możesz go jednak zmienić na inny (np. obraz). W pustym bloku klikasz plusik, który znajduje się po prawej stronie. Zwróć uwagę, że rodzajów bloków jest więcej (przycisk „Przeglądaj wszystko”), ale prawdopodobnie najczęściej będziesz używać obrazka, ew. listy (listę również utworzysz zaczynając pisać od znaku * i robiąc odstęp). Sam tekst możesz pogrubiać, ustawiać pochylenie, dodawać link itp. Ruszając myszką podczas pisania pojawi nam się menu, które doda na to pozwoli.
• Wpis – po prawej stronie. Ustawiasz parametry samego artykułu. Przypiszesz go do kategorii, dodasz tagi, obrazek wyróżniający i zajawkę. Zajawka i obrazek wyróżniający są elementem listy artykułów (zwykle po lewej stronie będzie zdjęcie, a po prawej wpisany w to miejsce tekst). Jeżeli jej nie dodasz, WordPress utworzy ją automatycznie z wpisu. Zdjęcie pojawia się też często w samym artykule (zależnie od szablonu). Tagi to słowa kluczowe, które dotyczą danego tematu. Wykorzystuje się je na wiele sposób (można ich dodać dowolną ilość) – generalnie służą do grupowania artykułów o podobnej tematyce (coś jak kategorie, ale tagi są niezależne od nich).
• Blok – po prawej stronie (obok Wpisu). Dodatkowe ustawienia bieżącego bloku (np., że ma zaczynać się dużą literą) oraz rozmiar liter.
• Zapisz szkic / Opublikuj – na górze po prawej stronie. Oba te przyciski zapiszą naszą pracę. Opublikuj dodatkowo wyświetli ją na stronie.
• Dodatkowe ustawienia. – zupełnie w narożniku (3 kropki rozmieszczone pionowo). Są to dodatkowe ustawienia dotyczące różnych elementów.

Wprowadzenie edytora Gutenberg kilka lat temu było sporą rewolucję dla twórców korzystających z WordPress-a i wywołało falę hejtu, której efektem było celowe zaniżanie ocen użytkowników, aby twórcy go wycofali. Pamiętam, że sam miałem spore opory, aby się przestawić, ale z perspektywy czasu uważam, że była to zmiana na lepsze, a edytor jest naprawdę dobrze przemyślany.

Jeszcze mała notka dotycząca treści. To co widzisz na ekranie (rozmiar tekstu itp.) nie będzie dokładnie tym co znajdzie się na stronie. Rozmiar ten (jak i wiele elementów) jest kontrolowany przez szablon, który zainstalowałeś.

Wracając – napisałem artykuł, zaznaczyłem kategorię (po prawej – we Wpis) i następnie utworzyłem kolejne artykuły o podobnej zawartości dla kolejnych kategorii. Do większości dodałem obrazek wyróżniający.

Menu

W zależności od szablonu możemy mieć wiele menu umieszczonych w różnych miejscach (np. 2 na górze – jedno na samej górze, drugie nieco niżej). Ustawia się je w Wygląd -> Menu. Menu zwykle masz już utworzone – wystarczy je tylko zmienić. W poniższym przykładzie zaznaczyłem wszystkie utworzone kategorie i nacisnąłem Dodaj menu (na dole po lewej). Poszczególne pozycje przeniosły się na prawą stronę, gdzie ułożyłem je w odpowiedniej kolejności. Zwróć uwagę, że antyk, prehistoria i współczesność umieściłem pod Kultura i sztuka. Jeżeli szablon na to pozwoli to wówczas po najechaniu / kliknięciu na Kultura i sztuka wyświetli się podmenu. Ponadto usunąłem Stronę główną i Sample Page. Na końcu zapisałem zmiany (w prawym dolnym narożniku).

Teraz wystarczyło podpiąć menu we właściwe miejsce i ponownie zapisać zmiany.

W tym momencie moja strona wygląda tak (po kliknięciu na aktualności).

Po kliknięciu na dowolne menu wyświetlają się wpisy z kategorii. Problem jest w tym, że powinny się pojawiać same zajawki, a zamiast tego mamy pełną treść (akurat w tym przykładzie tego nie widać aż tak, bo posty są krótkie). Ponadto po wejściu na stronę winart.pl, albo po kliknięciu na logo wyświetla mi się slider z wpisem. Wejdź w Ustawienia > Czytanie i zaznacz, by strona główna wyświetlała zawartość strony Sample Page.

Strony statyczne (w tym Sample Page) ustawiamy w menu Strony. Konfigurujesz / dodajesz je tak samo jak wpisy. Jedynie nie możesz wybrać kategorii, gdyż są to elementy niezależne.

Zaś problem z zajawkami jest związany z szablonem i o ile nie można tego ustawić w ustawieniach szablonu (udostępnionego przez twórców) to jedynym wyjściem jest modyfikacja plików.

Widżety

Widżety to różne dodatkowe elementy na stronie. To co możesz ustawić jest zależne od szablonu. Zwykle ustawiamy w ten sposób to co znajdzie się z boku strony oraz w stopce lub nagłówku. Na mojej stronie jest kilka widżetów – wyszukiwarka, najnowsze wpisy, najnowsze komentarze, archiwa, kategoria, meta.

Widżety konfigurujemy w Wygląd -> Widżety. Zwyczajnie przenosimy od lewej do prawej (i odwrotnie) to co ma być. Kontrolujemy też kolejność ich wyświetlania. Po dodaniu widżetu możemy go skonfigurować klikając go po prawej stronie (np. aby dodać galerię obrazów w widżecie Galeria).

Ilość widżetów dostępnych można zwiększyć dodając odpowiednie pluginy. Opiszę niektóre z nich:

• Najnowsze wpisy – ostatnio dodane wpisy
• Najnowsze komentarze – ostatnio dodane komentarze
• Archiwa – wpisy dodane w danym miesiącu
• Kategorie – lista wszystkich kategorii
• Meta – ustawione na stałe linki do różnych elementów serwisu i strony WordPress
• Chmurka tagów – lista wszystkich tagów dodanych do artykułów. Klikając w dany tag przeniesiesz się do listy artykułów go zawierających
• Galeria – obrazy z galerii zdjęć
• Obrazek – pojedyncze zdjęcie
• Tekst – dowolny tekst
• Film – wyświetla film (można go dodać lub zrobić to przez link z youtube / vimeo..)
• Wyszukiwanie – wyszukiwarka
• Własny HTML – pozwala wstawić własny kod HTML
• RSS – informacje z kanału RSS

Jest ich oczywiście więcej.

Pozostałe konfiguracje i uruchomienie strony

Choć sama strona jeszcze nie jest w całości gotowa to jednak sporo pracy (od strony technicznej) już wykonywaliśmy i niewiele potrzeba, by mogła rzeczywiście zacząć działać (oczywiście potrzeba treści). Warto samodzielnie pobawić się ustawieniami, gdyż wiele z nich zależy od zainstalowanego szablonu graficznego.

WordPress ma możliwość konfigurowania szablonu (Wygląd -> Dostosuj). Zmienisz tam logo i inne elementy. Ponadto każda zmiana jest od razu widoczna po prawej stronie ekranu.

Wiele szablonów ma jednak własne ustawienia, które czasami działają zupełnie niezależnie od tego co możesz ustawić standardowo w WordPress. Tak jest z szablonem, który wybrałem – ustawienia są w osobnym menu.

Zanim uruchomimy – dodatkowe ustawienia

Pozostałe ustawienia opiszę w skrócie, gdyż zakładam że powoli zaczynasz panować nad WordPress-em.

• Ustaw logo (tekst) lub grafikę – Motywy -> Tożsamość witryny
• Ustaw ikonę (tzn. favicon) – to obrazek, który wyświetla się w przeglądarce – na górze obok nazwy witryny. Domyślnie jest to W – logo WordPress-a.
• Jeżeli znasz CSS możesz zmodyfikować wygląd bez ruszania szablonu – Motywy -> Dodatkowy CSS
• Zainstaluj wtyczkę do obsługi pozycji w menu Kontakt. Ja wybrałem WPForms Lite. Po instalacji i włączeniu wchodzisz w WPForms -> New Form. Wpisujesz nazwę formularza – np. Kontakt oraz wybierasz Blank Form i dodajesz pola. Interfejs jest dosyć intuicyjny – każde pole nazywasz i określasz czy jest wymagane czy nie. Polskie tłumaczenie przycisku wpisze w Settings. Po zapisaniu (prawy górny róg ekranu) wchodzisz w WPForms -> All Forms i znajdujesz na liście dodane przed chwilą menu (powinno być zresztą tylko jedno). Po prawej stronie, w kolumnie Shortcode będzie tekst w stylu (u Ciebie może być inny numer). W ten sposób możesz dodać formularz w dowolne miejsce na stronie. Udaj się do Strony i dodaj nową stronę. Nazwij ją Kontakt i wklej . Następnie w menu podepnij tą stronę (najpierw usuń dodaną wcześniej w to miejsce kategorię Kontakt).
• Usuń nieużywane szablony (Wygląd -> motywy)
• Usuń nieużywane kategorie
• Napisz teksty
• Uruchom stronę poprzez wyłączenie wtyczki (Wtyczki -> Zainstalowane wtyczki) Simple WP Maintenance Mode

Mapa strony

Mapa strony to specjalny plik (najczęściej XML) w którym zawarte są wszystkie linki dostępne na Naszej stronie. Z tego pliku mogą korzystać wyszukiwarki, aby łatwiej indeksować treści w witrynie. Jest wiele wtyczek, które pozwalają na wygenerowanie pliku. Jedną z popularniejszych jest YoastSEO (mapa strony to tak naprawdę tylko drobny dodatek do całej wtyczki). Aby dodać wtyczkę (plugin) wchodzimy w menu Wtyczki -> Dodaj nową. Wpisujemy nazwę – instalujemy i włączamy (gdybyśmy tego nie zrobili po instalacji to lista wtyczek znajduje się w menu Wtyczki -> Zainstalowane wtyczki. Pojawi się nowe menu po lewej – SEO.

Więcej o tym co to jest mapa strony i jak włączyć ją w YoastSEO i dodać do Google.

Przekierowania

Po pewnym czasie prowadzenia strony, niektóre z wpisów staną się nieaktualne lub znajdą się pod innym linkiem. Użytkownicy trafiający do naszego serwisu (np. z Google) niekoniecznie chcą oglądać komunikat z błędem 404 „Nie znaleziono strony”. Wyszukiwarki też zmuszone są ponownie indeksować (sprawdzać i zapisywać) wpisy pod nowym adresem co powoduje czasami, że taka strona uznawana jest za kopię poprzedniej i tym samym nie zostanie zapamiętana. Aby tego uniknąć powinniśmy stosować tzw. przekierowania.

Więcej o tym czym są przekierowania i jak je wykonywać.

Poprawienie szybkości ładowania

Strony na WordPress potrafią być ciężkie, czyli uruchamiać się długo. Główną problemem są zainstalowane wtyczki, które ładują się podczas przeglądania poszczególnych podstron. Każda z nich ma często osobny zestaw plików – skryptów i arkuszy stylów CSS. Te zaś ładowane są razem z tymi dostarczonymi przez samego WordPress-a, zwiększając ilość koniecznych źródeł z których pobierane są dane. Oczywiście są również inne elementy wpływające na szybkość działania strony – m.in. serwer, obrazki, filmy, reklamy.. Część z powyższych problemów można rozwiązać za pomocą darmowych wtyczek.

Więcej o szybkim ładowaniu stron w WordPress

Zarabianie na stronie

Prowadzenie strony (o ile nie jest to strona typowo zarobkowa – np. sklep), wymaga sporej ilości samozaparcia i poświęcenia czasu prywatnego. Jeżeli lubimy pisać, a ludzie lubią nas czytać to warto zastanowić się nad umieszczeniem chociaż kilku reklam w witrynie. Oczywiście należy je umieścić w takich miejscach, aby strona nie straciła na czytelności i jednocześnie generowała przychody. W jaki sposób za pomocą wtyczki ustawić reklamy znajdziesz w artykule o zarabianiu na stronie internetowej. Sugeruję Ci przejrzeć również aktualizowaną listę reklamodawców i wybrać tych, którzy pasują do tematyki witryny. Nie zrażaj się, jeżeli od razu nie zaczniesz osiągać większych zarobków. Te są często zależne od tego jacy użytkownicy i ile użytkowników odwiedza Twoją stronę. Z czasem przychody będą rosnąć.

To wszystko?

Omówiłem podstawowe elementy WordPress-a. Pozornie nie wydaje się skomplikowany, ale jak zaczniemy się zagłębiać w poszczególne elementy dokładnie to okaże się, że ma całkiem spore możliwości konfiguracyjne (np. ukryte na górze Opcje ekranu nagle zwiększają widoczność opcji). Ponadto ciężko czasami obyć się bez programowania, jeżeli trafimy na problem lub coś nam się nie podoba. Wiele rzeczy można zrobić instalując odpowiednie wtyczki i znam osoby, które mają popularne strony i nic więcej poza „klikaniem” i pisaniem nie robią. Treść jest bądź co bądź najważniejszym elementem serwisu.

Aby zwiększyć popularność powinieneś założyć konto w Google. dodać stronę i mapę strony. Warto też popracować nad SEO (np. wspomniana już wtyczka Yoast SEO). Do bardziej zaawansowanych rzeczy przyda się umiejętność połączenia ze stroną przez FTP (lub bliźniaczy protokół) oraz modyfikacja plików .php. Aby sprawnie poruszać się na tym polu warto poznać chociaż podstawy HTML-a, CSS-a i PHP. O ile nie chcesz tworzyć samodzielnie wtyczek to witryna google.pl i podstawy wspomnianych technologii wystarczą do bardzo wielu niestandardowych rzeczy.

Ponadto mamy RODO co oznacza konieczność informowania o ciasteczkach. Może być również potrzebna polityka prywatności. Szczególnie jak masz menu kontakt i przechowujesz jakieś dane o użytkownikach.

Jeżeli chcesz również zmienić coś w plikach, albo wydawać komendy to potrzebujesz dostępu przez FTP / SSH.

Podsumowanie

1. Wybierając hosting zwróć uwagę na parametry oraz ceny przedłużenia, a nie tylko na cenę za pierwszy rok. Co z tego, że w pierwszym roku zapłacisz 50 zł jak w kolejnych będzie to już 500 zł. Podobnie sprawa ma się z domeną.
2. Serwer musi obsługiwać SSL, inaczej Twoja strona będzie wyświetlana jako niebezpieczna przez wiele przeglądarek.
3. Ustaw przekierowanie na serwerze, aby tylko strona z www lub (lepiej) bez www była widoczna.
4. Po instalacji może minąć trochę czasu zanim Twoja witryna będzie dostępna (dotyczy to nowo zakupionej domeny i certyfikatu)
5. Wyłącz stronę na czas jej tworzenia / konfigurowania.
6. Skonfiguruj odpowiednio WordPressa, aby poprawnie obsługiwał SSL.
7. Ustaw format daty i czasu.
8. Dodaj kategorie, przykładową treść i menu.
9. Stwórz stronę statyczną.
10. Większość wtyczek posiada własne ustawienia.
11. Ustaw logo i ikonę.
12. Pamiętaj o RODO i polityce prywatności.
13. Dodaj mapę strony i umieść stronę w Google.
14. Obsłuż przekierowania na stronie.
15. Popraw szybkość ładowania strony.
16. Zastanów się nad wdrożeniem reklam do strony. Możesz skorzystać z tej listy w celu wyboru partnerów.