⬜️ Что нужно сделать при создании сайта на wordpress ⬜️

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

⬜️ Настройка ЧПУ. Обязательно после установки wordpress ставьте ЧПУ ссылки. Перейдите в настройки » постоянные ссылки и выберите "Название записи"/"Sample post" для ссылок. На работающем сайте делать не рекомендую, так как может испортить seo. Не забудьте настроить редиректы для старых ссылок на новые страницы.

⬜️ Рекомендуйте посетителям сайта связанный контент или другими словами — перелинковка. Обязательно делайте ссылки с одних страниц на другие. Это улучшит пользовательский опыт и seo.

⬜️ Настройте транслитерацию имени файлов и url. Особенно важно настроить транслитерацию файлов, так как многие плагины для оптимизации картинок плохо работают с кириллическими названиями.

⬜️ Настройте защиту от взлома и спама.

⬜️ Настройте кеширование и сжатие файлов.

Эти 5 пунктов помогут сделать ваш сайт лучше. Если вы знаете ещё советы, то пишите о них в комментариях.

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

⬜️ Плагин для создания Яндекс.Карт в Elementor⬜️

Удобный виджет Яндекс Карт. Легко добавляется несколько адресов на одну и ту же карту с поддержкой различных типов карт (дорожная карта / спутниковая / гибридная / рельефная) и кастомного стиля карты.

Легко редактируется контент всплывающего блока при нажатии на кнопку.
И остальные менее значительные, но полезные опции для карт.

Плагин недавно обновился и стал поддерживать ленивую загрузку, что улучшает page speed.

Также можно встроить Яндекс.Карты без плагина

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

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

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

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

⬜️ Плагин для управления wp cron ⬜️

Cron — это планировщик задач, который запускается автоматически через определенный промежуток времени. Очень удобен для определённых задач. Например, чтобы каждый день скрипт проверял дату рождения пользователей и если она совпадает с текущей, то отправлял им сообщение.

У wordpress есть wp cron, который позволяет настраивать задания. Но, когда задач становится много, то управлять ими достаточно сложно. Специально для управления wp cron был создан плагин WP Crontrol.

Он позволяет:
— Просматривать все cron задачи (в том числе от wordpress)
— Удалять/добавлять/останавливать cron задачи.
— Запускать cron задачу по клику сразу же.
— Массово удалять задачи и очищать повторяющиеся.
— Создавать свои временные промежутки.

Кейс из практики. Заметил, что сервер стал сильно нагружаться. Оказывается, предыдущий разработчик сайта неграмотно в php коде сделал cron задачу, что она добавляется каждый раз при обновлении в админку и выполняется каждую минуту. На момент обнаружения проблемы, уже была 183 задачи.

Представьте, что каждую минуту 183 раза запускается функция, которая получает 1000+ пользователей сайта и проверяет их дату тарифа для отправки письма, если она истекала. И с каждой перезагрузкой страницы количество запуска увеличивалось на +1.

В итоге плагин мне в 1 клик позволил удалить сразу все 183 задачи и я в коде оптимизировал данный участок.

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

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

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

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

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

⚙ ЧПУ ссылки - это те ссылки, которые выглядят естественными для человека. Например, вместо того, чтобы иметь какой-то длинный и сложный 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 #верстка