Strona jednostronicowa, to sytuacja, w której cała treść znajduje się na jednej stronie, a menu nie prowadzi do innych adresów URL: po kliknięciu strona płynnie przewija się do odpowiedniego bloku. Żadnych przeładowań, żadnych straconych odwiedzających. Brzmi jak coś idealnego dla landing page’a, portfolio czy wizytówki, prawda?

Ale gdy przychodzi do działania, początkujący wpada na dwie ściany. Pierwsza: „nie umiem programować". Druga: „pewnie potrzebne są drogie wtyczki". Obie ściany można zburzyć w godzinę.

Stworzy Pan/Pani pełnoprawną stronę jednostronicową na WordPressie z płynnym przewijaniem, sekcjami kotwicowymi i całkowicie na darmowych narzędziach. Ani jednej linii kodu.

Jeśli wygodniej jest Panu/Pani oglądać niż czytać, oto wizualny proces od instalacji do publikacji:

💡 Szybki przegląd:

• Zainstaluj XAMPP, lokalny serwer do testowania WordPressa na komputerze
• Uruchom WordPressa na lokalnej maszynie przez phpMyAdmin i edycję pliku wp-config.php
• Wybierz motyw kompatybilny ze strukturą jednostronicową (my weźmiemy SiteOrigin North)
• Zainstaluj dwie darmowe wtyczki SiteOrigin: Page Builder i Widgets Bundle
• Zbuduj stronę z gotowych układów, przypisz identyfikatory kotwic i powiąż je z pozycjami menu

Dlaczego w ogóle strona jednostronicowa

Strona jednostronicowa wygrywa z klasyczną wielostronicową w konkretnych scenariuszach. Kontroluje Pan/Pani kolejność, w jakiej odwiedzający przyswaja informacje: najpierw wartość, potem cena, a nie na odwrót. Żadnego polowania na linki w menu.

Kiedy to działa

Portfolio fotografa, landing page usługi, strona promocyjna produktu, wizytówka firmy z pięciu sekcji, wszystko to mieści się na jednym ekranie przewijania. Sześć bloków po dwa, trzy akapity na jednej stronie wygląda solidnie. Te same sześć bloków na sześciu różnych stronach, jak pusta wydmuszka.

Urządzenia mobilne i szybkość

Strona jednostronicowa ładuje się raz. Potem już tylko przewijanie. Odwiedzający może stracić internet w trakcie czytania, a i tak przewinie do końca: strona jest już w pamięci. Na ekranie mobilnym odbiera się to jak aplikację, a nie jak stronę. Google dawno potwierdził: indeksowanie mobile-first to standard od 2018 roku.

Kiedy nie warto

Sto artykułów na blogu, złożony sklep internetowy, wielopoziomowa struktura, strona jednostronicowa nie udźwignie. Przewijanie stanie się nieskończone, a SEO ucierpi: wyszukiwarki lubią osobne adresy URL dla każdego klastra znaczeń.

Krok 1: Instalacja XAMPP na Windows

XAMPP to darmowy, wieloplatformowy zestaw: Apache (serwer WWW), MariaDB (baza danych), PHP i Perl. Mówiąc prościej, zamienia on Pana/Pani komputer w lokalny hosting, na którym WordPress działa bez internetu i bez opłat. Idealny do testów i wersji szkoleniowych.

Kolejność instalacji na Windows:

• Wejdź na stronę Apache Friends i pobierz najnowszą wersję XAMPP dla swojego systemu.
• Uruchom instalator. Na ekranie powitalnym kliknij Next.
• Na etapie wyboru komponentów pozostaw zaznaczone MySQL i phpMyAdmin, dla WordPressa to wystarczy. Resztę można odznaczyć: w razie potrzeby doda się później przez panel sterowania.

• Wybierz folder instalacji (domyślnie C:\xampp, można zostawić).
• Na ekranie Bitnami odznacz „Learn more about Bitnami for XAMPP", WordPressa zainstalujemy ręcznie. Kliknij Next.
• Poczekaj na rozpakowanie plików. Pozostaw zaznaczoną opcję „Uruchom panel sterowania" i kliknij Finish.

Jeśli panel sterowania otworzył się bez czerwonych błędów, a Apache i MySQL są podświetlone na zielono, serwer działa. Otwórz przeglądarkę i przejdź pod adres http://localhost/. Jeśli zobaczy Pan/Pani stronę powitalną XAMPP, wszystko jest skonfigurowane prawidłowo.

