Создание сайта обзора продукта с дополнительными возможностями - Часть 4

Добро пожаловать в четвертую часть этой серии из четырех статей о том, как разработать сайт обзора продукта с помощью Extra. Если вы ломаете голову над тем, как начать разработку сайта с обзором продуктов, эта серия статей для вас. Благодаря встроенным функциям обзора и интеллектуальной категоризации сообщений Extra специально оборудован для создания привлекательных обзоров, шаблонов сообщений о продуктах, мегаменю и макетов категорий за считанные минуты. Присоединяйтесь ко мне, когда мы исследуем возможности Extra.

В части 1 мы устанавливаем наши параметры темы и настройки настройщика. Во второй части мы добавили наши посты и создали макет поста для отображения обзоров наших продуктов. В части 3 этой серии статей мы создали два макета категорий для нашего сайта с обзором продуктов - одну для нашей домашней страницы и одну для страницы «Все категории».

Сегодня мы собираемся завершить работу над сайтом с обзором продуктов, создав макет категорий по умолчанию, наше меню и нижний колонтитул. Изюминкой сегодняшнего поста станет настраиваемое меню, в котором есть ссылки на меню, соответствующие цвету страниц соответствующих категорий. Я также покажу вам, как развернуть встроенные в Extra параметры мегаменю и добавить несколько собственных настроек.

Вот краткий обзор того, что мы собираемся построить

Давайте начнем.

Создание сайта обзора продукта с дополнительными возможностями - Часть 4

Подпишитесь на наш канал Youtube

Создание страницы категории по умолчанию

Extra поставляется с уже установленной страницей категории по умолчанию. Страница категории по умолчанию - это макет, который будет использоваться при просмотре страницы категории, для которой не выбран конкретный макет категории. В части 3 этой серии мы определили макет категорий для нашей домашней страницы и назначили нашу страницу «Все категории» определенной категории «Все категории». Для остальных страниц категорий обзора продуктов мы будем использовать этот макет категорий по умолчанию.

Чтобы настроить макет категории по умолчанию, перейдите на панель управления WordPress и перейдите в раздел «Дополнительно»> «Построитель категорий». Затем наведите указатель мыши на «Категория по умолчанию» и щелкните ссылку редактирования.

По умолчанию ваша категория по умолчанию состоит из двух модулей, уложенных друг на друга в строке из одного столбца стандартного раздела. Прежде чем вносить какие-либо изменения в макет, убедитесь, что вы выбрали вариант «Использовать этот макет как макет по умолчанию?» в поле "Использование макета" на правой боковой панели.

Во-первых, замените верхний слайдер избранных сообщений модулем карусели сообщений. Затем обновите настройки модуля, отметив «Текущая категория / тег / таксономия» в качестве категории для этого модуля. Теперь этот модуль карусели сообщений будет отображать только продукты посещаемой страницы категории. Довольно умно, да?

Сохранить и выйти

Вы можете оставить для модуля Blog Feed Masonry настройки по умолчанию. Просто убедитесь, что какой-либо модуль категории, который вы добавляете на эту страницу в будущем, имеет назначенную ему категорию «Текущая категория / Тег / Таксономия».

Теперь, чтобы стилизовать заголовок h1 страницы категории, вам нужно добавить следующий пользовательский CSS в дополнительный CSS в настройщике темы. Обязательно поместите его в медиа-запрос с минимальной шириной 980 пикселей.

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

Вот и все, что касается макета категорий по умолчанию. Давайте посмотрим, как выглядит наш макет по умолчанию на моей странице категории кухни.

Теперь, когда у нас есть макет категорий по умолчанию, давайте обратим наше внимание на одну из самых важных частей нашего веб-сайта - меню навигации.

Мы уже настроили наш базовый стиль заголовка в первой части этой серии. Но сегодня мы собираемся создать и стилизовать наше основное меню навигации.

На панели инструментов WordPress перейдите в Внешний вид> Меню, затем выберите Меню . Выберите ссылку «создать новое меню» вверху страницы и введите имя «Меню категорий» в качестве имени меню. Затем выберите «Основное меню» в качестве места отображения в разделе «Настройки меню».

Теперь мы можем начать добавлять наши пункты меню в наше меню. Щелкните переключатель Категории слева на странице. В появившихся параметрах выберите «просмотреть все», чтобы убедиться, что вы видите все доступные категории. Отметьте все 5 категорий, которые вы создали (не без категорий), и нажмите кнопку «Добавить в меню», чтобы добавить их в раздел структуры меню в правой части страницы. Теперь вы можете щелкнуть и перетащить каждый из пунктов меню для отображения в следующем порядке:

• Электронный
• Одежда
• Кухня
• Здоровье и фитнес
• Все категории

Прежде чем редактировать пункты меню, выберите ссылку параметров экрана вверху страницы. В открывшемся разделе свойств расширенного меню обязательно установите флажок «Классы CSS». Это позволит нам добавить собственный CSS-класс к каждому из наших пунктов меню.

Вернитесь в свое меню. Начиная с пункта меню Категория электроники, щелкните, чтобы открыть параметры конфигурации. В поле «Классы CSS» добавьте класс с именем «зеленый». А для опции Extra Mega Menu выберите «Mega Menu 3 Featured».

Это позволит достичь двух целей. Во-первых, класс «зеленый» будет использоваться для превращения пункта меню в зеленый при наведении курсора. Во-вторых, при наведении курсора на элемент меню в мега-меню 3 будут добавлены три избранных элемента в виде мегаменю.

Для пункта меню категории одежды добавьте класс «синий» и выберите вариант «Mega Menu 3 Featured» .

Для пункта «Меню категории кухни» добавьте класс «розовый» и выберите опцию «Мега-меню 3: популярные» .

