Шаблон JournalX: обзор журнальной темы WordPress с подгрузкой постов от WPShop

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

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

Тема эта относительно новая на просторах рунета, поэтому рассмотрим подробнее, в чем преимущества столь уникального шаблона.

Отличия Journal X от других шаблонов WPShop

Демо Взять лицензию со скидкой 15%

Шаблон JournalX создан компанией WPShop, но все же у него есть отличия от других шаблонов этой компании. Рассмотрим их подробнее:

1. Модель главной страницы полностью переработана, так как был применен нестандартный подход к выводу сетки карточек постов.
2. Непрерывный скроллинг страниц с постепенной плавной подгрузкой все новых карточек постов и похожих материалов в записях.
3. Тема сверстана без сайдбара, чтобы основной контент занимал практически все свободное пространство.
4. Применяются характерная для печатных изданий типографика и эффективные способы подачи информации: выделенные блоки внимания и цитаты во всю ширину страницы, выносные поясняющие блоки.
5. Подгрузка информации происходит в автоматическом режиме. Сразу после прочтения статьи выплывает следующий пост.
6. Контент прогружается медленно — это наиболее комфортно для просмотра постов и не утомляет.
7. Продуманная типографика: от шрифтов и межстрочного расстояния до форматирования на уровне статьи.

Пример поста с использованием JournalX:

SEO-фишки в теме с подгрузкой постов

При создании JournalX специалисты из команды WPShop провели большую работу по устранению ошибок для корректного функционирования темы на самых последних версиях WordPress.

Также был проведен комплекс мер по SEO-оптимизации процесса, важной составляющей любого современного сайта.

Скорость

Измерить скорость работы чистого сайта на теме JournalX можно в таких сервисах, как PageSpeed Insights и GTmetrix. Для примера проведено испытание демо-версии проекта на шаблоне JournalX без дополнительных плагинов и скриптов.

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

Семантически корректный код WordPress

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

Для инфо-сайтов, в том числе журнального типа, важно наличие хотя бы основных меток: header — шапка, nav — главная навигация, main — основная суть, article — желательный пункт, но вставлять необязательно, aside — почти всегда размечает сайдбар, footer — подвал.

Все это присутствует в WordPress-шаблоне JournalX.

Валидность HTML-кода

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

Для оценки валидации существует специальный ресурс W3C. Для примера в нем был проведен пробный тест, который выявил единственное предупреждение (не ошибку) при подключении скрипта.

Подключение нужных скриптов в подвале

Важное условие для оптимизации — подгрузка скриптов в самом конце. Для этого вызов к ним по возможности размещают перед закрывающим body, то есть в подвале сайта.

На изображении можно заметить, что сверху также имеется скрипт. Однако он прописан из конструкции wp_head и добавляется самим движком.

Микроразметка Shema org

Разметка в теме JournalX реализована в полном объеме и затрагивает все нужные части сайта — от шапки до подвала.

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

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

Другие функции, влияющие на лояльность поисковиков

Еще несколько полезных функций в JournalX WPShop для улучшения SEO-оптимизации сайтов:

• закрыто отображение ссылок авторов комментариев — это позволяет избежать массового спама;
• также посредством js-скрипта закрыты ссылки в теле комментов таким образом, что поисковый робот воспринимает их как обычный текст;
• предусмотрена функция закрытия ссылки и для авторов постов с помощью простого шорткода;
• по умолчанию включено автоматическое удаление циклических ссылок в JournalX Theme, если администратор сайта не указал другое;
• все заголовки и подзаголовки (H1-H6) с точки зрения разметки находятся непосредственно в теле статьи, а не выносятся наверх, как в некоторых других шаблонах;
• сайт на этой топовой журнальной теме адаптируется под любые устройства и разрешения экрана;
• отличная кроссбраузерность с поддержкой большого числа популярных интернет-браузеров;
• описание рубрик, архивов и т. д. присутствует только на основной странице и не повторяется на последующих шагах;
• поддержка всех версий РНР, вплоть до только что вышедшей 8.2 (разработчики четко отслеживают все изменения и тестируют шаблон на новых версиях php и WordPress);
• максимальная оптимизация кода для ускоренной работы, отказ от подключения медленных JS-библиотек;
• множество встроенных дополнений, избавляющих от необходимости поиска и установки многих сторонних плагинов (большое количество опций уже реализовано в шаблоне);
• есть своя HTML-карта сайта и модуль обратной связи, которые можно добавить на любую страницу с помощью шорткода.

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

Тема JournalX: обзор настроек

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

Рассмотрим подробнее каждый из подразделов.

Структура

Дает возможность сделать настройку шапки сайта (отступы и ширину) и подвала (ширину).

Блоки

