WPBeginner v6 – Za kulisami naszego nowego projektu witryny

Jeśli przeszedłeś na WPBeginner w ciągu ostatnich kilku tygodni, to prawdopodobnie zauważyłeś, że otrzymaliśmy nowy wygląd witryny internetowej. Chociaż ma on wiele podobieństw do poprzedniego, wiele zmieniło się za kulisami.

Jak obiecałem w biuletynie, chcę podzielić się procesem myślowym stojącym za naszym przeprojektowaniem, czego się nauczyliśmy, co nowego pojawiło się na witrynie, a co najważniejsze, jak możesz wykorzystać niektóre z naszych wniosków, aby ulepszyć twoją witrynę internetową.

Trochę tła

Założyłem WPBeginner w 2009 roku i jak większość nowych twórców, zmieniałem motyw naszej witryny internetowej cztery razy w ciągu pierwszych 3 lat.

W miarę rozwoju mojej firmy zdałem sobie sprawę, że przeprojektowywanie witryn internetowych zajmuje dużo czasu i zasobów, które można by lepiej wykorzystać na realizację naszej rdzennej misji:

Postanowiłem więc skupić się na naszej rdzennej misji, dzięki czemu nasz biznes bardzo się rozwinął.

Ostatni redesign WPBeginner został uruchomiony w 2016 roku i od tego czasu przeszliśmy długą drogę.

Oto, co wydarzyło się w ciągu ostatnich 5 lat:

