Jak stworzyć stronę internetową – Poradnik WordPress

Więc chciałbyś stworzyć swoją własną stronę internetową, ale nie wiesz od czego zacząć? Nie jesteś zaawansowanym użytkownikiem „internetów”? Nic nie szkodzi, w niniejszym poradniku dowiesz się dokładnie jak zrobić stronę internetową bez umiejętności i doświadczenia w kodowaniu przy użyciu systemu WordPress. Nie będziesz potrzebował żadnej technicznej wiedzy na ten temat.

Zostaniecie przeprowadzeni krok po kroku przez cały proces, więc zaczynajmy!

Spis treści

Co będziesz potrzebować, aby stworzyć stronę internetową?

Są to w sumie 3 rzeczy:

  1. Domena – czyli nazwa waszej strony. Przykładowo, moja nazwa strony to – subverse.pl
  2. Hosting – miejsce, w którym wasza strona będzie „mieszkać”. Jest to fizyczna lokalizacja, potocznie zwana serwerem, na którym przechowywane są pliki naszej strony, bazy danych, zdjęcia, posty.
  3. Czas – chwila wolnego czasu, jakieś 60 min.

Tak, stronę można postawić w ciągu kilku minut i zaraz dowiesz się dokładnie jak to zrobić.

Jak stworzyć stronę internetową - wordpress subverse

Czego jeszcze się dowiesz:

  • Jak zarejestrować domenę
  • Jaki hosting będzie najlepszy dla WordPressa
  • Jak zainstalować WordPressa
  • Jak zmienić szablon graficzny
  • Jak stworzyć swój pierwszy post
  • Jak rozbudować WordPressa za pomocą pluginów
  • Jak dodać formularz kontaktowy
  • Jak zintegrować Google Analytics z naszą stroną
  • Jak optymalizować SEO naszej strony
  • Jak monetyzować swoją stronę

Zaczynamy!

1. Domena

Pierwsze czego będziemy potrzebować to domena. Powinna być krótka, łatwo wpadająca w ucho i „zbieżna” z tematyką naszej strony. Jeżeli przykładowo chciałbyś prowadzić stronę o motocyklach, to dobrym wyborem mogłaby być domena – motocykleswiata.pl albo motocykleshop.pl, motoshop.pl. Możliwości jest wiele, z reguły nie powinno się przywiązywać wagi do nazwy domeny, ale nie powinna ona być kompletnie randomowa.

Gdzie taką domenę można zamówić? Jest wielu rejestratorów domen, w dzisiejszych przy zakupie domen kierujemy się zwyczajnie ceną. Nie dajcie się zwieść cenom za pierwszy rok, gdyż te zawsze są minimalne. Co naprawdę trzeba sprawdzić, to cena za przedłużenie domeny po roku czasu.

Najtańszym operatorem na rynku rejestratorów domen jest OVH i to właśnie na ich przykładzie przejdziemy przez proces rejestracji domeny.

Wybór nazwy naszej strony

Próbujemy odnaleźć najbardziej odpowiadającą nam nazwę domeny. W momencie odnalezienia tej jedynej, klikamy w ikonkę koszyka i przechodzimy do następnego etapu.

Dodatkowe opcje

Nic nie zaszkodzi jeśli skorzystamy z darmowej opcji zabezpieczenia serwerów DNS podpisami cyfrowymi, więc możemy tą opcję zaznaczyć i ruszyć dalej.

Wybór hostingu, z którego nie korzystamy

Nie korzystamy z oferty OVH na hosting. Zaznaczamy opcję „Nie potrzebuje hostingu www” i kontynuujemy.

Okno z podsumowaniem

Nothing to see here, chyba, że posiadasz kupon, który możesz teraz wykorzystać, w przeciwnym razie – kontynuuj.

Konfiguracja - WAŻNE!

Należy wskazać serwery DNS naszego hostingu. W momencie, gdy ktoś będzie chciał wejść na naszą stronę, to tenże użytkownik zostanie przekierowany na adres naszego hostingu, gdzie znajduje się strona. Podajemy serwery DNS linuxpl.com, ponieważ następnym krokiem będzie zamówienie hostingu. I zrobimy to właśnie w linuxpl.com.

