WPBeginner v6 – Za kulisami naszego nowego projektu strony

Jeśli odwiedziłeś WPBeginner w ciągu ostatnich kilku tygodni, prawdopodobnie zauważyłeś, że otrzymaliśmy nowy projekt strony internetowej. Chociaż ma wiele podobieństw do poprzedniego, wiele się zmieniło za kulisami.

Jak obiecałem w biuletynie, chcę podzielić się procesem myślowym stojącym za naszym przeprojektowaniem, czego się dowiedzieliśmy, co nowego na stronie, a co najważniejsze, jak możesz wykorzystać niektóre z naszych doświadczeń, aby ulepszyć swoją witrynę.

Małe tło

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

Wraz z rozwojem mojej firmy zdałem sobie sprawę, że przeprojektowanie strony internetowej zabiera dużo czasu i zasobów, które można lepiej spożytkować na wypełnianie naszej podstawowej misji:

Dlatego postanowiłem poświęcić całą swoją uwagę na naszą podstawową misję, a nasza firma ogromnie się rozwinęła.

Ostatnie przeprojektowanie WPBeginner zostało uruchomione 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 bezpłatnych samouczków WordPress na blogu WPBeginner i dodaliśmy setki nowych samouczków wideo 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ę społecznościową WordPress oraz RafflePress, potężną wtyczkę do WordPressa z nagrodami i konkursami.
• Nabyliśmy pięć wtyczek do WordPressa, w tym słynną AIOSEO (wszystko w jednej wtyczce SEO dla WordPress), SeedProd (przeciągnij i upuść WordPress narzędzie do tworzenia witryn), Smash Balloon (wtyczka nr 1 do kanałów mediów społecznościowych), PushEngage (wtyczka powiadomień push na stronie) i AffiliateWP (wtyczka do zarządzania afiliacjami dla WordPress).
• Nabyliśmy również pięć wtyczek do platformy i infrastruktury WordPress, w tym słynną wtyczkę WP Mail SMTP (w celu naprawienia dostarczalności wiadomości e-mail), SearchWP (potężna wtyczka wyszukiwania WordPress), Easy Digital Downloads (popularna wtyczka eCommerce do sprzedaży produktów cyfrowych), WP Simple Pay (łatwa wtyczka do przyjmowania płatności kartą kredytową) oraz Sugar Calendar (prosta wtyczka kalendarza wydarzeń dla WordPress).

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

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

To prowadzi mnie do WPBeginner v6.

Projekt skoncentrowany na wykrywalności treści

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

Nasi użytkownicy wielokrotnie powtarzali nam, że gdy chcą znaleźć rozwiązanie swoich problemów z WordPressem, po prostu wygooglują słowo kluczowe i dodają na końcu WPBeginner, aby znaleźć najlepsze rozwiązanie.

Aby ułatwić naszym czytelnikom szybkie znalezienie odpowiedzi na ich 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 chce przeszukać naszą bibliotekę treści, czy też nowym czytelnikiem, który dopiero zaczyna korzystać z WordPressa, strona główna WPBeginner ułatwia teraz znalezienie tego, czego szukasz.

Po kliknięciu ikony wyszukiwania zauważysz również podobny widżet wyszukiwania na naszym pasku bocznym na wszystkich stronach z pojedynczymi postami, a także w nagłówku naszej witryny.

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

W nowym projekcie dodaliśmy funkcję wyszukiwania na żywo do naszej sekcji słownika WordPress, dzięki czemu możesz łatwo zapoznać się z popularnym żargonem WordPress. Jest to w zasadzie słownik terminów 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 rozrosła się do 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 swoje ulubione produkty WordPress.

Gdy zbliżamy się do 2022 roku, dużym priorytetem jest dla nas wykrywanie treści.

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

Wierzę, że w 2022 roku optymalizacja user experience (UXO) będzie odgrywać kluczową rolę w SEO.

Jeśli chcesz pokonać swoich konkurentów i uzyskać przewagę nad konkurencją, zdecydowanie polecam zwrócenie uwagi na UXO.

W tym artykule podzielę się wskazówkami, jak zaimplementować w witrynie podobne funkcje, jak w naszym nowym motywie.

Jak ulepszyć wyszukiwanie WordPress

