Avada — обзор, советы и отзывы об одном из самых популярных WordPress-шаблонов

Статья перенесена с другого проекта, сменившего направление деятельности. Собираю полезную русскоязычную инфу по шаблону Авада (для движка Вордпресс).

Среди минусов Avada назову то, что с телефона в Back-end Builder с ней работать нельзя, блоки не открываются, не переставляются, не редактируются. Возможно, это только с Андроидом, но не факт. Поэтому если под рукой нет компа — то с Авадой ты работать с телефона не сможешь, беспомощен как ребёнок.

Также недостатком шаблона Авада можно назвать его тяжесть и неповоротливость. Можно ли это исправить? Да, копаясь в десятках мелких настроек, что для меня не вариант. 

И ещё один минус — если вы всё-таки решите сменить свой шаблон с Avada на другой — вам придётся очень много работать над восстановлением нормального вида контента. Потому что: а) Многие элементы, даже обычный текст, будут начинаться с шорткодов [fusion… ], которые придётся удалять вручную. б) Коды, вставленные из других ресурсов, останутся зашифрованными в виде длинной череды букв, типа Iujspfjip03ijfrpm2o-)UI()i0pfjk039j4klJlkjdflg , вам придётся вручную восстанавливать и вставлять оригинальный код.   

В этой статье собираю отзывы о теме Avada для CMS WordPress, а также делюсь советами по настройке и развитию сайта на этом шаблоне.

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

Официальным продавцом Вордпресс-шаблона Avada является Envato. С 1 июля 2022 стоимость темы составляет 69$. Страница с покупкой лицензинной версии Авады находится здесь.

---

Включить комментарии на страницах в Avada

Чтобы иметь возможность комментирования страниц, нужно отдельно включить эту настройку в шаблоне Авада. Для этого перейдите в Options, далее зайдите на вкладку Miscellaneous, выберите пункт Comments on Pages с примечанием Turn on to allow comments on regular pages и передвиньте ползуонк в положение ON.

Короткий путь к пункту Options для настроек шаблона Авада: https://вашсайт.ru/wp-admin/themes.php?page=avada_options

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

Проверено на версии Avada V7.4.2

---

Вывод произвольных полей в Avada

Как выводить произвольные поля в Avada с помощью плагина ACF (Advanced Custom Fields) без знания php и копания в коде? Разберётся даже начинающий, прочтите эту статью https://webliner.pro/vyvod-proizvolnyh-poley-acf-wordpress-dlya-nachinayuschih/ — данный способ также сохранит вывод произвольных полей после обновления версии CMS, темы и плагина. Ничего не слетит.

---

Как вставлять куски кода в посты или страницы Avada

Чтобы использовать фрагменты кода php, HTML, CSS и других в качестве примера для публикации в статье, воспользуйтесь готовым решением, которое уже предусмотрено в этом шаблоне.

Данный элемент называется Syntax Higlighter, и служит как раз для добавления строк кода в посты WordPress. Инструмент делает обёртку кода, оставляя его видимым для чтения в виде обычного текста. При этом код не срабатывает.

Syntax Highlighter работает в постах (записях), страницах, портфолио, карточках товара и других местах Авады. Для его вывода нажмите на зелёную букву A в визуальном редакторе, перейдите на вкладку Design Elements, найдите Syntax Highlihter (в русскоязычном интерфейсе может иметь перевод как «Подсветка синтаксиса»). Инструмент имеет несколько вариантов оформления, а также кнопку «скопировать» для удобной работы с кодом.

Изменить цвет ссылок по наведению

Цвет самих ссылок в Аваде можно задать в разделе Avada > Options > Typography > Body Typography > Link Color.

Но что если нужно изменить цвет ссылок по наведению на них курсором мыши? Разработчикам такое положение курсора известно как hover или mouseover.

По умолчанию в шаблоне Авада такая настройка не предусмотрена, но всё же цвет ссылок по наведению курсора можно изменить с помощью Custom CSS. Для этого перейдите в Avada > Options > Custom CSS и добавьте туда следующий код:

a {color: red;} /* link color */
a:visited {color:blue;}
a:hover {color:orange;}
a:active {background-color:tomato;}

Вторая строчка отвечает за цвет ссылок, которые вы уже посетили. Её можно удалить, так как в последнее время эта настройка используется редко. А третья строчка как раз отвечает за цвет ссылок при hover, вписывайте туда свой цвет и сохраняйте изменения.

Оригинал решения на английском доступен здесь https://forums.envato.com/t/how-do-i-change-link-color-attributes-in-avada/77104

Изменения касаются текстов в постах и страницах, не затрагивая стили заголовков, пунктов в подвале и т.д.

---

Настроить ширину сайта в процентах

Есть два варианта вёрстки, в которых может отображаться сайт на Avada:

1. Фиксированная;
2. Адаптивная (резиновая);

С первого взгляда можно не обнаружить наличия резиновой вёрстки, потому что в пояснении к полю, где задаётся ширина сайта, говорится только о пикселях. А значит — пользователь видит лишь возможность задать фиксированную ширину.

Site Width
Controls the overall site width. Enter value including any valid CSS unit, ex: 1200px.