2. Hosting

Hosting jest jednym z najważniejszych czynników wpływających na sukces naszej strony. Szybkość hostingu w dzisiejszych czasach wręcz decyduje o Twoim sukcesie. Cierpliwość użytkowników, jeżeli chodzi o strony internetowe, kurczy się. Chodzi o to, że strona musi załadować się w maksymalnie 2 sekundy, w przeciwnym razie, Twój klient/użytkownik po prostu opuści stronę. Dlatego jest to tak ważne, jeżeli na poważnie myślimy o sukcesywnej stronie internetowej.

W tym miejscu mogę z czystym sercem polecić specjalnie przygotowany hosting od linuxpl, dostosowany pod CMS – WordPress. Hosting WordPress możecie zamówić klikając na logo poniżej.

Wydajność Hostingu WordPress jest nieporównywalna do żadnej innej oferty dostępnej na rynku. Hosting opiera się na serwerze LiteSpeedEnterprise, który oferuje wydajność nawet do 67x wyższą, niż zwykłe hostingi oparte o Apache! Co ważniejsze, developerzy LiteSpeedEnterprise poszli o krok naprzód, stworzyli dodatkowo wtyczkę, która optymalizuje działanie naszej strony spełniając wszystkie wymagania dotyczące prawidłowych ustawień pod wytyczne od Google. Jest to połączenie, które naprawdę ułatwia pracę w znacznym stopniu oraz z korzyścią dla użytkowników. Dokładne ustawienia tej wtyczki w dalszej części artykułu.

Przejdźmy zatem do instalacji naszej domeny na hostingu WordPress od linuxpl.

Dodanie domeny do hostingu

W tym miejscu dodajemy pliki naszej strony, wszystko jest wykonywane automatycznie. Wystarczy kliknąć na „dodaj domenę” i wpisać nazwę domeny, którą przed chwilą zarejestrowaliśmy w OVH.

Przygotowanie do instalacji WordPress

Po dodaniu domeny zostaniemy przeniesieni do panelu, w którym możemy wybrać oprogramowanie, jakie byśmy chcieli zainstalować na naszym hostingu. Nie wymaga to dużego doświadczenia, więc nie musicie się niczego obawiać. Klikamy w ikonkę WordPressa, która jest zaznaczona na obrazku poniżej.

Instalacja WordPress

Nadeszła ta chwila, która dzieli Cię przed postawieniem Twojej własnej strony internetowej. Nie pozostaje nic innego jak kliknąć „instaluj tą aplikację” i przejść do okna konfiguracji instalacji.

Konfiguracja instalacji

Lokalizacja – pierwszym elementem, na który należy zwrócić uwagę jest wybór wersji https, czyli zabezpieczonej certyfikatem SSL strony, która jest odporna na ataki osób trzecich. Przekłada się to również na bezpieczeństwo naszych klientów i użytkowników oraz daje nieznacznego boosta przy pozycjonowaniu SEO.

Z rozwijanej listy wybieramy wersje https://www lub bez www. Nie ma to żadnego poważnego znaczenia, więc wybór należy do Was. Subiektywnie, bez www wygląda nowocześniej.

Ustawienia – tutaj warto gdzieś utrwalić nasz login oraz hasło do panelu administracyjnego samego WordPressa. Poniżej dodajcie też aktualny adres email.

Resztę ustawień możecie pozostawić bez zmian.

Po wykonaniu powyższych podpunktów kończymy instalację klikając „Zainstaluj”, które znajduje się na samym dole.

Gratulacje! WordPress zainstalowany!

Po zainstalowaniu WordPressa możemy przejść do panelu administracyjnego WordPress. Adres to twojanazwadomeny.pl/wp-admin. Możemy przejść do panelu bezpośrednio z panelu naszego hostingu.

3. Praca w CMS WordPress

Po zalogowaniu się do panelu WordPress, przywita nas ten oto widok.

Zmiana szablonu WordPress

