avada-themeВ этом посте буду писать о замечательной 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.po (718.8 KiB, 1202 downloads)

 Файл Avada-ru_RU.mo

Avada-ru_RU.mo (150.6 KiB, 1105 downloads)

Идем дальше. Не очень понравилось, что заголовки постов в Аваде, не 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, мы можем столкнутся с тем, что после установки карты Гугл в пост, вместо карты увидим вот такую картину:Установка 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 idmenu-item-11656«.Изменение цвета отельного пункта меню Вордпресс

Затем заходим в админку, в Avada-настройки темы-Пользовательские CSS  и вставляем такие строки:

#menu-item-11656 a {
 color: red;}
#menu-item-11656:hover a {
 color: blue;}

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

Отключение Лайтбокса в мобильной версии сайта

Когда посетитель листает страничку на смартфоне, и случайно задевает картинку, запускается Lightbox в тот момент, когда это нежелательно. Чтобы этого не происходило, на мой взгляд лучше просто отключить Лайтбокс в мобильной версии, для это в файл header.php необходимо вставить такой код:

  1. $(«a[rel^=’prettyPhoto’]»).prettyPhoto(ppArgs);
  2. <?php if($data[‘lightbox_post_images’]): ?>
  3. $(‘.single-post .post-content a’).has(‘img’).prettyPhoto(ppArgs);
  4. <?php endif; ?>
  5. var mediaQuery = ‘desk’;
  6. if (Modernizr.mq(‘only screen and (max-width: 600px)’) || Modernizr.mq(‘only screen and (max-height: 520px)’)) {
  7. mediaQuery = ‘mobile’;
  8. $(«a[rel^=’prettyPhoto’]»).unbind(‘click’);
  9. <?php if($data[‘lightbox_post_images’]): ?>
  10. $(‘.single-post .post-content a’).has(‘img’).unbind(‘click’);
  11. <?php endif; ?>
  12. }
  13. // Disables prettyPhoto if screen small
  14. $(window).resize(function() {
  15. if ((Modernizr.mq(‘only screen and (max-width: 600px)’) || Modernizr.mq(‘only screen and (max-height: 520px)’)) && mediaQuery == ‘desk’) {
  16. $(«a[rel^=’prettyPhoto’]»).unbind(‘click.prettyphoto’);
  17. <?php if($data[‘lightbox_post_images’]): ?>
  18. $(‘.single-post .post-content a’).has(‘img’).unbind(‘click.prettyphoto’);
  19. <?php endif; ?>
  20. mediaQuery = ‘mobile’;
  21. } else if (!Modernizr.mq(‘only screen and (max-width: 600px)’) && !Modernizr.mq(‘only screen and (max-height: 520px)’) && mediaQuery == ‘mobile’) {
  22. $(«a[rel^=’prettyPhoto’]»).prettyPhoto(ppArgs);
  23. <?php if($data[‘lightbox_post_images’]): ?>
  24. $(‘.single-post .post-content a’).has(‘img’).prettyPhoto(ppArgs);
  25. <?php endif; ?>
  26. mediaQuery = ‘desk’;
  27. }
  28. });

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