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”.

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