Главная » Интернет новичку » Хлебные крошки в Вордпресс без плагинов, создание, продвижение и заработок на сайте

Хлебные крошки в Вордпресс без плагинов, создание, продвижение и заработок на сайте

>

Хлебные крошки в Вордпресс без плагинов

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

Хлебные крошки в Вордпресс без плагинов, создание, продвижение и заработок на сайте

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

Зачем крошки и почему без плагина?

Реализованы они тогда были на основе плагина Breadcrumb NavXT — довольно таки функционального, но с довольно бедными возможностями визуального оформления крошек.

Конечно же, можно было бы использовать и стили для создания красивости, но тогда я не очень то шибко с ним дружил. Только написав серию уроков по CSS стилям, стал и сам в этом немного разбираться. Получилось как в анекдоте про негодующего на непонятливость студентов преподавателя, который в сердцах заявил: «Три раза объяснил! Сам понял! А вы. ».

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



Теорий много по данному вопросу. Если в упомянутых статьях я пытался умничать и искать истину в высоких материях (аякс, правильная схемы перелинковки) то вот этот товарищ, например, рассказывает как оптимизировать wordpress в тезисах, без деталей, но вполне понятно. Надо быть проще и люди к тебе потянутся, а за ними и поисковики, возможно. Ладно вернем к крошкам.

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

Я, как вы помните (правда не понятно, зачем вам это помнить, но все же), сейчас сижу на VPS c Parallels от Инфобокса. Замечательная и недорогая штука, но вот чуть больше месяца назад у меня появилось чувство дежавю — как будто бы меня вернули к обычному виртуальному хостингу.

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

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

Мне отвечали (вежливо, но довольно убедительно), что у меня нагрузка идет очень высокая. Я им отвечал, что она у меня с начала года в разы снизилась (имея в виду посещаемость и количество просмотров). Ну, в общем, они меня убедили подумать в сторону того, а что я, собственно, последнее время такое с блогом делал, что могло так нехорошо отразиться на его работе.



В силу возникших сложностей с поисковым трафиков я думал в основном о способах все вернуть взад, ну или предавался меланхолии, вспоминая славные деньки до обвала. В общем, с трудом вспомнил, что примерно в это же время я и ставил этот самый плагин upPrev. Полез в его настройки и прочитал правильно фразу на вкладке «Кеш»:

Использование на больших сайтах (более 1000 сообщений) может привести к падению сайта

Точнее, я ее просто не дочитал до конца в момент настройки и поставил галочку на автомате, решив что кеш это вообще замечательно, а в отношения Вордпресс, так вообще полный цимус (вспомните моего спасителя Hyper Cache, описанного тут и позволяющего платить за хостинг в разы меньше). В общем, кеш в upPrev отключил и тормоза исчезли.

Хлебные крошки в Вордпресс без плагинов, создание, продвижение и заработок на сайте

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

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



Ну, и кроме всего прочего данные хлебные крошки производят очень приятное визуальное впечатление:

Хлебные крошки в Вордпресс без плагинов, создание, продвижение и заработок на сайте

А для подгона их под дизайн своего блога у вас будет выбор из шести цветовых гамм.

Реализация красивых хлебных крошек для Вордпресс

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

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

Он служит для прописывания всяческих функций или фильтров, которые позволяют реализовать много чего полезного не копаясь непосредственно в файлах движка, изменения в которых после обновления версии Вордпресс могут быть потеряны. А все, что внесете в functions.php, будет жить вплоть до смены вами темы оформления.

Итак, добавляете в этот расчудесный файл следующую функцию:

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

Это каркас. Теперь нужно будет добавить к нему еще немного стилей. Сначала вам желательно определиться с расцветочкой, но можно будет ее откорректировать и по ходу. Здесь вы сможете скачать шесть подложек под надписи хлебных крошек (сероватого, голубоватого, зеленоватого и др. цветов).



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

Хлебные крошки в Вордпресс без плагинов, создание, продвижение и заработок на сайте

Одна из полосок будет использоваться по умолчанию, другая будет показана при подведении к ней курсора мыши, а третья — при щелчке по ссылке из хлебных крошек. Все это задается, естественно, в стилях CSS, которые мы сейчас и пропишем.

