16 сентября 2016        481         Комментарии к записи Описание темы отключены

Описание темы

В 2010 году я сделал тему BlogPost. Это был «резиновый» трехколоночный шаблон с внушительной шапкой. В теме не было медиа-элементов, рекламы, каких-то особенных функций, стояла самая простая консоль. При этом, тема раскупалась как горячие пирожки, поскольку попала в тренд тех дней. Сегодня перед вами тема BlogPost 2. Она очень сильно отличается от первого БлогПоста, кардинально, насколько только белое может отличаться от черного. В ней я не пытаюсь угадать, что понравится вам, а просто предлагаю разные варианты, выбирать из которых будете вы сами. Иметь выбор — это вещь, которая всегда в тренде.

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

Пять медиа-объектов:

  1. Слайдер

80

2. Карусель

81

 

3. Видео-слайдер

82

 

4. Плитка

83

 

5. Постер

84

 

А также 6 видов представления записей:

 

  1. Одна колонка

85

 

2. Две колонки

86

 

3. Три колонки

87

 

4. Список

88

 

5. Таймлайн

89

 

6. Обычный пост

90

 

Каждый из вариантов записей блога обладает какой-нибудь особенностью, изюминкой. В «1 колонке» миниатюра имеет анимацию приближенения, зума, в «списке» — подкручивается, в «2 колонки» и «3 колонки» блок анонса эффектно всплывает при наведении мыши и обретает тень, «таймлайн» сам по себе интересный формат, и каждый из его блоков приподнимается по линии дат при наведении мыши, у «обычного поста» красиво оформлена первая буква текста.

Выбирайте, что хотите сделать. Например, включаете «слайдер» и записи в «1 колонку» с правым сайдбаром. Или «карусель» и записи «списком» + левый сайдбар. Или «постер» + «таймлайн». Или «плитку» и записи «2 колонки». Или вообще выключаете медиа, боковую колонку и ставите записи в «3 колонки» на всю ширину. Все это делается без копания в коде, в удобной консоли, кликая мышкой. На главной странице данного демо сайта включен вариант «постер + список». Другие варианты выведены в меню, посмотрите их.

 

скриншот консоли

 

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

Реклама от Google Adsense

В шаблоне есть готовые рекламные места для Гугл Адсенс. Один баннер размером 728х90 установлен в шапке, второй баннер размером 728х90 — в списке записей (либо после первой записи, либо после второй, либо внизу — в зависимости от того, какой вид записей выбран в консоли). Третий такой же баннер размещен внутри каждой записи между первым и вторым абзацами. Еще один баннер размером 300х600 ставится в боковую колонку.

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

71

А вот так он трансформируется на экране шириной менее 800 пикселей — на смартфоне или планшете:

72

 

Баннер сохраняет формат, позволяющий выводить и текстовые, и медиа-объявления, что наиболее востребовано у рекламодателей. Подобным же образом меняется размер остальных баннеров. На маленьких экранах смартфонов баннеры приобретают размер 200х200, либо 250х250, либо 300х250. Каждый баннер расписан в стилях, чтобы обеспечить подходящий размер и вид, чтобы не вылезал за пределы контейнера и давал конверсию.

Код рекламных объявлений уже размещен в файлах темы. Все, что вам нужно сделать, это включить их в консоли и добавить несколько цифр — свой id  в адсенс и идентификаторы объявлений (data-ad-slot). Это проще простого, и подробно освещается в инструкции, прилагаемой к шаблону.

 

Шапка

Заголовок сайта выводится либо логотипом, либо текстовым заголовком. Лого вы видите на данном демо-сайте, а текстовый заголовок таков:

 

73

 

Как это выглядит с точки зрения seo? На главной странице заголовок имеет тип h1 (даже когда это логотип), а на внутренних страницах превращается в span.

Через консоль темы вы также добавляете на сайт фавикон и код статистики.

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

 

Сделай сам

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

209

 

Сайдбар

В BlogPost2 используется «липкий» сайдбар, верхний и нижний виджеты остаются на виду при скроллинге вверх или вниз. Если поставить вниз виджет с баннером, он постоянно будет перед глазами.

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

 

74

 

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

Настройки записей

Что хорошего есть в записях?  Блок навигации (предыдущая запись — следующая запись), блок «Что ещё почитать», содержащий 6 публикаций из той же рубрики, древовидные комментарии, набор кнопок для расшаривания записи в социальных сетях. Для украшения текста используется т. наз. «инициал», особо оформленная первая буква 1 предложения 1 абзаца (если вам не нравится инициал, он отключается в консоли):

75

 

Подсчет просмотров и виджеты

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

 

77

 

Кроме Популярных записей, в BlogPost 2 есть еще два встроенных виджета — кнопки социальных сетей, которые вы настраиваете на свои личные страницы или группы в сетях, а также виджет с уже упоминавшимся баннером 300х600.

Статистика

Во всех моих темах можно ставить на сайт код статистики из консоли. Раньше  это была только статистика от Google Analytics и Яндекс Метрика, то есть, счетчиков без кнопок. В эту тему добавлено новое поле для размещения счетчика с кнопкой. Если вы пользуетесь сервисом от LiveInternet или Hotlog или вам нужно разместить в подвале кнопку каталога, в котором размещен сайт, теперь это можно, не залезая в код.

 

stat

 

Борьба с дублями

Дубли страниц, возникающие в поисковой выдаче, могут негативно сказаться на индексации и ранжировании сайта. В мире WordPress такие дубли могут появиться из-за древовидных комментариев (replytocom) или бибилиотеки JSON REST API. Данный шаблон содержит код, который блокирует эти элементы, предотвращая появление дублей страниц новых сайтов (разумеется, это не распространяется на те случаи, когда дубли возникают в результате неправильных действий админа сайта).

 

Локализация

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

 

Адаптивность и валидность

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

91

Верстка валидная, стили валидные. Все в ажуре.

92

И 0 ошибок в debug.