Tworzenie witryny z recenzjami produktów z dodatkiem – część 4

Witamy w części 4 tej 4-częściowej serii poświęconej tworzeniu witryny z recenzjami produktów przy użyciu Extra. Jeśli zastanawiasz się, jak rozpocząć tworzenie witryny z recenzjami produktów, ta seria jest dla Ciebie. Dzięki wbudowanej funkcji recenzji i inteligentnej kategoryzacji postów, Extra jest specjalnie przystosowana do tworzenia świetnie wyglądających recenzji, szablonów postów o produktach, mega menu i układów kategorii w ciągu kilku minut. Dołącz do mnie, gdy odkryjemy moc Extra.

W części 1 ustawiamy opcje motywu i ustawienia dostosowywania. W części 2 dodaliśmy nasze posty i zbudowaliśmy układ postów do wyświetlania recenzji naszych produktów. W części 3 tej serii stworzyliśmy dwa układy kategorii dla naszej witryny z recenzjami produktów – jeden dla naszej strony głównej, a drugi dla strony „Wszystkie kategorie”.

Dzisiaj zakończymy naszą witrynę z recenzjami produktów, tworząc domyślny układ kategorii, menu i stopkę. Punktem kulminacyjnym dzisiejszego posta będzie niestandardowe menu, które zawiera łącza menu pasujące do koloru odpowiednich stron kategorii. Pokażę ci również, jak wdrożyć wbudowane opcje menu Extra i dodać kilka własnych dostosowań.

Oto zajawka tego, co zamierzamy zbudować

Zacznijmy.

Tworzenie witryny z recenzjami produktów z dodatkiem – część 4

Subskrybuj nasz kanał YouTube

Tworzenie domyślnej strony kategorii

Extra zawiera już zainstalowaną domyślną stronę kategorii. Domyślna strona kategorii to układ, który będzie używany podczas przeglądania strony kategorii, która nie ma wybranego układu określonej kategorii. W części 3 tej serii wyznaczyliśmy układ kategorii dla naszej strony głównej i przypisaliśmy naszą stronę „Wszystkie kategorie” do konkretnej kategorii „Wszystkie kategorie”. W przypadku pozostałych stron kategorii recenzji produktów będziemy używać tego domyślnego układu kategorii.

Aby dostosować nasz domyślny układ kategorii, przejdź do pulpitu nawigacyjnego wordpress i przejdź do Extra > Category Builder. Następnie najedź kursorem na „Kategorię domyślną” i kliknij link edycji.

Domyślnie twoja domyślna kategoria zawiera dwa moduły ułożone jeden na drugim w jednokolumnowym rzędzie standardowej sekcji. Zanim wprowadzimy jakiekolwiek zmiany w układzie, upewnij się, że wybrałeś opcję „Użyć tego układu jako układu domyślnego?” w polu Użycie układu na prawym pasku bocznym.

Najpierw zamień górny suwak Polecane posty na moduł karuzeli postów. Następnie zaktualizuj ustawienia modułu, zaznaczając „Aktualna kategoria/tag/taksonomia” jako kategorię dla tego modułu. Teraz ten moduł karuzeli postów będzie wyświetlał tylko produkty odwiedzanej strony kategorii. Całkiem sprytny, co?

Wyjście bezpieczeństwa

Możesz pozostawić moduł Blog Feed Masonry z ustawieniami domyślnymi. Upewnij się tylko, że dowolny moduł kategorii, który dodasz do tej strony w przyszłości, ma przypisaną kategorię „Bieżąca kategoria/tag/taksonomia”.

Teraz, aby wystylizować tytuł h1 strony kategorii, musisz dodać następujący niestandardowy kod CSS do dodatkowego kodu CSS w konfiguratorze motywu. Pamiętaj, aby umieścić go w zapytaniu o media o minimalnej szerokości 980 pikseli.

.archive h1 {
text-align: center;
font-size: 48px;
line-height: 1.3em;
}

To tyle, jeśli chodzi o domyślny układ kategorii. Zobaczmy, jak wygląda nasz domyślny układ na stronie kategorii mojej kuchni.

Teraz, gdy mamy już nasz domyślny układ kategorii, zwróćmy uwagę na jedną z najważniejszych części naszej witryny – menu nawigacyjne.

Skonfigurowaliśmy już nasz podstawowy styl nagłówka w części 1 tej serii. Ale dzisiaj zamierzamy stworzyć i stylizować nasze główne menu nawigacyjne.

