⬜️ WebP формат. Что это такое и почему он становится всё более популярным? ⬜️

WebP это относительно новый формат изображений, разработанный Google. Он позволяет сохранять изображения в более мелком разрешении, не потеряв при этом качества. Это значит, что ваши изображения будут загружаться быстрее и занимать меньше места на вашем сайте.

Но это не единственное преимущество WebP. Этот формат также поддерживает прозрачность, что означает, что вы можете сохранять изображения с прозрачным фоном, как например PNG.

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

В WordPress есть специальный плагин, который конвертирует картинки в webp.

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

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

⬜️ Кнопки с градиентом ⬜️

Ресурс с готовым кодом для красивых анимированных градиентных кнопок. Очень много стилей.
CSS код копируется в 1 клик.

🔗 Посмотреть 🔗

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

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

⬜️ Анимированный фон на чистом css ⬜️

Градиентный фон сделан на чистом css без использования js. Также не использует никаких вспомогательных html тегов, что позволяет внедрить его в абсолютно любой проект с любой структурой кода.

🔗 Посмотреть 🔗

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

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

⬜️ Как запретить удаление отдельных постов ⬜️

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

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

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

🔗 Посмотреть 🔗

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

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

⬜️ Наглядное пособие по css селекторам ⬜️

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

🔗 Посмотреть 🔗

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

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

⬜️ Плагин для массовой замены контента в базе данных ⬜️

Плагин позволяет заменить контент в базе данных. Часто используется при переносе сайта WordPress на другой домен или сервер, чтобы сделать замену в БД на новый домен для корректной работы.

⭐ Личный опыт. Нужно было удалить параграф из строки. Проблема была в том, что статей было под 50 и вручную проходить каждую статью, выискивать там этот параграф и удалять его было бы очень нерационально. С помощью этого плагина я вбил этот параграф в поле "search" и в поле "replace" поставил пробел.
После чего выбрать таблицы с постами и нажать "применить". Абзац пропал со всех статей и не пришлось руками всё редактировать.

➡️ Возможности плагина:

⬜️ Выбор только отдельных таблиц

⬜️ "Холостой запуск", чтобы посмотреть, как много полей будет обновлено

⬜️ Нет дополнительных требований к серверу, кроме как работающая установка WordPress

⬜️ Поддержка мультисайта

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

🔗 Посмотреть плагин 🔗

👍 Средняя оценка: 4.5
✨ Количество скачиваний: 1 000 000+
🎯 Последнее обновление: 3 недели назад

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

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

⬜️ Отключения неиспользуемых стилей и скриптов ⬜️

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

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

⭐ Что дает отключение ненужных скриптов?
— Уменьшает количество загруженных HTTP-запросов (важно для более быстрой загрузки)
— Уменьшает HTML-код фактической страницы (это даже лучше, если включено сжатие GZIP)
— Google даст хорошую оценку вашему сайту, так как он будет быстрее, а быстрая загрузка страницы в настоящее время является фактором в ранжировании поиска

🔗 Посмотреть плагин 🔗

👍 Средняя оценка: 4.5
✨ Количество скачиваний: 4 000+
🎯 Последнее обновление: 8 месяцев назад

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

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

⬜️ CSS карточки с эффектом открывания книги ⬜️

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

🔗 Посмотреть 🔗

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

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

⬜️ Коллекция цветов брендов ⬜️

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

🔗 Посмотреть 🔗

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

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

⬜️ Генератор динамичного заднего фона ⬜️

Официальный сайт разработчиков библиотеки particles.js. Позволяет настроить задний фон, который делает эта библиотека, очень гибко. Также есть пару предустановок, чтобы было удобнее генерировать. На выходе получается json файл, который нужно будет передать в функцию вызова библиотеки.

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

🔗 Посмотреть 🔗

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

WEB PANDA | #сервисы

⬜️ Магические красивые карточки ⬜️

Очень красивые карточки. Можно использовать для сайта приложения или современного онлайн сервиса. Выглядит уникально и интересно. Без использования js.

🔗 Посмотреть 🔗

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

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

⬜️ Эффект наведения на аватар с пояснением ⬜️

Готовый код для красивого эффекта наведения на аватар. Автор статьи описал каждый этап с примером.

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

🔗 Посмотреть 🔗

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

WEB PANDA | #верстка

⬜️ ChatGPT. Как правильно формулировать вопросы ⬜️

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

⭐ Советы при составлении задания для текстов:

1) Задавайте стиль письма текста. После основного ТЗ напишите: "стиль текста должен быть формальный/неформальный/творческий/профессиональный и тд.

2) Напишите более подробно о вашей задаче. Что там должно быть, а что ни в коем случае не должно.

3) Возможно у конкурента уже есть текст? Тогда не нужно придумывать велосипед и попросите chat gpt перефразировать текст, заменив синонимами. На выходе получите 100% уникальность. Важно! Рекомендую переписывать по абзацу, а не всё сразу, чтобы работало корректно.

⭐ Советы при написании кода:

1) Напишите для чего надо написать код. Например, для cms wordpress.

2) Просите писать оптимизированный код.

3) Если вы пишите код для wp, то просите его использовать функции wordpress.

4) Если код не работает, то как бы банально это не звучало, напишите об этом chatGPT. Он либо перепишет, либо скажет все возможные причины.

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

➡️ На английском он отвечает гораздо быстрее и грамотнее. Поэтому рекомендую использовать переводчик для экономии времени.

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

WEB PANDA | #сервисы #советы

⬜️ Ресурс для изучения CSS от гугл ⬜️

Learn CSS — постоянно обновляемый справочник по CSS.

👍 Качественный материал с примерами и подробным описанием каждого CSS свойства. Также есть подкасты к каждой статье, но только на английском языке.

Создатели сайта — google.

🔗 Посмотреть 🔗

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

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

⬜️ Карточка с интересным эффектом наведения⬜️

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

🔗 Посмотреть 🔗

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

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

⬜️ Плагин сжатия картинок ⬜️

Плагин от известного сервиса TinyPNG. Автоматически оптимизирует все ваши изображения при загрузке.
Совместим с wpml, WooCommerce, а также имеет много других функцией.

🔗 Посмотреть плагин 🔗

👍 Средняя оценка: 4.5
✨ Количество скачиваний: 200 000+
🎯 Последнее обновление: 3 месяца назад

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

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

⬜️ CSS переменные ⬜️

Раньше переменные были доступны только в препроцессорах, но в CSS3 возможность создания их добавили в обычном css.

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

🔗 Посмотреть 🔗

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

WEB PANDA | #верстка