Адаптивный шаблон Reverie для WordPress

Ваш отзыв

Адаптивный шаблон WordPress

Яндекс не спит, Яша не дремлет, на странице его блога опубликована запись о том, что сайты с неоптимизированным под мобильные устройства шаблоном будут пессимизироваться в выдаче на мобильных устройствах. Ну что ж, пришло время выйти на поиски простого адаптивного шаблона под WordPress. Я с чувством полной уверенности в себе пошла искать готовые бесплатные шаблоны на различных сайтах, их предлагающих. Сколько же их… И какие же они похожие… Но далеко не все, правда.

Итак, критерии поиска:

  1. Не должно быть слайдера вверху сайта, кучи разноцветных картинок везде, где можно и нельзя, или же их уничтожение «ручками» не должно приводить к убийству всего дизайна
  2. На главной странице должна быть одна колонка со списком тем вместе с началом каждой статьи с маленькой картинкой
  3. У темы должно быть больше, чем пара настроек. Да, все это можно сделать и «ручками» в css, php, но… Может такое уже есть и так?… Лень-матушка 
  4. Тема должна быть бесплатной
  5. Тема должна быть адаптивной, хорошо отображаться на различных устройствах и проходить тест Яндекса (на сайте Бета.Вебмастер необходимо перейти в пункт меню Инструменты -> Проверка мобильных страниц и в соответствующую строку скопировать интересующую страницу Вашего блога)

Сколько же шаблонов я просмотрела… Один надо допиливать серьезно с технической точки зрения, второй совсем унылый, третий — а где мои $$$ ?

Я уже махнула рукой и решила заняться другими задачами, как случайно наткнулась на один блог с крайне минималистичным, но в то же время приятным дизайном. Исходный код страницы показал, что блоггер использовал тему под названием Reverie. Первая же страница в гугле показала, что это целый фреймворк для создания своей собственной темы. Когда я применила эту тему, я поняла, что и есть та самая база, к которой уже можно применить свои стили! Именно она отвечала всем пяти пунктам требований, перечисленных выше.

Первое, что меня встретило — это отсутствие русификации к Reverie. Ничего, скачиваем и устанавливаем программу Poedit. Из папки [путь-до-папки-с-темой]/lang берем, например, файлик default.po, заменяем в нем параметр Last-Translator на свой , скармливаем программе Poedit и переводим!

Poedit русификация темы WordPress

Выделяем переводимую фразу, в поле «Перевод» пишем наш перевод, переходим к следующей фразе. Программа, кстати, очень хорошая, сама подсказывает при переводе. Необходимо перед сохранением обязательно щелкнуть по пункту меню «Каталог» -> Свойства. Откроется окно, в котором надо указать итоговый язык из выпадающего списка, в нашем случае это русский:

poedit-change-lang

Сохраняем файл, в результате в папке, в которую мы сохранили перевод, появится два файла — ru_RU.po и ru_RU.mo. Оба их необходимо скопировать в папку с шаблоном в подпапку lang. Как раз в ту, из которой мы брали default.po. Вот мой вариант русификации Reverie, можете его улучшить  .

По русификации это еще не все. К сожалению, не все собрано в один файлик. Идем в файл single.php, находим там фразу «Edit the post», заменяем на «Редактировать пост», например. Этот файл определяет внешний вид поста. Например, именно в этот файл надо добавлять код кнопочек социальных сетей, у меня это Twitter. Сохраняем single.php.

Переходим в файл header.php, находим там слово «Menu», заменяем на «Меню». Это слово появляется тогда, когда Вы открываете Ваш блог с мобильного устройства, по щелчку по нему раскрывается меню сайта. Тут же правим файл с нашим фавикончиком к сайту. Находим строки:

favicon.png заменяем на свой, который мы кинули в корень сайта. У меня это favicon.ico.
Вообще файл header.php отвечает за отображение верхней части сайта, где главное меню, логотип сайта и т.п. Сохраняем header.php.

С русификацией все.

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

Идем в файл content.php, находим там строки:

Убираем эти строки, заменяем на

Наконец, мне совсем не нравилось, что дата создания поста записывается как 6th February 2016. Идем в файл functions.php, находим функцию

В последнем get_the_time пишем get_the_time(‘Y-m-d’), теперь даты у нас будут отображаться как 2016-02-06.

Также хочется, чтобы рядом с датой публикации поста писалось количество комментариев с посту. В эту же функцию последней строкой ДО закрывающей фигурной скобки }  добавляем строку

Сохраняем файл functions.php  .

В процессе юзания данной темы выяснилось, что текст, непосредственно следующий за первой картинкой до следующего абзаца, как-то очень сильно сжат, т.е. расстояние между строками очень маленькое. В остальной части поста все нормально. При просмотре кода страницы было найдено, именно эта часть поста обрамлена в тег <figure>. После непродолжительных поисков, «виновник» был найден. Оказывается, в папке ./lib живет файл clean.php, который подчищает код. В частности внутри него написано, что картинки после обработки поста этим php-скриптом будут обрамлены в тег <figure>. Остальной текст попал туда по ошибке. Если в текстовом редакторе поста (не в визуальном!) отделить текст от кода вставки картинки двойным нажатием по Enter, после чего текст перейдет на новую по отношению к коду вставки картинки строку, и сохранить пост, все благополучно исправляется!

Да, все-таки пришлось поковыряться в коде темы, но куда ж без этого! 


Оставьте комментарий

XHTML: Вы можете использовать следующие теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url=""> <img src="" alt="" class="" width="" height="">

http://noservice.ru/wp-content/plugins/wp-monalisa/icons/ab.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/ac.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/ag.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/ah.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/ai.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/ak.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/am.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/an.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/ao.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/aq.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/ar.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/at.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/av.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/aw.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/ay.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/az.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/bb.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/bc.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/bd.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/be.gif 
больше...