Z pulpitu nawigacyjnego WordPress przejdź do Wygląd > Menu, a następnie wybierz Menu . Wybierz link „utwórz nowe menu” u góry strony i wprowadź nazwę „Menu kategorii” jako nazwę menu. Następnie wybierz „Menu główne” jako lokalizację wyświetlania w sekcji Ustawienia menu.

Teraz możemy zacząć dodawać nasze pozycje menu do naszego menu. Kliknij przełącznik Kategorie po lewej stronie. W wyświetlonych opcjach wybierz „wyświetl wszystko”, aby upewnić się, że widzisz wszystkie dostępne kategorie. Zaznacz wszystkie 5 kategorii, które utworzyłeś (nie bez kategorii) i kliknij przycisk Dodaj do menu, aby dodać je do sekcji struktury menu po prawej stronie. Teraz możesz kliknąć i przeciągnąć każdy z elementów menu w następującej kolejności:

• Elektroniczny
• Odzież
• Kuchnia
• Zdrowie i Kondycja
• Wszystkie kategorie

Zanim dokonamy edycji elementów menu, wybierz link opcji ekranu u góry strony. W sekcji zaawansowanych właściwości menu, która się otworzy, upewnij się, że zaznaczyłeś pole obok "Klasy CSS". To pozwoli nam dodać niestandardową klasę CSS do każdego z naszych elementów menu.

Wróć do swojego menu. Rozpoczynając od pozycji menu Kategoria elektroniki, kliknij, aby przełączyć opcje konfiguracji. W polu Klasy CSS dodaj klasę o nazwie „zielony”. A dla opcji Extra Mega Menu wybierz „Mega Menu 3 Featured”.

Osiągnie to dwie rzeczy. Po pierwsze, klasa „zielona” zostanie użyta do zmiany pozycji menu na zielono po najechaniu myszą. Po drugie, opcja polecana mega menu 3 doda trzy polecane pozycje jako mega menu po najechaniu kursorem na pozycję menu.

Jako element menu kategorii odzieży dodaj klasę „niebieska” i wybierz opcję „Mega Menu 3 Polecane” .

W przypadku pozycji menu kategorii kuchennej dodaj klasę „różowy” i wybierz opcję „Mega Menu 3 polecane” .

W menu kategorii Zdrowie i fitness dodaj klasę „fioletowy” i wybierz opcję „Mega Menu 3 Polecane” .

Pozycja menu „Wszystkie kategorie” będzie nieco inna. Śmiało i pozostaw pole tekstowe Klasy CSS puste. A dla opcji Mega Menu wybierz "Lista Mega Menu". Ten typ mega menu jest bardziej tradycyjnym mega menu, które tworzy listę pozycji podmenu. Celem tego linku do mega menu jest pokazanie wszystkich kategorii z listą ich produktów pod spodem.

Wróć i otwórz pole kategorii, wybierz te same cztery kategorie (elektronika, odzież, kuchnia oraz zdrowie i fitness) i dodaj je do menu. Następnie przeciągnij każdą z dodanych kategorii o jeden poziom pod pozycją mega menu „Wszystkie kategorie”.

Przełącz opcje konfiguracji dla każdego z tych elementów menu kategorii i dodaj te same klasy CSS do każdego z nich, tak jak poprzednio. Oto kategorie z klasą, którą musisz dodać:

Elektronika – zielony
Odzież – niebieska
Kuchnia – różowy
Health & Fitness – fioletowy

Następnie dodamy własny niestandardowy obraz, który będzie służył jako polecany obraz kategorii dla każdej kategorii w mega menu.

Użyj edytora zdjęć, aby zmniejszyć i przyciąć każdy obraz do szerokości 500 pikseli i wysokości 300 pikseli.

Dodaj/przeciągnij je do biblioteki WordPress Media.

Teraz wróć do strony menu w WordPress Admin.

W tym przykładzie link do górnej kategorii w moim mega menu to „Elektronika”. Kliknij strzałkę po prawej stronie pozycji „Elektronika”. W polu Etykieta nawigacyjna dodaj obraz, który chcesz, używając tagu html img bezpośrednio przed tekstem „Elektronika”. Tag obrazu powinien wyglądać następująco:

<img src="Insert Image Url" width="100%" />

