🚀 Инструкция по оптимизация сайта на 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 #плагины

😶 Скрытый пользователь в wordpress 😶

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

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

⚠️ Прежде всего скажу, что не всегда нужно идти на такие крайности. Лучше ведите разработку на своём сервере и берите предоплату.

Ну, а если всё-таки вы уверены, что вам это нужно, то смотрите код ниже в статье.

WEB PANDA | #wordpress

🚀 Анимация, которая сломает оценку PageSpeed и GTmetrix 🚀

Сегодня при работе над сайтом столкнулся с такой проблемой, что при промежуточных тестах оценка скорости была 90+, а после окончательного создания сайта она стала 30-40.

Проанализировав отчеты PageSpeed и GTmetrix, я увидел, что почему-то у меня показатели Time to Interactive, First Contentful Paint и Largest Contentful Paint очень плохие.

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

Решение проблемы: отключение анимации на первом экране. После этого page speed опять начал показывать хорошие результаты.

Это конечно неприятно, что приходится отказываться от анимации, но в нынешний момент ничего с этим не поделать. Либо анимация, либо хорошая pagespeed оценка.

Пишите, что думаете об этом, в комментариях.

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

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

🎩 Шпаргалка для wordpress 🎩

Она быстро вам поможет найти необходимый метод или функцию.

В этой шпаргалке есть следующая информация:
1) Комментарии для создании темы и плагина.
2) Как подключать файлы темы.
3) Иерархия файлов, как они подключаются
4) Подключение/регистрация/удаление скриптов и стилей.
5) Функции вывода информации для использования в выводе постов.
6) Условные теги. Например, проверить является ли страница главной или категорией.
7) Другая информация

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

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

🔥 Создание своей wordpress темы 🔥
В голосовании эта тема поста набрала самый большой процент голосов, поэтому сегодня разберем, как создавать с нуля wordpress тему.

Начнем с базы:
1) Wordpress тема - это по сути папка с произвольным названием, которая лежит по пути /wp-content/themes/ваша_папка.
Внутри папки у вас должно быть обязательно два файла, чтобы тема заработала и появилась в админке. Это файлы: index.php и style.css.

2) В файле style.css обязательно должен быть css комментарий. Он позволит wordpress понять и отобразить название темы, разработчика, её версию и тд. Более подробнее тут.

3) После выполнения двух пунктов выше, ваша тема уже появится в внешний вид >> темы и её можно будет активировать.

4) После активации на сайте будет белый экран.
Это происходит из-за того, что файл index.php пустой. Добавьте любой контент и вы увидите, что он отобразится на любой странице сайта.

5) Файл index.php выводится для всех страниц, потому что в теме не созданы специальные php файлы для отображения определенных страниц. В wordpress есть определенная иерархия отображения шаблонов.
Например, за вывод записей отвечает файл single.php, а за вывод страниц - page.php. Если же опр. файла нет, то используется index.php.
Очень подробно расписано тут.

6) Создание файла functions.php - туда пишутся все php функции и там же подключаются стили и скрипты.

7) Далее надо будет более подробно изучить функции wordpress для создания полноценной темы. Вот хороший видеоролик для понимания основ.

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

💥 Это не сложно! Главное начать и вы поймете, что это довольно просто.

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

WEB PANDA | #wordpress

💎 Хранение заявок contact form 7 в админке 💎

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

Зачем это нужно?
Вы будете уверены, что не пропустили ни одну заявку. Например, если заявка не отправилась из-за ошибки на почтовом сервере.

Если вы используете contact form 7, то настоятельно рекомендую поставить данный плагин. На скорость сайта не влияет, но добавляет полезный функционал.

Если нужна такая же статья, но уже по отправке заявок с любых контактных плагинов в telegram, то пишите в комментариях.

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

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

💎 Фишки для улучшения сайта 💎

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

В описании есть таймкоды для удобной навигации. Для просмотра видео надо обладать базовым английским или же включите переводчик видео в Яндекс.Браузере.

Посмотреть видео

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

WEB PANDA | #дизайн