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 CMS to WordPress, Joomla, Drupal, Contao i TYPO3, przy czym WordPress napędza obecnie około 43% wszystkich stron internetowych na świecie, co czyniąc go zdecydowanie najczęściej używanym systemem.

Sam zaczynałem od Joomli, 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 TYPO3, które jednak ze względu na TypoScript wymagają więcej nauki 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 około 4–6 lat, zanim zostaną gruntownie przeprojektowane.

Hosting w all-inkl.com i podobnych

WordPress zasadniczo nie wymaga wiele. PHP i MySQL/MariaDB wystarczą, dzięki czemu 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 w pełni zadowolony.

Kto potrzebuje dodatkowo MongoDB, Node.js lub Express, powinien wynająć własny serwer/VPS lub skorzystać z usług 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-endowa).
• 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 nowoczesnej, znacznie lżejszej podstawie. 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 przeznaczony 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.
• Definiowanie strony startowej, 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.

Użycie Matomo w subdomenie

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ć wymogi 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 pomocami on-page
• Happy Files – zarządzanie plikami z folderami dla mediów, postó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 zamiast tego 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:

• Ustal 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 możliwości kontaktu.
• Uczyń numery telefonów klikalnymi za pomocą tel:, a adresy e-mail za pomocą mailto:.
• Utwórz stronę startową, a następnie ustaw ją jako stronę główną w „Ustawienia > Czytanie”.

Dzięki tej strukturze klienci otrzymują jasne wytyczne do budowy swojej strony internetowej 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

Dla nas ważne jest, 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 dostępne są przestarzałe lub brak 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 przenoszeniem.

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 dla 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 przesył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 testowa z optymalizacją wydajności

Gotowa strona to zawsze przeżycie – ale teraz musi zostać gruntownie 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. Generowana przez RankMath lub WordPress mapa strony jest tam umieszczana, aby Google mogło 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 poprawione 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 i tworzone nowe landing page. 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, Filmy, 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.