1) Dlaczego stworzyliśmy nową witrynę i nie mogliśmy po prostu „zmienić motywu”

Kiedy po raz pierwszy zidentyfikowaliśmy potrzebę zmiany, zadanie wydawało się proste: „Zmień górny blok i spraw, aby wezwanie do działania było skuteczniejsze”. Na pierwszy rzut oka może się to wydawać szybką poprawką, ale szybko zdaliśmy sobie sprawę, że to małe zadanie ujawniło znacznie większe, ukryte problemy ze strukturą i projektem witryny. Problemem nie był tylko jeden blok; to cała architektura witryny wymagała gruntownego remontu.

Nasza witryna internetowa powstawała przez długi czas, a różne strony dodawano przy użyciu różnych projektów i układów, bez żadnego ujednoliconego motywu lub szablonu. Każda strona miała niepowtarzalny projekt, co może brzmieć kreatywnie, ale prowadziło do poważnego problemu: niespójności. Gdybyśmy poszli dalej i stworzyli nowy projekt tylko dla górnego bloku, zachowując resztę witryny bez zmian, oznaczałoby to ręczną aktualizację tego bloku na ponad 700 stronach i postach. Co gorsza, ten ręczny proces musiałby być powtarzany za każdym razem, gdy chcielibyśmy wprowadzić przyszłe zmiany. Wyobraź sobie nieefektywność przeszukiwania setek stron, upewniając się, że każda z nich ma najnowsze aktualizacje. Szybko stało się jasne, że dalsza praca ze starą witryną nie będzie trwała.

Poza samą logistyką aktualizacji każdej strony musieliśmy wziąć pod uwagę ogólne doświadczenie użytkownika. Użytkownicy oczekują dziś płynnych, spójnych doświadczeń podczas odwiedzania witryny. Jeśli przewiną stronę w dół i zobaczą, że projekt jest niespójny – każdy blok używa innych stylów – tworzy to niespójne i nieprofesjonalne wrażenie. Co gorsza, gdy użytkownik przechodzi z jednej strony na drugą i zauważa, że układ i projekt są zupełnie inne, wzmacnia to poczucie nieporządku.

Niespójność wykraczała poza układ. Wiele obrazów na stronie było nieaktualnych, źle wystylizowanych, a nawet niewłaściwie wygenerowanych przez sieci neuronowe. Obrazy te nie były zgodne z nowoczesnymi standardami projektowania, a ich zastąpienie było kolejnym zniechęcającym zadaniem. Użycie złych obrazów odbijało się negatywnie na ogólnej jakości strony, pozostawiając użytkowników z negatywnym wrażeniem na temat oferowanego przez nas produktu lub usługi.

Nie było prostego sposobu na kompleksową aktualizację witryny za pomocą narzędzia takiego jak Elementor. Każda strona i blok zawierały własne style inline, co oznaczało, że nie można było wprowadzać zmian globalnie. Gdybyśmy chcieli zaktualizować styl witryny, musielibyśmy przejrzeć każdą stronę i ręcznie zaktualizować każdy blok, co byłoby czasochłonne i nieefektywne. Mając to na uwadze, stało się oczywiste, że naszym jedynym rozwiązaniem jest zbudowanie nowej strony internetowej od podstaw. Pozwoliłoby nam to na przesyłanie całej zawartości przy zachowaniu tych samych adresów URL, ale z nowym, spójnym i łatwym do aktualizacji projektem.

2) Dlaczego zdecydowaliśmy się nie używać Elementor

Elementor jest jednym z najpopularniejszych kreatorów stron dla WordPress. Na pierwszy rzut oka wydaje się, że jest to świetne narzędzie, które pozwala na szybkie i łatwe tworzenie stron. Jednak po intensywnej pracy z nim napotkaliśmy kilka ograniczeń, które skłoniły nas do odejścia od Elementor i zamiast tego wybrania witryny internetowej zbudowanej na zamówienie.

Elementor’s Ograniczenia i wyzwania:

