Плагины, темы и скрипты
собственной разработки

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

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

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

обзор шаблона journalx

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

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

журнальная тема wpshop

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

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

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

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

пример поста на журналикс

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

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

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

Скорость

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

скорость журнал икс

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

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

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

jornal семантическая верстка

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

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

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

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

валидность шаблона wordpress

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

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

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

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

скрипты подключение

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

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

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

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

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

микроразметка журналх

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

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

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

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

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

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

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

настройки темы journalx

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

Структура

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

структура сайта в кастомайзере

Блоки

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

блоки в теме

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

шапка темы

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

подвал WordPress-шаблона

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

главная страница

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

запись в шаблоне

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

страница в шаблоне

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

настройка рубрик journalx

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

комментарии в теме журнал

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

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

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

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

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

похожие материалы

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

Модули

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

основные модули jornalx

Коды

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

вставить код в теме journalx

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

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

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

подгрузка постов журналикс

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

Типографика

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

типографика

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

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

типографика подробно

Цвета

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

цвета в теме журнал

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

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

фон шаблона

Меню

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

меню в теме журнал

меню в теме WP

Виджеты

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

как добавить виджет в тему WPShop

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

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

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

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

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

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

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

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

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

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

партнерка WPShop

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

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

ТОПовые вебмастера простым включением этой опции зарабатывают до 100 тысяч рублей в год в дополнение к доходу от контекстной рекламы и прочих систем монетизации.

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

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

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

редактор в теме журнал икс

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

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

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

встроенная в тему реклама

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

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

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

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

пример сайта на шаблоне JournalX

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

сайт боев на журнальной теме

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

женский журнал на journalX

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

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

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

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

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

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

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

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

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

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

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

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

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

Добавить комментарий

наверх