Avada - Premium тема WordPress | Первые шаги в WordPress

Опубликовано: 01.09.2018

В этом посте буду писать о замечательной 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, 294 downloads)

Файл Avada-ru_RU.mo

Avada-ru_RU.mo (150.6 KiB, 274 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, мы можем столкнутся с тем, что после установки карты Гугл в пост, вместо карты увидим вот такую картину: Чтобы устранить эту ошибку, надо зайти в Админку, затем «Avada-Contact Form-Карта Google» и вставить API Key в поле «Google Maps API Key». Как получить API Key, можно прочитать здесь.

Не работает Lightbox

Если вы установите тему Avada на готовый сайт, то Лайтбокс на вновь создаваемых записях и страницах будет работать нормально, а вот на старых нет, открываться картинка в нем будет, но воспроизведение не запустится. Чтобы он заработал, придется в тегах <a> картинок и фотографий, добавить код data-rel=»iLightbox[mygroupx] «.

Пример вставки кода:

Позиционирование текста и кнопок на 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;} Таким образом, мы поменяли цвет отдельно взятого пункта меню на красный, а цвет при наведении курсора на голубой.

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