Pierwsza czynność, którą wykonamy po zalogowaniu do panelu, to zmiana szablonu graficznego. W tym celu musimy kliknąć na „Wygląd”, a następnie „Motywy”. Następnym krokiem będzie przycisk „Dodaj nowy” u góry ekranu. Po wczytaniu dostępnych do wyboru szablonów, możemy motywy instalować na naszej stronie.

Warto wziąć pod uwagę, że po instalacji szablonu, trzeba go jeszcze aktywować. Po aktywacji, nasza strona zostanie zmieniona według wybranego motywu.

Zmiana wyglądu poszczególnych stron

Do edytowania stron będziemy używać tak zwanych „Drag and Drop – Page Builder’ów”, które są niezwykle pomocne i niesamowicie przyśpieszają pracę. Moim wyborem jest bezsprzecznie Elementor. Do tej pory używałem DIVI oraz WPBakery, ale Elementor jest bezkonkurencyjny.

Dowiecie się przy okazji jak instalować wtyczki i ulepszać funkcjonalność waszej strony internetowej.

Podobnie jak w przypadku motywów, szukamy na panelu bocznym odnośnika „Wtyczki”, następnie „Dodaj nową”. W następnym kroku, ułatwiamy sobie nieco proces poprzez wpisanie w prawym, górnym rogu „elementor”, co zawęzi wyniki i wyświetli to, czego aktualnie szukamy. Po znalezieniu Elementora, klikamy „Zainstaluj teraz”, a następnie „Aktywuj”. Brawo Ty, Elementor zainstalowany!

Elementor i możliwości

Jak już wspomniałem, Elementor, to spory kawałek oprogramowania, którego trzeba się nauczyć, ponieważ oferuje on możliwości, których próżno szukać gdziekolwiek.

Będziemy mieć możliwość edycji naszych podstron oraz postów. Ich indywidualnej stylizacji, oryginalnego stylu, a estetyka jest ograniczona tylko i wyłącznie przez Waszą wyobraźnię. Więc nie bójcie się nowych rzeczy, eksperymentujcie, upiększajcie i twórzcie rzeczy o jakich się Wam nie śniło ; ).

4. Tworzenie formularza kontaktowego

Każda strona powinna mieć możliwość kontaktu z jej właścicielem/administratorem, dlatego kolejnym krokiem będzie stworzenie formularza kontaktowego. Najbardziej popularną wtyczką, która spełnia swoje zadanie jako formularz kontaktowy jest WPForms. Poniżej instrukcja instalacji.

WPForms, to wtyczka, więc proces jej instalacji jest podobny jak w przypadku Elementora. Po znalezieniu, zainstalowaniu oraz aktywowaniu WPForms, na naszym bocznym panelu pojawi się bezpośredni odnośnik do naszej wtyczki i powiązanych z nim opcjami. Wystarczy kliknać na „WPForms”, a następnie na „Add new”. Zostaniemy przeniesieni do ekranu wyboru gotowych szablonów. Nas najbardziej interesuje „Simple Contact Form” i na ten szablon też klikamy.

Tutaj będziemy dostosowywać nasz formularz pod nasze wymagania. Mamy kilka opcji do wyboru. 

Label – określa co pojawi się nad polem tekstowym.

Sub-Label – tutaj natomiast mamy do czynienia z tym, co pojawi się pod polem tekstowym.

Required – tutaj określamy czy pole może pozostać puste czy musi być wypełnione.

Hide Label/Sub-Label – mamy możliwość ukrycia opisów pól tekstowych.

Placeholder – zamiast opisów pól tekstowych możemy użyć elementów wskazujących przeznaczenie danego pola, które zostanie zastąpione przez dane wprowadzone przez użytkownika.

Submit – przycisk do wysyłania wiadomości i brak tłumaczenia. Możemy to zmienić wchodząc w settings na panelu bocznym po lewej stronie.

Koniecznie trzeba również pamiętać, aby każdy formularz ZAWSZE zapisać, w prawym górnym rogu znajduje się odpowiedni przycisk „SAVE”.