Domyślna funkcja wyszukiwania WordPress nie jest zbyt potężna, więc jeśli chcesz dostosować algorytm rankingu i kontrolować, co pojawia się dla każdego wyszukiwania, polecam użycie wtyczki SearchWP.

Możesz też użyć niestandardowej wyszukiwarki Google, która korzysta z algorytmu Google, ale wadą jest to, że Google wyświetla reklamy na Twoich stronach wyszukiwania, które nie wyglądają zbyt dobrze.

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

Inne samouczki dotyczące wyszukiwania WordPress, które mogą okazać się pomocne, to sposób tworzenia niestandardowego formularza wyszukiwania WordPress i dodawania paska wyszukiwania w menu WordPress.

Nowe Mega Menu WordPress

Podążając za tematem odkrywania treści, zaktualizowaliśmy nasze stare menu rozwijane WordPress do nowych wielokolumnowych Mega Menu.

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

Pozwala nam również lepiej wyeksponować nasze nowe produkty, tworzone przez nas bezpłatne narzędzia biznesowe i nie tylko.

Jak dodać Mega Menu w WordPressie

Chociaż zbudowaliśmy niestandardowe rozwiązanie dla WPBeginner, możesz skorzystać z tego samouczka, jak dodać mega menu w WordPressie, aby lepiej wyróżnić swoje najlepsze strony.

Edytor bloków WordPress (wreszcie)

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

Od razu zacząłem go używać na moim osobistym blogu, ale ponieważ WPBeginner używał starszego motywu z wieloma niestandardowymi funkcjami kodowanymi, zmiana nie była tak łatwa.

Tak więc przez ostatnie dwa lata utknęliśmy przy korzystaniu z Edytora klasycznego na stronie WPBeginner, podczas gdy wszystkie nasze nowsze strony internetowe miał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 „Czy wiedziałeś” bez pisania kodu:

Całkowicie przeprojektowaliśmy również kilka naszych stron docelowych za pomocą edytora bloków WordPress.

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

Przeprojektowaliśmy również nasze bezpłatne narzędzia biznesowe, korzystając z edytora bloków, aby wyróżnić niektóre z najnowszych bezpłatnych narzędzi, które zbudowaliśmy.

Nadal będziemy używać SeedProd do tworzenia całkowicie niestandardowych stron docelowych, gdy zajdzie taka potrzeba, ponieważ jest to właściwy kreator stron WordPress z funkcją przeciągania i upuszczania.

Chociaż nauka korzystania z Gutenberga do tworzenia niestandardowych stron docelowych była fajna, nadal wymaga DUŻO kodowania przed konfiguracją, zanim zespoły marketingowe będą mogły utworzyć niestandardową stronę docelową.

Podczas gdy używasz wtyczki do tworzenia stron, zespoły marketingowe mogą szybko tworzyć niestandardowe strony docelowe, układy ścieżek itp. bez pomocy zespołu programistów.

Główny zespół WordPressa ciężko pracuje nad funkcjami edycji całej witryny, ale nadal potrzebuje dużo pracy, zanim będzie mógł konkurować z potężnymi funkcjami, które otrzymujesz dzięki programom do tworzenia stron, takim jak SeedProd, Divi lub Beaver Builder.

Mając to na uwadze, edytor bloków jest cholernie niesamowity i istnieje wiele wtyczek blokowych WordPress, których możesz użyć do tworzenia fajnych elementów projektu, aby ulepszyć swoje treści.

Oto kolejny fajny blok, który nasz nowy motyw ma do wyróżniania polecanych 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 ich funkcja tworzenia motywów umożliwia tworzenie całkowicie niestandardowych motywów WordPress (bez żadnego kodu). Wypróbuj SeedProd już dziś »

Jestem pewien, że w nadchodzących wpisach na blogu zobaczysz więcej bloków projektowych treści, które musimy jeszcze bardziej poprawić czytelność 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 innej perspektywy, są teraz w wersji 17.

Nie chciałem aktualizować Yoast, ponieważ ich zespół usunął kilka istotnych funkcji, które uważałem za ważne dla SEO.

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

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ół, która posiada wszystkie funkcje SEO, których potrzebujesz, aby uzyskać przewagę nad konkurencją.

Podobnie jak edytor bloków, nasze nowsze strony internetowe zaczęły przechodzić na AIOSEO i zaczęły się poprawiać ich rankingi, więc chętnie zacząłem używać go na WPBeginner.

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