Но сначала распакуйте архив с фонами и залейте их в папку с вашей темой в имеющуюся там директорию:

Теперь откройте на редактирование (лучше не в админке Вордпресс, а подключившись к сайту по ФТП) файл со стилями style.css из папки с вашей темой оформления. Можно прямо в его конец добавить следующий код:

В строке background-image: url (images/bg-crumbs-blue.png) вы вольны будете изменить название графического файла фона на тот, чей цвет больше всего подходит дизайну вашего блога. Про то, как работает background в CSS, читайте тут, а так же про все его возможные вариации (color, position, image, repeat, attachment). На самом деле жуть, как интересно, ибо открывает массу возможностей.

А так же про display читайте тут, про font здесь, а про атрибуты hover, active и first — тут. Темы интересные, но если в CSS вы новичок, то лучше будет начинать сначала.

Вывод крошек в постах Вордпресса и небольшой их тюнинг



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

Хлебные крошки в Вордпресс без плагинов, создание, продвижение и заработок на сайте

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

Он (код) будет выглядеть так:

Я не долго думая запихнул его в самом начале, сразу после подгрузки шапки блога:

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

Можно было бы, конечно, удлинить в графическом редакторе (хотя бы и в онлайновом Фотошопе, описанном здесь) полоски подложки, но это было бы слишком просто, а мы не ищем легких путей. Или, наоборот.

В общем, я немного сократил количество символов (заменил в коде the_title () на trim_title_chars (60, '. ')), которое отображается в ссылке на текущий пост, ибо названия у меня слишком длинные и в заготовки подложек попросту не влазят:



Вот, но для этого в наш многострадальный файл functions.php пришлось добавить еще одну функцию:

Замечательная штука и может везде, где вам понадобится, заменить the_title () на trim_title_chars (60, '. '). Например, у меня это реализовано в кнопке добавления в Твиттер. Естественно, что цифра 60 означает количество отображаемых символов Тайтал и вы вольны его заменить на нужное вам.

Но потом мне не понравилось, что слова обрезаются посередине или еще как-то некрасиво, поэтому я в итоге заменил trim_title_chars (60, '. ') на trim_title_words (5, '. '). Догадайтесь — чего там 5? Ну, очевидно, что слов, а дальше будет стоять троеточие.

Правда, в functions.php нужно добавить еще одну функцию:

Вот и все, что я хотел сказать по этому многозначительному поводу.

P.S. перенес мой маленький отчет в комментарии к посту о фильтре Яндекса.

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Подборки по теме:

Комментарии и отзывы

Микроразметку забыли добавить, чтобы все по фен-шую было в поисковиках.

Виталий: думаете сильно лучше будет в плане привлекательности для кликов в выдаче? Как то сомневаюсь я в этом.

Здравствуйте, не подскажете где можно скачать антиспам плагин, DCaptcha, в админ части почемуто отсутствует? Спасибо!

Дмитрий: этот небольшой моддинг позволяет улучшить сниппет в выдаче поисковых систем. Разве не за посетителя мы все боремся, совершая оптимизацию статей и сайта?



Юрий: ответил в посте по Дкапче.

Виталий: может быть, но пока нет времени об этом думать, где-нибудь ближе к осени займусь. Спасибо за ценное замечание.

Как же я Вам не завидую. Столько постов переправлять. Ужас! Но Вы справитесь!

Важный момент: сейчас у вас «крошки» сделаны таким образом, что страница ссылается сама на себя из строки с крошками. , чтобы последняя ссылка не была ссылкой.

Максим: есть такое мнение и уже довольно давно о нем слышал. Было бы здорово еще получить обоснование. Спасибо.

Благодарю за идею. Хорошо бы если, как раньше и на джумлу сделали.

Вставил код, но почему-то не отображается родительская страница. Как сделать чтоб родительская страница отображалась?

На скрине //prntscr.com/1g3xdh два вида хлебных крошек. Буду признателен ответившим!

Уважаемый,Дмитрий!Извиняюсь за оффтоп, но большое Вам спасибо за ваши подробные статьи.

