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

Хлебные крошки (Breadcrumbs)

Хлебные крошки (Breadcrumbs) в теме WordPress Jarida включаются/выключаются в настройках Jarida/Jarida Settings/General Settings/Breadcrumbs Settings.

Проблемы при использовании Breadcrumbs от Jarida

Вчера в Google Search Console обнаружил предупреждение:

На сайте выявлена новая проблема с материалами формата
«Строки навигации»: data-vocabulary.org schema deprecated.
Дата обнаружения: 21.01.2020. Статус: Предупреждение.

Тему Jarida покупал несколько лет назад. Поддержка (и обновление) дается на 1 год, так что обновления с решением проблемы ждать не стоит. В Google Search Console Help нашел следующую информацию по этому поводу:

Структурированные данные «Data Vocabulary» сильно устарели и предпочтительнее использовать более широко распространенные из «Schema.org». Начиная с сегодняшнего дня, Search Console выдаст предупреждения для страниц, использующих схему data-vocabulary.org.
Мы рекомендуем преобразовать ваши структурированные данные data-vocabulary.org в schema.org.

    Проще всего реализовать это следующим образом:

  1. Отключаем хлебные крошки в настройках темы WordPress Jarida.
  2. Включаем хлебные крошки в плагине Yoast SEO.
  3. Чтобы крошки начали отображаться, пропишите следующий код в нужном месте файла single.php:

    <?php
    if ( function_exists('yoast_breadcrumb') ) {
      yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
    }
    ?>
  4. Я прописал этот код сразу после 5 строки.

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

    function remove_wpseo_breadcrumb_last( $link_output ) {
    	if ( false !== strpos( $link_output, 'breadcrumb_last' ) ) {
    		$link_output = '';
    	}
    	return $link_output;
    }
    add_filter( 'wpseo_breadcrumb_single_link', 'remove_wpseo_breadcrumb_last' );

Кнопка наверх

Кнопка Наверх находится Jarida/Footer Settings
выключаем движок ‘Go To Top’ Icon

Как вставить свои кнопки в редактор 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 — требуется доработка кода.

Шрифты Jarida

В Jarida можно использовать как встроенные в тему шрифты, так и подгружаемые Goole Fonts.

Настройка шрифтов в теме WordPress Jarida находится
Jarida/Jarida Settings/Typography:

  • General Typography — шрифт текста;
  • Main navigation — шрифт меню;
  • Single Post Title — шрифт заголовка H1;
  • News Boxes Titles — шрифт заголовка поля комментирования;
  • Widgets Titles — шрифт заголовков виджетов в сайдбаре.
  • Шрифт в блоке «CHECK ALSO» и «Похожие записи» меняется в файле …/public_html/wp-content/themes/jarida/style.css в 359 строке:

    359
    360
    361
    362
    363
    
    #check-also-box .block-head, #related_posts .block-head {font-family: 'Tahoma';
        font-size: 16px !important;
        /* font-weight: bold !important; */
        font-style: normal !important
    }

    Если убрать (или закомментировать) 362 строку — стиль заголовка изменится на «italic», так как такой стиль задан по умолчанию.

    Как поменять заголовок

  • Если заголовок «ПОХОЖИЕ СТАТЬИ» меняется легко стандартным способом в Jarida/Jarida Settings/Article Settings/Related Posts Settings/Related Posts Box Title.
  • То заголовок «CHECK ALSO» можно сменить на произвольный текст только в файле check-also.php, 34 строка.
  • Аналогично заголовок «ОСТАВИТЬ КОММЕНТАРИЙ» меняется в файле comments.php, 59 строка.


  • Комментарии
    1. Здравствуйте! Подскажите, как поменять в мобильной версии местами блок: ( комментирования) добавить комментарий был сразу под записью?

      • Здравствуйте. Настройками темы никак. Только если заказать доработку темы, например на Kwork.

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