Для пункта меню категории «Здоровье и фитнес» добавьте класс «пурпурный» и выберите вариант «Мега-меню 3 Рекомендуемые» .

Пункт меню «Все категории» будет немного другим. Продолжайте и оставьте текстовое поле CSS Classes пустым. А для опции мегаменю выберите «Список мегаменю». Этот тип мегаменю представляет собой более традиционное мегаменю, которое создает список пунктов подменю. Цель этой ссылки мегаменю - показать все категории со списком их продуктов под ними.

Вернитесь и откройте окно категорий, выберите те же четыре категории (Электроника, Одежда, Кухня и Здоровье и фитнес) и добавьте их в меню. Затем перетащите каждую из добавленных категорий на один уровень под пунктом мегаменю «Все категории».

Переключите параметры конфигурации для каждого из этих пунктов меню категории и добавьте те же классы CSS для каждого, как вы делали ранее. Вот категории с классом, который вам нужно добавить:

Электроника - зеленый
Одежда - синяя
Кухня - розовая
Здоровье и фитнес - фиолетовый

Затем мы собираемся добавить наше собственное изображение, которое будет служить изображением нашей избранной категории для каждой категории в мегаменю.

Используйте фоторедактор, чтобы уменьшить и обрезать каждое изображение, чтобы оно имело ширину 500 пикселей и высоту 300 пикселей.

Добавьте / перетащите их в медиатеку WordPress.

Теперь вернитесь на страницу меню в WordPress Admin.

В этом примере ссылка на верхнюю категорию в моем мегаменю - «Электроника». Щелкните стрелку справа от пункта «Электроника». В поле «Метка навигации» добавьте нужное изображение с помощью тега html img непосредственно перед текстом «Электроника». Тег изображения должен выглядеть следующим образом:

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

Чтобы найти URL-адрес изображения, перейдите в Медиа → Библиотека. Щелкните изображение, которое хотите добавить. Во всплывающем окне «Сведения о вложении» найдите URL-адрес в разделе справа, выделите его, затем используйте ctrl + c, чтобы скопировать его в буфер обмена.

Теперь вернитесь к настройке пункта меню «Электроника» на странице меню и замените текст «Вставить URL-адрес изображения», вставив URL-адрес вашего изображения с помощью ctrl + v.

Повторите тот же процесс для следующих 3 пунктов меню категории.

После того, как вы добавили все четыре тега изображений в каждый из пунктов меню категории, самое время добавить пункты меню отдельных сообщений (ссылки на обзоры продуктов) в каждой из соответствующих категорий.

Щелкните, чтобы открыть поле «Сообщения» слева и выбрать вкладку «Просмотреть все». Затем выберите все 12 ваших продуктов и нажмите «Добавить в меню». Затем перетащите каждый из пунктов меню публикации на один уровень под каждой из их категорий.

Сохранить меню

Прежде чем мы перейдем к нашему новому меню, нам нужно добавить немного настраиваемого CSS, чтобы внести последние штрихи в наше меню.

Перейдите в Настройщик тем> Дополнительный CSS и введите следующий 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;
}

Сохраните и опубликуйте свои настройки.

Теперь давайте посмотрим на наше новое меню. Обратите внимание на цвета пунктов меню при наведении на них курсора. Цвета соответствуют цвету соответствующей категории.

Создание нижнего колонтитула

Чтобы создать нижний колонтитул для нашего сайта с обзорами продуктов, мы воспользуемся преимуществами встроенных виджетов Extra для отображения последних обзоров продуктов и списка категорий.

Сначала нам нужно перейти в Настройщик тем> Настройки нижнего колонтитула. Затем нажмите «Макет» и выберите макет из двух столбцов.

Вернитесь и выберите Типографика и обновите следующее:

Размер текста заголовка: 32
Размер текста тела / ссылки: 16
Цвет текста виджета: rgba (255,255,255,0.6)
Цвет ссылки виджета: #ffffff
Цвет заголовка виджета: #ffffff

Сохранить и опубликовать

Вернитесь в главное меню Настройщика тем и выберите Виджеты. Затем выберите «Нижняя боковая панель слева» и нажмите кнопку «Добавить виджет». Выберите виджет Extra - Recent Reviews.

Вернитесь в меню виджетов, выберите «Нижняя боковая панель справа» и добавьте виджет «Категории».

Перейдите в раздел «Дополнительные CSS» и добавьте следующий настраиваемый CSS-код для нижнего колонтитула.

/****************************
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);
}

Сохраните и опубликуйте настройки настройщика тем и проверьте свой нижний колонтитул.

Вот и все. Вы успешно завершили часть 4 и завершили серию статей о создании сайта с обзором продуктов с использованием Extra.

Окончательный CSS

В зависимости от того, где вы вошли в серию, вам может потребоваться проверить свой собственный CSS, чтобы убедиться, что вы все ввели правильно. Вот окончательный код CSS, который нужно ввести в настройщике темы.

.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;
}
}

Заключение

Надеюсь, вам понравилось исследовать возможности Extra в создании вместе со мной сайта с обзором продуктов. Во всяком случае, я уверен, что вы, по крайней мере, уйдете с новой оценкой этой выдающейся темы и небольшим вдохновением сделать с ней больше. Встроенная система обзора, умные схемы категорий и мощь Divi Builder делают его идеальным местом для сайта с обзорами продуктов.

Одна тема, которую я не затронул (сохраняю для будущего поста), - это как обрабатывать партнерские ссылки с помощью Extra. В конце концов, для большинства людей конечная цель сайта с обзорами продуктов - зарабатывать деньги. Не стесняйтесь делиться своими мыслями по этому поводу ниже в комментариях.

С нетерпением жду Вашего ответа.