Технологический прогресс движется вперед с огромной скоростью, и сейчас на фоне традиционных блогов и информационных ресурсов активно развиваются журнальные сайты, которые предлагают короткие статьи и новости.
Для таких сайтов стандартные макеты не подходят, так как сторонние элементы могут отвлекать читателя от содержания. В ответ на эту проблему был создан уникальный шаблон JournalX с функцией автоматической загрузки публикаций, который обеспечивает оптимальное представление журнального контента.
Журнальная тематика – это относительно свежий тренд на просторах рунета, поэтому давайте подробнее рассмотрим преимущества этого уникального шаблона.
Отличия Journal X от других шаблонов WPShop
Демо Получить лицензию со скидкой 10%
Шаблон JournalX разработан фирмой WPShop и имеет свои отличия от остальных продуктов этой же компании. Рассмотрим их более подробно:
- Главная страница была существенно переработана с использованием оригинального подхода к отображению карточек статей.
- Безостановочный скроллинг с плавной подгрузкой новых публикаций и связанных материалов.
- Макет выполнен без сайдбара, чтобы основной контент занял максимально возможное пространство.
- Используются стильные шрифты и эффективные форматы подачи информации, включая выделенные блоки и цитаты, а также поясняющие элементы.
- Информация загружается автоматически. После прочтения статьи сразу же предлагается следующий материал.
- Контент подгружается медленно, что делает процесс чтения комфортным и не утомляет.
- Оптимизированная типографика: шрифты, межстрочный интервал и форматирование статей тщательно продуманы.
Пример статьи, выполненной с использованием шаблона JournalX:
SEO-фишки в теме с подгрузкой постов
Разрабатывая JournalX, команда WPShop серьезно поработала над устранением недоработок, чтобы обеспечить правильную работу шаблона на свежих версиях WordPress.
Кроме того, были внедрены меры по SEO-оптимизации, что является важным аспектом для современных сайтов.
Скорость
Скорость работы чистого сайта на основе шаблона JournalX можно проверить с помощью таких сервисов, как PageSpeed Insights и GTmetrix. В качестве примера было проведено тестирование демо-версии, использующей JournalX без посторонних плагинов и скриптов.
Как видно, все выполняется и загружается очень быстро, даже без дополнительных улучшений.
Семантически корректный код WordPress
В связи с появлением новых требований по HTML5, верстка на основе div’ов получила альтернативу. Использование современных семантических тегов указывает, какие элементы где должны находиться.
Для информационных сайтов, включая журнальные, важно наличие основных меток: header (шапка), nav (основная навигация), main (основное содержание), article (желательная метка, не обязательная), aside (часто используется для сайдбара) и footer (подвал).
Все эти элементы интегрированы в WordPress-шаблон JournalX.
Валидность HTML-кода
Кроме правильного семантического оформления, одним из ключевых условий для высокого ранжирования сайта является наличие валидного HTML-кода без ошибок.
Для проверки валидности существует специальный сайт W3C. На нем было проведено тестирование, обнаружившее лишь одно предупреждение (не ошибку) при подключении скрипта.
Разработчики не спешат убирать эту часть, так как многие пользователи до сих пор используют устаревшие браузеры, требующие такие форматы.
Подключение скриптов внизу
Одним из важных аспектов оптимизации является загрузка скриптов в самом конце. Эта задача решается путем размещения подключения к ним перед закрывающим тегом body, то есть в подвале страницы.
На изображении видно, что сверху также есть скрипт, но он добавляется автоматически движком через конструкцию wp_head.
В настоящее время в нем уже нет необходимости, и его можно удалить с помощью хука или воспользоваться плагином Clearfy PRO, который очищает ядро от многих ненужных строк, создаваемых WordPress.
Микроразметка Schema.org
В шаблоне JournalX предусмотрена полная реализация микроразметки, охватывающая все необходимые аспекты сайта — от верхней части до подвала.
В отличие от многих других шаблонов, где микроразметка довольно скромная и содержит лишь ограниченный объём информации, корректно реализованная Schema.org выполняет свои задачи превосходно.
На скриншоте можно увидеть высокое качество микроразметки в этом журнальном шаблоне, а также её подробность. Все элементы размечены и правильно определены поисковым роботом Google, вплоть до указания автора, модуля комментариев и других мелочей.
Дополнительные функции, улучшающие поисковую лояльность
В JournalX от WPShop предусмотрено несколько полезных функций для повышения SEO-оптимизации:
- скрытое отображение авторских ссылок на комментарии, что помогает избежать спама;
- ссылка в комментариях закрыта с использованием js-скрипта, чтобы поисковые роботы воспринимали их как обычный текст;
- возможность скрыть ссылки и для авторов постов с помощью простого шорткода;
- по умолчанию предусмотрено автоматическое удаление циклических ссылок, если администратор не изменит настройку;
- все заголовки (H1-H6) находятся внутри статей, а не выносятся наверх, как в ряде других шаблонов;
- сайт на этой журнальной теме адаптируется к разным устройствам и разрешениям экранов;
- отличная кроссбраузерность с поддержкой большого количества популярных браузеров;
- описание категорий, архивов и других элементов отображается только на главной странице и не дублируется на последующих;
- поддерживается работа с всеми версиями PHP, в том числе и с недавно вышедшей 8.2 (разработчики постоянно следят за изменениями и тестируют шаблон на актуальных версиях PHP и WordPress);
- максимально оптимизированный код для быстрой работы, без подключения медленных библиотек JS;
- множество встроенных функций, избавляющих от необходимости устанавливать сторонние плагины (многое уже реализовано в шаблоне);
- существуют собственная HTML-карта сайта и модуль обратной связи, которые можно разместить на любой странице с использованием шорткода.
Кроме того, нельзя забывать о удобных опциях, таких как лайтбокс при клике на изображение, встроенное содержание с закрытием индексации, кнопка «Поделиться» для различных социальных сетей, стрелка «Наверх» для удобного перемещения пользователям по контенту и множество других приятных функций.
Тема JournalX: обзор настроек
Кастомайзер, то есть интерфейс для настройки темы в JournalX, представляет собой модуль с логически сгруппированными разделами, отвечающими за различные изменения на сайте.
Давайте детально рассмотрим каждую из секций.
Структура
Позволяет произвести настройку верхней и нижней частей сайта (отступы и ширина).
Блоки
В этой секции можно опционально настроить практически каждый элемент сайта.
Шапка — возможность добавить логотип, скрыть название и описание сайта, вставить пользовательский HTML (например, свой баннер или код для партнерских программ).
Подвал — возможность добавления произвольных HTML-кодов, счетчиков аналитики, социальных кнопок.
Главная — поле для заголовка H1 и подзаголовка.
Запись — возможность выбора элементов для отдельных материалов (миниатюры, даты, метки, рейтинг, комментарии), а также указание количества похожих постов или их полное отключение.
Страница — аналогично настройкам записей, но с меньшим числом объектов (рейтинги, миниатюры, кнопки социальных сетей).
Архивы — это настройка, позволяющая определить расположение описания на страницах категорий: в верхней или нижней части. Кроме того, вы можете выбрать, будет ли отображаться информация о подрубриках, если таковые имеются на вашем сайте.
Комментарии — раздел для настройки различных параметров комментариев, включая текст, который отображается перед кнопкой «Отправить», временные метки сообщений, а также обязательное поле для согласия пользователей на обработку их персональных данных.
Карточки постов
Основные — ключевой раздел, позволяющий настраивать способ отображения ваших записей на главной странице, в рубриках и на страницах поиска.
Здесь можно задавать теги, в которые будут обрамляться заголовки анонсов, устанавливать порядок элементов карточек, активировать или деактивировать их, а также управлять порядком вывода мета-информации с помощью простого перетаскивания (Drag and Drop). Есть возможность настраивать длину отрывка текста.
С момента первого выпуска шаблона данный раздел значительно изменился, добавив новые настройки, что наглядно демонстрирует развитие JournalX в соответствии с современными требованиями.
Похожие записи подлежат настройке аналогичным образом.
Модули
Раздел «Модули» в настройках кастомайзера JournalX предоставляет возможность регулировать отображение отдельных модулей темы, многие из которых успешно заменяют сторонние плагины. Это является особенностью всех шаблонов от WPShop, и стоит это использовать.
Коды
В этом разделе администратор сайта может вставлять произвольный HTML-код в удобные места. Обычно перед закрывающим тегом head добавляются коды для верификации в Яндекс.Вебмастере и рекламные коды.
Подгрузка постов
Это крайне важная настройка для темы, посвященной журналам.
С помощью данной опции вы можете не только активировать подгрузку карточек постов и указать их количество, но и сохранить данные счетчиков, добавив коды Я.Метрики и Google Analytics.
Типографика
Этот раздел настроек помогает управлять стилем текста, размерами и другими параметрами.
Если на первой версии все настройки собирались на одной вкладке, то сейчас разработчики выделили несколько подразделов для индивидуальной настройки типографики в заголовках, меню и основном содержании.
Внешний вид кастомизатора на примере настроек шрифтов заголовков:
Цвета
В этом разделе можно оформить конкретные элементы дизайна сайта в выбранной администратором цветовой палитре, включая фон, текст, ссылки (в том числе при наведении), шапку, подвал, а также названия и описания проекта.
Фоновое изображение
Этот раздел разработан Сергеем Алейниковым и его командой специально для тех пользователей, которые хотят подчеркнуть свою индивидуальность. Здесь имеется возможность загрузить собственное изображение фона страницы и отдельно для шапки сайта.
Меню
Этот раздел отвечает за вывод меню в различных областях. Тема JournalX поддерживает размещение меню в двух зонах: в шапке и подвале.
Виджеты
В данном шаблоне с журнальной сеткой постов и функцией бесконечной подгрузки встроена возможность добавлять виджеты в боковую панель, минуя традиционные настройки в админ-панели WordPress.
Настройка главной страницы
Вебмастер имеет возможность выбрать, что будет выводиться на главной странице его сайта: последние записи в хронологическом порядке, начиная с самых новых, или одна статическая страница, оформленная по его усмотрению.
Дополнительные стили
В разделе «Дополнительные стили» можно вставлять собственные CSS-коды, в том числе для изменения базовых настроек, без необходимости редактировать файлы темы.
Расширенные настройки
Здесь скрываются дополнительные опции конфигурации JournalX. Хотя они могут показаться мелкими, зачастую они оказываются весьма полезными.
Партнерская программа
Эта опция зачастую остается без внимания, но она предоставляет возможность заработать дополнительные средства.
Партнерская программа использует ваш уникальный ID-код, который вы получаете при покупке шаблона. Он уже интегрирован в тему и, активировав функцию «Начать зарабатывать деньги», вы можете получить доход с продаж по ссылке от 25 %.
Успешные вебмастера, просто активировав этот пункт, зарабатывают до 100 тысяч рублей в год, помимо доходов от контекстной рекламы и других систем монетизации.