Wordpress тема Zerif lite на мультиязычном сайте, мой опыт

По работе столкнулась с шаблоном одностраничника Zerif lite (версия 1.8.2.1, для Wp 4.2.2). Раньше думала, что они магическим образом устроены: картинка на первом шаге растягивается и обрезается в зависимости от окна браузера хитрым яваскриптом, все выплывает плавно опять же с помощью магических пассов яваскрипта (для меня этот язык - магия), и разные фоны у разных частей страницы в виде изображений и видео перекрываются секциями со сплошным фоном и всё это тааак хитро устроено, что я пугалась заглянуть внутрь и ничего не понять. Я ведь давно забросила верстку и адаптивная - для меня темный лес, хотя я и понимаю принцип. Но от количества возможных вариантов отображения помноженных на кол-во браузеров и платформ у меня лично мозги тут же вскипают, поэтому когда стало ясно, что без этого никуда - я разленилась и ушла из этой области. И не жалею, уж очень утомляла поддержка устаревших браузеров. Да и современных IE.

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

Документация доступна здесь.
Из нее можно узнать где какой кусок редактируется.

zerif liteУстроен шаблон вроде просто, но в чем-то уникально. Например, чтобы главная стала одностраничником, надо в настройках темы у главной страницы поставить переключатель на Your latest posts. Видимо это связано с тем, что на главной в блоке новостей выводятся эти последние посты (а если их больше 3х, то еще начинают крутиться) и их нигде никак не поправить, кроме как поменять очередность и содержание записей блога. Но это с ходу не очевидно и выглядит странно. Особенно, фраза "Ваша тема поддерживает статичную главную страницу". Как будто я не в курсе!

