В этом посте буду писать о замечательной Premium теме WordPress — Avada. Приобрел ее на сайте Themeforest. Конечно в Сети можно скачать пиратскую версию Авады, но я решил не делать этого, а посчитал, что правильнее, заплатить разработчикам за их труд, и получить законченный продукт, с возможностью тех. поддержки и бесплатного обновления, да и безопаснее это, чем качать неизвестно откуда с кучей активных внешних ссылок, а может еще и с вирусами.
Этот пост буду дописывать по мере дальнейшего изучения и внедрения темы на свой сайт. Он будет построен, как список различных лайфхаков — полезных советов, которые я познал в процессе работы с этой темой.
Начну с пожалуй основного после установки темы, с перевода на русский язык. Avada является темой «Translation ready», т.е. темой готовой к переводу. Это означает, что тему можно переводить на русский язык, не заходя в исходный код программы на php.
Более того Авада в своем составе имеет файлы перевода Avada-ru_RU.po и Avada-ru_RU.mo. Перевод правда не полный, поэтому я сначала скачал, затем открыл в программе PoEdit файл Avada-ru_RU.po, добавил некоторое количество переводов, и сгенерировав Avada-ru_RU.mo, закачал оба файла назад на хостинг, в папку Languages темы. Файлы перевода, можете скачать ниже.
Файл Avada-ru_RU.po
Файл Avada-ru_RU.mo
Идем дальше. Не очень понравилось, что заголовки постов в Аваде, не H1, а H2.
Как поменять заголовки постов с H2 на H1?
Для этого , необходимо открыть файл single.php и в строке:
<?php echo avada_render_post_title( $post->ID, FALSE, », ‘2’ ); ?>
значение «2» поменять на «1», чтобы строка выглядела вот так:
<?php echo avada_render_post_title( $post->ID, FALSE, », ‘1’ ); ?>
В марте 17 г. вышло новое обновление темы — 5.1.4. В нем надо редактировать эту строчку:
<?php echo wp_kses_post( avada_render_post_title( $post->ID, false, », ‘1’ ) ); ?>
Поменяв в целях SEO h2 на h1, видим, что размер шрифта маловат. Если хотите увеличить размер заголовка h1 в постах, то добавьте в пользовательский CSS, такой код (для примера, увеличение размера шрифта до 20):
/*Увеличение шрифта заголовка в постах*/ #main .post h1, #wrapper #main .post h2 { font-size: 20px !important; }
Установка Google Map
При использовании Fusion Builder элемента Google Map, мы можем столкнутся с тем, что после установки карты Гугл в пост, вместо карты увидим вот такую картину:Чтобы устранить эту ошибку, надо зайти в Админку, затем «Avada-Contact Form-Карта Google» и вставить API Key в поле «Google Maps API Key». Как получить API Key, можно прочитать здесь.
Не работает Lightbox
Если вы установите тему Avada на готовый сайт, то Лайтбокс на вновь создаваемых записях и страницах будет работать нормально, а вот на старых нет, открываться картинка в нем будет, но воспроизведение не запустится. Чтобы он заработал, придется в тегах <a> картинок и фотографий, добавить код data-rel=»iLightbox[mygroupx]«.
Пример вставки кода:
<a href=»//x-travels.ru/wp-content/uploads/2014/06/pool-loni.jpg» data-rel=»iLightbox[mygroupx]«><img class=»aligncenter wp-image-10573 size-full» title=»Отель Lonicera World 4*» src=»//x-travels.ru/wp-content/uploads/2014/06/pool-loni.jpg» alt=»Отель Lonicera World 4*» width=»1155″ height=»740″ /></a>
Позиционирование текста и кнопок на Fusion слайдере
Код CSS, поднять текст и кнопку на 100 px вверх, для примера на Главной:
.home .slide-content {
margin-top: -100px ! important;
}
Изменение цвета отдельного пункта меню
Наводим курсором на пункт меню, цвет, которого мы хотим изменить, в нашем примере — это пункт меню «Написать отчет», выделяем его, кликаем правой кнопкой и исследуем элемент. В Хроме это делается с помощью «Просмотреть код», в Мозиле — с помощью Firebug. В нашем случае, нас интересует строчка — li id=»menu-item-11656«.
Затем заходим в админку, в Avada-настройки темы-Пользовательские CSS и вставляем такие строки:
#menu-item-11656 a { color: red;} #menu-item-11656:hover a { color: blue;} Таким образом, мы поменяли цвет отдельно взятого пункта меню на красный, а цвет при наведении курсора на голубой.
Отключение Лайтбокса в мобильной версии сайта
Когда посетитель листает страничку на смартфоне, и случайно задевает картинку, запускается Lightbox в тот момент, когда это нежелательно. Чтобы этого не происходило, на мой взгляд лучше просто отключить Лайтбокс в мобильной версии, для это в файл header.php необходимо вставить такой код:
-
$(«a[rel^=’prettyPhoto’]»).prettyPhoto(ppArgs);
-
<?php if($data[‘lightbox_post_images’]): ?>
-
$(‘.single-post .post-content a’).has(‘img’).prettyPhoto(ppArgs);
-
<?php endif; ?>
-
var mediaQuery = ‘desk’;
-
if (Modernizr.mq(‘only screen and (max-width: 600px)’) || Modernizr.mq(‘only screen and (max-height: 520px)’)) {
-
mediaQuery = ‘mobile’;
-
$(«a[rel^=’prettyPhoto’]»).unbind(‘click’);
-
<?php if($data[‘lightbox_post_images’]): ?>
-
$(‘.single-post .post-content a’).has(‘img’).unbind(‘click’);
-
<?php endif; ?>
-
}
-
// Disables prettyPhoto if screen small
-
$(window).resize(function() {
-
if ((Modernizr.mq(‘only screen and (max-width: 600px)’) || Modernizr.mq(‘only screen and (max-height: 520px)’)) && mediaQuery == ‘desk’) {
-
$(«a[rel^=’prettyPhoto’]»).unbind(‘click.prettyphoto’);
-
<?php if($data[‘lightbox_post_images’]): ?>
-
$(‘.single-post .post-content a’).has(‘img’).unbind(‘click.prettyphoto’);
-
<?php endif; ?>
-
mediaQuery = ‘mobile’;
-
} else if (!Modernizr.mq(‘only screen and (max-width: 600px)’) && !Modernizr.mq(‘only screen and (max-height: 520px)’) && mediaQuery == ‘mobile’) {
-
$(«a[rel^=’prettyPhoto’]»).prettyPhoto(ppArgs);
-
<?php if($data[‘lightbox_post_images’]): ?>
-
$(‘.single-post .post-content a’).has(‘img’).prettyPhoto(ppArgs);
-
<?php endif; ?>
-
mediaQuery = ‘desk’;
-
}
-
});
На этом пока все, буду дописывать пост по мере дальнейшего продвижения по теме.
Автор, благодарю тебя! Тоже приобрел Avada. Сразу же столкнулся с потребностью перевода темы..кнопки read more и прочее.. Ты мне существенно сократил время работы!
Всегда пожалуйста!
Добрый день. Недавно приобрел тему Avada .Столкнулся с проблемой перевода read more и Load More Posts , пробовал перевести через Avada-ru_RU.po но что то не применяется перевод ,хотя остальные элементы перевелись ,пробовал через плагин перевести тоже 0,пробовал через function.php вставить фильтр с официального сайта поддержки тоже не помогает и еще изменить в фаиле blog-layout.php по классу найти и поменять результат один и тот же …
Поможите чем сможите , честно сам в тупике ….
Добрый день, с помощью Poedit пробовали?
Да как раз через эту прогу и переводил Avada-ru_RU.po
Попробуйте отредактировать /wp-content/plugins/fusion-builder/languages/fusion-builder.pot
Столкнулся с такой проблемой: Avada куплена на Themeforest, разархивирована, закачана на хостинг по ftp. Но в админке сайта указано что не найдена таблица стилей. Что делать ума не приложу.
Из под админки пробовали тему загружать?
Вопрос решился повторным скачиванием шаблона и повторной установкой)) Админка не принимала архив такого большого объема.
А файлы перевода какое расширение должны иметь?
Расширения д.б. po и mo.
Avada — отличная тема. Приятный бонус — встроенный конструктор. Так что настройка сайта особого труда не составляет. А если и появлялись вопросы — с тех поддержкой решалось все очень шустро.
Доброго времени суток! Столкнулся с такой ситуацией в теме Avada, что при попытке загрузить картинку или фото, через конструктор Fusion Builder, используя Image Element картинка на сайте не отображается. Только используя Gallery Element либо Text Block (обычная вставка картинки в текст) можно вставить картинку на сайт. Тема куплена официально и зарегистрирована, WP последняя версия, PHP 7.1, такая ситуация во всех браузерах (мазила, опера, гугл, яндекс) Если знаете, как исправить такую ситуацию, ответьте.
P.S. Такая ситуация практически со всеми сайтами, только на сайте фотографа всё было нормально
Здравствуйте,
не отображается в лайтбоксе? или в самом посте? Если в лайтбоксе, то надо еще загрузить картинку в секции Lightbox image.
День добрый!
Не отображается картинка в посте. Если вставить картинку через элемент Image конструктора, то отображается запись Alt Text, если её прописать. А если вставлять картинку через другие элементы конструктора то она отображается на сайте.
В секции Lightbox image картинка тоже указана и не видна в посте.
Может попробовать по отключать по очереди плагины?
Доброй ночи! такая проблема с авадой(( Создаю Контейнер с 2 элементами: Заголовок и текстовый блок. — Отображается верно! Но при создании последующего контейнера , предыдущий с заголовком и текстовым блоком СЛЕТАЕТ((( В тексте появляется вот такая гадость, (Единственное, что от мrow_column_index=»2_1″ еня осталось, это) .Что за row_column_index=»2_1″ ??? ((((( Help!! ))) Даже если этот контейнер копировать -то такая хрень(. Если этот контейнер оставить последним и после не добавлять ни столбцы ни другой контейнер — ВСЕ ОК(( Шо делать, кто знает???
Пользуюсь Авада очень удобно и быстро, нареканий нет, даже имеется конструктор!
Решил проблему сменой версии Php с 5.3 на 7.0!!!!!
Добрый день. В конструкторе в настройках любого элемента есть пункты» Gneral, Общий». В общем можно настроить CSS. Как это сделать на практике. Например мне нужно задать тип и цвет шрифта. Спасибо.
Добрый день, вам необходимо в поле Class CSS элемента, прописать имя класса, например custom_font, затем в настройках Авады, в Custom CSS прописать .custom_font{font-size:20px !important;}. Здесь показано, как изменить размер шрифта в отдельном элементе.
Большое спасибо за ответ!
Добрый день! Можно ли в Avada сделать чистый h1? чтобы ….., а не ….?
Спасибо!
Приветствую.
Если тема еще жива — прошу подсказать решение: долгое время использовалась версия 3.9.3 недавно обновили версию до 5.4.2 и все бы хорошо… Но в редакторе страниц пропала возможность выбора визуального редактора Fusion Builder. При этом сам плагин разумеется установлен, настройки верны, а в редакторе — ничего. Если кто то сталкивался — буду очень признателен за совет…
А сам Fusion Builder обновлен? Может какой из плагинов влияет? У вас случайно не установлен Yoast SEO?
Здравствуйте, подскажите в чем может быть проблема. Закачиваю на хостинг файлы mo и po, но тема не переводится. Загружаю в папку themes/Avada/languages
Здравствуйте, у вас Вордпресс на русском, или на английском? Если на английском, то надо изменить локаль в файле wp-config.php. Найдите в этом файле строку определяющую константу WPLANG и измените её:
define( ‘WPLANG’, ‘ru_RU’ );
После этого тема будет отображаться на русском.
А как убрать h2 с постов в архиве?