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

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

В 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). Данный шаблон содержит код, который блокирует эти элементы, предотвращая появление дублей страниц новых сайтов (разумеется, это не распространяется на те случаи, когда дубли возникают в результате неправильных действий админа сайта).

 

Локализация

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

 

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

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

91

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

92

И 0 ошибок в debug.