На практике редактирование шаблона выявило следующие баги/фичи:

  1. Нельзя поставить в слове "don't", например, символ - '. Пишет его с обратным слешем.
  2. Однострочные текстовые поля пропускают теги, но как же в них неудобно их редактировать! То есть можно и заголовки, и ссылки, и списки и абзацы...
  3. Кнопка загрузить картинку в некоторых полях не работает, приходится идти в виджет и там грузить. Слава Богу хоть такая возможность есть.
  4. Поменять фон можно только у верхней картинки. Причем, там есть разные настройки для него, но сколько бы я ни меняла - результат один. Фоны других секций - только в css. Причем, здесь раскрою секрет одностраничников - эффект фона-подложки сделан за счет простого fixed у фона блока. А я-то думала: магия...
  5. В доках указаны якоря, чтобы сделать свое меню, но например ссылка на BottomButton Ribbon не сработает. Поправила id у блока в исходниках и заработало.
  6. Плагин Jetpack, который я поставила для соцкнопок в постах и всплывающей галереи, этой галереей переопределил стили для формы контактов шаблона, пришлось снова править исходники, на этот раз у Jetpack. Я в возмущении!
  7. Нельзя добавить еще какие-то секции. Работаем только с имеющимися. При этом портфолио, карта, таблица цен, подписка email и Packages недоступны в lite версии. Нельзя поменять их местами, как в про версии.
  8. Советуют использовать WordPress Importer plugin для загрузки демо контента на сайт, чтобы было как в Demo версии. Но когда я использовала его для своих настроек - ровным счетом ничего не перенеслось, из того, что я ожидала. И это главное разочарование в данном шаблоне для меня - с хостинга на хостинг сайт с этим шаблоном просто невозможно перенести!!! Да как вы смеете! Вздыхающий
  9. Ну да ладно. Я использовала еще 2 плагина - https://wordpress.org/plugins/widget-importer-exporter/ и https://wordpress.org/plugins/options-importer/. Они молодцы, делают свое дело, и второй даже вроде бы показал что-то вменяемое, но в результате все настройки темы оказались не перенесенными, удалось перенести только виджеты, и на том спасибо. Настройки темы переносила вручную. Позже я узнала про Duplicator - который очень облегчает перенос любого wordpress сайта. Для этой темы он сработал без зазоринки!!! Рекомендую!
  10. В шаблоне 4 секции могут содержать виджеты. Это Our focus section, Testimonials section, About us section и Our team section. Мне, допустим, не нужна команда. Но вместо того, чтобы просто ее не выводить (галочка "не выводить" есть в любой секции), я поместила в нее свой виджет с галереей фоток (откуда я его взяла? из поставки SiteOrigin Widgets Bundle для плагина Page Builder by SiteOrigin), сделала соответствующее название и вот у меня уже свой кусок в рамках данной темы. Я считаю - очень здорово, что все-таки оставили небольшой простор для творчества. Хоть и всего в 4х секциях.
  11. Видела, что в интернете жалуются, что нет плавной прокрутки и активная ссылка в меню никак не выделяется. Я согласна, хотя в моем случае все это не критично.
  12. Зато критичным оказалось то, что при нажатии на меню в другом языке (например, на странице http://yoursite.com/en/), если пункт меню - якорь, страница перезагружается! При этом на главной - нет и все проматывается без перезагрузки.
  13. Еще пока не разобралась как выключить анимацию блоков при прокрутке страницы (чтоб не плавали), видимо это называется parallax эффектом. UPDATE через неделю: разобралась: нужно удалить из тегов в файлах папки sections такие и похожие конструкции:
    data-scrollreveal="enter left after 0s over 0.1s"
  14. Тема использует неправильный php код, и поэтому ее сложно переводить.
    if( !empty($zerif_aboutus_title) ):
    echo '<h2 class="white-text">'.__($zerif_aboutus_title,'zerif-lite').'</h2>';
    endif;

    Сведущие очень ругаются на использование переменных в конструкции __(), которая встречается в теме везде. Я думаю, разработчики темы - плохо разбираются в Wordpress, потому что это основная функция и на форуме ругают за такое ее использование. Поэтому это еще один повод отказаться от шаблона в пользу других, с более продуманной архитектурой. Ну или для мультиязычных сайтов не использовать ее.

  15. Менять местами секции на главной можно просто поменяв местами код в файле front-page.php в корне темы.
  16. Чтобы добавить любой виджет в любую секцию, нужно сначала создать контейнер для этого. Это делается так (на примере Latest news):В functions.php пишем в место, которое для этого подходит (там по смыслу понятно):
        register_sidebar(array(

            'name' => __('Latest news', 'zerif-lite'),

            'id' => 'sidebar-latestnews',

            'before_widget' => '',

            'after_widget' => '',

            'before_title' => '<h2 class="widget-title">',

            'after_title' => '</h2>',

        ));

    Затем, идем в sections/latest_news.php и в нужное нам место вставляем

    if(is_active_sidebar( 'sidebar-latestnews' )):

      echo '<div class="row" data-scrollreveal="enter left after 0s over 0.1s">';

      dynamic_sidebar( 'sidebar-latestnews' );

      echo '</div>';

    endif;

  17. Мне все-таки удалось перевести эту тему! Идею подал coralepuccini, но он не понимал до конца, что делает, поэтому у него ошибки и не всё работает. Я разобралась и вот примерная инструкция (важно еще почитать как работают функции здесь):
    1. Во-первых, я поставила плагин Polylang
    2. Во-вторых в functions.php в самом конце файла я написала:
      $zerif_aboutus_title = get_theme_mod('zerif_aboutus_title');
      $zerif_testimonials_title = get_theme_mod('zerif_testimonials_title');
      $zerif_ourteam_title = get_theme_mod('zerif_ourteam_title');
      $zerif_contactus_title = get_theme_mod('zerif_contactus_title');
      $zerif_contactus_subtitle = get_theme_mod('zerif_contactus_subtitle');
      $zerif_latestnews_title = get_theme_mod('zerif_latestnews_title');
      $zerif_bottomribbon_text = get_theme_mod('zerif_bottomribbon_text');
      $zerif_ribbonright_text = get_theme_mod('zerif_ribbonright_text');
      $zerif_ribbonright_buttonlabel = get_theme_mod('zerif_ribbonright_buttonlabel');
      $zerif_aboutus_biglefttitle = get_theme_mod('zerif_aboutus_biglefttitle');
      $zerif_aboutus_text = get_theme_mod('zerif_aboutus_text');
      $zerif_aboutus_feature1_title = get_theme_mod('zerif_aboutus_feature1_title');
      $zerif_aboutus_feature1_text = get_theme_mod('zerif_aboutus_feature1_text');
      $zerif_aboutus_feature2_title = get_theme_mod('zerif_aboutus_feature2_title');
      $zerif_aboutus_feature2_text = get_theme_mod('zerif_aboutus_feature2_text');
      $zerif_aboutus_feature3_title = get_theme_mod('zerif_aboutus_feature3_title');
      $zerif_aboutus_feature3_text = get_theme_mod('zerif_aboutus_feature3_text');
      $zerif_aboutus_feature4_title = get_theme_mod('zerif_aboutus_feature4_title');
      $zerif_aboutus_feature4_text = get_theme_mod('zerif_aboutus_feature4_text');

      pll_register_string('aboutus_title',$zerif_aboutus_title,'zerif-lite');
      pll_register_string('testimonials_title',$zerif_testimonials_title,'zerif-lite');
      pll_register_string('ourteam_title',$zerif_ourteam_title,'zerif-lite');
      pll_register_string('latestnews_title',$zerif_latestnews_title,'zerif-lite');
      pll_register_string('contactus_title',$zerif_contactus_title,'zerif-lite');
      pll_register_string('contactus_subtitle',$zerif_contactus_subtitle,'zerif-lite');
      pll_register_string('bottomribbon_text',$zerif_bottomribbon_text,'zerif-lite');
      pll_register_string('ribbonright_text',$zerif_ribbonright_text,'zerif-lite');
      pll_register_string('ribbonright_buttonlabel',$zerif_ribbonright_buttonlabel,'zerif-lite');
      pll_register_string('aboutus_biglefttitle',$zerif_aboutus_biglefttitle,'zerif-lite');
      pll_register_string('aboutus_text',$zerif_aboutus_text,'zerif-lite');
      pll_register_string('aboutus_feature1_title',$zerif_aboutus_feature1_title,'zerif-lite');
      pll_register_string('aboutus_feature1_text',$zerif_aboutus_feature1_text,'zerif-lite');
      pll_register_string('aboutus_feature2_title',$zerif_aboutus_feature2_title,'zerif-lite');
      pll_register_string('aboutus_feature2_text',$zerif_aboutus_feature2_text,'zerif-lite');
      pll_register_string('aboutus_feature3_title',$zerif_aboutus_feature3_title,'zerif-lite');
      pll_register_string('aboutus_feature3_text',$zerif_aboutus_feature3_text,'zerif-lite');
      pll_register_string('aboutus_feature4_title',$zerif_aboutus_feature4_title,'zerif-lite');
      pll_register_string('aboutus_feature4_text',$zerif_aboutus_feature4_text,'zerif-lite');

      Это лишь некоторые поля, которые настраиваются по адресу /wp-admin/customize.php, если вы скопируете это в свой functions.php, может не сработать. Нужно настроить под ваши нужды! Лишнее удалить, что еще нужно - добавить.

    3. В-третьих, соответствующие строки в файлах папки sections я меняла так: дописывала к функциям __() "pll" впереди: получалось pll__(). И еще убирала второй аргумент 'zerif-lite'. Функция выглядит теперь, например, так:
      pll__($zerif_aboutus_title)

      Здесь важно не перепутать ничего, переписать все места, объявленные в functions.php. Причем, функция pll__() как написано в документации выводит перевод только объявленных в pll_register_string() строк. Если вы просто напишете в po файле - не подхватит и не переведет.

    4. В-четвертых, открывала страницу /wp-admin/options-general.php?page=mlang&tab=strings и на ней переводила мои строки

    Отмечу, что не сразу у меня этот способ заработал. Некоторые строки упрямо не переводились в админке. Но когда я стала добавлять по одной, очень аккуратно и осторожно, то всё срабатывало. Уж не знаю, что я раньше делала не так. Если у вас что-то не переводится, попробуйте так же. Еще важно писать в первом параметре функции pll_register_string() разные названия у разных строк. Будьте внимательны!

  18. Описанный выше способ не единственный, ведь плагин Loco Translate дает возможность объявлять строки прямо в админке и там же переводить их. Но чтобы Wordpress подхватывал ваши переводы, обязательно нужно, чтобы в файлах php вашей темы строки выводились так
    echo __('Sorry, an error occured. Try again later.','zerif-lite');

    или так

    _e('Your Name','zerif-lite');

    Например, мне нужно было перевести форму обратной связи на главной странице внизу. Ее вывод находится в файле front-page.php, например, поле имени:

    <input type="text" name="myname" placeholder="Your Name" class="form-control input-box" value="<?php if(isset($_POST['myname'])) echo esc_attr($_POST['myname']);?>">

    Я заменила значение параметра placeholder на

    <?php _e('Your Name','zerif-lite'); ?>

    и в админке Loco Translate синхронизировала zerif-lite.pot, появился "Your Name", и потом перевела строку, выбрав в выпадающем списке nl_NL.po.

  19. Не смогла перевести я только форму от плагина MailChimp for WordPress, потому что она выводится не в php файле, а в админке.
  20. И для себя здесь отмечу, что галереи в Wordpress бывают следующих типов: “thumbnail”,”rectangular”, “square”, “circle” и “slideshow”.

Красивые сайты должны впечатлять!

Алексей

А с тегом noindex не сталкивались? Сайт не индексируется хоть убей, а найти, где править не могу! Был бы благодарен Подмигивающий

Гость

Скажите, а как добавить в блок aboutus feature no#5 ну и соответсвенно прибавлять столько сколько нужно.в customize.php можно добавить только четыре.

Максим

отличная статья, спасибо!
в версии 1.8.4.0 внесены изменения, и файл перевода на рус. есть,
но все равно форма связи остается на английском, все поля.
где рыть, подскажите пожалуйста!!!

Ваня

Здравствуйте. Использую эту же тему. Хотелось бы узнать, можно ли как то добавить еще одну кнопку в секцию большого заголовка? Там есть синяя и красная кнопка, мне нужна еще зеленая такая же.

Гость

Спасибо за такую подробную статью!!! Это спасение!!!!

Альберт

Здравствуйте! Когда делал одностраничник в Зерифе, снёс меню что справа вверху. Сейчас делаю блог и не знаю, как вывести обратно в верхнее меню ссылку на блог, чтобы он отображался как положено в обычном режиме (добавленные материалы сверху отображаются). Подскажите, что надо сделать?

Гость

Иван приветствую! Скажите, у вас получилось добавить еще одну кнопку на шаблоне zerif? помогите плиз если разобрались

Любовь

Здравствуйте! У меня вопрос по поводу "менять блоки местами". Нужно поменять конкретно блоки "наши цели" и "о нас" как это реализовать на практике? Не получается(