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 zmian nie można było wprowadzać globalnie. Gdybyśmy chcieli zaktualizować styl witryny, musielibyśmy przejść przez 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 było zbudowanie nowej witryny od podstaw. Pozwoliłoby nam to przenieść całą zawartość, zachowując te same adresy URL, ale z nowym, spójnym i łatwym do aktualizacji projektem.

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

Elementor jest jednym z najpopularniejszych kreatorów stron dla WordPressa. Na pierwszy rzut oka wydaje się świetnym narzędziem, które umożliwia 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 Elementora i wybrania zamiast tego strony internetowej zbudowanej na zamówienie.

Ograniczenia i wyzwania Elementora:

1. Błędy i usterki : Elementor oferuje wiele przydatnych funkcji, ale 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 pojawiały się błędy w sposobie wyświetlania elementów, takie jak nieprawidłowo działająca właściwość „maksymalnej szerokości obrazu”. Te usterki utrudniały zapewnienie spójnego stylu na wszystkich stronach.
2. Zbyt duża swoboda twórcza prowadząca do niespójności : Jednym z kluczowych punktów sprzedaży Elementora jest możliwość dostosowania wszystkiego. Jednak ta elastyczność może być mieczem obosiecznym, szczególnie gdy nad witryną pracuje wielu redaktorów. Łatwo jest osobom nieprofesjonalnym 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 mylącym projektem. Bez ścisłego systemu projektowania utrzymanie spójnej tożsamości wizualnej stało się niemożliwe.
3. Ograniczone dostosowywanie do zaawansowanych funkcji : Elementor wyróżnia się w podstawowym budowaniu stron z tekstem i obrazami, ale staje się trudniejszy, gdy trzeba dodać niestandardowe funkcje. Często byliśmy ograniczeni 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 Elementora stawały się coraz bardziej widoczne.
4. Rozdęty kod i problemy z wydajnością : Metoda budowania stron Elementora wprowadza nadmierne zagnieżdżanie elementów. Na przykład Elementor automatycznie generuje wiele
   kontenery w innych

   elementów, z których każdy ma własny zestaw stylów. W rezultacie powstaje rozdęta struktura, która negatywnie wpływa na szybkość ładowania, wydajność strony i ostatecznie na pozycję witryny w rankingu SEO. Gdy przeprowadziliśmy testy szybkości, wyniki były stale słabe, a w dużej mierze winny był ciężki kod generowany przez Elementor.
5. Brak możliwości testowania A/B : W dzisiejszym cyfrowym krajobrazie testowanie A/B jest niezbędne do optymalizacji doświadczenia użytkownika. Elementor nie oferuje jednak możliwości wyświetlania różnych wersji witryny różnym użytkownikom. Każdy widzi tę samą witrynę, co ogranicza nasze możliwości 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 na podstawie rzeczywistego zachowania użytkownika.
6. Rozrost bazy danych : Być może jedną z najistotniejszych wad Elementora jest sposób, w jaki obsługuje style i zawartość. Elementor przechowuje style, zagnieżdżone struktury i inne niepotrzebne tagi wymieszane z zawartością w bazie danych. Prowadzi to do rozdętej bazy danych, która nie jest czyszczona nawet po wyłączeniu lub odinstalowaniu Elementora. W rezultacie przejście na nowy motyw lub framework nie rozwiązuje problemu – te style pozostają osadzone na stronach, nadal powodując problemy.

Mając na uwadze wszystkie te wyzwania, stało się jasne, że potrzebujemy bardziej solidnego rozwiązania. Podjęliśmy decyzję o zbudowaniu nowej, niezależnej witryny bez Elementora, wybierając 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.

Ten proces jest prosty, ale elastyczny. Zamiast polegać na skomplikowanym systemie bloków Elementora, edytor treści w WordPressie jest znacznie czystszy, umożliwiając szybkie aktualizacje i łatwą personalizację. Poniżej edytora znajdują się ustawienia dla Advanced Custom Fields (ACF), które są już skonfigurowane w celu zachowania spójności 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 wPlik .csvpliku, 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

Głównym celem podczas przebudowy witryny była poprawa SEO i ogólnej wydajności witryny. Oryginalna witryna, zbudowana przy użyciu Elementora, miała problemy z wolnym 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",
"sameAs": [
"https://www.facebook.com/conveythis",
"https://twitter.com/conveythis"
]
}
';
}
add_action( '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.
• Caching i Minifikacja : Użyliśmy WP Rocket do cache'owania, minifikacji i kompresji plików HTML, CSS i JavaScript. WP Rocket pomógł nam osiągnąć szybsze czasy ładowania poprzez zmniejszenie całkowitego rozmiaru pliku i serwowanie statycznych wersji stron w pamięci podręcznej dla powtarzających się użytkowników.

9) Optymalizacja i czyszczenie bazy danych

Stara strona internetowa zgromadziła znaczną ilość „śmieciowych” danych z powodu rozdęcia Elementora i nieefektywnej struktury bazy danych. Aby zapewnić płynne działanie nowej strony, przeprowadziliśmy dokładne czyszczenie i optymalizację bazy danych.

• Usuwanie starych danych Elementora

Jak wspomniano wcześniej, nawet po dezaktywacji Elementora jego style i ustawienia były nadal osadzone w bazie danych. Użyliśmy niestandardowych zapytań, aby usunąć te nadmiarowe dane i oczyścić bazę danych. Ponadto usunęliśmy wszystkie nieużywane pliki multimedialne, poprawki postów i wygasłe transjenty, które nagromadziły się z czasem.

• 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 dopostdatowaćKolumna przyspieszyła zapytania dotyczące ostatnich wpisów, co poprawiło wydajność działania naszych stron blogowych.

Wniosek

Decyzja o zbudowaniu nowej witryny od podstaw była spowodowana ograniczeniami i nieefektywnością starej witryny. Prosta zmiana motywu nie była opcją wykonalną 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 niestandardowymi polami, uzyskaliśmy bardziej wydajną, spójną i profesjonalną witrynę, która poprawia wrażenia użytkownika, umożliwiając jednocześnie usprawnione aktualizacje i funkcjonalność testów A/B. Ta nowa witryna zapewnia solidną podstawę do przyszłego wzrostu i ulepszeń.