Mamy teraz funkcje, takie jak mapa witryny wideo, która pomaga poprawić nasze rankingi treści za pomocą filmów, mapa witryny RSS, aby przyspieszyć indeksowanie naszych treści, zaawansowane moduły SEO, aby mieć lepszą kontrolę nad SEO naszej witryny i wiele innych.

Naprawdę wierzę, ż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 opis, dlaczego dokonaliśmy zmiany, ze szczegółowym podziałem funkcji, ale w międzyczasie możesz wypróbować darmową wersję SEO All in One lub wypróbować wersję Pro, która ma wszystkie potężne funkcje, których używam na WPBeginner.

Ulepszenia szybkości WordPress

Liczne badania wykazały, że szybsze strony internetowe poprawiają wrażenia użytkownika, wydłużają czas spędzony w witrynie i ogólną konwersję.

Właśnie dlatego Google uczyniło szybkość witryny czynnikiem rankingowym SEO.

Teraz, jeśli śledzisz witrynę od jakiegoś czasu, 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ą wysoce zoptymalizowane rozwiązanie hostingowe WordPress zbudowane na platformie chmurowej Google.

Oczywiście postępowaliśmy zgodnie z najlepszymi praktykami WordPress dotyczącymi szybkości, ale dzięki naszemu nowemu projektowi motywu wprowadziliśmy kilka znaczących ulepszeń szybkości.

Oto nasze wyniki Google Page Speed:

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

I osiągnęliśmy ten wynik pomimo dodania nowych sekcji, większej ilości treści na stronie głównej, szerszych obrazów itp.

I zanim zapytasz, witryna WPBeginner ma obecnie 68 aktywnych wtyczek .

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

Cóż, usunąłem rzeczy, które moim zdaniem nie były już potrzebne, i są to rzeczy, które naprawdę chcę, aby więcej właścicieli witryn również rozważyło zrobienie tego.

Pomoże to nie tylko przyspieszyć działanie witryny, co pomaga w rankingach SEO, ale także zmniejszy ogólne zużycie przepustowości, obniży koszty i poprawi ślad węglowy witryny.

Wyłączanie Gravatara z komentarzy WordPress

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

Dzięki temu możesz zobaczyć zdjęcie profilowe lub awatar użytkownika, gdy zostawia on komentarz w Twojej witrynie WordPress.

Wyzwanie polega na tym, że wymaga to od odwiedzających witrynę skonfigurowania konta Gravatar, którego większość użytkowników nie robi. Więc zamiast tego twoja strona internetowa po prostu ładuje szary awatar tajemniczego człowieka, który nie wygląda dobrze.

Załóżmy teraz, że masz popularny post na blogu z 50 komentarzami, w którym tylko 10% użytkowników ma obraz Gravatara, a 90% nie. Cóż, to 50 dodatkowych obrazów, które ładuje Twoja strona, 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 radykalnie poprawiła czas wczytywania naszej strony i szybkość witryny.

Usuwanie niestandardowych czcionek innych firm

Będę szczery, nigdy nie zastanawiałem się dwa razy nad niestandardowymi czcionkami w przeszłości.

To było coś, co po prostu wydawało się normalne i sprawiło, że strona wyglądała dobrze z punktu widzenia typografii, przynajmniej jeśli masz szczęście, że masz szybki internet.

W starym motywie WPBeginner użyliśmy niestandardowej czcionki Adobe o nazwie Proxima Nova, popularnej czcionki ikonowej o nazwie FontAwesome, a nasze wyskakujące okienka OptinMonster używały Source Sans Pro z czcionek Google.

Kiedy odwiedziłem witrynę ze zdalnej 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 zwiększenie ich obecności w Internecie.

Nowy motyw WPBeginner v6 używa domyślnych czcionek systemowych, które przeszły długą drogę. Świetnie wyglądają na wszystkich urządzeniach i oczywiście są superszybkie.

Brak flashowania tekstu bez stylu (FOUT), brak skumulowanego przesunięcia układu (CLS) i znacznie skrócony czas blokowania.

Jeśli zalogujesz się do pulpitu WordPress lub użyjesz Github, zauważysz, że nasze czcionki są podobne, ponieważ obie te platformy wcześniej przeszły na czcionki systemowe.

