Tworzenie stron CMS z WordPress i DIVI, programowanie wtyczek

Wprowadzenie do WordPressa

Systemy zarządzania treścią (CMS) znacznie ułatwiają tworzenie i zarządzanie stronami internetowymi. Bez znajomości programowania firmy i osoby prywatne mogą zarządzać treścią, dostosowywać wygląd i tworzyć interaktywne strony internetowe. Najbardziej znane systemy CMS to WordPress, Joomla, Drupal, Contao i TYPO3, przy czym WordPress napędza obecnie około 43% wszystkich stron internetowych na świecie, co czyni go zdecydowanie najczęściej używanym systemem.

Sam zaczynałem od Joomla, potem używałem Contao i z dobrych powodów przeszedłem na WordPressa. Wśród moich klientów w sektorze profesjonalnym nadal często widuję strony oparte na TYPO3, które jednak ze względu na TypoScript wymagają większego zaangażowania i dlatego nie oferują szybkiego startu dla wszystkich użytkowników, a zwłaszcza dla programistów stron internetowych. Trudniej jest również znaleźć kogoś, kto zajmie się rozszerzeniami lub konserwacją.

Dopóki systemy działają stabilnie i spełniają wszystkie wymagania techniczne (aktualna wersja PHP, aktualizacje bezpieczeństwa, RODO, wydajność), nie ma powodu do całkowitego przeprojektowania. Generalnie strony internetowe działają zazwyczaj przez 4–6 lat, zanim zostaną gruntownie przeprojektowane.

Hosting w all-inkl.com i podobnych

WordPress zasadniczo nie wymaga wiele. PHP i MySQL/MariaDB wystarczą, więc strony WordPress działają u praktycznie wszystkich dostawców. Niemniej jednak, obecnie oczekuje się czegoś więcej – na przykład:

• domena deweloperska/stagingowa
• wygodne zarządzanie pocztą e-mail
• certyfikaty LetsEncrypt dla HTTPS z automatycznym odnawianiem
• dostęp FTP/SFTP lub menedżer plików webowych
• automatyczne kopie zapasowe i łatwe przywracanie
• szybkie, bezpłatne wsparcie
• wystarczająca ilość pamięci RAM i aktualne wersje PHP (np. 8.1/8.2+)
• możliwość konfiguracji własnych ustawień DNS
• szybka migracja i udostępnianie kodów autoryzacyjnych na żądanie
• prosty asystent instalacji dla WordPressa i innych

Preferowanym dostawcą od wielu lat jest all-inkl.com (link afiliacyjny), który przekonuje bardzo uczciwymi cenami pakietów i doskonałym wsparciem. Kto chce hostować jedynie systemy CMS, będzie z niego bardzo zadowolony.

Kto potrzebuje dodatkowo MongoDB, Node.js lub Express, powinien wynająć własny serwer/VPS lub skorzystać z dostawców, którzy oferują te funkcje. 99% wszystkich klasycznych stron internetowych nadal tego nie potrzebuje. Jednak dzięki narzędziom wspieranym przez AI, coraz częściej powstają indywidualne aplikacje – takie jak aplikacje webowe, API czy automatyzacje. nuonu.com to również taka aplikacja, która rozszerza WordPressa o własne wtyczki i oferuje bardzo indywidualne funkcje.

Dlaczego WordPress i DIVI?

WordPress oferuje przyjazny dla użytkownika interfejs, ogromny wybór rozszerzeń (wtyczek) i motywów, a także bardzo silną społeczność. Niezależnie od tego, czy jest to blog, strona firmowa, landing page czy sklep internetowy – z WordPress można zrealizować niemal wszystkie rodzaje stron internetowych. Instalacja i podstawowa konfiguracja są szybkie, a dzięki kreatorom stron, takim jak DIVI, nawet laicy mogą tworzyć profesjonalne układy.

Zalety DIVI jako kreatora stron

