Оформление рубрик на сайте WordPress

Добрый день, уважаемые друзья!

Сегодня мы немного поговорим об оформлении страниц рубрик на вашем сайте под управлением WordPress.

Я уверен, что вы что-то примите во внимание из этого материала и непременно сделаете свой сайт лучше.

Принцип оформления страниц рубрик и достоинства

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

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

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

К тому же, мало кто использует такой вариант оформления, если посмотрите другие сайты на WordPress. Это также некоторое достоинство, так как что-то нестандартное позволяет выйти вперед семимильными шагами.

Итак, предлагаю сделать некий чек-лист достоинств подобного оформления.

  • Во-первых, небольшое текстовое описание позволяет объяснить концепцию определенной рубрики пользователю, что очень хорошо, так как ресурс в первую очередь создан для людей;
  • Во-вторых, хоть и небольшой, но статический текст несет ценность поисковым системам и повышает шанс попасть страницам рубрик в индекс в поисковой системе Google, а не просто находится в дополнительном индексе. В таком случае данный статический текст может приносить трафик на страницы рубрик.Изначально, когда описания у меня не было, то в панели вебмастера Google у меня в индексе не было порядка 11 страниц. Это как раз количество моих рубрик. То есть рубрики, по факту, не несли никакой ценности гуглу, кроме списка материалов в категории. После добавления статического текста с небольшим изображением данные страницы попали в основной индекс.

    Если мы посмотрим на статистику отправленных страниц в индекс и попавших туда документов, то увидим, что количество их одинаковое, то есть все документы в индексе (2 страницы не досчитало, так как статистика еще не обновилась, но они уже в индексе);

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

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

к содержанию ↑

Вывод названия рубрики WordPress

На самом деле, в большинстве стандартных официальных шаблонов данная функция предусмотрена по умолчанию. У меня же название не выводилось и мне это не очень понравилось. Тем более, что абсолютно каждая страница должна иметь свой заголовок первого уровня в теге H1. А что мы можем разместить в данном теге кроме названия самой рубрики? По факту, ничего толкового.

Странно будет, если поисковик зайдет на данный тип страниц и не увидит ее заголовка. Поэтому, если у вас все еще его нет - обязательно добавляйте.

Чтобы вывести название рубрики на WordPress сайта достаточно в файл, отвечающий за вывод категорий и архивов (category.php - категории и archive.php - архивы), вставить следующий код в нужное место.

Если нет файла category.php, то вполне возможно, что рубрики и архивы выводятся одним файлом archive.php. У меня именно так.

Данный код выведет лишь название, а нам же нужно, что оно было заключено в тег H1. Тогда стоит обернуть его данным тегом. В итоге выйдет следующий вариант.

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

Данная функция отвечает, что начался цикл вывода анонсов. Именно перед ними мне и нужно было вывести информацию о рубриках.

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

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

Если посмотрим на итоговый код вывода названия, то внутри тега H1 имеется класс оформления (class="archive-title"), с помощью которого я задал размер шрифта, цвет, выравнивание и так далее. Если вам не нужно оформление, то можете просто проигнорировать данный класс или же вообще убрать его из тега. Я бы убрал, чтобы сделать код меньше и чище.

Если что, то вот мои стили названия рубрик.

Итак, первую часть мы сделали. Теперь перейдем к выводу описания.

к содержанию ↑

Вывод описания рубрики на WordPress

Перед выводом, необходимо сначала его заполнить. Делается все стандартными средствами движка. Переходим в редактор любой рубрики  и в поле "Описание" вводим нужный текст. Можете использовать html теги для его оформления.

Чтобы с тегами было удобно работать, существует плагин Rich Text Tags, который рассмотрим в следующем пункте.

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

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

Все. Описание будет отображаться. В принципе, все дело сделано. Но возможен еще один момент, который вам придется сделать.

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

На практике это выглядит следующим образом.

Как видим, имеется блок с классом "category-desc", которому назначены соответствующие стили для ширины блока, чтобы боковая колонка не смещалась. Также добавил белый фон, так как простой код выводил описание на общем фоне сайта, а нужно было его вписать в общую ауру оформления.

Вот стили общего блока.

Возможно, что вам данные стили не потребуются. Все зависит от того, в какое место вы разместите вывод названия и описания рубрик и от структуры шаблона.