Formularz możemy w każdej chwili podejrzeć jak prezentuje się na stronie, na której chcemy go umieścić. Tak, widzę jak to wygląda w Elementorze, ale finalnie wygląda to tak, jak powinno.

5. Integracja z Google Analytics

Narzędzie od Google pozwoli nam dokładnie śledzić odwiedziny naszej strony. Narzędzie wręcz niezbędne, więc trzeba je zintegrować z naszą stroną. Jest kilka sposobów aby dodać specjalny kod do naszej strony. Niektóre, bardziej rozbudowane motywy posiadają opcje dodania kodu, który jest następnie implementowany w nagłówku naszej strony, niewidoczny dla użytkowników. Ale jeżeli używasz motywu, który takiej opcji nie oferuje, to przyda nam się „Google Analytics Dashboard for WP”. Mam nadzieje, że instalowanie wtyczek przychodzi Wam coraz łatwiej! 

Przydatne będzie założenie darmowego konta Google/Gmail.

W zależności co udało Wam się ustawić, to będzie jedna droga do integracji Google Analytics. Będzie ją można przeprowadzić wprost z panelu admina WordPress.

Poniżej pierwszy sposób dla osób, które posiadają konto Google wraz z aktywowaną usługą Google Analytics.

W przypadku, gdyby sposób wyżej sprawiał jakieś trudności, spróbujcie najpierw założyć konto Google/Gmail. Uruchomcie usługę Google Analytics i dodajcie nową usługę według podanego schematu poniżej.

Po stworzeniu konta Google oraz aktywowaniu Google Analytics, spróbujcie ponownie dodać domenę do wtyczki „Google Analytics Dashboard for WP” zaczynając proces od początku.

Jeżeli wszystko pójdzie dobrze, to Tracking ID z Google Analytics będzie identyczny z tym, który podaje nasz plugin w panelu admina.

A jak już wyczyścicie pulpit WordPressa z niepotrzebnych okienek, waszym oczom ukaże się mały, zgrabny wykres naszego pluginu od Google Analytics.

6. Optymalizacja SEO - Yoast

O tym, że pozycjonowanie stron internetowych dla WordPress jest szalenie istotne jeżeli chodzi o nasz sukces wie prawie nikt, chociaż świadomość w tym temacie stale i sukcesywnie rośnie. Tak miejsc na TOP10 jest.. tylko 10. Aby skutecznie piąć się w rankingach Google warto zaznajomić się z poradnikiem SEO, który jest wprowadzeniem do świata pozycjonowania.

Niezbędnym narzędziem, którego będziecie potrzebować jest Yoast SEO. Na tym etapie już wiesz jak instalować wtyczki, więc zainstaluj i aktywuj Yoast’a. Następnie prawie KAŻDA Twoja podstrona musi te dwa pola mieć uzupełnione, to samo tyczy się Twoich postów. Gdy zechcecie edytować posta/stronę po zjechaniu scrollem na sam dół pojawi Wam się okno Yoasta, należy kliknąć „Edit snippet”. Pojawią się pola, które trzeba uzupełnić sensowną treścią ze słowami kluczowymi, na które chcielibyście daną stronę/post pozycjonować.

7. Optymalizacja działania WordPress - LiteSpeed Cache

Do pełni szczęścia potrzebujecie jeszcze jednego pluginu – LiteSpeed Cache. Jak wspomniałem na początku, podam Wam wszystkie ustawienia, które usprawnią działanie strony. Należy wspomnieć, że plugin ten jest dedykowany serwerom LiteSpeedEnterprise, przy tych właśnie serwerach oferują maksimum swoich możliwości. Dlatego polecam serwery od linuxpl.com – Hosting WordPress.

Ale to jednak nie wszystko, ponieważ plugin posiada jeszcze jedną, niesamowicie przydatną funkcję. Kompresja oraz podmiana plików graficznych! Google zwraca przeogromną uwagę na wielkość plików graficznych, gdyż generują one największy ruch w sieci, a słabo lub wcale nie skompresowane pliki będą zużywać ogromne ilości transferu. Wystarczy kliknąć „Wyślij żądanie optymalizacji”, a cała magia zadzieje się sama. Jeżeli regularnie będziemy dodawać zdjęcia, po zdobyciu 3 levela, cały proces będzie odbywał się samodzielnie. Do 3 poziomu, musimy po wrzuceniu obrazków wysłać żądanie optymalizacji ręcznie.