DIVI wyróżnia się spośród wielu innych kreatorów stron tym, że może być używany jako kompletny motyw + kreator i nie wymaga dodatkowego motywu. Oznacza to:

• Kompletny projekt z jednego źródła – brak dodatkowych zależności od motywu.
• Elastyczne opcje projektowania z wizualnym edytorem typu „przeciągnij i upuść”.
• Możliwości edycji po stronie klienta bezpośrednio na stronie (edycja front-end).
• Doskonałe dostosowanie responsywne dla komputerów stacjonarnych, tabletów i urządzeń mobilnych.
• Gotowe układy i moduły, które znacznie przyspieszają tworzenie nowych stron.

Nowość: DIVI 5 – Wydajność i bezpieczeństwo na przyszłość

DIVI 5 to więcej niż zwykła aktualizacja: kreator został całkowicie przebudowany wewnętrznie i oparty na nowoczesnych, znacznie lżejszych fundamentach. Zapewnia to zauważalnie szybsze czasy ładowania, mniej zbędnego kodu i lepszą bazę dla przyszłych funkcji.

• Nowy, lekki system rdzeniowy – kreator został opracowany od podstaw i działa bardziej oszczędnie.
• Szybsze czasy ładowania i responsywny edytor – zwłaszcza złożone strony z wieloma modułami korzystają z nowej architektury.
• Mniej shortcode'ów, czystszy kod – ułatwia to długoterminową konserwację, migrację i pozytywnie wpływa na SEO.
• Nowe funkcje projektowe, takie jak zmienne projektowe, rozszerzone jednostki, zagnieżdżone wiersze i indywidualnie konfigurowalne punkty przerwania dla jeszcze precyzyjniejszych układów responsywnych.
• Lepsza obsługa dużych projektów – DIVI 5 jest przeznaczone do obszernych stron internetowych z wieloma szablonami, globalnymi elementami i układami bibliotecznymi.

Aktualny stan u nas: Strona nuonu.com działa już na wersji beta DIVI 5. Wszystkie projekty klientów, które są obecnie realizowane z DIVI 4, mogą być stopniowo i kontrolowanie migrowane po ostatecznym wydaniu DIVI 5 – najlepiej najpierw w środowisku stagingowym. Dzięki temu istniejące strony pozostaną stabilne, ale będą mogły korzystać z zalet wydajności i komfortu nowej wersji, gdy tylko będzie to sensowne i bezpieczne.

Ogólna struktura nowoczesnych stron internetowych

Dzisiejsze strony internetowe są jasno ustrukturyzowane, efektowne i przede wszystkim muszą być responsywne. Kluczowe są następujące aspekty:

• Kolory i czcionki powinny być spójne z identyfikacją wizualną firmy.
• Logo i odstępy muszą być harmonijnie zintegrowane z układem.
• Indywidualny nagłówek i menu dla intuicyjnej nawigacji.
• Ustrukturyzowana stopka, zawierająca linki prawne, profile mediów społecznościowych i możliwości kontaktu.
• Zdefiniowanie strony głównej, aby strona główna była ustawiona w „Ustawienia > Czytanie”.

Wymogi prawne: Impressum, ochrona danych i zgoda na pliki cookie

Każda strona internetowa wymaga stopki redakcyjnej (Impressum) i polityki prywatności. Ponadto, niezbędne jest działające narzędzie do zarządzania zgodą na pliki cookie, aby spełnić wymogi RODO i TTDSG. Przykładem jest Reel Cookie Consent, które można testować i rozszerzać o własne skrypty, aby np. zintegrować Matomo zgodnie z RODO.

Matomo w użyciu subdomeny

Matomo może być uruchamiane zarówno na domenie głównej, jak i na subdomenie. Zalety korzystania z subdomeny to:

