🚀 Инструкция по оптимизация сайта на wordpress 🚀

Многие сайты на wordpress имеют плохую производительность. Этот пост поможет её улучшить.

Что нужно, чтобы сайт работал быстро и стабильно?
1) Сжать картинки и оптимизировать их размер. В этом вам помогут плагины или сервисы. Самые популярные плагины: smush, robin image optimizer и imagify. Сервисы: TinyPNG, ILoveImg
2) Поставить плагин кэширования и сжатия файлов. Лидером в плагинах на данный момент является wp rocket. Его можно заменить на бесплатный autoptimize или WP Super Cache, но результат будет хуже.
3) Сконвертировать изображения в webp формат с помощью бесплатного плагина webp express.
4) Хороший и быстрый хостинг. Хостинг играет большую роль в скорости. От себя могу порекомендовать reg.ru или beget.com
5) Обновите плагины и сам wordpress.

⚠️ Не забудьте сделать резервную копию перед изменениями!

После данных этапов ваш сайт должен начать грузиться гораздо быстрее. Если статья была полезна, то буду рад репосту!

WEB PANDA | #оптимизация #плагины #wordpress

🛡 Инструкция по защите сайта на wordpress 🛡
Защита сайта - это то, что нужно делать всегда и в полном объеме.

Как защитить сайт?
1) Не скачивать взломанные плагины и темы. Из-за взломанных плагинов и тем случается более 95% процентов всех взломов на wordpress. Если вам нужен функционал плагина, а денег на него нет, то лучше накопите на него или найдите аналог.
2) Обновляйте плагины и темы. Часто в популярных плагинах и темах находится уязвимости в безопасности, которые разработчики быстро исправляют в обновлениях.
3) Установите ssl сертификат. Он будет шифровать информацию клиентов, увеличит доверие, улучшит скорость и даже хорошо скажется на seo.
4) Установите плагин безопасности. Плагинов безопасности очень много. От себя я рекомендую All in one wp security. Этот плагин даёт огромный функционал для защиты совершенно бесплатно.

После выполнения всех 4 пунктов ваш сайт будет полностью защищен.

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

🖥 Карточки чекбоксы на чистом css 🖥

Красивая анимация выбора и минималистичный дизайн. Отлично впишется в любую пошаговую форму.

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

WEB PANDA | #codepen #дизайн #верстка

🎆 Необычные анимации при наведении на элементы 🎆

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

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

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

🖥️ Резервное копирование сайта wordpress 🖥️
Резервное копирование сайта (backup) нужно для того, чтобы обезопасить себя от любых форс-мажоров.

Самые популярные форс-мажоры:
1) Заражение сайта вирусом.
2) Поломка сайта или некорректное отображение в результате обновления плагинов/темы/wordpress.
3) Случайное удаление определенных файлов, базы данных или самого сайта (такое тоже бывает).

Как часто и когда нужно делать backup?
1) Делать backup сайта ежедневно
2) Делать backup сайта перед любым крупным изменением или обновлением

Как делать резервное копирование? Тут есть два способа.
1) Хостинг. Многие хостинги предоставляют бесплатное ежедневное копирование.
2) Плагины. Есть множество backup плагинов. Самые популярные и проверенные — wpvivid и updraft plus.

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

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

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

🛒 Стилизация woocommerce select на странице оформления заказа 🛒

К сожалению через обычный css браузеры не дают стилизовать выпадающий список (select). А что делать, если это нужно?

Для стилизация нам на помощь приходит javanoscript. С помощью него можно сделать показ выпадающего списка при клике на элемент. А далее после выбора определенного элемента (div) брать его значение и подставлять в скрытый select.

Звучит неудобно и довольно заморочено для такой казалось бы простой задачи. К счастью были придуманы разные библиотеки, благодаря которым можно всё это стилизовать 1 строчкой кода. Например библиотека select2.

🎆 Как стилизовать выпадающий список в woocommerce?
В woocommerce уже встроена библиотека select2 и он её уже использует для поля "выбор страны". Поэтому мы можем сразу её использовать.
К сожалению в пост не влезет подробная настройка, поэтому я описал процесс стилизации в статье с подробными инструкциями.

WEB PANDA | #wordpress #woocommerce #дизайн

💎 Добавление иконки в поле в форме любого плагина 💎

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

Но что делать, если хочется её добавить или так предусмотрено в дизайне?
В этом случае нам поможет css код. Схема тут очень простая:
1) Добавляем внутренний отступ слева, чтобы было место для иконки.
2) Добавляем полю относительное (relative) позиционирование.
3) Добавляем иконку через псевдоэлемент.

💥 В статье я разобрал, как добавлять иконки для 2 самых популярных плагинов контактных форм (contact form 7 и wpforms) и оставил универсальный css, где нужно просто поменять классы.

Посмотреть статью

💬 Если будут вопросы, то пишите их в комментариях.

WEB PANDA | #wordpress #верстка #дизайн

🚀 Генераторы css элементов 🚀
Откопал два супер сервиса, которые генерируют css сложных элементов.
1) https://superdesigner.co/tools — позволяет генерировать 3d элементы, фоны, паттерны, градиенты и разные уникальные формы.
2) https://www.cssportal.com/css-generators.php — ещё один генератор, который дополнит функционал первого.
3) 🎁 Бонус! https://logoipsum.com/ — сервис с demo логотипами. Часто при разработке сайта ещё готового логотипа нет, а заглушка нужна.

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

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

👽 Анимация наведения на картинку на чистом css 👽

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

Посмотреть codepen

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

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

😎 Вставка любого кода в wordpress 😎

Часто приходится вставлять код разного типа (html, css, js или php) в разные участки сайта. Например вставить рекламный баннер или Гугл.Аналитику.

Тут нам на помощь приходит плагин woody code snippets.

Он позволяет создавать разные типы сниппетов (кода) и добавлять их через авторазмещение или шорткод.

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

🐼 Использование плагина крайне простое и интуитивное, поэтому решил не писать инструкцию по добавлению кода.

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

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

💣 Революционный плагин конструктор страниц Bricks 💣

Данный конструктор идёт как wordpress тема. Он позволяет создавать страницы сайта в удобном конструкторе. Аналог elementor, divi, wpbakery и других менее популярных конструкторов.

➕ Преимущества bricks:
1) До невозможности чистый код. Ни одного лишнего div. Тяжелая страница со слайдерами, анимациями и тд без какой-либо оптимизации выдаёт 95+ на пк.
2) Супер гибкость. Позволяет создавать страницы любой сложности за счёт 40+ виджетов и кучей настроек.
3) Поддержка ACF и других плагинов произвольных полей.
4) Возможность создавать классы для элементов.
5) Создание своих breakpoints для адаптивности.
6) Поддержка woocommerce.
7) Поддержка произвольных шрифтов.

➖ Минусы:
1) Платный.
2) Нужно понимать верстку, чтобы использовать в полной мере.

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

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

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