В сборнике «SEO от А до Я» перечитал от корки до корки кучу статей, но Ваши самые понятные для таких новичков как я)Спасибо еще раз)Подписался)

я не понял куда вставлять функцию. ошибки выдает

Ой, спасибочки за статью! Всё так классненько получилось! Вот только, наверное, нужно перед этим Breadcrumb NavXT не только деактивировать, но и удалять из шаблонов темы всё, что для него было ручками прописано (код вызова и др.)? Чтобы не засорять код? Или я не права?

«Важный момент: сейчас у вас «крошки» сделаны таким образом, что страница ссылается сама на себя из строки с крошками».



Да, именно так. Это плохо?

,чтобы последняя ссылка не была ссылкой».

А как это? Что-то не поняла

Спасибо за ваш сайт и труд, очень помогает в нелёгком освоении WP и не только.

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

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

Я вообще не наблюдаю хлебных крошек на этом сайте. Дмитрий, можете прокомментировать этот момент?

тако: ну, у меня семь пятниц на недели — то снимаю, то добавляю что-то на блог в надежде на лучший результат.

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

Так все-же, актуальны они сегодня или нет?

Я кстати пренебрег вашим советом, добавил код из админки, ибо лень было по FTP подключаться, сайт упал с пометкой «ошибка синтаксиса» Хорошо, что он экспериментальный))

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

Попытался все сделать как у вас написано, но ничего не получается сайт падает с ошибками. Что то я делаю не так. Хочется чтобы был вариант trim_title_words (5, '. ')



Можете уточнить что и в какие конкретно файлы нужно вставить чтобы он заработал. Уже несколько часов пытаюсь и не получается. Очень вас прошу помогите пожалуйста.

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

Две функции в файл function.php как у вас написано я добавил и с этим все нормально из вашей статьи не могу понять куда и в какой файл нужно добавлять

echo '<a href=”” rel=”nofollow”>';trim_title_words(5, '. ');echo '</a>';

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

Я пробовал в single.php вставлять

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

Что не так, помогите?

Что то порезало при вставке, я вставлял куски кодов из вашей статьи.

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

Знаете, думаю была бы интересна статья как вы начинали зарабатывать со своего блога, именно первые шаги и через сколько времени после запуска. Потому что куда не сунься требуют высокой посещаемости, ТИЦ,срок не менее года и так делее, а где их взять в самом начале, а ведь хочется чтобы блог по крайней мере содержал себя на хосте на первых порах.



Сдеал все как вы и написали но вот такая проблема

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

Материал классный, удачи Вам.

С уважением Александр, администратор сайта BeautyHuman.ru

То есть сейчас выводится так: Вы на: Главная > Категория > Заголовок

А мне нужно что бы было так: Вы на: Главная > Категория

Подскажите пожалуйста как сделать

Сделал как у вы сказали и получил ошибку на сайте: Fatal error: Call to undefined function the_breadcrumb () in /home/tank-120/dietyizdorove.ru/docs/wp-content/themes/mh-magazine-lite/single.php on line 1

все ок, только сначала идет Главная, далее название рубрики не отображалось, затем шла подрубрика. Как исправить, чтоб выводило Главная-Рубрика-Подрубрика-Подподрубрика

Дима, привет! Все отлично работает. Спасибо за этот шедевральный код.

Как менять местами крошки? — сейчас так — ГЛАВНАЯ>>КАТЕГОРИЯ>>ЗАПИСЬ ,я хочу удалить категорию — как это сделать?

Спасибо за статью, очень полезна! Возник единственный вопрос. Сайт на шаблоне WP. При обновлении шаблона не будут ли слетать крошки, если прописывать код в основных файлах? Где-то читала, что для сохранения изменений нужно прописывать их в дочерних (или как-то так) файлах, создавать их нужно дополнительно. Но не могу найти источник, где был описан этот процесс. К сожалению, не сильна в сайтостроении, только начала разбираться. Буду благодарна за ответ или линк.



* Нажимая на кнопку “Добавить комментарий” или “Подписаться” Вы соглашаетесь с политикой конфиденциальности.

О admin

x

Check Also

Фотостоки и фотобанки