Перевод:

Ширина сайта
Контролирует общую ширину сайта. Введите значение, включая любую допустимую единицу CSS, например: 1200 пикселей.

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

---

Купить Аваду на сайте официального реселлера

Убрать поиск с 404 страницы в Авада

Если вы не хотите использовать поиск по сайту, не забудьте убрать поле поиска с 404-й страницы в теме Avada, поскольку этот элемент установлен там по умолчанию. Выключить его в настройках из админки нельзя. Для этого нужно воспользоваться удалением кода из темы.

Перейдите сюда wp-content > Themes > Avada и удалите следующий код в файле 404.php :

<div class="fusion-column col-lg-4 col-md-4 col-sm-4">
						<h3><?php esc_html_e( 'Search Our Website', 'Avada' ); ?></h3>
						<p><?php esc_html_e( 'Can\'t find what you need? Take a moment and do a search below:', 'Avada' ); ?></p>
						<div class="search-page-search-form">
							<?php echo get_search_form( false ); ?>
						</div>
					</div>

Почему нужно вносить изменения именно в дочернюю тему, а не основную? Это делается для того, чтобы при обновлении шаблона эти изменения не слетели.

---

Разметка Open Graph

В шаблоне Авада есть возможность включить разметку Опен Граф. Для этого перейдите > Theme Options > Advanced > Theme Features > Open Graph Meta Tags, включите On, сохраните изменения.

Предупреждение. некоторые плагины оптимизации, например, Yoast SEO, добавляют свою собственную реализацию Open Graph. Если вы хотите использовать их, то опцию в Avada следует отключить.

---

Как убрать даты из виджета постов в Avada

Авада имеет виджет «Recent», выводящий в разных вкладках:

1. Новые посты;
2. Cамые популярные посты;
3. Комментарии пользователей.

Два любых из них можно отключать, оставив, например, только популярные записи.

Однако разработчики не добавили возможность скрыть дату публикации поста. Как заметил один из читателей в отзывах к обзору Avada на другом сайте, если актуальный и по сей день материал опубликова годы назад, то старая дата публикации смущает пользователей. Им кажется, что материал устарел.

Чтобы этого избежать, перейдите в Options -> Custom CSS, вставьте в поле вот этот код:

.fusion-tab-recent.fusion-tab-content.tab.tab_content .fusion-meta,.fusion-tabs-widget .fusion-tabs-widget-content .post-holder .fusion-meta {
    display: none;
}

и сохраните изменения. Даты публикации постов в виджете Recent пропадут.

---

Как убрать даты и комментарии в «Похожих постах»

Avada располагает встроенным инструментом вывода похожих записей (Related Posts) под постом, а также похожих проектов в «Портфолио». Однако в нём есть функция, которая для многих является лишней, а именно — вывод дат публикации постов/проектов и количество комментариев к ним.

Отключить это в настройках Авады нельзя, но можно добавить следующий кусок кода в разделе Custom CSS и сохранить изменения:

.fusion-carousel-title-below-image .fusion-carousel-meta{
  display: none;
}

---

Как включить поддержку .SVG файлов

Многим пользователям Авады не нравится создание отдельных размеров логотипов под Retina (причём для мобильных телефонов создаётся ещё одна дополнительная версия). Более того, даже наличие логотипов разных размеров всё равно не всегда срабатывает корректно.

Выходом в такой ситуации станет использование не привычных .jpg или .png файлов, а масштабируемой векторной графики — SVG. Ссылка на страницу в Википедии —  https://ru.wikipedia.org/wiki/SVG

Чтобы включить поддержку СВГ файлов в Avada, перейдите в настройках в раздел Performance и включите Enable в разделе «SVG Media Opload», сохраните изменения. Эти же настройки можно найти и через поисковую форму, набрав в ней «svg» (см. скриншот).

---

Как автоматически вывести текущий год в подвале сайта WordPress

Существует несколько вариантов решений отображения текущей даты на сайте. На форуме поддержки темы Авада пользователи предлагают стандартный код:

<script>document.write(new Date().getFullYear())</script>

Если вы используете шаблон Avada, эту строчку кода следует разместить в  Theme Options > Footer Content > Copyright Text. После этого текущий год будет автоматически выводится в подвале сайта, его ручное ежегодное обновление больше не нужно.

Данный код работает не только с Avada, но и другими темами Worpdress!

---

Как изменить размер шрифта в подвале

Авада имеет настройки изменения размера заголовков (Headings) виджетов, но в ней не предусмотрена лёгкая смена размеров основного шрифта в виджетах подвала (Footer).

Если вам нужно изменить именно размер текста в подвале, перейдите в Avada > Options > Custom CSS и добавьте в него код:

.fusion-footer-widget-area a {
font-size: 16px !important;
}

Где вместо 16px вы можете вписать нужный вам размер. Не забудьте сохранить изменения.

---

Вывести код баннера в Header Content 3 на мобильных устройствах

По умолчанию Авада не выводит код баннера из Header 3 на телефонах, если положение Хедера настроено слева (Header Position — Left). То есть вместо общепринятого вида сверху он закрепляется сбоку в качестве левой колонки. Прописанный в нём код баннера будет виден на компьютерах и ноутбуках, но не на мобильных гаджетах.

