В новогодние каникулы я занимался очень увлекательным делом – изменял внешний вид блога и внедрял в него старые и новые возможности. Сегодня я расскажу обо всех нововведениях!

Я давно собирался изменить дизайн – сначала ко второму дню рождения, потом во время прошлогодних летних каникул, но времени все не находилось. Зимние праздники выдались у меня достаточно длинными, и еще в последние дни прошлого года я приступил к работе над блогом.

Этот рассказ для тех постоянных читателей, которым интересны возможности и устройство этого блога.

Вам в свое время понравился рассказ о процессе создания записей, и я хочу пригласить вас на прогулку за его кулисы!

Платформа Genesis

Новое оформление блога работает на платформе Genesis, являющейся надстройкой для движка WordPress. Я объясню, чем руководствовался при покупке платформы, поскольку вовсе неочевидно, зачем тратить деньги при наличии бесплатных тем оформления. Вообще, это очень похоже на покупку приложения – попробуйте найти параллели в рассказе.

HTML5

Современная разметка является отличным заделом на будущее. С одной стороны, это автоматически обеспечивает совместимость со всеми современными браузерами. С другой – снимает множество проблем с отображением сайта на мобильных устройствах, с которых читатели все чаще заходят в блог (к этому моменту я еще вернусь в рассказе про тему).

SEO

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

Профессиональная разработка и дизайн

В немалой степени, это вопрос репутации. Конечно, у меня недостаточно знаний для объективной оценки качества кода. Но я своими руками ковырял новую платформу и старую тему, чтобы прийти к выводу – это день и ночь, даже с поправкой на то, что старая была написана три года назад.

Удобство настройки

О конкретных аспектах настройки блога я еще расскажу, а пока выделю основные моменты (прошу прощения за технический сленг :)

• Шорткоды. Это нечто вроде макросов, позволяющих без знания PHP и ковыряния в коде вызывать определенные функции, в том числе с параметрами.
  Код: [post_author_link before="<b>" after="</b>"]
  Результат (полужирным выделяется ссылка на имя автора записи): Vadim Sterkin
• Хуки (крюки). Каждая страница блога строится из кирпичиков. Вот так выглядит фрагмент разметки:
  Увеличить рисунок
  До и после любого элемента вбит крюк, на который можно повесить свой код – HTML, JavaScript, PHP, а также шорткоды. К платформе идет плагин, предоставляющий графический интерфейс. Содержимое категорий крюков соответствует разметке.
  Увеличить рисунок
• Готовые фрагменты кода. В закрытой области сайта размещено немало фрагментов, которые можно использовать для настройки блога под свои нужды. Какие-то я в готовом виде просто повесил на хуки, а некоторые допиливал и включал в functions.php.
• Руководства и документация. Для знакомства с темой есть простые руководства, а для разработчиков, строящих сайты для клиентов, документация по функциям, где все очень понятно расписано. Это только точки входа в нее.
  Увеличить рисунок
  Мне очень пригодилась эта информация для переноса ряда возможностей из старой темы, причем не только функций PHP, но и разметки.

Привлекательные условия лицензии

Покупка платформы дает право использовать ее на неограниченном количестве сайтов. Конечно, это интереснее профессионалам, но вдруг я начну писать о велосипедах или друг попросит настроить блог? Клиенты компании получают скидку на все темы оформления, и теперь я смогу менять их чаще :)

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

Тема оформления eleven40 Pro

На платформе Genesis работают все темы оформления, выпущенные в StudioPress, хотя не все являются HTML5. Выбирая тему оформления, я ориентировался на удобство чтения и совместимость с различными разрешениями экрана.

Удобство чтения

Старую тему оформления я тоже брал с этим прицелом, сознательно избрав относительно узкую ширину столбца с содержимым – 500px.

Текст в колонке воспринимается намного лучше по сравнению с растянутым на весь экран (газетные колонки – не случайность).

У новой темы ширина содержимого намного больше, что позволит мне увеличить размер публикуемых изображений (ранее он ограничивался 480px по ширине, а полный размер – только по нажатию).

В контексте восприятия текста основным отличием новой темы от старой является другой тип шрифта и его увеличенный размер.

Конечно, есть еще масса других аспектов, влияющих на восприятие написанного на странице. Например, это расстояние между строками и блоками текста.

Шрифт

Я изначально планировал поменять родной шрифт темы из семейства serif (Lora) на какой-нибудь sans, более подходящий для чтения с экранов, в том числе маленьких (замечательная инфографика serif vs sans для немного владеющих английским). А как только поднял блог, даже сомнения отпали — русские и латинские буквы в Lora выглядели совсем по-разному ввиду отсутствия кириллического шрифта.