к содержанию ↑

Где выводить название с описанием + советы

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

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

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

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

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

Теперь пару советов:

  1. Если разместите сверху, то текст слишком большим не делайте, чтобы основной контент (список материалов) не отдалять от посетителя. Вполне хватит 400-500 символов с описанием общей концепции рубрик;
  2. В описании можете разместить красивую картинку небольшого размера, ибо простой текст не привлекает внимания;
  3. Можете сделать ссылки на самые горячие и важные для продвижения страницы, которые непременно в этом нуждаются и помогут посетителю решить проблему или узнать что-то новое;
  4. Не стоит в тексте размещать большое количество ключевых слов, пытаясь продвинуть рубрику. Описание должно давать понятие посетителю о категории. Упор именно на посетителя. Но, если решим поднять шансы на получения трафика из ПС, то можно вписать ключевое слово в читабельной форме не в ущерб самому описанию. Также в этом случае необходимо заполнить все мета-теги для рубрик (title, desription и keywords), а это позволяют не все SEO плагины. Более подробно о последнем моменте читайте по предыдущей ссылке.

Тут все. Теперь о последнем моменте, который позволит вам оформить текст в описании очень просто.

к содержанию ↑

Расширенное оформление с помощью Rich Text Tags

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

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

Итак, скачать плагин Rich Text Tags можно с официальной страницы. После его установки и активации стандартное поле "Описание", заменится на другое решение, где будет полноценная панель форматирования.

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

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

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

В заключение записал для вас видео по данному материалу. Надеюсь, что оно до конца раскроет тему статьи. Приятного просмотра.

Если остались какие-то вопросы, то комментарии ниже. Также не забывайте делиться материалом со своими друзьями и жмите на звездочки ниже. До связи.

С уважением, Константин Хмелев!