> Фотостоки и фотобанки — 30 бесплатных легальных источников фотографий, изображений и иконок Здравствуйте, уважаемые ...

Форумок (Forumok)

> Форумок (Forumok) — как зарабатывать в интернете на форумах и социальных сетях Здравствуйте, уважаемые ...

Форекс аналитика

> Форекс аналитика — принципы фундаментального (новостного) анализа Здравствуйте, уважаемые читатели блога Данный материал – ...

Флуд, флейм, троллинг, сабж и оффтоп

> Флуд, флейм, троллинг, сабж и оффтоп — что это такое Здравствуйте, уважаемые читатели блога ...

Фильтры Яндекса и Google

> Фильтры Яндекса и Google — за что можно получить пессимизацию или бан от поисковых ...

Фильтры Яндекса

> Фильтры Яндекса — за аффилированность, одинаковые сниппеты, взрослый контент и агрессивную рекламу Здравствуйте, уважаемые ...

Фиксированное верхнее меню и плавающий сайдбар в WordPress, создание, продвижение и заработок на сайте

> Фиксированное верхнее меню и плавающий сайдбар в WordPress Здравствуйте, уважаемые читатели блога Это скорее ...

Файл из папки с темой WordPress и реальные примеры его использования, создание, продвижение и заработок на сайте

> Файл functions.php из папки с темой WordPress и реальные примеры его использования Здравствуйте, уважаемые ...

Файл и мета-тег robots

> Файл robots.txt и мета-тег robots — настройка индексации сайта Яндексом и Гуглом, правильный роботс ...

Файл Hosts

> Файл Hosts — что это такое, где он находится в Windows, что с ним ...

Учет поведенческих факторов при продвижении сайта

> Учет поведенческих факторов при продвижении сайта — какие способы улучшения ПФ допустимы, а какие ...

Учет морфология языка и другие проблемы решаемые поисковыми системами, а так же отличие ВЧ, СЧ и НЧ запросов, создание, продвижение и заработок на сайте

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

Устарел или не работает Adobe Flash Player

> Устарел или не работает Adobe Flash Player — как обновить, удалить и установить бесплатный ...

Установка форума SMF

> Установка форума SMF — Интеграция Joomla 1.5 и Simple Machines Forum с помощью компонента ...

Установка и настройка плагинов для WordPress, решение возможных проблем, создание, продвижение и заработок на сайте

> Установка и настройка плагинов для WordPress, решение возможных проблем Здравствуйте, уважаемые читатели блога Периодически ...

Установка WordPress в деталях и картинках, вход в админку WP и смена пароля, создание, продвижение и заработок на сайте

> Установка WordPress в деталях и картинках, вход в админку WP и смена пароля Здравствуйте, ...

Установка VirtueMart 2 для создания интернет-магазина на Joomla, создание, продвижение и заработок на сайте

> Установка VirtueMart 2 для создания интернет-магазина на Joomla Здравствуйте, уважаемые читатели блога Сегодня я ...

Установка Joomla 1

> Установка Joomla 1.5 в деталях и картинках, решение возможных проблем Здравствуйте, уважаемые читатели блога ...

Ускорение сайта и рост конверсии

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

Ускорение и защита вашего сайта в облачном сервисе, создание, продвижение и заработок на сайте

> Ускорение и защита вашего сайта в облачном сервисе Айри.рф Здравствуйте, уважаемые читатели блога У ...

Управление репутацией в поисковых системах (методы SERM), создание, продвижение и заработок на сайте

> Управление репутацией в поисковых системах (методы SERM) Ничто не создается так долго и не ...

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

> Улучшение социальных и поведенческих факторов в Userator, а так же заработок для людей не ...

Улучшаем отображение цитат и фото на форуме SMF с помощью Modern style Mod и Highslide Image Viewer, создание, продвижение и заработок на сайте

> Улучшаем отображение цитат и фото на форуме SMF с помощью Modern style Mod и ...

Удобные визуальные закладки от бесплатного онлайн-сервиса Atavi, создание, продвижение и заработок на сайте

> Удобные визуальные закладки от бесплатного онлайн-сервиса Atavi Здравствуйте, уважаемые читатели блога Когда вы проводите ...