👽 Анимация наведения на картинку на чистом 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 | #дизайн

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

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

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

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

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

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

WEB PANDA | #сервисы

💎 Чистка wordpress 💎

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

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

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

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

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

💎 А вы знали это? 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 | #верстка #оптимизация

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

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

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

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

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

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

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

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

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

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

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

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

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

💎 Новая тема от разработчиков WordPress💎

Незаметно подкралась тема Twenty Twenty-Three от wordpress.

Каждый год WordPress выпускает новую тему, которую называют именем года. Например в прошлом году была Twenty Twenty Two.

👀 Особенности темы:
1) Сделана полностью на Gutenberg с использованием Site editor.
2) Есть возможность менять цветовые палитры и шрифты одним нажатием кнопки.

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

На канале появился новый хештег #новости. Буду время от времени их публиковать.

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

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

💎 Плавная прокрутка наверх на чистом css 💎

Сегодня наткнулся на очень крутое свойство scroll-behavior: smooth;
Его надо прописывать на тег <html>.

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

Полезно для создания кнопки прокрутки наверх.

Создать кнопку прокрутки вы также можете через плагин Scroll To Top.

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

WEB PANDA | #верстка #плагины #wordpress