40 лет Победы51937Украина, Днепропетровская обл., г. Днепродзержинск,+38 093 338 11 41
Комментариев: 53
  • Спасибо за информацию

    • Не за что

      • Привествую. Обращаюсь на счет выведения описания рубрики.
        У меня шаблон ZAlive.
        В какой файл вставлять код?

        • Здравствуйте. В статье о я четко написал, в какие файлы и что нужно вставлять. Если у вас другой шаблон, то возможно, что структура его будет совершенно другая и файлы то же будут называться по-другому. Тогда придется самому выяснять, куда нужно вставлять определенный код.

  • как вывести список новых (последних добавленных) десяти рубрик при помощи виджета в WP?

    • Без понятия. Нигде не встречал нужды такое сделать. Тоже касается и самой реализации - нигде не видел.

  • Нормальная тема. Спасибо. Непременно сегодня займусь улучшением рубрик :)

    • Всегда пожалуйста)

  • Еще раз добрый вечер! Когда строила свой сайт-портфолио, сразу решила, что категории фотографий размещу в меню сайта для быстрого перехода к группе портфолио. Т.е. wordpress допускает размещение в меню не только страниц сайта, но и рубрик. Но поисковые системы смотрят на рубрики как на рубрики, а не страницы меню. Нужно ли что-то менять в настройках для рубрик или нет?

    • Для поисковых систем не важно, какую роль выполняет страница, будь-то рубрика, страница или запись. Внутренняя структура (код) одна и та же. Конечно рубрики отличаются по всему функционалу, так как они постоянно обновляются за счет поступления новых записей. Но менять ничего не нужно. Достаточно произвести базовую настройку страниц сайта (мета-теги title, description и keywords, последнее по желанию) и все. Откуда доступны рубрики (главное меню или боковая колонка) не имеет особого значения. Это уже дело ваше.

  • Это самое, хотел ещё предложить. Попробуй пошаманить с описанием, чтобы к каждой рубрике ещё выводить картинку слева описания (200х200 например). Думаю будет ещё красивее и удобнее.

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

      • Константин привет. Делаем описание категории и оно на всех страницах категории (имею ввиду category/page2/ ; category/page3/) появляется, что в свою очередь создает дубли контента.
        Вижу тут 3 выхода:
        1. Закрыть от индексации такие станицы, в моем случае это понизит скорость индексации и переиндексации на этих страницах (из за того, что они указаны только в категории и карте сайта, больше на них ни как не зайти).
        2. Вывести все анонсы постов в 1 страницу. в моем случае это понизит эффективность категорий как трафосборников + придется при добавлении их постоянно менять.
        3.что то дописать к category description, чтобы он выводился только на 1 странице. Вариант приемлемый, только что дописать?
        Или есть еще решения прошу подскажи подписался следить за комментариями.

        • Привет. У меня все страницы пагинации закрыты от индексации, т.е. содержимое 2-3-4-5й и так далее страниц не будет индексироваться, но в то же время доступ к переходу по ссылкам на таких страницах поисковому роботу открыт, чтобы робот мог индексировать и переиндексировать новые и старые записи на всех страницах пагинации. Можно конечно открыть страницы пагинации для полной индексации, но тогда вы должны понимать, что если в анонсах вы не используете уникальное описание, которое не пересекается с контентом полной записи, то частично будет создаваться дублирование некой небольшой части основного контента постов на страницах пагинации. Это не критично, но лучше, если такого не будет.

          Если же все таки необходимо вывести описание только на первой странице, то воспользуйтесь следующим кодом:

          Он будет выводить описание только на первой странице пагинации.

          • Вместо этого кода?

            Правильно понял Вас?

  • Константин, а каким образом опустить описание страницы вниз?

    • Разместить его внизу страницы.

  • Спасибо.

  • Спасибо Константин за такое подробное пояснение! Внедрил у себя, вроде работает)) Единственное не решился использовать плагин для html вмешательства, а стоило бы. Получилось заголовок H1 и описание. Но вот не хватает отступа, отделяющего заголовок с описанием от самих категорий статей. Поможете решить такую задачу?

    • В стилях имеется 2 сточки, отвечающие за верхний и нижний внешние отступы.
      margin-top: 6px; (верхний)
      margin-bottom: 15px; (нижний)

      Меняя эти значения, отрегулируйте отступы так, как вам нужно.

  • All in One SEO прописывает в рубрике description 160 символов и мы выводим то же описание но полное, не будут ли ПС считать это за дубли?

    • Я правильно понял, что описание на странице рубрик тоже самое, что и описание этой же рубрики, но уже в мета-теге description? Если так, тогда это нормально.

      • нажимаю ctrl+u смотрю код страницы рубрики сначала идет description с неполным описанием рубрики , ниже после всех анонсов h1 заголовок и полное описание рубрики. Вот это не навлекет санкций ПС, как бы повторение ?

        • Нет, все будет нормально)

  • Константин, привет! Подскажи как сделать, что бы на главной отображались рубрики с 4-5 новыми постами, как здесь например http://woman-max1.esy.es/ Спасибо. Очень нужно

    • Привет. Это вопрос верстки и в комментариях не опишешь процесс создания такого виджета вывода рубрик. Самый легкий способ это выдрать функционал из шаблона этого сайта и установить на свой шаблон.

      • а как его выдрать? )

        • Это также 2 двух словах не опишешь. Сначала необходимо зарегистрировать такой виджет в своем шаблоне. Регистрируется он в файле functions.php. Значит, мы идем в файл функции этого шаблона, находим код регистрации такого виджета и размещаем его у себя в шаблоне. Далее мы ищем код вывода такого виджета в файлах соответствующих страниц, где он может выводится (рубрики, архивы, главная). Идем в эти файлы и находим код вывода, размещаем у себя в шаблоне в нужных местах. Ну и последним шагом ищем стили для этого виджета, чтобы было аналогичное оформление. Копируем к себе. Может еще потребоваться найти скрипты, но в данном случае это не нужно, т.к. это простой список записей. Это я описал всего лишь алгоритм, как все делается. На самом деле все немного сложнее, т.к. нужно еще понять, какой код отвечает за данный виджет:)

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

    • Насколько я понял, то нужна ссылка на рубрику, в которая находится та статья, которая открыта? Как у меня на блоге в анонсах?

      • да. в файле content-single нашел следующий текст:
        // This blog only has 1 category so we just need to worry about tags in the meta text
        ......
        // But this blog has loads of categories so we should probably display them here

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

        • Нужно смотреть в настройках. Возможно, что в настройках шаблона это все настраивается. Если же нет, тогда можете использовать функцию вывода рубрики на страницах сайта. Для этого возьмите следующий код и вставьте его в тот файл страницы, где нужно ее вывести (главная в анонсах или запись). Код возьмите отсюда с пометкой "вывод категории", только уберите в нем часть кода itemprop="articleSection"

  • Константин, а как кнопку ответить, закрыть в скрипт, как у Вас?

    • Ну, во-первых, нужен сам скрипт и код который выведет кнопку с этим скритом и все это вписать в шаблон) Либо заменить уже существующую форму вывода комментарием, либо вставить новую с необходимым кодом и скриптом. Скрипт тут дать не могу. Может в будущих статьях сделаю на эту отдельный материал.

      • Скажите Константин, после того, как Вы начали использовать этот скрипт для кнопки, что-то изменилось в лучшую сторону в плане сео?

        • Этот скрипт абсолютно никак не влияет на сайт. Можно его не ставить ни на один сайт, если правильно настроен файл robots.txt. Главное, чтобы не генерировались дубли страниц по ссылке "ответить". Если у вас все ок в этом плане, то можете не заморачиваться.

          • В этот то вся и суть! Я думаю, что кнопка создает дубли, но вот как убедиться в обратном, даже не знаю

          • Уберите из файла работос строки (Disallow: /*? Disallow: /*?*) и в настройках плагина WordPress seo by yoast активируйте настройку Remove the ?replytocom variables, которая уберет приставку replytocom со ссылки "Ответить", которая собственно и создает новую страницу с дублями. По сути, эту настройку можно и не включать и дубли не будут создаваться, но тогда уберите те 2 строки из файла robots.txt, которые я указал выше.

          • Remove the ?replytocom variables. включено в плагине. Но вот (Disallow: /*? Disallow: /*?*) почему - то боюсь убирать, вдруг какие-то дубли начнут вылазить. Я же так понимаю эта директива закрывает страницы с возможными дублями?

          • Этих директив не должно быть. Можете смело их удалять.

          • Кстати, Константин я заметил, ваш роботс как-то необычно прописан под разные поисковики

          • Да, я для гугла все открываю, чтобы он как раз и не забрал всякие страницы в индекс, хоть и в дополнительный (сопли), но все же индекс. Для остальных же ПС я практически все запрещаю, т.к. они прекрасно реагируют на запреты.

  • Костя привет, я не знаю почему, но у меня когда наводишь на название рубрики выводился текст описания, но не как надо а вот так "Сначала описание, а дальше function 5(&" или что-то вроде того, короче сначала описание которое вводил, а потом какой-то html код, всякие правки в коде не помогали, пришлось поставить запрет на вывод описания через function.php, не знаешь в чем может быть проблема?

    • Привет. Честно, не знаю. Я даже не задавался вопросом, как реализован вывод описания при наведении на рубрику. А вообще, это не самый хороший вариант. Лучше, когда при наведении будет даваться подсказка "перейти в рубрику ...".

  • Доброго времени суток Константин.

    Предположим на сайте под управлением wordpress есть меню в структуре меню у всех элементов подпись "рубрика". В них вложены записи с пометкой что это дочерний элемент рубрики.

    Как можно сделать чтобы при нажатии на пункт меню Windows сразу же внизу кратко открывались рубрики которые связаны непосредственно с темой windows а не было перехода в раздел "архивы рубрики".

    • Здравствуйте. К сожалению, не помогу вам в этом вопросе.

  • Перед чем необходимо вставлять код отвечающий за размер шрифта, цвета, местоположения и т.д. Подскажите плз, если можно скриншот!
    вот этот код -
    .archive-title {
    color: #34495e;
    font-family: arial;
    font-size: 24px;
    line-height: 130%;
    text-align: center;
    margin: 10px 0px;
    }

    • Открываете файл стилей style.css, лежит он в папке с шаблоном. Делаете пустую строку и вставляете в нее данный код.

  • Скажите, у вас в рубрике под описанием стоит блок "популярные записи рубрики". Это готовый плагин или сами что-то писали?

    • Это готовый плагин (wordpress popular posts), вывод популярных записей сделан индивидуально с помощью специального кода с набором переменных. Все это вшито в шаблон.

  • Привет.Я все равно не понял,как мне сделать в категориях,чтобы текст был под товарами?http://miranda24.ru/admitad_category/zhenshhinam/

  • А как наоборот запретить вывод описания статьи в рубриках?

    • Нужно просто удалить код вывода описания или же удалить описание из рубрики.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *