⚙ Локальная wordpress разработка ⚙

Локальная разработка — это когда хостингом сайта выступает ваш компьютер.
Основной её минус всегда был в том, что сайт доступен только с вашего ПК и его нельзя показать клиенту, пока он не перенесен на хостинг. Но эта проблема была решена с помощью LocalWp.

⭐ В чем преимущества LocalWP в отличие от других локальных серверов (OpenServer, Laragon и тд)?

⬜️ Позволяет создавать сайты в 1 клик с установленным wordpress.

⬜️ Вход в админку в 1 клик без ввода логина и пароля.

⬜️ Позволяет делать Live Links. Этот функционал добавляет вашему сайту временный домен по которому вы можете показать сайт своему клиенту или посмотреть его с телефона.

⬜️ Имеет много бесплатных крутых расширений. А именно:
— сжатие картинок при загрузке
— проверка на битые ссылки
— Xdebug + Vs Code / PhpStorm
— мгновенные изменения на странице при редактировании css без перезагрузки страницы

⬜️ Создание заготовок для сайтов. Один раз создал готовую заготовку wordpress со всеми настройками и при новом проекте её копируешь и не нужно делать одно и то же с каждым новым проектом.

Программа полностью бесплатна.

🔗 Перейти на сайт LocalWP

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

WEB PANDA | #сервисы #wordpress

⭐ Интересная кнопка лайка ⭐

Кнопка лайка на чистом css, js, html, которую хочется нажать. Очень хорошо подойдет для внедрения в статьи или какой-то информационный контент на сайте.

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

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

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

⬜️ Скрытие значка распродажи woocommerce ⬜️

Код убирает вывод бейджа "распродажа" с товаров в каталоге и в карточке товара.

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

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

⬜️ Мета-теги dns-prefetch, preconnect, prefetch, prerender, preload ⬜️

Эти мета-теги дают браузеру команды на предварительные действия.

➡️ Кратко о каждом:
1) dns-prefetch — просит браузер в фоновом режиме получить информацию об указанном домене (узнать его IP), чтобы затем использовать её при реальных запросах к указанному домену.

2) preconnect — просит браузер в фоновом режиме создать соединение (рукопожатие, коннект) с указанным доменом для дальнейшей работы с ним.

3) prefetch — просит браузер в фоновом режиме загрузить и положить ресурс в кэш. Является необязательной инструкцией, то есть браузер может проигнорировать.

4) preload — говорит браузеру загрузить и положить ресурс в preload кэш. Обязательная инструкция в отличие от prefetch.

5) prerender — просит браузер загрузить URL-адрес и обработать его в фоновом режиме. Когда пользователь нажимает на ссылку, страница должна отобразиться моментально.


В telegram пост не влезет подробное описание каждого с примерами, но данную тему уже описали в статье на wp-cama. Вы можете перейти на их сайт для более подробного изучения каждого мета-теги. Задача данного поста была в том, чтобы дать вам общее представление о каждом.

🔗 Посмотреть подробнее 🔗

WEB PANDA | #оптимизация #верстка

🎆 WordPress исполнилось 20 лет 🎆

В 2023 году исполнилось ровно 20 лет с момента его запуска. Изначально он задумывался, как cms система для создания и управления блогами. Но постепенно он начал набирать и в текущее время на нем можно сделать лендинг, корпоративный сайт, интернет-магазин, доску объявлений и многое другое.

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

В 2022 году 43% сайтов сделано на wordpress во всем интернете. А общая доля 64%. Приложил скриншот статистики, где видно, что wordpress явный лидер.

Его прямой конкурент отстает на около 30% (сайты без cms). Интересно, что с годами такая статистика только растет.

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

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

⬜️ Выделение текста другим цветом ⬜️

По умолчанию в браузерах выделение текста происходит синим цветом. Но цвет можно легко перекрасить под стиль сайта с помощью пару строчек css кода.

::selection {
background: #333; /* цвет для браузеров */
}
::-moz-selection {
background: #333; /* цвет для поддержки firefox */
}

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

WEB PANDA | #верстка

⬜️ Сервис для уникализации фотографий ⬜️

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

Уникальные картинки нужны для более лучшего SEO продвижения.

➡️ К сожалению фотография становится после обработки более худшего качества (так как добавляется шум и другие эффекты), поэтому подойдет не для всех страниц.
Идеален для уникализации фотографий в статье блога.

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

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

WEB PANDA | #сервисы #seo #оптимизация

⬜️ Шпаргалка для свойства display:grid ⬜️

Сайт разбирает каждое свойство для grid. Полезен для ознакомления с возможностями grid, а также для освежения своих знаний.

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

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

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

⬜️ Подборка креативных checkboxes. Сделано на чистом css, html ⬜️

8 видов уникальных по дизайну чекбоксов. Каждый очень креативный и красивый. В зависимости от проекта может вписаться. Например для сайта про животных хорошо подойдет 6 чекбокс, а для тематики космос 4.

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

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

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

⬜️ Что нужно сделать при создании сайта на 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 #оптимизация