• Lepsza kontrola danych i bezpieczeństwo – dane pozostają w całości na własnym serwerze.
• Konfiguracja przyjazna dla prywatności, ponieważ dane nie są przekazywane stronom trzecim.
• Własne opcje rezygnacji dla użytkowników, aby spełnić wymagania RODO.

Obowiązkowe wtyczki dla strony WordPress-owej

Dla profesjonalnej i funkcjonalnej strony WordPress, niektóre wtyczki są z naszej perspektywy niemal niezbędne (lista może się oczywiście różnić w zależności od projektu):

• RankMath – wtyczka SEO z obsługą schematów, przekierowaniami i wieloma narzędziami on-page
• Happy Files – zarządzanie plikami z folderami dla mediów, wpisów, stron i wielu innych
• Reel Cookie Consent – zarządzanie plikami cookie (lub alternatywy takie jak Real Cookie Banner, Borlabs Cookie lub Complianz)
• DIVI Supreme – rozszerzone moduły i efekty dla DIVI
• WP Armour – ochrona przed spamem w formularzach
• AIOS (All in One Security) – kompleksowa wtyczka bezpieczeństwa do wzmacniania logowania, systemu plików i zapory sieciowej

Konfiguracja bezpieczeństwa w WordPressie

Po instalacji należy natychmiast zoptymalizować ustawienia bezpieczeństwa:

• Aktywuj AIOS i WP Armour dla ochrony przed atakami brute-force, spamem i prostymi atakami botów.
• Zmień domyślną nazwę użytkownika administratora, aby utrudnić ukierunkowane ataki.
• Uwierzytelnianie dwuskładnikowe dla większego bezpieczeństwa (opcjonalne, ale zalecane).
• Regularne kopie zapasowe (np. z Duplicator, UpdraftPlus lub BackWPup) i testowanie przywracania.

Dostosowanie ustawień mediów w WordPressie

Domyślnie WordPress przechowuje media w folderach podzielonych na miesiące. Jest to przydatne dla blogów, ale często niepraktyczne dla stron firmowych. Dlatego zaleca się dezaktywowanie automatycznej struktury folderów w „Ustawienia > Media” i organizowanie biblioteki mediów za pomocą narzędzia takiego jak Happy Files.

Faza projektowania po podstawowej instalacji

Po podstawowej instalacji rozpoczyna się właściwe projektowanie:

• Ustaw kolory, czcionki i odstępy – globalnie w DIVI jako podstawa projektu (lub w DIVI 5 dodatkowo za pomocą zmiennych projektowych).
• Stwórz indywidualny nagłówek i menu, aby nawigacja była intuicyjna.
• Dostosuj stopkę, która zawiera Impressum, politykę prywatności, linki do mediów społecznościowych i dane kontaktowe.
• Uczyń numery telefonów klikalnymi za pomocą tel:, a adresy e-mail za pomocą mailto:.
• Utwórz stronę główną, a następnie ustaw ją jako stronę główną w „Ustawienia > Czytanie”.

Dzięki tej strukturze klienci otrzymują jasne wytyczne, jak zbudować swoją stronę internetową w sposób nowoczesny, zgodny z prawem i funkcjonalny. W razie potrzeby dalszych dostosowań, wymienione wtyczki i narzędzia mogą być indywidualnie konfigurowane.

Wspólny proces rozwoju

Ważne jest dla nas, aby klient – jeśli sobie tego życzy – był zaangażowany w rozwój jak najwcześniej. Dotyczy to decyzji i akceptacji wyglądu, ale także tworzenia stron, menu, zarządzania danymi SEO, przesyłania mediów i wielu innych. Im więcej klient może zrobić samodzielnie, tym lepiej – i tym łatwiejsza będzie późniejsza samodzielna konserwacja.

Logo i Favicon