1. Błędy i usterki: Chociaż Elementor oferuje wiele przydatnych funkcji, nie jest pozbawiony problemów technicznych. Na przykład, gdy kopiowaliśmy stronę i próbowaliśmy ją edytować, nowa strona często wyglądała inaczej niż oryginał, nawet przed wprowadzeniem jakichkolwiek zmian. Często występowały błędy w sposobie wyświetlania elementów, np. właściwość “maksymalna szerokość obrazu” nie działała poprawnie. Usterki te utrudniały zapewnienie spójnego stylu na wszystkich stronach.
2. Zbyt duża wolność twórcza, prowadząca do niespójności:Jednym z kluczowych argumentów sprzedażowych Elementor’ jest możliwość personalizacji wszystkiego. Jednakże taka elastyczność może być mieczem obosiecznym, zwłaszcza gdy nad witryną pracuje wielu redaktorów. Osobom nieprofesjonalnym łatwo jest nieumyślnie tworzyć strony o niespójnych projektach. Na przykład widzieliśmy przypadki, gdy redaktorzy używali różowego tekstu na różowych przyciskach lub dodawali latające pomarańczowe trójkąty w tle, co skutkowało zagraconym i zagmatwanym projektem. Bez rygorystycznego systemu projektowania utrzymanie spójnej tożsamości wizualnej stało się niemożliwe.
3. Ograniczone dostosowywanie do zaawansowanej funkcjonalności: Chociaż Elementor doskonale sprawdza się w podstawowym budowaniu stron z tekstem i obrazami, staje się to większym wyzwaniem, gdy trzeba dodać niestandardową funkcjonalność. Często ograniczaliśmy się do wbudowanych bloków, które trudno było dostosować do bardziej złożonych funkcji. W miarę jak nasze potrzeby wykraczały poza podstawowe układy, ograniczenia Elementor’ stawały się coraz bardziej widoczne.
4. Nadmuchany kod i problemy z wydajnością: Elementor’ Metoda budowania stron wprowadza nadmierne zagnieżdżanie elementów. Na przykład Elementor automatycznie generuje wiele
   kontenery w innych

   elementy, każdy z własnym zestawem stylów. Powoduje to rozdętą strukturę, która negatywnie wpływa na szybkość ładowania, wydajność strony, a ostatecznie na ranking SEO witryny. Gdy przeprowadziliśmy testy prędkości, wyniki były stale słabe, a główną przyczyną był ciężki kod wygenerowany przez Elementor.
5. Brak możliwości testowania A/B:W dzisiejszym cyfrowym środowisku testy A/B są niezbędne do optymalizacji doświadczeń użytkowników. Jednakże Elementor nie oferuje możliwości wyświetlania różnych wersji witryny różnym użytkownikom. Każdy widzi tę samą witrynę, co ogranicza naszą możliwość testowania i dostrajania elementów projektu, takich jak kolory, kształty przycisków i obrazy tła. Bez tej funkcjonalności nie moglibyśmy zoptymalizować witryny w oparciu o rzeczywiste zachowanie użytkownika.
6. Rozrost bazy danych: Być może jedną z najważniejszych wad Elementor jest sposób, w jaki obsługuje style i zawartość. Elementor przechowuje style, zagnieżdżone struktury i inne niepotrzebne znaczniki zmieszane z zawartością bazy danych. Prowadzi to do rozdętej bazy danych, która nie jest czyszczona nawet po wyłączeniu lub odinstalowaniu Elementor. W rezultacie przejście na nowy motyw lub framework nie rozwiązuje problemu – style te pozostają osadzone na stronach, nadal powodując problemy.

Mając na uwadze wszystkie te wyzwania, stało się jasne, że potrzebujemy solidniejszego rozwiązania. Podjęliśmy decyzję o budowie nowej, niezależnej strony internetowej bez Elementor, decydując się na bardziej zrównoważone i elastyczne podejście.

3) Jak utworzyć stronę w nowej witrynie

Budowa nowej witryny od podstaw dała nam możliwość ustanowienia czystego, usprawnionego procesu tworzenia stron. W nowym systemie tworzenie strony jest proste:

1. Zaloguj się do panelu administracyjnego WordPress i kliknij Strony -> Dodaj nową stronę .
2. Zobaczysz standardowy edytor WordPress, w którym możesz pisać lub wklejać tekst, dodawać linki i przesyłać obrazy.

Proces ten jest prosty, ale elastyczny. Zamiast polegać na skomplikowanym systemie bloków Elementor’, edytor treści w WordPressie jest znacznie czystszy, umożliwiając szybkie aktualizacje i łatwe dostosowywanie. Poniżej edytora znajdują się ustawienia dla Zaawansowane pola niestandardowe (ACF), które są już skonfigurowane tak, aby zachować spójność w całej witrynie.