• Stworzyliśmy ponad tysiąc darmowych poradników WordPress na blogu WPBeginner i utworzyliśmy setki nowych filmów instruktażowych na naszym kanale YouTube.
• Uruchomiliśmy naszą społeczność WPBeginner Engage na Facebooku, która jest obecnie największą grupą WordPress na Facebooku z ponad 80 000 członków (dołączenie jest bezpłatne).
• Uruchomiliśmy fundusz WPBeginner Growth, aby inwestować w niektóre z naszych ulubionych wtyczek WordPress, w tym MemberPress, Pretty Links, Formidable Forms, Uncanny Automator i 6 innych.
• Uruchomiliśmy dwie nowe wtyczki WordPress, TrustPulse, wtyczkę WordPress do weryfikacji społecznej, oraz RafflePress, potężną wtyczkę WordPress do rozdań i konkursów.
• Nabyliśmy pięć wtyczek do rozwoju WordPressa, w tym słynne AIOSEO (wtyczka All in One SEO dla WordPressa), SeedProd (kreator witryn WordPress typu „przeciągnij i upuść”), Smash Balloon (wtyczka #1 do kanałów społecznościowych), PushEngage (wtyczka do powiadomień push na witrynę internetową) i AffiliateWP (wtyczka do zarządzania afiliacją dla WordPressa).
• Nabyliśmy również pięć wtyczek platformy i infrastruktury WordPress, w tym słynną wtyczkę WP Mail SMTP (do poprawki dostarczalności e-maili), SearchWP (potężną wtyczkę wyszukiwania WordPress), Easy Digital Downloads (popularną wtyczkę e-handlu do sprzedaży produktów cyfrowych), WP Simple Pay (łatwą wtyczkę do akceptowania płatności kartą kredytową) i Sugar Calendar (prostą wtyczkę kalendarza wydarzeń dla WordPress).

Łącznie nasze wtyczki są obecnie używane przez ponad 19 milionów witryn internetowych, a 4 z naszych wtyczek znajdują się w 20 najlepszych wtyczkach WordPress wszechczasów.

Chociaż wszystkie te osiągnięcia są wspaniałe, mamy nowy zestaw wyzwań, którymi należy się zająć, abyśmy mogli nadal ulepszać i służyć naszej misji.

To prowadzi mnie do WPBeginner v6.

Projektowanie skoncentrowane na odkrywaniu treści

WPBeginner zaczynał jako prosty blog z poradnikami, ale tak naprawdę stał się Wikipedią dla WordPressa.

Nasi użytkownicy wielokrotnie mówili nam, że kiedy chcą znaleźć odpowiedź na swoje problemy z WordPressem, po prostu wpisują słowo kluczowe w Google i dodają WPBeginner na końcu, aby znaleźć najlepsze rozwiązanie.

Aby pomóc naszym czytelnikom w szybkim znalezieniu odpowiedzi na pytania dotyczące WordPressa, na naszej nowej stronie głównej skupiliśmy się na funkcji wyszukiwania.

Niezależnie od tego, czy jesteś powracającym gościem, który przeszukuje naszą bibliotekę treści, czy nowym czytelnikiem, który dopiero zaczyna przygodę z WordPressem, strona główna WPBeginner ułatwia teraz znalezienie tego, czego szukasz.

Podobny widżet wyszukiwania można również powiadomić na naszym panelu bocznym na wszystkich stronach z pojedynczymi wpisami, a także w nagłówku witryny internetowej po kliknięciu ikonki wyszukiwania.

Jednym z powodów, dla których WPBeginner stał się największą witryną z zasobami WordPress dla nietechnicznych użytkowników, jest to, że wyjaśniamy złożone tematy WordPress w prostym języku angielskim, krok po kroku.

W nowym utworze dodaliśmy funkcję wyszukiwania na żywo do naszej sekcji glosariusza WordPress, dzięki czemu możesz łatwo zapoznać się z popularnym żargonem WordPress. Jest to w zasadzie słownik taksonomii WordPress.

Jako użytkownik WPBeginner otrzymujesz wyłączny dostęp do najlepszych zniżek WordPress na popularne wtyczki, motywy premium, hosting i inne narzędzia marketingowe.

Nasz zespół naprawdę wykonał świetną robotę, negocjując dla ciebie najlepsze oferty, a ta sekcja znacznie się rozrosła i zawiera ponad 100 kuponów i ofert.

Ze względu na popularne prośby użytkowników, dodaliśmy również wyszukiwanie na żywo w naszej sekcji Oferty, dzięki czemu możesz szybko znaleźć najlepszą ofertę na twoje ulubione produkty WordPress.

Wkraczając w 2022 r., dużym priorytetem jest dla nas odkrywczość treści.

Pomaga nam to zapewnić najlepsze wrażenia użytkownika, wydłuża czas spędzany na witrynie, zwiększa liczbę odsłon i zmniejsza ogólny współczynnik odrzuceń.

Uważam, że w 2022 roku optymalizacja doświadczeń użytkowników (UXO) będzie odgrywać kluczową rolę w SEO.

Jeśli chcesz pokonać swoją konkurencję i uzyskać przewagę konkurencyjną, zdecydowanie zalecam zwrócenie uwagi na UXO.

W tym artykule podzielę się wskazówkami, w jaki sposób możesz wdrożyć podobne funkcje na swojej witrynie, tak jak zrobiliśmy to w naszym nowym motywie.

Jak usprawnić wyszukiwanie w WordPress

Domyślna funkcja wyszukiwania WordPressa nie jest zbyt rozbudowana, więc jeśli chcesz dostosować algorytm rankingu i kontrolować to, co pojawia się przy każdym wyszukiwaniu, polecam skorzystanie z wtyczki SearchWP.

Alternatywnie, można również skorzystać z konfiguratora Google, który wykorzystuje algorytm Google, ale minusem jest to, że Google będzie wyświetlać reklamy na twoich stronach wyszukiwania, co nie wygląda zbyt dobrze.

Jeśli chcesz dodać wyszukiwanie na żywo na twojej witrynie, tak jak zrobiliśmy to w sekcji Oferty lub Słowniczek, postępuj zgodnie z tym poradnikiem, jak dodać wyszukiwanie na żywo AJAX w WordPress.

Inne poradniki WordPress dotyczące wyszukiwania, które mogą okazać się pomocne, to jak utworzyć własny formularz wyszukiwania WordPress i jak dodać pasek wyszukiwania w menu WordPress.

Nowe Mega Menu WordPress

Podążając za motywem odkrywania treści, zaktualizowaliśmy nasze stare rozwijane menu WordPress w nowe wielokolumnowe Mega Menu.

Dzięki temu nasi nowi użytkownicy mogą szybko i łatwo znaleźć nasze najlepsze treści.

Pozwala nam również lepiej wyróżnić nasze nowe produkty, bezpłatne narzędzia biznesowe, które stworzyliśmy i nie tylko.

Jak dodać Mega Menu w WordPress

Chociaż zbudowaliśmy własne rozwiązanie dla WPBeginner, możesz skorzystać z tego poradnika, jak dodać mega menu w WordPress, aby lepiej wyróżnić twoje najlepsze strony.

Edytor bloków WordPress (w końcu)

W 2019 roku WordPress wprowadził super potężny edytor bloków (znany również jako Gutenberg) do tworzenia treści.

Natychmiast zacząłem używać go na moim osobistym blogu, ale ponieważ WPBeginner korzystał ze starszego motywu z wieloma konfiguratorami funkcji, przejście nie było tak łatwe.

Tak więc przez ostatnie dwa lata utknęliśmy w korzystaniu z klasycznego edytora na witrynie WPBeginner, podczas gdy wszystkie nasze nowsze witryny internetowe otrzymały najnowsze i najlepsze funkcje edytora bloków WordPress.

Wreszcie, dzięki naszemu nowemu motywowi, możemy teraz korzystać ze wszystkich niesamowitych funkcji edytora bloków WordPress.

Na przykład, teraz mogę dodać naprawdę fajny blok „Did You Know” bez pisania jakiegokolwiek kodu:

Całkowicie przeprojektowaliśmy również kilka naszych stron docelowych przy użyciu edytora bloków WordPress.

Na przykład, sprawdź naszą nową stronę docelową darmowej konfiguracji bloga WordPress.

Przeprojektowaliśmy również nasze bezpłatne narzędzia biznesowe za pomocą edytora bloków, aby wyróżnić niektóre z ostatnio utworzonych bezpłatnych narzędzi.

Nadal będziemy używać SeedProd do tworzenia całkowicie własnych stron docelowych, gdy zajdzie taka potrzeba, ponieważ jest to odpowiedni kreator stron WordPress typu „przeciągnij i upuść„.

Chociaż fajnie było nauczyć się, jak używać Gutenberga do tworzenia własnych stron docelowych, nadal wymaga to DUŻO kodowania do konfiguracji, zanim zespoły marketingowe będą mogły stworzyć niestandardową stronę docelową.

Natomiast w przypadku korzystania z wtyczki do tworzenia stron, zespoły marketingowe mogą szybko tworzyć własne strony docelowe, układy lejków itp. bez pomocy zespołu programistów.

Zespół rdzeni WordPressa ciężko pracuje nad funkcjami pełnej edycji witryny, ale wciąż wymaga wiele pracy, zanim będzie mógł konkurować z potężnymi funkcjami, które można uzyskać za pomocą kreatorów stron, takich jak SeedProd, Divi lub Beaver Builder.

Mając to na uwadze, edytor bloków jest całkiem niesamowity i istnieje wiele wtyczek bloków WordPress, których możesz użyć do tworzenia fajnych elementów projektu, aby wzbogacić twoją treść.

Oto kolejny fajny blok, który nasz nowy motyw ma do podświetlania wyróżnionych wtyczek:

SeedProd to najbardziej przyjazny dla początkujących kreator stron typu „przeciągnij i upuść” dla WordPress. Zawiera ponad 150 gotowych szablonów, a funkcja tworzenia motywów umożliwia tworzenie całkowicie własnych motywów WordPress (bez żadnego kodu). Wypróbuj SeedProd już dziś „

W nadchodzących wpisach na blogu, na pewno zobaczysz więcej bloków projektowania treści, które mamy do dyspozycji, aby jeszcze bardziej zwiększyć czytelność naszych treści.

Przejście z Yoast na AIOSEO

Przez najdłuższy czas witryna WPBeginner korzystała z bardzo starej i dostosowanej wersji wtyczki Yoast SEO (v 2.3.5).

Aby spojrzeć z perspektywy, są teraz na wersji 17.

Nie chciałem aktualizować Yoast, ponieważ ich zespół usuwał pewne istotne funkcje, które uważałem za ważne dla SEO.

Czułem również, że ogólna przestrzeń WordPress SEO przestała wprowadzać innowacje.

Tak więc na początku 2020 roku nabyliśmy AIOSEO, oryginalną wtyczkę SEO typu „wszystko w jednym”, a mój zespół całkowicie ją przebudował.

Jestem bardzo dumny z pracy wykonanej przez nasz zespół i ma wszystkie funkcje SEO potrzebne do uzyskania przewagi konkurencyjnej.

Podobnie jak w przypadku edytora bloków, nasze nowsze witryny internetowe zaczęły przechodzić na AIOSEO i zaczęły widzieć poprawę w swoich rankingach, więc chętnie zacząłem używać go na WPBeginner.

Teraz korzystamy z najnowszych i najlepszych funkcji SEO od All in One SEO.

Mamy teraz takie funkcje, jak mapa witryny z filmami, która pomaga zwiększyć rankingi naszych treści dzięki filmom, mapa witryny RSS, która pomaga szybciej indeksować nasze treści, zaawansowane moduły SEO, które zapewniają lepszą kontrolę nad pozycjonowaniem naszej witryny i wiele więcej.

Naprawdę uważam, że jest to najlepsza wtyczka SEO na rynku, a co najważniejsze, ma uczciwą cenę dla małych firm i agencji.

W nadchodzących tygodniach planuję napisać pełny tekst o tym, dlaczego się zamieniliśmy, ze szczegółowym podziałem funkcji, ale w międzyczasie możesz wypróbować darmową wersję All in One SEO lub sprawdzić wersję Pro, która ma wszystkie zaawansowane funkcje, których używam na WPBeginner.

Ulepszenia prędkości WordPress

Liczne badania wykazały, że szybsze witryny internetowe poprawiają wrażenia użytkowników, wydłużają czas spędzany na witrynie i zwiększają ogólną liczbę konwersji.

Dlatego też Google uczyniło szybkość witryny internetowej czynnikiem rankingowym SEO.

Jeśli śledzisz tę witrynę od jakiegoś czasu, to wiesz, że mam obsesję na punkcie optymalizacji wydajności.

Witryna WPBeginner była już dość szybka dzięki naszemu niesamowitemu partnerowi hostingowemu WordPress SiteGround. Oferują oni wysoce zoptymalizowane rozwiązanie hostingowe WordPress oparte na platformie chmurowej Google.

Oczywiście przestrzegaliśmy najlepszych praktyk WordPress w zakresie szybkości, ale dzięki naszemu nowemu projektowi motywu wprowadziliśmy kilka znaczących ulepszeń szybkości.

Oto nasze wyniki szybkości strony Google:

Oto wynik strony głównej z GTMetrix i Pingdom:

I uzyskaliśmy ten wynik pomimo dodania nowych sekcji, większej treści na stronie głównej, szerszych obrazków itp.

I zanim zapytasz, witryna WPBeginner ma obecnie 68 włączonych wtyczek.

Być może zastanawiasz się, jak udało mi się dodać więcej treści na witrynę, jednocześnie zmniejszając rozmiar strony i przyspieszając wszystko?

Cóż, usuwałem rzeczy, które moim zdaniem nie były nam już potrzebne i są to rzeczy, które naprawdę chciałbym, aby więcej właścicieli witryn internetowych również rozważyło.

Nie tylko pomoże to przyspieszyć twoją witrynę, co pomaga w rankingach SEO, ale także zmniejszy ogólne zużycie przepustowości, zmniejszy koszty i poprawi ślad węglowy twojej witryny internetowej.

Wyłączanie Gravatara z komentarzy WordPress

WordPress ma wbudowaną usługę innej firmy o nazwie Gravatar, skrót od Globally Recognized Avatars.

Pozwala to zobaczyć zdjęcie profilowe lub awatar użytkownika, gdy zostawia on komentarz na twojej witrynie WordPress.

Wyzwanie polega na tym, że wymaga to od odwiedzających twoją witrynę internetową skonfigurowania konta Gravatar, czego większość użytkowników nie robi. Zamiast tego twoja witryna internetowa wczytuje szary awatar tajemniczego mężczyzny, który nie wygląda dobrze.

Załóżmy teraz, że masz popularny wpis na blogu z 50 komentarzami, w którym tylko 10% użytkowników ma obrazek Gravatar, a 90% nie. Cóż, to 50 dodatkowych obrazków, które twoja strona wczytuje, a które tak naprawdę nie dodają znaczącej wartości do treści.

Dlatego wiele popularnych blogów zaczęło wyłączać Gravatara, a my robimy to samo na WPBeginner.

Ta prosta zmiana drastycznie poprawiła czas wczytywania naszych stron i szybkość działania witryny.

Usuwanie własnych czcionek innych firm

Będę szczery, w przeszłości nigdy nie zastanawiałem się nad konfiguratorem pisma.

Było to coś, co po prostu wydawało się normalne i sprawiało, że witryna wyglądała dobrze z punktu widzenia typografii, przynajmniej jeśli masz szczęście mieć szybki internet.

W starym motywie WPBeginner używaliśmy własnego konfiguratora Adobe o nazwie Proxima Nova, popularnej czcionki ikon o nazwie FontAwesome, a nasze wyskakujące okienka OptinMonster korzystały z Source Sans Pro z czcionek Google.

Kiedy przeszedłem na witrynę z odległej lokalizacji o słabej jakości Internetu, naprawdę zdałem sobie sprawę, jak duży wpływ na wydajność mają te czcionki na wrażenia użytkownika.

W naszym nowym projekcie chciałem rozwiązać ten problem, aby ułatwić studentom i właścicielom firm w krajach rozwijających się dostęp do WPBeginner, naukę WordPressa i rozwój ich obecności w Internecie.

Nowy motyw WPBeginner v6 wykorzystuje domyślny krój pisma systemowego, który przeszedł długą drogę. Wyglądają świetnie na wszystkich urządzeniach i oczywiście są super szybkie.

Brak błysku niestylizowanego tekstu (FOUT), brak skumulowanego przesunięcia układu (CLS) i znacznie skrócony czas blokowania.

Jeśli zalogujesz się do kokpitu WordPressa lub skorzystasz z Githuba, to powiadomienie, że nasze czcionki są podobne, ponieważ obie te platformy wcześniej dokonały przejścia na czcionki systemowe.

Podczas gdy usuwanie konfiguratorów pisma może nie być realnym rozwiązaniem dla wszystkich witryn biznesowych, jest to zdecydowanie coś, o czym uważam, że zarówno projektanci, jak i programiści powinni pamiętać, jeśli chodzi o szybkość.

Kilka najlepszych praktyk, które mogą pomóc:

• Zamiast używać dwóch oddzielnych czcionek dla nagłówków i treści, rozważ użycie tego samego kroju pisma dla obu.
• Zamiast używać wielu różnych grubości i stylów czcionek, takich jak cienka, zwykła, półgruba, pogrubiona, bardzo pogrubiona, czarna, a następnie kursywy wszystkich tych wersji, rozważ zmniejszenie grubości czcionek do tylko dwóch: zwykłej i pogrubionej.
• Zamiast wczytywać całą bibliotekę FontAwesome lub inną bibliotekę krojów pisma ikon, rozważ dodanie bezpośrednich plików SVG potrzebnych ikon.

Wyłączanie własnych czcionek w OptinMonster

Po zaprojektowaniu i zakodowaniu motywu musiałem jeszcze rozwiązać jeden problem z czcionkami.

Wyskakujące okienka mojej witryny internetowej i formularze subskrypcji e-mail korzystają z OptinMonster i wciąż wczytywały krój pisma Google.

Teraz wyłączenie OptinMonster nie wchodziło w grę, ponieważ pomaga mi zdobyć więcej subskrybentów e-mail i zwiększyć konwersję naszej witryny internetowej.

Na szczęście jest to jedna z moich firm, więc poprosiłem zespół programistów o rozwiązanie umożliwiające wyłączenie czcionek Google.

Okazało się, że nie byłem pierwszym, który poprosił o tę funkcję, a OptinMonster miał już rozwiązanie API, które pozwala nie tylko wyłączyć krój pisma Google, ale także wczytywać dowolny własny krój pisma.

Jestem dość obeznany z technologią i mogę zaimplementować mały fragment kodu, który zespół udostępnił w dokumentacji, ale wiem, że wielu naszych klientów nie jest.

Tak więc teraz nasz zespół faktycznie zbudował tę funkcję wewnątrz kreatora kampanii (bez konieczności kodowania).

Jeśli jednak dobrze czujesz się z kodem i nie chcesz ręcznie wyłączać tego ustawienia dla każdej kampanii, możesz po prostu zastosować hack, którego używam.

Najpierw dodaj następujący fragment kodu JS, aby wyłączyć OptinMonster z wczytywania jakichkolwiek krojów pisma na twojej witrynie:

<script type="text/javascript">
document.addEventListener('om.Scripts.init', function(event) {
event.detail.Scripts.enabled.fonts= false;
});
</script>

Następnie dodaj następujący kod CSS w twoim pliku style.css:

html .Campaign * { font-family: "Proxima Nova", Helvetica, "Helvetica Neue", Arial, sans-serif !important; }

Oczywiście nie zapomnij zmienić czcionek, aby pasowały do czcionek Twojej witryny internetowej. Spowoduje to zastosowanie powyższej rodziny czcionek do wszystkich kampanii OptinMonster, które wczytują się na twojej witrynie.

Przełączono z W3 Total Cache na WP Rocket

Przez najdłuższy czas uruchamiałem wysoce dostosowaną konfigurację wtyczki W3 Total Cache na WPBeginner.

Chociaż wykonał swoją pracę, nie mógł się równać z WP Rocket, którego używaliśmy na wszystkich naszych witrynach produktowych.

Tak więc wraz z tym przeprojektowaniem w końcu przeszedłem na WP Rocket, który ma wiele świetnych funkcji związanych z szybkością witryny internetowej, w szczególności niezawodne wstępne ładowanie pamięci podręcznej i minifikację plików.

Ta wtyczka jest niezbędna, jeśli chcesz poprawić szybkość Twojej witryny internetowej.

Krótka uwaga, jeśli używasz ThirstyAffiliates lub Pretty Links do zarządzania twoimi odnośnikami partnerskimi, upewnij się, że wykluczyłeś je z pamięci podręcznej.

Wystarczy przejść do karty Reguły zaawansowane i dodać swój adres URL w sekcji Nigdy nie zapisuj w pamięci podręcznej.

Jeśli tego nie zrobisz i masz włączone wstępne ładowanie pamięci podręcznej, WP Rocket będzie próbował wczytywać twoje odnośniki partnerskie, ponieważ wyglądają one jak odnośniki wewnętrzne.

Może to sztucznie zawyżyć twoją liczbę kliknięć i wpłynąć na wskaźniki afiliacyjne.

Poprosiłem zespół WP Rocket, aby sprawdził, czy mogą automatycznie wykrywać popularne wtyczki afiliacyjne i wstępnie wypełniać wykluczony adres URL, aby uczynić go bardziej przyjaznym dla początkujących i mam nadzieję, że wdrożą tę sugestię.

Co będzie dalej?

Mam wielkie plany na 2022 rok, dlatego chciałem uruchomić nową witrynę przed końcem tego roku.

Planujemy uruchomić zupełnie nową sekcję na WPBeginner, o którą wielu z Was pytało przez ostatnie 2 lata.

Wkrótce się pojawi i mam nadzieję, że uruchomimy go na początku 2. kwartału 2022 roku.

Planuję również więcej eksperymentować z nowym edytorem bloków, aby stworzyć lepsze ogólne wrażenia z czytania.

Poza tym miej oko na nasz kanał YouTube, ponieważ w 2022 roku będziemy tam robić naprawdę fajne rzeczy.

Jak zawsze, chciałbym podziękować wszystkim za twoją nieustającą pomoc techniczną i uwagi na przestrzeni lat.

Twoja prawda,
Syed Balkhi
Założyciel WPBeginner