Jarida — новостная тема WP

Премиум WordPress тема Jarida появилась на свет в марте 2013 года. Автор темы из солнечного Египта под ником mo3aser. Jarida до сих пор является одной из самых популярных и продаваемых тем на Themeforest, впрочем, как и её близкая «родственница» — Sahifa. Тема адаптивная и отлично выглядит на мобильных девайсах. Именно на Jarida сделан этот сайт.

Рассмотрим нюансы темы WordPress Jarida, с которыми мне пришлось столкнуться во время установки и настройки, но которые нигде не описаны.

Логотип и фоновая картинка шапки сайта

    В принципе логотип и фоновый рисунок в шапке — это просто рисунок, и возникает желание обойтись только одним из них:

  • сделать логотип во всю ширину шапки;
  • или нарисовать логотип прямо на фоновом рисунке.

Логотип

Логотип — элемент фирменного стиля, представляющий собой уникальное начертание полного или сокращенного наименования компании и принято его ставить слева.

Логотип настраивается в: Jarida/Header Settings

Header Settings

    Видим всего два варианта:

  1. выбрать для логотипа картинку;
  2. или использовать Site Title (что не что иное как «Название сайта» в общих настройках WordPress).

Можно конечно вообще отказаться от логотипа, не вписывая ничего в поле «Название сайта», но это не есть хорошо с точки зрения SEO.

Выберем в качестве логотипа Site Title:

Site Title

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

А теперь выберем в качестве логотипа картинку:

Я специально сделал фон картинки не белым, чтобы показать вам что, сверху и снизу от логотипа-картинки образовались пробелы (которые не всегда уместны).

Фоновый рисунок

А теперь эту же картинку установим в качестве фонового рисунка шапки в настройках темы: Jarida/Styling/Header Styling

Jarida Header Background

В отсутствии логотипа фоновый рисунок плохо отцентровался по вертикали, но нет пробелов сверху и снизу (как при использовании картинки в качестве логотипа):

Header Background

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

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

  • фоновая картинка;
  • + узкий логотип с прозрачным фоном.

можете посмотреть в шапке этого сайта.

Sliders

Slider — это перелистыватель картинок (или другого контента). Как правило, слайдеры создают при помощи jQuery (или какой-либо другой JavaScript-библиотеки) или CSS. Условно можно разделить на:

  • слайдер для главной;
  • слайдер для картинок.
Первый как правило ставиться на главную страницу и имеет множество эффектов (чаще всего автоматическое перелистывание). Его цель — привлечь и удержать внимание.
Слайдер для картинок просто обеспечивает доступ к контенту в одном окне.

Cлайдер реализованный в Jarida — это Sliders для главной. Позволяет выводить слайды только на главной странице (режим конструктора) или в любом посту, но только вверху (после «хлебных крошек», перед h1). В произвольное место слайдер к сожалению не поставить.

Пример реализации Sliders Jarida в записи:
Пример Slider

Как отключить Sliders

Сам слайдер настраивается в опциях темы:
Jarida Slider Settings

Слайды создаются и наполняются картинками в панели WordPress:
Создание Sliders

Выводить или не выводить слайдер в конкретной записи настраивается в самой записи (Jarida — Post Options, секция Post Head Options):
Jarida Post Head Options

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

Результат поиска альтернативы встроенному слайдеру Jarida вылился в отдельную статью «Обзор слайдеров».

Lightbox

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

    Да, да — это тот самый Lightbox уже встроен в тему Jarida и работает совместно:

  • как со стандартной галереей WordPress;
  • так и отдельной картинкой.

Lightbox и стандартная галерея WordPress

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

Jarida Lightbox

    Напомню как создать стандартную галерею WordPress:

  • «Добавить медиафайл»;
  • «Создать галерею»;
  • помечаем нужные картинки (в каком порядке пометите, в таком и будут выведены);
  • «Создать новую галерею» (шорткод встанет туда где стоял курсор).
Можно создать несколько таких галерей, но Lightbox в окне будет прокручивать все картинки всех галерей (а не картинки принадлежащие текущей галерее).

Lightbox и отдельная картинка

Лайтбоксом можно вывести и отдельную картинку. Зачем это может понадобиться? Если вставить в запись картинку большого размера, она будет выведена сжатой по ширине контентной части. При нажатии на такую картинку откроется Lightbox с картинкой в полном разрешении, где можно рассмотреть всё в деталях.

Jarida Lightbox Image
Как видим, Lightbox примененный к отдельной картинке, аналогичен примененного к галерее, за исключением отсутствия кнопок листания и списка миниатюр.

    Напомню как применить Lightbox к отдельной картинке:

  • переходим в визуальный режим;
  • нажимаем кнопку шорткода «Add Lightbox»;
  • Add Lightbox

  • в поле «URL» вставляем путь до нашей картинки;
  • в поле «Content» вставляем следующую конструкцию:
  • <img alt="" src="IMAGE URL" />

    где вместо IMAGE URL вставьте путь до вашей картинки;

  • нажмите кнопку «insert into post» для вставки шорткода

Как отключить Lightbox

Если вам не нравится Lightbox встроенный в тему Jarida, его можно и отключить. В настройках Advanced Settings Jarida переключатель Disable Theme [Gallery] Shortcode перевести в положение ON и сохранить настройки:
Disable Lighbox Jarida

    Лично у меня на статейных сайтах Lightbox как то не прижился:

  • не поддерживает листание тачскрин на экранах смартфонов;
  • сильно нагружает систему.

Обсуждение темы Jarida: https://themeforest.net/item/jarida-responsive-wordpress-news-magazine-blog/4309191/comments?page=1

Как вставить свои кнопки в редактор WordPress

Все наверное заметили, что в редакторе WP темы Jarida кроме стандартных кнопок появились специальные кнопки выводящие шорткоды именно этой темы (например блоки внимания). Это несомненно удобно и экономит время. Но кнопок там слишком много, часть из них обычно не используется и только занимает место на панели. Попробуем это поредактировать.

Идем в … /public_html/wp-content/themes/jarida/panel/shortcodes/shortcode.php и видим там все эти нестандартные кнопки, которые имеют:

  • имя;
  • открывающий тег;
  • закрывающий тег.

На рисунке выделен фрагмент кода для формирования подзаголовков H3:

Редактирование кнопок

Теперь ненужные кнопки можно удалить и вставить свои.

CHECK ALSO

Блок CHECK ALSO представляет собой выезжающий сбоку (слева или справа) блок с анонсами статей.

    В Jarida/Article Settings/Fly Check Also Box можно настроить количество выводимых анонсов и по какому принципу они будут выводится:

  • по категории;
  • по тегу;
  • по определенному автору.
  •  
    вывести конкретную запись (по ID) не предусмотрено.

Настройка Fly Check Also Box

К сожалению настройки выводимого заголовка (по умолчанию выводится «CHECK ALSO») и шрифта заголовка в админке Jarida нет.

    Для этого придется править файлы самой темы:

  1. заголовок «CHECK ALSO» можно сменить на произвольный текст в файле check-also.php (34 строка);
  2. шрифт в блоке «CHECK ALSO» и «Похожие записи» меняется в файле style.css (359 строка).

Шрифт CHECK ALSO

Блок CHECK ALSO выводит собственный заголовок H2, что не есть хорошо с точки зрения SEO — требуется доработка кода.

Оцените, пожалуйста, статью, я старался :) (голосов: 5, оценка: 5,00 из 5)

Задайте вопрос в комментариях

два × 5 =