amp-web-push-widget button.amp-subscribe { display: inline-flex; align-items: center; border-radius: 5px; border: 0; box-sizing: border-box; margin: 0; padding: 10px 15px; cursor: pointer; outline: none; font-size: 15px; font-weight: 500; background: #4A90E2; margin-top: 7px; color: white; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.5); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .amp-logo amp-img{width:190px} .amp-menu input{display:none;}.amp-menu li.menu-item-has-children ul{display:none;}.amp-menu li{position:relative;display:block;}.amp-menu > li a{display:block;} .icon-widgets:before {content: "\e1bd";}.icon-search:before {content: "\e8b6";}.icon-shopping-cart:after {content: "\e8cc";}

Categories: Плагины

Красивые и простые хлебные крошки на сайте

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

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

Хлебные крошки на сайте плагином Breadcrumb

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

После того, как вы настроите этот плагин, у вас появятся хлебные крошки на сайте, которые будут обладать собственным стилем оформления, и вы даже сможете выбрать из нескольких возможных. Но для начала скачайте, установите и активируйте плагин у себя на сайте. А затем перейдите в пункт консоли «Breadcrumb». Здесь имеется всего три вкладки, и первая из них «Options», в которой собраны все основные настройки:

Breadcrumb Text. Сюда укажите текст, который озаглавит блок хлебных крошек на сайте. Например, можно написать «Вы находитесь здесь» или «Рубрики», или что-то ещё на ваше усмотрение.
Breadcrumb Separator. В этом поле укажите символ, который будет разделителем в цепочке ссылок хлебных крошек. Это может быть слеш, тире или что-то другое на ваше усмотрение. По умолчанию указываются кавычки.
Breadcrumb font size. Укажите размер шрифта хлебных крошек в пикселях. По умолчанию плагин устанавливает 14 пикселей.
Breadcrumb Text Color. Выберите в таблице цвет для текста ссылок хлебных крошек. Можно также вписать шестнадцатиричное значение цвета.
Breadcrumb Separator Color. Выберите цвет символа разделителя для ссылок хлебных крошек. Можно использовать шестнадцатиричное значение цвета. Будет красивее выглядеть, если цвета текста ссылок и разделителя будут разными.
Breadcrumb Themes. Здесь вы можете выбрать один из четырёх стилей оформления для хлебных крошек на сайте. Предпросмотра нет, так что придётся экспериментировать и смотреть, как выглядит тот или иной стиль, и как он смотрится на сайте.

Сохраните эти настройки и перейдите во вкладку «Short-codes». Здесь вы увидите раздел «Short-code for php file» – код из него можно использовать в шаблоне. Например, чтобы хлебные крошки на сайте отображались на каждой записи, необходимо поместить этот код в файл одной записи – single.php. В другом разделе «Short-code for content» указывает шорт код для установки его в саму запись или страницу. Его тоже можно использовать.

Если вы заинтересовались хлебными крошками на сайте и этот плагин вам не подходит, можете ознакомиться с этой статьёй, где мы описываем альтернативный вариант.

Адель Гадельшин