ACF pozwala nam tworzyć elastyczne sekcje treści, z blokami takimi jak Treść 1…Treść 15 , gdzie można łatwo ustawić tytuł, tekst, obraz i etykiety przycisków dla każdej sekcji strony. Te bloki automatycznie zmieniają pozycjonowanie obrazów i tekstu, zapewniając, że układ pozostaje wizualnie angażujący bez konieczności ręcznych korekt.

W przypadku obrazów wdrożyliśmy system dopasowywania kolorów, który automatycznie stosuje gradient w głównych kolorach witryny. Dzięki temu wszystkie obrazy są zgodne z ogólną estetyką. W przypadku logotypów lub zrzutów ekranu, w których kolory muszą pozostać nienaruszone, istnieje opcja „zachowaj kolory”, która zastępuje gradient.

System ten upraszcza zarządzanie treścią, jednocześnie zapewniając spójność projektu na wszystkich stronach.

4) Jak utworzyć nowy post

Tworzenie postów w nowej witrynie odbywa się zgodnie z tą samą uproszczoną procedurą co tworzenie stron, z kilkoma kluczowymi różnicami:

• Posty mają adresy URL zawierające ciąg ../blog/.. , co odróżnia je od stron.
• Na pasku bocznym po prawej stronie automatycznie wyświetla się blok z trzema najnowszymi artykułami, co pomaga zachować dynamikę i atrakcyjność bloga.

Szablon dla wszystkich wpisów znajduje się w pliku template-parts/content/content-single.php , który obsługuje strukturę i układ każdego wpisu na blogu. Ten spójny szablon umożliwia łatwe aktualizacje i zapewnia, że wszystkie wpisy są zgodne z tymi samymi wytycznymi projektowymi.

5) Zaawansowane pola niestandardowe (ACF)

ACF był istotną częścią rozwoju naszej nowej witryny. Pozwala nam tworzyć pola niestandardowe, którymi można łatwo zarządzać za pomocą panelu administracyjnego WordPress. Pola takie jak content_1 są przywoływane w kodzie PHP, co pozwala nam dynamicznie pobierać poprawną treść dla każdej strony i wpisu.

Taka elastyczność jest niezbędna, abyśmy mogli sprawnie zarządzać witryną i ją aktualizować, pozostawiając jednocześnie miejsce na dostosowanie jej do potrzeb.

6) Testowanie A/B

Jedną z najważniejszych ulepszeń, jakie wprowadziliśmy w nowej witrynie, była implementacja testów A/B. Testy A/B pozwalają nam porównywać dwie wersje witryny, aby zobaczyć, która z nich lepiej sprawdza się u użytkowników. Może to obejmować testowanie różnych kolorów, kształtów przycisków, tła, a nawet układów.

Zaimplementowaliśmy tę funkcjonalność za pomocą parametrów GET w adresie URL. Na przykład można utworzyć dwie identyczne kampanie reklamowe, ale z różnymi adresami URL:

• https://www.conveythis.com/?param=1

• https://www.conveythis.com/?param=2

Gdy użytkownicy klikają te linki, parametr jest zapisywany w pliku cookie. W zależności od wartości parametru witryna będzie wyświetlać różne wersje strony, takie jak różne kolory przycisków lub obrazy tła. Pozwala nam to zbierać cenne dane na temat preferencji i zachowań użytkowników.

Wszystkie zdarzenia są rejestrowane w Plik .csv pliku, a także w bazie danych MySQL, co pozwala nam analizować dane i podejmować świadome decyzje dotyczące ulepszeń witryny.

7) Plik functions.php

8) Zarządzanie SEO i szybkością witryny

Podczas remontu witryny głównym celem była poprawa SEO i ogólnej wydajności witryny. Oryginalna witryna, zbudowana przy użyciu Elementor, miała problemy z powolnym czasem ładowania i nieoptymalnymi praktykami SEO z powodu rozdętego kodu i niezoptymalizowanych obrazów.

Ulepszanie SEO

Aby mieć pewność, że nasza nowa strona będzie przyjazna dla SEO, od samego początku wdrożyliśmy kilka sprawdzonych praktyk:

• Semantyczny HTML : Starannie ustrukturyzowaliśmy kod HTML witryny, prawidłowo używając znaczników nagłówka (
  ,
  , itd.), zapewniając, że wyszukiwarki mogą łatwo analizować i rozumieć hierarchię treści. Jest to szczególnie ważne zarówno dla rankingów SEO, jak i dostępności.
• Meta tagi i dane Open Graph : Wykorzystaliśmy wtyczkę Yoast SEO do obsługi meta tytułów, opisów i danych Open Graph do udostępniania w mediach społecznościowych. Korzystając z Yoast, upewniliśmy się, że każda strona i post mają zoptymalizowane metadane, co jest kluczowe dla widoczności w wyszukiwarkach i współczynników klikalności z platform mediów społecznościowych.
• Schema Markup : Używając pliku functions.php , dodaliśmy niestandardowe znaczniki schema dla danych strukturalnych, ulepszając sposób, w jaki wyszukiwarki wyświetlają nasze strony w wynikach wyszukiwania. Na przykład dodaliśmy schemat dla artykułów, studiów przypadków i produktów, pomagając wyszukiwarkom lepiej kategoryzować nasze treści.

funkcja add_schema_markup() {
  echo '
  {
    "@context": "http://schema.org",
    "@type": "Organizacja",
    "nazwa": "ConveyThis",
    "url": "https://www.conveythis.com",
„logo”: „https://www.conveythis.com/logo.png”,
"to samo co": [
"https://www.facebook.com/conveythis",
„https://twitter.com/conveythis”
]
}
';
}
dodaj_akcję( 'wp_head', 'add_schema_markup' );


Optymalizacja szybkości witryny

Wydajność jest krytycznym czynnikiem nie tylko dla doświadczenia użytkownika, ale także dla rankingów SEO. Podjęliśmy kilka kroków, aby poprawić szybkość witryny:

• Optymalizacja obrazu : Wykorzystaliśmy nowoczesne formaty obrazów, takie jak WebP , które oferują lepsze współczynniki kompresji niż tradycyjne formaty, takie jak PNG i JPEG. Wszystkie obrazy były wyświetlane w odpowiednim rozmiarze na podstawie rozdzielczości ekranu użytkownika, zapewniając szybkie czasy ładowania nawet na urządzeniach mobilnych.
• Lazy Loading : Wprowadzając lazy loading dla obrazów, zapewniliśmy, że początkowo ładowane były tylko obrazy widoczne na ekranie użytkownika. Dodatkowe obrazy ładowały się podczas przewijania przez użytkownika, co skracało początkowy czas ładowania strony.
• Bufor i minimalizacja: Używaliśmy WP Rocket do buforowania, minimalizacji i kompresji plików HTML, CSS i JavaScript . WP Rocket pomógł nam przyspieszyć czasy ładowania, zmniejszając całkowity rozmiar pliku i serwując statyczne, buforowane wersje stron dla powtarzających się odwiedzających.

9) Optymalizacja i czyszczenie bazy danych

Stara strona internetowa zgromadziła znaczną ilość “śmieciowych” danych z powodu rozrostu Elementor’s i nieefektywnej struktury bazy danych. Aby mieć pewność, że nowa witryna działa sprawnie, przeprowadziliśmy dokładne czyszczenie i optymalizację bazy danych.

• Usuwanie starych Elementor danych

Jak wspomniano wcześniej, nawet po dezaktywacji Elementor jego style i ustawienia były nadal osadzone w bazie danych. Użyliśmy niestandardowych zapytań, aby usunąć nadmiar danych i oczyścić bazę danych. Ponadto usunęliśmy wszelkie nieużywane pliki multimedialne, poprawki postów i wygasłe stany przejściowe, które nagromadziły się z biegiem czasu.

• Indeksowanie baz danych

Zoptymalizowaliśmy również bazę danych, dodając indeksy do często wyszukiwanych kolumn, co zapewnia szybsze i bardziej wydajne zapytania do bazy danych. Na przykład dodanie indeksu do postdatować Kolumna przyspieszyła zapytania dotyczące ostatnich wpisów, co poprawiło wydajność działania naszych stron blogowych.

Wniosek

Decyzja o stworzeniu nowej witryny internetowej od podstaw wynikała z ograniczeń i nieefektywności starej witryny. Sama zmiana motywu nie była realną opcją ze względu na niespójności projektowe, rozdęte style i problemy z wydajnością spowodowane przez Elementor. Tworząc nową witrynę z niestandardowym rozwojem i zaawansowanymi polami niestandardowymi, osiągnęliśmy bardziej wydajną, spójną i profesjonalną witrynę internetową, która poprawia komfort użytkowania, umożliwiając jednocześnie usprawnione aktualizacje i funkcjonalność testowania A/B. Ta nowa witryna stanowi solidną podstawę dla przyszłego rozwoju i ulepszeń.