Увеличить рисунок

После поисков и экспериментов я остановился на Source Sans Pro. Но, как выяснилось в комментариях, у него нет кириллицы, в наличие которой я почему-то верил. Сейчас Arial, sans-serif.

Размер

Размер шрифта – это извечный холивар у веб-дизайнеров, что-то вроде кнопки «Пуск» :) Я пишу большие статьи, которые подразумевают внимательное и вдумчивое чтение, а блог читает много неопытных пользователей. В этом случае нужен крупный шрифт (вспомните детские книжки). И да, я забочусь о людях со слабым зрением, потому что сам ношу очки.

В старой теме оформления базовый размер шрифта был 14px, а сейчас я решил увеличить его до 16px.

Я смотрел оба варианта на разных разрешениях экрана, и мне понравилось как 16px сочетается с моим блоками текста. Если вы замечали, большинство абзацев у меня состоит из двух-трех предложений, что тоже улучшает восприятие текста. Впрочем, в комментариях я оставил размер 14px ввиду их большого количества, чтобы сократить прокрутку.

А как вам шрифт и его размер? Вам комфортно читать эту запись?

Адаптивный дизайн

Вообще, я купил Genesis и eleven40 еще летом 2013 года, и тогда эта тема была у StudioPress одной из немногих с адаптивным дизайном. Уже позже ее обновили до Pro, да и другие темы стали обладать схожими возможностями.

Уменьшите ширину окна браузера, и вы увидите, как тема «складывается», перемещая боковую панель под основное содержимое.

Это очень удобно для маленьких экранов, поскольку статья полностью заполняет ширину дисплея, сохраняя комфортный для чтения размер шрифта. С другой стороны, не требуется отдельное мобильное приложение, что позволяет избежать различий в навигации по сайту на разных устройствах.

На сайте StudioPress есть специальная страница, где можно посмотреть, как выглядит блог на некоторых разрешениях, но я пользовался расширением Resolution Test для Chrome (ниже в списке функций блога есть расклад посетителей по разрешениям экрана).

Ключевые изменения и нововведения

Базовый набор возможностей блога определяется тем, какие функции WordPress задействует тема оформления. Дополнительные вещи реализуются плагинами или самостоятельным изменением темы.

У старой темы не было удобных механизмов модификации, и в итоге я вручную «затвикал» ее до того, что не мог обновить. Вам это ничего не напоминает? :)

С Genesis такого уже не будет, но все равно передо мной стояла задача перенести большинство возможностей, которые были в старой теме из коробки, но отсутствовали в eleven40 Pro, либо появились в результате моих изменений.

В чем заключается работа

Для каждого элемента, который отсутствует в теме, нужно решить две задачи:

• Отображение. Плагины автоматизируют процесс, но все ручные изменения подразумевают написание кода на PHP (в моем случае, с помощью Google, документации Genesis и фрагментов кода для моей темы, а также справки WordPress). Например, чтобы добавить блок «Подпишитесь» под статьей я воспользовался примером из Сети, который изменил под свои нужды и нашел, куда именно прикрутить.
• Оформление. Каждый добавленный элемент нужно оформить с помощью стилей CSS. Тот же блок подписки – это просто текст, поле для e-mail и кнопка. Но нужно задать ему границы и отступ, выровнять относительно других блоков, определить цвет кнопки и убедиться, что все это нормально выглядит на разных разрешениях. (В скобках замечу, что ряду стандартных возможностей темы тоже пришлось менять оформление.)

И так с каждым элементом…

Список возможностей

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

Если вы не нашли на месте привычной возможности, сверьтесь со списком – она обязательно отыщется, если только я ее не упразднил. Впрочем, из списка видно, что все ключевые функции блога никуда не делись.

Из реально востребованного некоторыми из вас пропала только версия для печати, но я заменил ее на специальную таблицу CSS, которая при печати оставляет только текст статьи, скрывая остальное. Нажмите Ctrl + P, чтобы убедиться в этом – очень простое решение. Как раз для этого мне пригодилась документация по HTML-структуре блога, которую я показывал выше.

Что нового

Как вы думаете, с чем было больше всего возни? Конечно, с комментариями! Это ценнейшая составляющая блога, и я очень старался, чтобы вам было комфортно читать обсуждения и принимать участие в них.

Ответы на комментарии

На этапе становления блога я выбрал плоскую структуру комментариев, как в постах на форуме OSZone, откуда тогда шла вся аудитория. Плагин «Цитирование комментариев» не только добавлял цитату, но и одновременно заменял стандартный ответ WordPress на вставку имени в форму.

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

Теперь, нажимая ссылку «Ответить», вы оставляете комментарий прямо под тем, на который пишете ответ.

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

