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

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

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

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

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

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

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

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

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

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

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

Как выводить произвольные поля в Avada с помощью плагина ACF (Advanced Custom Fields) без знания php и копания в коде? Разберётся даже начинающий, прочтите эту статью https://188.ru/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 и добавьте туда следующий код:

Вторая строчка отвечает за цвет ссылок, которые вы уже посетили. Её можно удалить, так как в последнее время эта настройка используется редко. А третья строчка как раз отвечает за цвет ссылок при 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 пикселей.

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

Указание ширины сайта в процентах — резиновая (адаптивная) вёрстка шаблона Avada.

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

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

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

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

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

Разметка 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, вставьте в поле вот этот код:

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

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

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

Скриншот cypreales.com

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

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

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

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

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

После этого вы можете создать логотип и закачать его в формате масштабируемой векторной графики (SVG) в раздел Logo. Отдельных версий под Ретину теперь делать не нужно. Но отдельно закачать этот лого в раздел для мобильных устройств — стоит.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Сохраните изменения. После этого в сетке постов 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 и плагинов Core, Builder и других.

Avada Hotspots

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

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

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

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

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