Jeśli Apache nie startuje, proszę sprawdzić, czy port 80 nie jest zajęty przez inny program. Skype i IIS to częsti winowajcy. W ustawieniach Apache (Config → Apache → httpd.conf) można zmienić port z 80 na 8080.

Krok 2: Tworzenie bazy danych i instalacja WordPressa

WordPress przechowuje wszystko, strony, ustawienia, użytkowników, w bazie danych MySQL. Stworzymy ją przez phpMyAdmin.

• W panelu sterowania XAMPP kliknij przycisk Admin w wierszu MySQL. Otworzy się phpMyAdmin.
• Przejdź do zakładki Bazy danych w górnym lewym menu.
• Wpisz nazwę bazy, na przykład wordpress, i kliknij Utwórz.

Baza gotowa. Teraz sam WordPress:

• Pobierz najnowszą wersję WordPressa i rozpakuj archiwum do folderu C:\xampp\htdocs\wordpress (może Pan/Pani nazwać folder inaczej, będzie to część lokalnego adresu URL).
• W folderze znajdź plik wp-config-sample.php, zmień jego nazwę na wp-config.php.
• Otwórz plik w dowolnym edytorze tekstowym i znajdź blok ustawień MySQL:

1
define('DB_NAME', 'wordpress');
2
define('DB_USER', 'root');
3
define('DB_PASSWORD', '');
4
define('DB_HOST', 'localhost');

• Zapisz plik i zamknij edytor.
• W przeglądarce otwórz http://localhost/wordpress/. Wybierz język, wymyśl nazwę użytkownika i hasło, kliknij Zainstaluj WordPressa.

Gotowe. Zalogował się Pan/Pani do panelu administracyjnego WordPressa na lokalnej maszynie. Pierwszy etap za nami.

Krok 3: Wybór motywu

Do strony jednostronicowej nada się praktycznie każdy motyw, ale my weźmiemy SiteOrigin North, jest darmowy, responsywny i zoptymalizowany pod kątem pracy z kreatorem stron SiteOrigin, który wykorzystamy w następnym kroku. Motyw obsługuje przyklejone menu, dzięki czemu odwiedzający nie będzie musiał przewijać strony z powrotem na górę, aby przejść do innej sekcji.

Instalacja: Wygląd → Motywy → Dodaj nowy → wpisz SiteOrigin North → Zainstaluj → Aktywuj. Motyw został stworzony przez zespół SiteOrigin, tych samych ludzi, którzy tworzą wtyczkę Page Builder. Nie będzie konfliktów.

Krok 4: Wtyczki SiteOrigin, Page Builder i Widgets Bundle

Rdzeń naszego zestawu, dwie darmowe wtyczki z repozytorium WordPressa:

• SiteOrigin Page Builder (siteorigin-panels), kreator typu „przeciągnij i upuść" z siatką, układami i wbudowaną funkcją przewijania jednostronicowego (od wersji 2.3). Podgląd na żywo, czysty kod HTML, ponad 500 000 aktywnych instalacji.
• SiteOrigin Widgets Bundle (so-widgets-bundle), zestaw widżetów: przyciski, obrazy, slidery, mapy, cenniki i jeszcze dwa tuziny elementów. Wszystko, czym wypełnia się układy.

Instalacja: Wtyczki → Dodaj nową → kolejno wyszukaj Pan SiteOrigin Page Builder i SiteOrigin Widgets Bundle → Zainstaluj → Aktywuj obie. Dopiero połączenie tych dwóch wtyczek daje zarówno kreator, jak i zawartość do makiet. Funkcja przewijania po kotwicach jest wbudowana w Page Builder, dodatkowe wtyczki do tworzenia strony jednostronicowej nie są potrzebne.

Krok 5: Budowanie strony w SiteOrigin Page Builder

Proszę utworzyć nową stronę (Strony → Dodaj nową). Nad standardowym edytorem pojawią się zakładki, proszę przełączyć się na Page Builder.

SiteOrigin Page Builder jest dostarczany z biblioteką gotowych makiet. Proszę kliknąć przycisk Layouts nad edytorem.

Otworzy się katalog presetów, od Fitness Gym po Agency. Proszę wybrać odpowiedni (my wybraliśmy Fitness Gym), kliknąć Insert. Jeśli na stronie była już jakaś treść, wtyczka zapyta: wstawić przed, po czy zastąpić. Dla pustej strony nie ma to znaczenia.

Proszę zapisać stronę i ją otworzyć. Proszę przełączyć się na **Live **Editor, link do niego pojawi się w górnym pasku administracyjnym WordPress.

