Фриланс и веб с OlegTix | WordPress

💎 Лучший оптимизатор картинок 💎

TinyPNG - уменьшает размер изображений без потери качества. Пожалуй лучший из всех, которые существуют.

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

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

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

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

💎 Создание своей переменной Rank Math 💎

Часто случается, когда дефолтных переменных для генерации мета тегов страницы не хватает.
Например, нужно выводить значение из произвольного acf поля или даже из произвольного поля в категории, где находится пост.

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

💥 Сниппет кода в комментариях.
Пост про вставку кода.

Нужно ли такой же сниппет кода, но уже для Yoast seo?

⚠️ Не забудьте заменить в коде значения полей под свои нужны.

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

💎 А вы знали это? 6 правил для написания качественного кода 💎

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

Интересные особенности:
1) Есть теги для выделения текста в жирный. Теги <b></b> и <strong></strong>. Они делают одно и то же, но в тег <strong> надо заворачивать текст, который важен. А тег <b> не несет никакого смысла в плане важности.

2) Такая же ситуация с i и em. И там, и там курсив, но em (emphasis) делает логический акцент на тексте, а i – нет.

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

4) main в документе должен быть только один – в него помещается уникальная информация, отличающаяся от страницы к странице. В нем не должен быть сайдбар или шапка с подвалом.

5) Отдельные блоки должны быть обернуты в <section class="block"></section>. То есть надо делать так: <section>тут какой-то контент и html разметка</section>
А не так: <div class="block">тут какой-то контент и html разметка</div>

6) Атрибуты для улучшения доступности. Для всплывающих окон добавляйте атрибут role="dialog" главному элементу.

Если у элемента нет видимой части для текста (например иконка соц. сети), то добавьте атрибут aria-label="telegram".

Чтобы программа для чтения не пыталась читать декоративные элементы, то нам поможет атрибут aria-hidden="true"


🥇Помните, что надо всегда стремиться делать сайт не только красиво, но и качественно.

Ставьте лайки, если хотите вторую часть, а далее может и третью 😁.

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

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

💎 Чистка wordpress 💎

Данный сниппет кода позволяет вам удалить ненужные ссылки из тега <head></head> в вашем сайте. Рекомендую использовать его на всех сайтах.

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

❓ Интересны ли вам сниппеты? Публиковать ли ещё или лучше сосредоточиться на других темах? Пишите в комментариях.

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

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

💎 Сжатие svg файлов 💎

Сайт позволяет вставить svg код или же выбрать файл, а далее его сжать.

Зачем это нужно?
Часто в svg коде оставляют прописанный атрибут fill, который не позволяет менять цвет svg через css код или редактор (например в elementor).

➕ За всю свою работу я протестировал кучу таких оптимизаторов, но именно svgminify.com всегда работал корректно. Другие же часто нарушали размеры, вследствие чего элемент не показывался, как нужно.

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

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

WEB PANDA | #сервисы

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

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

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

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

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

WEB PANDA | #дизайн

Отправка заявок с любого контактного плагина в telegram

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

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

Устанавливаем и активируем. Далее слева у вас появится новый пункт в админке "wp telegram". Первым делом нужно ввести токен бота. Для этого:

1) Пишем официальному боту @BotFather команду /newbot.

2) Вводим любое имя бота. Это типа имени у аккаунта.

3) Вводим username бота, который обязательно должен заканчиваться на _bot или Bot.

4) Нам выдаётся токен (он выделен в сообщении). Копируем его и вставляем на странице настроек плагина в админке.

5) Пишем своему созданному боту /start. Бот ничего не ответит, так и должно быть.

После данных действий станет активным раздел "Уведомления". Там меняем 3 настройки:
1) Включаем этот раздел.

2) В email пишем any.

3) В id пишем свой id пользователя. Его можно узнать, написав @myidbot команду /getid. Копируем его ответ и вставляем в плагин.

