Хлебные крошки Woocommerce: как удалить, изменить, переместить

Столкнулся с проблемой: разметка HTML меня не устраивала, тк плохо подходила для динамических страниц. Казалось бы элементарная проблема, решаемая изменением кода верстки, в чем сложность? Сложность, а точнее нестандартность, в подходе Woocommerce. И если вы неготовы мириться со стандартными сущностями этого интернет-магазина, пора понять его принципы.

Хлебные крошки Woo — место дислокации

Ответственность за вывод несет функция

<?php woocommerce_breadcrumb(); ?>

прописана она в файле расположенном по адресу: site.com\wp-content\plugins\woocommerce\includes\wc-template-functions.php, а шаблон этой секции найдете тут: site.com\wp-content\plugins\woocommerce\templates\global\breadcrumb.php

А теперь о особенностях — функция хлебных крошек не выводится самостоятельно, а обычно в составе хука. в моем случае это выглядит так:

<?php
    /**
    * woocommerce_before_main_content hook.
    *
    * @hooked woocommerce_output_content_wrapper - 10 (outputs opening divs for the content)
    * @hooked woocommerce_breadcrumb - 20
    */
    do_action( 'woocommerce_before_main_content' );
?>

По комментариям видно, что breadcrumb поключенны «вторым номером» в хук с названием woocommerce_before_main_content.


Breadcrumb Woo: перепозиционирование

Исходя из требуемых задач, навскидку можно предположить 3 варианта действий:

  • Удаление функции из хука;
  • Удаление, с переподключением в виде отдельной функции;
  • Удаление с включением в состав другого хука.

Процесс удаления/исключения будем рассматривать на примере хука опубликованного выше. Обратите внимание на 3 составляющих:

  • Название хука с которым работаем;
  • Наименование функции;
  • Цифра обозначающая порядок очередности.

Все 3 составляющие у нас известны, значит код будет выглядеть так:

remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20 );

и размещаем его в файле functions.php. Если эту или другую функцию надо присоединить к другому хуку то используем такой код:

add_action( 'woocommerce_before_shop_loop_item_title(имя хука)', 'woocommerce_template_loop_product_title(имя функции)', 5(порядок очередности) );

Страница ошибки 404: адекватное оформление или потеря клиентов?

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

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

Избежать массовых проблем можно с помощью редиректа с удаленных и перемещенных страниц, на новые или на главную. Но все же еще остается фактор пользователя, поэтому стоит взять этот процесс под контроль и привести внешний вид ошибки 404 к приемлемому виду.
Проверить отображение этой области на вашем сайте, очень просто. Перейдите на ваш сайт и в адресной строке, после домена, введите несколько символов. Например http://mysite.com/блаблабла (вместо mysite.com укажите имя вашего сайта )

Из каких секций может состоять страница 404?

1-Шапка сайта, что бы клиент мог идентифицировать ресурс на который он попал

2-Информация, о том что такой страницы не существует и предложение по решению проблемы

  • Меню, что бы была возможность перейти в работающий раздел
  • Строка поиска по сайту, для поиска требуемой информации
  • Блок с наиболее популярными товарами или услугами

3-Подвал сайта

Примеры оформления у некоторых СМИ

Цензор — полный джентльменский набор: сообщение об ошибке и возможность вернуться перейти на главную + меню

Обозреватель
Картинка со взрывающимся логотипом)
Сообщение + предложение воспользоваться поиском. Однако строку поиска забыли поставить))

Корреспондент
1 Сообщение об ошибке
2 Ссылки на поиск и на развернутое меню сайта
3 Блок с последними новостями

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

Фото «съели» все место на сайте

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

Оптимизация изображений на сайте

Увеличить лимит, перейдя на другой тариф

Например на хостинге Украина в стартовом тарифе выделяется площадка на SSD диске в объеме 1Gb, А в максимальном 10Gb.
Минус данного способа — это цена, не каждый владелец малого бизнеса на стадии становления понимает, за что платит 3000грн/год (за хостинг).
Особенно если отношение к сайту «лишь бы был» и не вкладывает деньги в рекламу и продвижение, а значит не может получать качественный трафик клиентов, который превратит его расходы в инвестиции.

Удалить старые страницы/записи с фото, что бы разместить новые

Это сделать очень легко, но есть пару неприятных нюансов
При удалении страниц, если они были проиндексированы поисковиком (если вы размещали ссылку на свой вебсайт в любой из соцсетей,
то индексация проходит быстро) на месте удаленной страницы возникает ошибка 404.
Наличие 404-х страниц или «битых» плохо сказывается на рейтинге , и вебсайт может быть понижен в рейтинге или вовсе убран из выдачи
Такая проблема частично решается редиректом. С помощью него вы говорите поисковику, что эту страницу вы сняли с сайта и просите переправить всех клиентов,
зашедших сюда, на любую другую страницу, например, на главную.
Если этого не сделать, то клиент попадая на такую страницу думает, что у сайта проблема и покидает его.
Но есть и другая сторона медали. Поисковики индексируют не только статьи, но и фотографии, а значит те клиенты, которые к вам попадали, через поиск по фото, попросту не придут к вам.

Оптимизировать размер закачиваемых фото.

Современная фотоаппаратура позволяет создавать изображения с высоким разрешением. И владельцы/администраторы сайта выставляют на сайте изображения прямо с фотоаппарата, что совершенно не нужно.
К примеру, разрешение картинки 8000*6000 пикселей. Сравниваем с самым разрешением большого экрана для ПК 1920*1068, то есть фото можно и нужно уменьшать практически в 4 раза.
Статистика говорит, что просмотров с таких мониторов около 5%. Вывод: обрезайте фото по ширине контента.

Сжатие фотографии

В инете есть несколько ресурсов, позволяющих ужать фото без потери качества. Иногда они способны уменьшить вес картинки на 95% по сравнению с оригиналом

Выбор подходящего формата

Ранее все было просто и универсально: для больших фото использовался формат .jpg, а изображения с наличием прозрачности, применялись в .png.
В последние пару лет браузеры предлагают свои форматы, позволяющие уменьшать вес фотографий, при этом оставляя качество на высоком уровне.
Наиболее активен в этом Google с форматом WebP. Те, кто пользуются сервисом проверки скорости от Google Speed, знают, что гугл занижает показатели вебресурсам, игнорирующим WebP .

Сюрпризы от Вордпресс

CMS WordPress по умолчанию, для каждого загруженного изображения, создает 4 копии в разных размерах. А если вы используете платные темы и плагины изображений, то число таких дублей может возрасти до 10.
Из всех размеров, вам может понадобиться размер, который называется «миниатюра», он повсеместно используется для создания превью галерей.
А все остальные просто занимают место, тк добиться вывода нужного вам размера можно через код, а не подстановкой очередного дубля.
Для устранения данной проблемы необходимо, во-первых, отключить генерацию дополнительных размеров, а после этого вручную удалить дубли сформированные ранее.