Poniżej są zakładki, do których musicie zajrzeć będąc w panelu LiteSpeed Cache. Wszystkie zakładki odblokowujemy poprzez przycisk – „Wyświetl zaawansowane opcje” widoczny w prawym górnym rogu podczas, gdy znajdujemy się w „Ustawieniach głównych” wtyczki.

[5] Optymalizuj

  • CSS Minify –
  • Połączenie CSS –
  • CSS HTTP/2 Push –
  • JS Minify –
  • Połącz JS –
  • JS HTTP/2 Push –
  • HTML Minify –
  • Minifikacja wbudowanego kodu CSS –
  • Minifikacja wbudowanego kodu JS –
  • Ładuj CSS asynchornicznie –
  • Wygeneruj krytyczny CSS –
  • Wygeneruj krytyczne CSS w tle –
  • Wewnętrzny CSS Async Lib –
  • Opóźnij ładowanie JS –
  • Wyklucz JQuery –
  • Usuń komentarze –

[6] Tuning

  • Priorytet połączonych plików CSS –
  • Priorytet połączonego JS –
  • Usuń query strings –
  • Załaduj Google Fonts asynchonicznie –
  • Usuń Google Fonts – Wył
  • Usuń emoji WordPressa –

[7] Media

  • Lazy Load Obrazków –
  • Responsywny element zastępczy –
  • Wygeneruj responsywny symbol zastępczy w tle –
  • Lazy Load Iframeów –
  • Biblioteka Inline Lazy Load Images –
  • Optymalizuj atomatycznie –
  • Cron optymalizacji –
  • Optymalizuj oryginalne obrazki –
  • Usuń oryginalne kopie zapasowe – Wył
  • Optymalizuj wersje WebP –
  • Zoptymalizuj bezstratnie – Wył
  • Zachowaj dane EXIF/XMP – Wył
  • Zamiennik obrazów WebP –
  • WebP For Extra srcset –

8. Monetyzacja naszej strony

Sposobów na zarabianie na naszej stronie jest kilka. Jeżeli generujemy spory ruch i mamy duża liczbę odwiedzin, to możemy wyświetlać reklamy – Google AdSense. Jest to najlepsza opcja jeżeli chodzi o wyświetlanie reklam. Będą one dobrane pod kategorie naszej strony oraz użytkowników, którzy daną stronę odwiedzają.

Do dyspozycji mamy również programy partnerskie/sieci afiliacyjne, dzięki którym możemy promować coś, czym się naprawdę interesujemy. Dobrym przykładem może być program partnerski – Ceneo. Posiada on dobre prowizje oraz jasne warunki.

Istnieją również nieco bardziej zaawansowane sieci marketingowe – MyLead oraz FireAds. Oba oferują pomoc dla początkujących oraz poradniki jak zarabiać w internecie.

Materiał jest bardzo obszerny, ale to i tak dopiero początek. Udostępniajcie, lajkujcie i śledźcie na bieżąco moją stronę i facebook’a. Stale dodaje nowe poradniki oraz artykuły, peace out!

10 Ocena
Jak stworzyć stronę internetową

Stworzenie strony, to nie to samo, co instalacja oprogramowania na komputerze. Ale z odpowiednim poradnikiem jest to zrobienia w około godzinę czasu :). Mam nadzieje, że poradnik się przydał i zapraszam na następne!

Oceny użytkowników: Bądź pierwszy!

Komentarze

  Subscribe  
Powiadom o
Maciej Wiśniewski Usługi IT
  • NIP: 8821977183
  • REGON: 383667546
  • 796 548 126
  • info@subverse.pl
Zostaw email i bądź na bieżąco!

Nie spamuje i nie sprzedaje meili osobom trzecim, no stress!

SUBVERSE
Logo