Чтобы вывести код баннера из поля Header Content 3 и для телефонов, добавьте в раздел Custom CSS следующий код:

@media only screen and (max-width: 800px) {
#side-header .fusion-main-menu, #side-header .side-header-content-1-2, #side-header .side-header-content-3 {
    display: block !important;
}
}

---

Как переименовать Read More в шаблоне Avada

Выводя последние посты блога на Аваде в виде сетки или в другом дизайне, можно разрешить появление надписи Read More или запретить её. При разрешении эта надпись выводится как есть, перевести её на другой язык с первого взгляда сложно. Воспользуемся решением от энтузиастов, опубликованном на форуме поддержки Авады Theme-Fusion.com, и переименуем Read Mode в «Читать далее».

Для этого установите дочернюю тему Avada Child, после чего в админке перейдите в Внешний вид — Редактор тем. Выберите в Avada Child файл functions.php и пропишите в нём следующий код:

// Called in Avada Blog Layout Template PHP File
add_filter( 'avada_blog_read_more_link', 'my_read_more_link' );
function my_read_more_link( $read_more ) {
	$read_more = "Читать далее...";
	return $read_more;
}

Сохраните изменения. После этого в сетке постов Read more переименуется в Читать далее.

---

Как переименовать «Recent» и «Popular» в виджете «Tabs»

Проще всего это сделать плагином Loco Translate, обеспечивающим редактирование файлов локализации WordPress в браузере и интеграцию с сервисами автоматического перевода.

В решении задач по переводу заголовков и прочих текстовых элементов Авады пользователи допускают две распространённые ошибки:

1. Переводят системный файл (игнорируя предупреждение «Замечание: Изменения в этом файле могут быть перезаписаны или удалены при обновлении WordPress»), в результате чего перевод слетает при обновлении Avada. Эта проблема решается созданием нового каталога «Индивидуальный».
2. Ищут объекты перевода только в файлах темы, тогда как они нередко находятся в файлах плагинов. Например, чтобы переименовать Popular и Recent нужно искать эти слова в файлах плагина Avada Core (Fusion Core).

Перейдите по адресу Loco Translate — Plugins — Avada Core (Fusion Core), выберите свой язык,  нажмите «Редактировать». ИЗМЕНЕНИЯ НУЖНО ВНОСИТЬ В ИНДИВИДУАЛЬНЫЙ КАТАЛОГ, А НЕ СИСТЕМНЫЙ. ЕСЛИ ИНДИВИДУАЛЬНОГО КАТАЛОГА ЕЩЁ НЕТ — СОЗДАЙТЕ ЕГО ПУТЁМ НАЖАТИЯ «НОВЫЙ ЯЗЫК». Это убережёт ваши внесённые изменения в перевод шаблона от исчезновения при обновлении темы.

Перейдя в редактирование, введите в строке поиска «Recent» и пропишите нужный перевод в соответствующем поле. Это может быть «последние посты», или «Новое». Сохраните изменения, затем сделайте перевод слова «Popular», написав в соответствующем поле «Популярное» или «Частое». Сохраните изменения.

Avada Hotspots

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

Потому что нужно двигать курсор в определённую точку на изображении.

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

Пример работы Avada Hotspots

Актуальный пример на сайте разработчика — https://avada.theme-fusion.com/element/image-hotspots/

---

Лицензионную копию темы Авада можно приобрести на сайте официального продавца.

---

Как отключить портфолио в шаблоне Avada

Начиная с версии 7.9 Авада имеет встроенную функцию Maintenance или Coming Soon. За счёт первой вы можете включить на своём сайте заглушку типа «Сайт на ремонте/обновлении/реконструкции/обслуживании» и т.д. А Coming Soon даёт возможность вывести информацию о готовящемся событии — запуске сайта и т.д., включить таймер обратного отсчёта. Подходящую тему для оформления можно найти в Avada Library template в админке сайта. Само включение режимов обслуживания или ожидания находится в настройкаха Авады — Main Optinons — Maintenance Mode.

Как сменить тип поста в Avada

Что если нужно превратить пост в страницу, или наоборот страницу в запись (пост). Авада имеет ещё несколько типов записей, например PORTFOLIO или FAQ. Воспользуйтесь этим советом, проверено лично — https://webliner.pro/moya-sborka-wordpress/#posttypeswitcher — мне было нужно не только POST менять на PAGE, но и FAQ на POST, и этот плагин прекрасно справился.

Как настраивать роли пользователей в Avada

Если нужно ограничить роли контентщика, редактора, нескольких админов и т.д. 

Перейдите по адресу вашсайт.ру/wp-admin/admin.php?page=avada-builder-options, спуститесь в самый низ, увидите Role Manager. Среди них: 

• Editor (редактор)
• Author (автор)
• Contributor (участник, отличается от автора тем, что не может публиковать и свои посты)

Также в зависимости от установленных плагинов могут быть доступны роли:

• SEO Manager
• SEO Editor
• Shop Manager
• и др

---

Вам понравилась публикация?

---