Chociaż usuwanie niestandardowych czcionek może nie być opłacalnym rozwiązaniem dla wszystkich witryn biznesowych, zdecydowanie uważam, że zarówno projektanci, jak i programiści powinni być ostrożni, jeśli chodzi o szybkość.

Kilka sprawdzonych metod, które mogą pomóc:

• Zamiast używać dwóch oddzielnych czcionek dla nagłówka i treści, rozważ użycie tej samej czcionki dla obu.
• Zamiast używać wielu różnych grubości i stylów czcionek, takich jak cienka, zwykła, półpogrubiona, pogrubiona, ekstra pogrubiona, czarna, a następnie kursywa, rozważ zmniejszenie grubości czcionek tylko do dwóch: zwykłej i pogrubionej.
• Zamiast ładować całą bibliotekę FontAwesome lub inną bibliotekę czcionek ikon, rozważ dodanie bezpośrednich plików SVG ikon, których potrzebujesz.

Wyłączanie niestandardowych czcionek w OptinMonster

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

Moje wyskakujące okienka i formularze subskrypcji e-mail używają OptinMonster i nadal ładują czcionki Google.

Teraz wyłączenie OptinMonster nie było opcją, ponieważ pomaga mi zdobyć więcej subskrybentów e-maili i zwiększyć konwersje w naszej witrynie.

Na szczęście to jedna z moich firm, więc poprosiłem zespół programistów o rozwiązanie wyłączające czcionki 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ć czcionki Google, ale także załadować dowolną niestandardową czcionkę internetową.

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

Więc teraz nasz zespół faktycznie zbudował tę funkcję w kreatorze kampanii (nie jest potrzebne kodowanie).

Ale jeśli znasz się na kodzie i nie chcesz ręcznie wyłączać tego ustawienia dla każdej kampanii, możesz po prostu skorzystać z hacka, którego używam.

Najpierw dodaj następujący fragment kodu JS, aby uniemożliwić OptinMonster ładowanie jakichkolwiek czcionek internetowych w 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 do 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. Spowoduje to zastosowanie powyższej rodziny czcionek do wszystkich kampanii OptinMonster, które ładują się w Twojej witrynie.

Przełączono z W3 Total Cache na WP Rocket

Najdłużej używałem wysoce dostosowanej konfiguracji wtyczki W3 Total Cache na WPBeginner.

Chociaż udało się wykonać zadanie, nie dorównywał WP Rocket, którego używaliśmy we wszystkich naszych witrynach produktów.

Dzięki temu przeprojektowaniu w końcu przeszedłem na WP Rocket, który oferuje DUŻO doskonałej szybkości witryny, w szczególności niezawodne wstępne ładowanie pamięci podręcznej i minifikację plików.

Ta wtyczka jest kluczowa, jeśli chcesz poprawić szybkość swojej witryny.

Tylko krótka uwaga, jeśli używasz ThirstyAffiliates lub Pretty Links do zarządzania linkami partnerskimi, a następnie upewnij się, że wykluczasz je z pamięci podręcznej.

Po prostu przejdź do zakładki Reguły Zaawansowane i dodaj swój program partnerski w ustawieniu Nigdy nie buforuj adresów URL.

Jeśli tego nie zrobisz i masz włączone wstępne ładowanie pamięci podręcznej, WP Rocket spróbuje buforować twoje linki partnerskie, ponieważ wyglądają jak linki wewnętrzne.

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

Poprosiłem zespół WP Rocket o sprawdzenie, czy mogą automatycznie wykryć popularne wtyczki stowarzyszone i wstępnie wypełnić wykluczony tag URL, aby był bardziej przyjazny dla początkujących, i mam nadzieję, że wdrożą sugestię.

Co dalej?

Mam wielkie plany na 2022, dlatego chciałem uruchomić nowy projekt strony 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.

Pojawi się wkrótce i mam nadzieję, że uruchomię go na początku drugiego kwartału 2022 roku.

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

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

Jak zawsze, chcę Wam wszystkim podziękować za nieustające wsparcie i opinie na przestrzeni lat.

Z poważaniem,
Syed Bałchiń
Założyciel WPBeginner

Post WPBeginner v6 – Za kulisami naszego nowego projektu witryny po raz pierwszy pojawił się na WPBeginner.