Здесь можно опционально настроить практически каждую часть сайта.

Шапка — можно добавить логотип, скрыть название и описание сайта, вставить пользовательский HTML (например, свой баннер или код партнерки).

Подвал — здесь также можно добавлять произвольные HTML-коды, счетчики аналитики или метрики, социальные кнопки.

Главная — поле для размещения заголовка H1 и текста под ним.

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

Страница — по аналогии с настройками записей, но с меньшим количеством элементов (рейтинга, миниатюр, соцкнопок).

Архивы — настройка отображения описания на страницах рубрик (сверху или снизу) страницы. Также можно выбрать, показывать ли подрубрики (если они существуют на вашем сайте).

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

Карточки постов

Основные — важный пункт, позволяющий настроить отображение ваших постов на главной, в рубриках и на страницах поиска.

Здесь можно выбрать теги, в которые будут оборачиваться заголовки анонсов, задать порядок отдельных элементов карточки, включить либо выключить их, установить порядок вывода мета-информации простым перетаскиванием (по технологии Drag and Drop), отключить или настроить длину отрывка.

Со времени первого релиза шаблон претерпел много изменений, в том числе этого раздела, который пополнился новыми настройками. Лишнее доказательство, что JournalX развивается и меняется согласно требованиям времени.

Похожие записи настраиваются аналогичным образом.

Модули

Раздел «Модули» в кастомайзере JournalX отвечает за настройки отображения отдельных блоков темы, многие из которых заменяют полноценные сторонние плагины. Это фишка всех шаблонов от WPShop. И ей нужно пользоваться.

Коды

Здесь владелец сайта может вставить произвольный HTML-код в удобном месте. Как правило, перед закрывающим тегом head вставляют коды верификации Я.Вебмастера и рекламные коды.

Очень удобно!

Подгрузка постов

Крайне важный для журнальной темы пункт настроек.

С его помощью можно не только включить подгрузку карточек постов и указать их количество, но также не потерять данные счетчиков при такой структуре, указав коды счетчиков Я.Метрики и Google Analytics.

Типографика

Этот кастомный раздел настроек шаблона предусмотрен для управления стилем, размером и др.

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

Внешний вид Customizer на примере настройки шрифтов заголовков:

Цвета

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

Фоновое изображение

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

Меню

Отвечает за показ меню в различных частях. Тема JournalX поддерживает отображение меню в 2 областях: в шапке и в подвале.

Виджеты

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

Настройка главной страницы

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

Дополнительные стили

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

Расширенные настройки

Здесь прячутся дополнительные настройки JournalX. Мелочи, но зачастую нужные.

Партнерская программа

Пункт, который многие игнорируют. Но он позволяет заработать дополнительные деньги.

Партнерская программа использует ваш персональный код ID, полученный при покупке шаблона. Он уже встроен в тему и при включении опции «Начать зарабатывать деньги» дает возможность получения дохода с продаж по ссылке от 25 %.

Новые кнопки в редакторе

Для редактора журнальной темы JournalX добавлены собственные кнопки, используемые для максимального красивого форматирования текстов:

• спойлеры;
• красивые блоки внимания вместо классического блока цитат;
• выносные пояснительные блоки и блоки с обтеканием;
• кнопка маскировки ссылок (просто находка для тех, кто зарабатывает на партнерских программах).

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

Интеграция рекламы

В шаблон JournalX интегрирована функция вставки рекламных блоков в разных местах (по умолчанию их 12, но количество мест можно увеличить через техподдержку или с помощью хука из документации) с возможностью отдельного отображения на ПК и мобильных.

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

Примеры сайтов на теме JournalX в разных нишах

Замечательный пример кулинарного сайта с использованием JournalX. Сетка карточек очень удобно расположена:

Оригинальное решение для сайта о боях MMA:

Интересное оформление женского журнала:

Сам Роман Пузат, известный в кругах вебмастеров своими курсами по информационным сайтам, выбрал эту тему для перезагрузки своего первого женского журнала JLady. Интервью на эту тему с Сергеем Алейниковым можете посмотреть здесь:

Можно ли скачать JournalX null

Премиум-шаблон JournalX — тема для WP премиум-класса, которая бесплатно не распространяется.

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

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

Скидки для новых и постоянных клиентов WPShop

Для всех, кто хочет скачать шаблон официально, предоставляется промокод на JournalX, который автоматически снижает цену на продукт. Сейчас действует скидка в 15 %:

Активировать промокод на тему JournalX

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

Тема JournalX — одна из самых современных для журнального формата сайтов на WP. Она была разработана с применением передовых IT-решений. Из этого шаблона можно сконструировать уникальный и ни на что не похожий ресурс, который будет отображать индивидуальность его автора и запомнится посетителям.