W Live Editor najedzie Pan kursorem na dowolny element i od razu zobaczy Pan, który widżet za niego odpowiada. Można edytować tekst, zmieniać obrazy i przeciągać bloki, wszystko w czasie rzeczywistym.

Krok 6: Identyfikatory kotwic i menu nawigacyjne

Ostatni krok, czyli powiązanie pozycji menu z sekcjami strony. Bez tego przewijanie nie zadziała.

W Live Editorze najedź kursorem na pierwszy wiersz po bloku Hero, kliknij ikonę narzędzia (klucz) i wybierz Edit Row. Przejdź na zakładkę Attributes i w polu Row ID wpisz identyfikator, na przykład activities. Kliknij Done.

Powtórz tę czynność dla każdego wiersza z unikalnym ID: services, potem pricing, potem contact i tak dalej. Zapisz stronę.

Teraz menu: Wygląd → Menu. Utwórz nowe menu. Dodawaj pozycje przez Linki niestandardowe: w polu URL wpisz #activities, w polu nazwy „Działalność". Powtórz dla każdego ID.

Ważny niuans: krzyżyk # jest obowiązkowy w URL-u pozycji menu (to format kotwicy HTML), ale w Row ID wewnątrz Page Builder krzyżyka wpisywać nie trzeba, konstruktor sam rozumie, że to identyfikator.

Więcej o tworzeniu menu w WordPressie opowiadamy w naszym poradniku dotyczącym konfiguracji nawigacji.

Zapisz menu, przypisz je do obszaru wyświetlania motywu i otwórz stronę. Kliknij pozycję menu, a strona płynnie przewinie się do odpowiedniej sekcji.

⁉️🤔 Często zadawane pytania

Czy koniecznie trzeba używać XAMPP, czy można od razu na hostingu?

XAMPP jest potrzebny do lokalnego testowania. Jeśli ma Pan już hosting z WordPressem, proszę pominąć kroki 1 i 2 i przejść od razu do motywu i wtyczek. Logika kotwic działa tak samo na lokalnym serwerze, jak i na serwerze produkcyjnym.

Czy można wziąć inny motyw zamiast SiteOrigin North?

Tak, praktycznie każdy nowoczesny motyw WordPressa obsługuje strukturę jednostronicową. Najważniejsze, żeby motyw nie kolidował z SiteOrigin Page Builder. Twórcy Page Buildera gwarantują kompatybilność z większością motywów z repozytorium WordPressa.

Czy ten zestaw działa na Macu lub Linuxie?

XAMPP jest wieloplatformowy, wersje są dostępne na Windows, macOS i Linux. Na Macu można również użyć MAMP (wersja bezpłatna). Instalacja WordPressa i wtyczek po uruchomieniu lokalnego serwera jest identyczna na wszystkich systemach operacyjnych.

Co zrobić, jeśli Apache się nie uruchamia?

Dwie najczęstsze przyczyny: port 80 jest zajęty przez inny program (Skype, IIS, inny serwer WWW) albo program antywirusowy blokuje aktywność sieciową. Rozwiązanie: proszę zmienić port Apache na 8080 w pliku httpd.conf lub zakończyć przeszkadzający proces za pomocą polecenia netstat -ano | findstr :80 w wierszu poleceń.

Czy można dodać więcej sekcji później?

Tak. W każdej chwili może Pan wejść do Page Buildera, dodać nowy wiersz, nadać mu Row ID i utworzyć pozycję menu z taką samą kotwicą. Konstruktor nie ogranicza liczby sekcji.

Co Pan uzyskał w godzinę

Działającą stronę jednostronicową na WordPressie. Z menu kotwicowym, płynnym przewijaniem, edytorem wizualnym i całkowicie na bezpłatnych narzędziach. Ten sam zestaw XAMPP + SiteOrigin sprawdza się również w projektach komercyjnych: proszę zbudować landing page lokalnie, przetestować go i przenieść na hosting produkcyjny za pomocą dowolnej wtyczki do migracji.

Proszę przyjąć zasadę: najpierw wersja lokalna, potem produkcja. Oszczędza to pieniądze na hostingu podczas eksperymentów i chroni nerwy, gdy coś pójdzie nie tak.

Jeśli materiał okazał się przydatny, proszę spróbować zbudować swoją pierwszą stronę jednostronicową jeszcze dziś. XAMPP i WordPress pobiera się w pięć minut, a konstruktor SiteOrigin bierze na siebie cały układ graficzny.