Сейчас включена стандартная вложенность в 5 комментариев. Другими словами, на пятый комментарий ветки ответить уже нельзя (цитата тоже отключается, но есть b-quote на панели).

Почтовые уведомления об ответах только на ваши комментарии

Раньше, отправляя комментарий, вы могли одновременно подписаться на обсуждение, поставив соответствующий флажок. С учетом большого количества комментариев к записям, далеко не всем это было интересно, равно как и не имело особого смысла подписываться на все комментарии ради единственного уведомления об ответе на свой.

Теперь вы можете выбрать оптимальный вариант. Upd. Скриншот слегка устарел, но смысл прежний — вы получаете уведомления об ответах на отправляемый вами комментарий, т.е. на всю ветку.

Возможность подписаться на обсуждение без комментирования сохранилась (на рисунке ее закрывает меню).

Аватары комментаторов

Это еще одна стандартная функция WordPress, который может автоматически подтягивать аватары с сайта gravatar.com, если человек связал там свой почтовый адрес с картинкой. Я включал их пару раз и убеждался, что очень небольшой процент читателей блога пользуется этим сервисом, что в свою очередь вело к множеству безликих картинок в комментариев.

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

Если вас напрягает стандартная картинка, я могу поставить фавикон блога (пустой не смотрится, проверял).

Постраничные комментарии

Вы молодцы, очень активно обсуждаете записи! :) Обратной стороной медали становится долгая загрузка страницы с несколькими сотнями комментариев, что точно не радует при мобильном подключении к Интернету.

В WordPress заложена разбивка комментариев на страницы, но мне пришлось повозиться, чтобы достичь желаемого результата и настроить оформление. В частности, я сделал именно постраничную навигацию с возможностью перехода к последней странице.

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

Изменения в навигации

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

• Раскрывающиеся меню. У меня и раньше были страницы, которые открывались при нажатии на основной пункт меню (на случай отключенного JS или проблем в мобильных браузерах). Поскольку в подменю не было ничего ценного, я решил отказаться от них, но эта возможность есть в теме.
• Поиск. Я отказался от поиска Google в пользу родного поиска WordPress, алгоритм которого недавно изменился к лучшему (в версии 3.7). Я попробовал – он неплохо находит нужное, а при необходимости можно поискать любимым движком по сайту. Если же вы регулярно ищете что-то в блоге, эта запись поможет (у меня таким образом настроен «Мне повезет» от Google).
• Предыдущая и следующая запись. Раньше их названия отображались ссылками над заголовком записи, а теперь я перенес их под запись, но сделал один твик. Как и прежде, записи выводятся в хронологическом порядке, но только из той же рубрики. Здесь есть условность, потому что запись может входить в несколько рубрик, но в целом результат полезнее, я считаю.
• Вы тут. Над заголовком записи теперь размещен фирменный элемент платформы Genesis, который работает на основе рубрик и иерархии страниц, подсказывая ваше текущее расположение в структуре блога (похожая навигация есть на OSZone, кстати).
• Облако меток и архивы. Эту редко используемую вами возможность я вынес из боковой панели на отдельную страницу, а ссылка на нее есть в подвале.
• Стрелка, ведущая к началу страницы. Когда-то меня даже просили добавить такую ссылку в комментарии, чтобы из любого можно было перейти вверх. Тогда я выполнил просьбу, но сейчас убрал стрелку в пользу другого решения. Теперь в правом нижнем углу страницы автоматически появляется стрелка ↑.

sterkin.ru

Этот адрес активен уже некоторое время. Я знаю, что многие постоянные читатели не помнят доменное имя блога, но легко находят его в поисковых системах по моей фамилии.

Теперь можно зайти в блог по адресу sterkin.ru.

Работает только перенаправление на главную страницу блога, т.е. это не альтернативный домен, как в случае с oszone.net и oszone.ru.

Вам нравятся изменения в блоге?

По моим ощущениям блог стал более:

• просторным за счет более широкого основного столбца
• чистым, благодаря избавлению от лишних второстепенных элементов
• удобным для чтения из-за более крупного шрифта и адаптивного дизайна
• стильным ввиду современного дизайна и отказа от ряда графических элементов
• интерактивным, чему способствуют новые возможности обсуждения записей

Конечно, я с нетерпением жду ваших мнений по поводу произошедших изменений! :)

Как вам новое оформление и возможности?

Я тщательно тестировал блог в различных браузерах и устройствах, но все сценарии покрыть невозможно. Если что-то не работает или криво отображается, напишите в комментариях, указав устройство, ОС и браузер (помните, картинка стоит тысячи слов).

Спасибо, что читаете мой блог!

Замеченные проблемы