Aby znaleźć adres URL obrazu, przejdź do Media → Biblioteka. Kliknij obraz, który chcesz dodać. Na wyskakującym ekranie Szczegóły załącznika znajdź adres URL w sekcji po prawej stronie, zaznacz go, a następnie użyj ctrl+c, aby skopiować go do schowka.

Teraz wróć do konfiguracji pozycji menu „Elektronika” na stronie menu i zastąp tekst „Wstaw adres URL obrazu”, wklejając adres URL obrazu za pomocą ctrl + v.

Powtórz ten sam proces dla kolejnych 3 pozycji menu kategorii.

Po dodaniu wszystkich czterech tagów graficznych do każdej pozycji menu kategorii, nadszedł czas, aby dodać pozycje menu pojedynczych postów (linki do recenzji produktów) w każdej z odpowiednich kategorii.

Kliknij, aby otworzyć pole Posty po lewej stronie i wybierz kartę „wyświetl wszystko”. Następnie wybierz wszystkie 12 swoich produktów i kliknij Dodaj do menu. Następnie przeciągnij każdy z elementów menu postu o jeden poziom pod każdą z ich kategorii.

Zapisz menu

Zanim przejdziemy do naszego nowego menu, musimy dodać niestandardowy CSS, aby wprowadzić ostatnie poprawki do naszego menu.

Przejdź do Theme Customizer > Dodatkowy kod CSS i wprowadź następujący kod CSS:

/****************************
style menu
*****************************/

#et-menu li.green a:hover, #et-menu li.current-menu-item.green a {
color: #5bd999 !important;
}

li.green a:before {
background-color: #5bd999 !important;
}

#et-menu li.pink a:hover, #et-menu li.current-menu-item.pink a {
color: #e6567a !important;
}

li.pink a:before {
background-color: #e6567a !important;
}

#et-menu li.blue a:hover, #et-menu li.current-menu-item.blue a{
color: #00c0e4 !important;
}

li.blue a:before {
background-color: #00c0e4 !important;
}

#et-menu li.purple a:hover, #et-menu li.current-menu-item.purple a{
color: #7658f8 !important;
}

li.purple a:before {
background-color: #7658f8 !important;
}

/***************************
increase height of line under nav links on hover
****************************/
#et-navigation>ul>li>a:before {
height: 8px;
}

Zapisz i opublikuj swoje ustawienia.

Sprawdźmy teraz nasze nowe menu. Zwróć uwagę na kolory elementów menu, gdy najedziesz na nie kursorem. Kolory pasują do odpowiadających im kolorów kategorii.

Budowanie stopki

Aby zbudować stopkę naszej witryny z recenzjami produktów, skorzystamy z wbudowanych widżetów Extra, które wyświetlają najnowsze recenzje produktów i listę kategorii.

Najpierw musimy przejść do Theme Customizer> Ustawienia stopki. Następnie kliknij Układ i wybierz układ dwukolumnowy.

Wróć i wybierz Typografia i zaktualizuj następujące informacje:

Rozmiar tekstu nagłówka: 32
Rozmiar tekstu korpusu/łącza: 16
Kolor tekstu widżetu: rgba (255,255,255,0.6)
Kolor łącza widżetu: #ffffff
Kolor nagłówka widżetu: #ffffff

Zapisz i opublikuj

Wróć do głównego menu Konfiguratora motywów i wybierz Widgety. Następnie wybierz Lewy pasek boczny stopki i kliknij przycisk, aby dodać widżet. Wybierz widżet Extra – Ostatnie recenzje

Wróć do menu widżetów i wybierz Stopka Pasek boczny w prawo i dodaj widżet Kategorie.

Przejdź do sekcji Dodatkowe CSS i dodaj następujący niestandardowy CSS do swojej stopki.

/****************************
footer
*****************************/
#footer .et_pb_widget li {
border-bottom: none;
color: #fff;
}
.et_pb_widget.widget_et_recent_reviews .review-breakdowns .score-bar-bg {
background: rgba(255,255,255,.1);
}

Zapisz i opublikuj ustawienia Theme Customizer i sprawdź swoją stopkę.

Otóż ​​to. Udało Ci się pomyślnie ukończyć część 4 i serię poświęconą budowaniu witryny z recenzjami produktów przy użyciu Extra.

Ostateczny CSS

W zależności od tego, gdzie przyszedłeś w serii, może być konieczne sprawdzenie niestandardowego kodu CSS, aby upewnić się, że wszystko zostało wprowadzone poprawnie. Oto ostateczny kod CSS, który należy wprowadzić w konfiguratorze motywów.

