Фриланс и веб с OlegTix | WordPress

🚫 Опасные имена в разработке 🚫

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

В чём была проблема?
Был блок преимуществ с классом "advantages". Далее его элементы имели класс "adv" (как я понимаю, сокращенное от advantages). ADBlock считает такое за рекламные объявления и не показывает пользователю.

Также были картинки с именем ad/adv, которые также блокировались и не загружались.

Решение проблемы:
Переименовывание классов и файлов изображений. После этого все стало корректно отображаться.

Итог:
Никогда не называйте классы блоков или изображения словами, которые связаны с рекламой (adv, ad, ads, banner и прочее). Так как если у посетителя будет ADBlock, то он просто не увидит эти элементы.

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

WEB PANDA | #оптимизация

💎 Сайт для генерации разных фонов 💎

BGJAR позволяет генерировать огромное количество разных разновидностей фонов в современном стиле. Каждый тип фона можно очень тонко настроить.

На выходе вы получаете svg код, css код или закодированное изображение.

Сервис будет полезен, если вы занимаетесь дизайном сайтов или же у вас есть свой сайт, который вы хотите украсить.

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

WEB PANDA | #сервисы #дизайн

💎 Сниппет для минимальной стоимости заказа💎

Данный сниппет в woocommerce позволит сделать минимальную стоимость заказа. Если цена будет меньше, то выводит ошибку.

Минимальная цена редактируется в переменной $minimum. Замените 50 на свое значение. Значение только в цифрах, без какого-либо знака валют или текста.

Код сниппета в комментариях.

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

WEB PANDA | #wordpress #woocommerce #сниппет

На канале уже вышло много постов, поэтому решил сделать подборку для новых участников:
1) 🚀 Ускорение сайта на WordPress
2) 🛡 Защита сайта на WordPress
3) 🖌 Сервисы для дизайна
4) 🛒 Стилизация woocommerce select на странице оформления заказа
5) 😎 Вставка любого кода в wordpress
6) 😶 Скрытый пользователь в wordpress
7) 🔥 Создание своей wordpress темы

🤝 Буду рад, если поделитесь каналом со своими знакомыми, это очень поможет в развитии канала.

WEB PANDA

💎 Иконки социальных сетей с эффектом наведения 💎

Написано на чистом css и html, что позволяет их легко кастомизировать и внедрить проект.

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

WEB PANDA | #codepen #верстка

💎 Самый простой способ выучить flex 💎

Без свойства display:flex уже ничего не сделаешь. Он используется на абсолютно всех сайтах для стилизации элементов.

Если вы делаете сайты на elementor или другом конструкторе, то вам все равно надо знать flex. Потому что в elementor уже давно он есть в экспериментах и скорее всего через год уже станет по умолчанию активным.

В более продвинутых конструкторах, например Oxygen или Bricks, он используется без какого-либо выбора. То есть там только flex и нет никаких колонок, как в elementor или wpbareky.

Сайт FlexBoxFroggy позволит вам выучить flex легко в игровой форме. Лично я когда очень давно начал его изучать прочитал кучу статей, но никак не мог нормально применять на практике, хоть и знал все свойства.

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

WEB PANDA | #верстка #сервисы

💎 Плагин woocommerce "Купить в 1 клик" 💎

Плагин добавляет к товарам кнопку "Купить в 1 клик", где при нажатии появляется всплывающее окно с заполнением формы.

Далее вы можете увидеть заявку в админке или же в письме на почте.

Плюсы: 
👍 Большая кастомизация
👍 Есть локализация
👍 Заявки хранятся в админке
👍 Хороший рейтинг
👍 В меру часто обновляется

Минусы:
👎 Простоватый дизайн. Но с помощью css можно всё отредактировать.

Альтернативы:
👀 Art WooCommerce Order One Click. Делает форму на основе contact form 7. Но есть большой минус - последнее обновление 2 года назад.


WEB PANDA | #wordpress #плагины #woocommerce

💎 Чат для помощи с wordpress 💎

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

WEB PANDA | #wordpress

💎 Сниппет кода для смены текста "Нет в наличии" woocommerce 💎

Данный сниппет позволяет изменить текст "Нет в наличии" на свой произвольный.

👀 Логика работы: Навешиваем на фильтр woocommerce функцию, которая принимает массив с информацией о наличии.
В этом массиве хранится два значения: класс и текст. Если класс равен "out-of-stock", то меняем второй элемент массива, а именно - текст.
Далее возвращаем измененный массив.

По желанию этот сниппет можно дополнить и изменить текст для других типов статуса заказа.

Код сниппета в комментариях.

Не знаете, как вставлять код?

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

WEB PANDA | #woocommerce #сниппет #wordpress

💎 Сайт каталог с лучшими сайтами и продуктами в IT 💎

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

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

Рекомендую изучить данный ресурс и время от времени заглядывать на него.

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

WEB PANDA | #сервисы

💎 Бегущая строка элементов на чистом css 💎

Часто в дизайне требуется реализовать бегущие повторяющиеся элементы. Для этого совсем не нужно использовать js.

В примере сделано через @keyframes на чистом css.

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

WEB PANDA | #codepen #верстка

💎 Плагин для ajax фильтрации чего угодно с огромным функционалом 💎

Плагин Filter Everything позволяет вам фильтровать любой контент через произвольные поля, атрибуты, таксономии.

Плюсы:
👍 Поддерживает ajax фильтрацию.
👍 Генерирует свои url и позволяет настроить мета теги, что хорошо для seo.
👍 Огромный функционал. Можно фильтровать записи, страницы, товары и произвольные типы записей.
👍 Хорошая документация для разработчиков. Есть фильтры и хуки для кастомизации.

Минусы:
👎 Часть функционала только в платной версии.
👎 Тех. поддержка только платная.

Лично я использую этот плагин на всех проектах, когда нужно сделать фильтрацию.

✨У плагина нет русской локализации, но есть украинская.
Если вам нужна русская локализация, то за 200р вы можете приобрести её у админа.

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

WEB PANDA | #wordpress #плагины

💎 Плавная прокрутка наверх на чистом css 💎

Сегодня наткнулся на очень крутое свойство scroll-behavior: smooth;
Его надо прописывать на тег <html>.

Благодаря ему вы будете получать плавную прокрутку наверх без использования js.

Полезно для создания кнопки прокрутки наверх.

Создать кнопку прокрутки вы также можете через плагин Scroll To Top.

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

WEB PANDA | #верстка #плагины #wordpress

💎 Новая тема от разработчиков WordPress💎

Незаметно подкралась тема Twenty Twenty-Three от wordpress.

Каждый год WordPress выпускает новую тему, которую называют именем года. Например в прошлом году была Twenty Twenty Two.

👀 Особенности темы:
1) Сделана полностью на Gutenberg с использованием Site editor.
2) Есть возможность менять цветовые палитры и шрифты одним нажатием кнопки.

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

На канале появился новый хештег #новости. Буду время от времени их публиковать.

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

WEB PANDA | #wordpress #новости