На этом всё. Теперь после отправки любой контактной формы, она будет дублироваться вам в telegram.

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

☁️ Свои вопросы задавайте в комментариях.

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

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

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

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

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

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

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

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

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

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

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

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

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 😶

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

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

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

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

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 😎

Часто приходится вставлять код разного типа (html, css, js или php) в разные участки сайта. Например вставить рекламный баннер или Гугл.Аналитику.

Тут нам на помощь приходит плагин woody code snippets.

Он позволяет создавать разные типы сниппетов (кода) и добавлять их через авторазмещение или шорткод.

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

🐼 Использование плагина крайне простое и интуитивное, поэтому решил не писать инструкцию по добавлению кода.

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

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

👽 Анимация наведения на картинку на чистом css 👽

Необычный эффект наведения, который добавит вашему сайту оригинальность.

Посмотреть codepen

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

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

🚀 Генераторы css элементов 🚀
Откопал два супер сервиса, которые генерируют css сложных элементов.
1) https://superdesigner.co/tools — позволяет генерировать 3d элементы, фоны, паттерны, градиенты и разные уникальные формы.
2) https://www.cssportal.com/css-generators.php — ещё один генератор, который дополнит функционал первого.
3) 🎁 Бонус! https://logoipsum.com/ — сервис с demo логотипами. Часто при разработке сайта ещё готового логотипа нет, а заглушка нужна.

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

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

💎 Добавление иконки в поле в форме любого плагина 💎

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

Но что делать, если хочется её добавить или так предусмотрено в дизайне?
В этом случае нам поможет css код. Схема тут очень простая:
1) Добавляем внутренний отступ слева, чтобы было место для иконки.
2) Добавляем полю относительное (relative) позиционирование.
3) Добавляем иконку через псевдоэлемент.

💥 В статье я разобрал, как добавлять иконки для 2 самых популярных плагинов контактных форм (contact form 7 и wpforms) и оставил универсальный css, где нужно просто поменять классы.

Посмотреть статью

💬 Если будут вопросы, то пишите их в комментариях.

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

🛒 Стилизация woocommerce select на странице оформления заказа 🛒

К сожалению через обычный css браузеры не дают стилизовать выпадающий список (select). А что делать, если это нужно?

Для стилизация нам на помощь приходит javascript. С помощью него можно сделать показ выпадающего списка при клике на элемент. А далее после выбора определенного элемента (div) брать его значение и подставлять в скрытый select.

Звучит неудобно и довольно заморочено для такой казалось бы простой задачи. К счастью были придуманы разные библиотеки, благодаря которым можно всё это стилизовать 1 строчкой кода. Например библиотека select2.

🎆 Как стилизовать выпадающий список в woocommerce?
В woocommerce уже встроена библиотека select2 и он её уже использует для поля "выбор страны". Поэтому мы можем сразу её использовать.
К сожалению в пост не влезет подробная настройка, поэтому я описал процесс стилизации в статье с подробными инструкциями.

WEB PANDA | #wordpress #woocommerce #дизайн

🖥️ Резервное копирование сайта wordpress 🖥️
Резервное копирование сайта (backup) нужно для того, чтобы обезопасить себя от любых форс-мажоров.

Самые популярные форс-мажоры:
1) Заражение сайта вирусом.
2) Поломка сайта или некорректное отображение в результате обновления плагинов/темы/wordpress.
3) Случайное удаление определенных файлов, базы данных или самого сайта (такое тоже бывает).

Как часто и когда нужно делать backup?
1) Делать backup сайта ежедневно
2) Делать backup сайта перед любым крупным изменением или обновлением

Как делать резервное копирование? Тут есть два способа.
1) Хостинг. Многие хостинги предоставляют бесплатное ежедневное копирование.
2) Плагины. Есть множество backup плагинов. Самые популярные и проверенные — wpvivid и updraft plus.

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

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

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