⬜️ Почему важны ЧПУ ссылки для сайта ⬜️

⚙ ЧПУ ссылки - это те ссылки, которые выглядят естественными для человека. Например, вместо того, чтобы иметь какой-то длинный и сложный URL в виде множества цифр и букв, ЧПУ ссылки могут выглядеть как "example.com/products/shoes" или "example.com/blog/how-to-train-your-dog".

Одним из главных преимуществ ЧПУ ссылок является то, что их проще запоминать и передавать другим. Если вы можете сказать кому-то "перейди на example.com/products/shoes", это гораздо проще, чем если бы вы должны были сказать "перейди на example.com/index.php?pageid=23&category=2".

✏️ ЧПУ ссылки также лучше справляются с индексацией поисковыми системами. Когда поисковые системы работают с ЧПУ ссылками, они легче могут разобрать, что находится на странице, и как ее классифицировать. Это может привести к более высокой позиции сайта в поисковых результатах и более высокому трафику с поисковых систем.

Они также могут помочь вашему сайту в контексте SEO (поисковой оптимизации). Поисковые алгоритмы обычно дают больший вес ссылкам с человеко-понятными URL.

В целом, использование ЧПУ ссылок может принести множество преимуществ, как для пользователей, так и для вашего сайта в целом.

➡️ Важно! Если сайт уже действующий и проиндексировался поисковыми системами, то процесс смены ссылок на ЧПУ ссылки может плохо повлиять на SEO.
Поэтому надо крайне внимательно настраивать редиректы.

⭐ Для смены на ЧПУ ссылки для сайта на wordpress, вам нужно сделать следующие действия:/

⬜️ Перейдите в настройки » постоянные ссылки и выберите "Название записи"/"Sample post".

⬜️ Настройте транслитерацию url с кириллицы на латиницу. Плагин для этого.

Да, про это было в предыдущем посте "Что нужно сделать при создании сайта на wordpress" под пунктами 1 и 3, но я решил более подробно разобрать эту тему, чтобы у вас было полное понимание, для чего это нужно делать.

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

WEB PANDA | #seo #wordpress

⬜️ Анимированная css граница ⬜️

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

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

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

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

⬜️ Сервисы для помощи в создании дизайна сайта ⬜️

Следующие 6 бесплатных сервисов помогут вам при создании дизайна:

1) https://cssgradient.io/ - позволяет создавать любые градиенты в конструкторе, генерируя на выходе css код для всех браузеров.

2) https://gradienta.io/ - коллекция необычных градиентов. Ими можно заменить стандартные изображения-заглушки.

3) http://officeipsum.com/ - замена всем наскучившему lorem ipsum. Генерирует текст рыбу в 3 разных стилях, которые лучше вписываются в дизайн.

4) https://uispace.net/ - огромное множество бесплатных psd мокапов. Выведете своё портфолио на новый уровень.

5) https://www.potlabicons.com/ - анимированные noscript иконки. Придадут дизайну уникальность.

6) https://plus.premast.com/ - огромное хранилище фотографий, красивых векторных изображения и иконок.

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

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

⬜️ Плагин для запроса товара в наличии ⬜️

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

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

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

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

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

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

⬜️ Крестики нолики на чистом css ⬜️

Очень был удивлен, когда в первый раз увидел данный код. Человек сделал крестики нолики на чистом css и html без использования js. Более того, он прописал логику победы и всплывающее окно, которое показывает, кто победил.
Данный пример наглядно показывает, что на css можно сделать практически всё.

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

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

WEB PANDA | #codepen

⬜️ 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 | #верстка