.et_pb_extra_module, .posts-blog-feed-module.masonry .hentry {
box-shadow: -1px 0 2px 0 rgba(0,0,0,0.12), 1px 0 2px 0 rgba(0,0,0,0.12), 0 1px 1px 0 rgba(0,0,0,0.24);
border-top: 10px solid;
}

/****************************
style menu
*****************************/

#et-menu li.green a:hover, #et-menu li.current-menu-item.green a {
color: #5bd999 !important;
}

li.green a:before {
background-color: #5bd999 !important;
}

#et-menu li.pink a:hover, #et-menu li.current-menu-item.pink a {
color: #e6567a !important;
}

li.pink a:before {
background-color: #e6567a !important;
}

#et-menu li.blue a:hover, #et-menu li.current-menu-item.blue a{
color: #00c0e4 !important;
}

li.blue a:before {
background-color: #00c0e4 !important;
}

#et-menu li.purple a:hover, #et-menu li.current-menu-item.purple a{
color: #7658f8 !important;
}

li.purple a:before {
background-color: #7658f8 !important;
}

/***************************
increase height of line under nav links on hover
****************************/
#et-navigation>ul>li>a:before {
height: 8px;
}

/****************************
comment box background
*****************************/
#comment-wrap {
padding: 75px 40px;
background: #fff;
border-radius: 3px;
box-shadow: -1px 0 2px 0 rgba(0,0,0,0.12), 1px 0 2px 0 rgba(0,0,0,0.12), 0 1px 1px 0 rgba(0,0,0,0.24);
}
@media (min-width: 980px) {

.join-cta {
display: block;
text-align: center;
border: 3px solid #333;
color: #333;
padding: 20px 15px;
text-transform: uppercase;
font-weight: 600;
font-size: 30px;
}

/***************************
Post Header Size
****************************/
h1.entry-title {
font-size: 48px;
}

/***************************
Fancy Subtitle
****************************/
.subtitle {
margin: 1em 0 !important;
font-size: 48px;
}
.fancy {
text-align: center;
padding-bottom: 0px;
}
.fancy span {
display: inline-block;
position: relative;
line-height: 1.3em;
}
.fancy span:before,
.fancy span:after {
content: "";
position: absolute;
height: 5px;
border-bottom: 4px solid #333;
border-top: 4px solid #333;
top: 40%;
width: 100%;
max-width: 200px;
}
.fancy span:before {
right: 100%;
margin-right: 15px;
}
.fancy span:after {
left: 100%;
margin-left: 15px;
}

/***************************
Star Rating and Social Icons Style
****************************/
.post-footer .rating-stars .rating-star {
width: 50px;
height: 50px;
}

.et_extra_layout .et_pb_column .module-head h1, .module-head .module-filter {
font-size: 28px;
}

.post-footer .rating-stars #rate-title, .post-footer .social-icons .share-title {
display: block;
font-size: 20px;
}

.post-footer .rating-stars, .post-footer .social-icons {
width: 100%;
margin: 0 auto;
padding: 30px 0;
}

.post-footer .social-icons {
border-bottom: 4px solid #dddddd;
}
}

/****************************
footer
*****************************/
#footer .et_pb_widget li {
border-bottom: none;
color: #fff;
}

.et_pb_widget.widget_et_recent_reviews .review-breakdowns .score-bar-bg {
background: rgba(255,255,255,.1);
}

/***************************
Mobile Adjustments
****************************/
@media (max-width: 980px) {
.subtitle {
font-size: 30px;
text-align: center;
}
}

Zawijanie

Mam nadzieję, że podobało Ci się odkrywanie mocy Extra w tworzeniu ze mną witryny z recenzjami produktów. Jeśli już, jestem przekonany, że przynajmniej odejdziesz z nowym uznaniem dla tego wyjątkowego motywu i odrobiną inspiracji, aby zrobić z nim więcej. Wbudowany system recenzji, inteligentne układy kategorii i moc Divi Builder sprawiają, że doskonale pasuje do witryny z recenzjami produktów.

Jednym z tematów, na które nie poruszyłem (zachowując go na przyszły post), jest obsługa linków afiliacyjnych za pomocą Extra. W końcu dla większości ludzi ostatecznym celem witryny z recenzjami produktów jest zarabianie pieniędzy. Zapraszam do podzielenia się swoimi przemyśleniami na ten temat poniżej w komentarzach.

Czekam na kontakt z Państwem.