Często brakuje aktualnych lub własnych projektów. W takim przypadku tworzymy również loga i favikony jako pliki wektorowe i przezroczyste PNG. Dzięki Midjourney i Illustratorowi możemy na życzenie dostarczyć wybór logo 2D i 3D. Zajmujemy się również wyszukiwaniem nazw, w tym sprawdzaniem i rejestracją wolnych domen lub ich przeniesieniem.

Linki do mediów społecznościowych

DIVI zawiera własny moduł z gotowymi, prawnie bezpiecznymi logo wielu dostawców mediów społecznościowych. Globalne linki można również przechowywać w panelu administracyjnym pod DIVI > Opcje motywu. Nagłówek z logo, menu i niestandardową stopką widać również na tej stronie.

Tworzenie treści SEO

Od teraz zaczynamy tworzyć stronę po stronie – od razu należy uwzględnić RankMath. Tytuł, opis, og:image, h1, h2, h3 … Nagłówki i teksty przyjazne SEO i łatwe do czytania z sensownymi wyróżnieniami oraz znaczące, dobrze zoptymalizowane materiały graficzne. SEO first oznacza: treść jest dostosowana nie tylko dla odwiedzających, ale także dla wyszukiwarek i mediów społecznościowych. Co należy wziąć pod uwagę i jakie narzędzia są do tego potrzebne, znajdziesz w przewodniku naszej Strategii SEO.

Finalizacja wszystkich treści i danych SEO

Tworzenie może trwać różnie długo w zależności od strony. Niektóre strony wymagają dodatkowych konfiguracji, takich jak formularze i ich bezpieczne wysyłanie przez SSL lub specjalne ustawienia śledzenia/zgody. Średnio na jedną stronę należy liczyć około godziny lub więcej. Dopiero gdy wszystkie strony są gotowe i ostatni link został przetestowany, strona jest gotowa do testu na żywo.

Faza testów z optymalizacją wydajności

Gotowa strona to zawsze przeżycie – ale teraz musi zostać dokładnie przetestowana. Sprawdzamy:

• wszystkie linki wewnętrzne i zewnętrzne,
• wszystkie rekomendacje RankMath,
• wyświetlanie w sieciach społecznościowych (np. za pomocą debuggera Facebooka / debuggerów URL),
• czasy ładowania za pomocą testów prędkości (np. PageSpeed Insights, GTmetrix, WebPageTest).

Dopiero gdy wszystkie błędy zostaną usunięte, a strona przekona w testach wydajności, zostanie ostatecznie uruchomiona na żywo.

Generowanie mapy strony i rejestracja w Google Search Console

Ostatnim etapem tworzenia jest rejestracja w Google Search Console. Mapa strony wygenerowana przez RankMath lub WordPress jest tam umieszczana, aby Google mógł strukturalnie indeksować wszystkie istotne treści.

Krótko- i długoterminowy monitoring

Po kilku dniach strona powinna pojawić się w wynikach wyszukiwania. Za pomocą site:domain.de lub bezpośrednio w Google Search Console sprawdzamy, czy wszystkie ważne treści zostały zaindeksowane. Najpóźniej teraz powinny zostać zauważone i skorygowane ewentualne błędy.

Od teraz możemy również regularnie odwiedzać naszą subdomenę Matomo i na bieżąco oceniać sukces strony. W zależności od zainteresowania odwiedzających, treści mogą być rozszerzane, słowa kluczowe doprecyzowywane, a nowe landing page'e tworzone. Dzięki temu strona internetowa nie pozostaje statyczna, lecz rozwija się wraz z celami firmy.

Wpis w Google Moja Firma

Kto zajmuje się tworzeniem i optymalizacją stron internetowych, powinien również zwrócić uwagę na Google Moja Firma, Mapy, Obrazy, Wideo, Wiadomości itp. Jesteśmy usługodawcami i odpowiadamy również za to, jakie dane widzi odwiedzający. Często to właśnie te dane sprawiają, że odwiedzający w ogóle zwraca uwagę na stronę internetową lub decyduje się na telefon.