⬜️ Gutenberg: Использовать его для полноценного создания сайта или оставить только для постов? ⬜️

С релизом редактора Gutenberg в WordPress многие веб-разработчики и владельцы сайтов задаются вопросом: можно ли использовать Gutenberg для полноценной разработки сайта или лучше оставить его только для создания постов в блоге? В этой статье мы рассмотрим плюсы и минусы.

Плюсы использования:

⬜️ Гибкость и удобство: Gutenberg предлагает блоки, которые позволяют гибко организовывать и стилизовать контент на странице. Это упрощает создание разнообразных макетов и дизайнов без необходимости в дополнительных плагинах или кодировании.

⬜️ Визуальный редактор: Gutenberg предоставляет визуальный редактор, который позволяет видеть, как будет выглядеть контент уже на сайте. Это упрощает процесс редактирования и форматирования контента.

⬜️Возможность расширять функционал через код: Gutenberg имеет хорошее API, что позволяет создавать собственные блоки и дополнять существующие. Это открывает новые возможности, но требует много времени и доступно только для программистов.

Минусы использования:

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

⬜️ Засорение кода: Gutenberg генерирует очень много вложенности и оболочек при создании довольно простых элементов. Особенно ярко эта проблема проявляется в FSE.

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

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

WEB PANDA |  #wordpress

⬜️ Как фильтровать посты или custom post type ⬜️

Многие в WordPress чатах и в интернете интересуются созданием фильтра. Если вы используете woocommerce, то для фильтрации товаров есть встроенные фильтры, а также множество плагинов. Но как быть, если нужно фильтровать записи, страницы или custom post type по рубрикам, произвольным полям?

Для этого есть плагин Filter Everything. Данный плагин позволяет сделать AJAX фильтрацию любого типа контента по любым параметрам. Кроме того имеет очень гибкую настройку и супер мощный функционал.

Плюсы:
⬜️ Поддерживает ajax фильтрацию.

⬜️ Генерирует свои url и позволяет настроить мета теги для SEO.

⬜️ Огромный функционал. Можно фильтровать записи, страницы, товары и произвольные типы записей.

⬜️ Хорошая документация для разработчиков. Есть фильтры и хуки для кастомизации.

Минусы:
⬜️ Часть функционала только в платной версии.

⬜️ Нет официальной RU локализации, но можно сделать её самому или купить в интернете.

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

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

⬜️ Что такое SCSS и SAAS ⬜️

ℹ️ SCSS — это препроцессор для написания CSS кода. SCSS дает дополнительные возможности. В этой статье мы будем говорить о SCSS, а также его различии с Sass.

✏️ SCSS пишется в отдельных файлах с расширением .scss, например main.scss.
Он не подключается в браузер напрямую. Браузеры не умеют с ним работать. SCSS компилируется (собирается) в привычный для браузера CSS код, и уже CSS файл подключается на страницу.

🔄 Для того, чтобы скомпилировать SCSS в CSS, нужно использовать компилятор. Это может быть специальная программа: Koala, Prepros, или другая. Либо плагин для редактора. Или инструмент для сборки проекта: Gulp, Webpack или другой.

🌐 В WordPress же можно использовать специальные плагины для него, например WPCodeBox.

⁉️ Для чего используют SCSS:
1) Вложенные селекторы и медиа запросы
2) Подключение фрагментов, импорт других файлов
3) Миксины. Можно один раз создать набор CSS-свойств и работать с ними повторно или смешивать с другими значениями.
4) Функции

👩‍💻 Отличие scss от sass. У SCSS - синтаксис строгий, а у SASS - свободный. К примеру, в SASS можно не писать фигурные скобки для разметки стилей, а в SCSS - это обязательно. Сейчас практически все используют scss, так как он более привычен.

➡️ Пост в Telegram не позволяет подробно описать данный препроцессор. Это был краткий обзор на инструмент с перечислением его возможностей и особенностей. Если вы хотите более подробно ознакомиться с этим инструментом, то рекомендую изучить документацию.

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

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

⬜️ Плагин для защиты от спама в комментариях ⬜️

Forget Spam Comment — добавляет защиту от спама в комментариях wp. С ним вы забудете о спаме.

❗️ Плагин поддерживает только стандартную форму. Формы от WpDiscuz и тд он не поддерживает.

🔗 Посмотреть

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

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

⬜️ Иконки в едином стиле ⬜️

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

Remix Icon — сервис с 2537 иконками.
⬜️ Удобные категории

⬜️ Все иконки в едином стиле и выровнены до идеала (pixel perfect)

⬜️ Возможность создавать коллекции, а потом скачивать их архивом или делать иконочный шрифт.

🔗 Посмотреть

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

WEB PANDA |  #дизайн

⬜️ Сообщество Bricks разработчиков ⬜️

Bricks Bulder — быстрый конструктор страниц, который рушит все стереотипы. Обладает огромной популярностью на Западе и постепенно набирает обороты в СНГ.

В нашем канале уже было несколько постов про него:
🔗 Инструкция по конструктору Bricks
🔗 Революционный плагин конструктор страниц Bricks

Также в telegram есть неофициальное сообщество по Bricks, про которое многие не знают.
🔗 Перейти в сообщество

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

WEB PANDA |  #bricks #wordpress

⬜️ Обновление WordPress — 6.4 ⬜️

Совсем недавно обновилась версия WordPress до 6.4. В основном в ней было добавлено много новых возможностей для разработчиков в редакторе Gutenberg .

Появилась новая блочная тема Twenty Twenty-Four. Она автоматически появится на всех ваших сайтах в "Внешний вид » Темы" при обновлении.

Было сделано более 100 улучшений в части производительности WordPress.

❗️ Не спешите обновляться без резервной копии, так как обновление может сломать ваш сайт.


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

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

⬜️ Распродажа на Envato ⬜️

На известном маркетплейсе envato (codecanyon, themeforest и тд) происходит распродажа "кибер неделя". Скидки достигают до 60%.

🔗 Темы WordPress

🔗 Плагины WordPress


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

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

⬜️ Сайты с коллекцией красивых дизайнов ⬜️

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

🔗 https://land-book.com/
🔗 https://www.landingfolio.com/
🔗 https://www.awwwards.com/

➡️ Знаете ещё такие сайты? Напишите в комментариях.

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

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

⬜️ Редактирование любого текста на странице ⬜️

document.designMode = "on"

Включает режим редактирования текста на странице.
Вставляется во вкладке Console в инспекторе кода. Можно редактировать любой текст на странице и смотреть, как поведет блок.

Может понадобиться для копирования текста, когда текст не выделяется (например слайдер) или специально закрыли доступ к выделению текста. Также, чтобы смотреть поведение верстки в зависимости от контента.

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

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

⬜️ Оптимизация сайта на wordpress ⬜️

Admin and Site Enhancements (ASE) — бесплатный плагин, который включает в себя множество улучшений для сайта

Небольшой перечень:
— Функция копии постов
— Включения noscript загрузки
— Организатор меню wordpress
— Вставка кода
— Смена адреса входа
— Выключение gutenberg
— SMTP настройка
— Режим обслуживания
— Многое другое

🔗 Посмотреть

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

WEB PANDA |  #wordpress #плагины #оптимизация

🥹 Всех с Наступающим Новым Годом! 🥹

👍 Пусть все будет WordPress в следующем году!

⬜️ Swiper галерея с карточками ⬜️

Красивый адаптивный слайдер для вашего сайта. Сделан на css и библиотеке swiper.

🔗 Посмотреть

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

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

⬜️ Курсивное начертание текста ⬜️

Рассмотрим два свойства, которые часто путают между собой: font-style italic и oblique.

Во-первых, разберемся, что такое italic. Это стиль шрифта, который используется для курсивного начертания. В CSS мы можем использовать свойство font-style: italic для придания тексту такого начертания.

Теперь о свойстве oblique. Это также стиль шрифта, который используется для выделения текста. Он отличается от italic тем, что буквы наклонены не только по вертикали, но и по горизонтали. В CSS мы можем использовать свойство font-style oblique для придания тексту такого начертания.

Но стоит ли нам использовать свойство oblique? Я бы сказал, что нет. Почему? Потому что italic более естественный и гармоничный стиль, который лучше подходит для большинства текстов. А свойство oblique часто выглядит неестественно и может портить общую гармонию дизайна.

Но есть одна важная деталь, которую стоит учесть. Начертание Italic браузер берет из специально загруженного файла шрифтов. Oblique же он создает самостоятельно путём наклонения прямого начертания на определенный угол. Так мы выигрываем в весе сайта, но проигрываем в красоте и гармоничности.

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

WEB PANDA |  #верстка

⬜️ Поддержка :has() теперь во всех браузерах ⬜️

Селектор :has() в CSS позволяет применить стили к определенному элементу, если он содержит определенный селектор внутри себя.

a:has(img) {
 display: flex;
 width: 100%;
}

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

В caniuse процент поддержки браузерами 92%.

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

WEB PANDA |  #верстка #новости #cssхак

⬜️ Скевоморфизм ⬜️

Тенденция в дизайне, в основе которой лежит реалистичное изображение объектов. Поэтому обычно под этим определением понимают элементы интерфейса с имитацией объёма предметов: свет, тени, блики и текстуры.

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

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

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

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

WEB PANDA |  #верстка

⬜️ WordPress безопасность: что такое WP Nonce? ⬜️

WP Nonce - это уникальный токен, который генерируется WordPress для обеспечения безопасности форм и запросов на вашем сайте.📝

Он помогает предотвратить атаки типа CSRF (Cross-Site Request Forgery) и обеспечивает целостность данных, отправляемых с вашего сайта.

WP Nonce используется в различных сценариях, таких как отправка комментариев, регистрация пользователей, обновление настроек и многое другое. Также его обязательно надо проверять при написании и отправки своих ajax запросов.

Но как он работает? 🤔

WP Nonce генерируется с помощью функции wp_nonce_field() или wp_nonce_url(), которая добавляет уникальный токен к форме или URL. 🔗

Когда форма отправляется, WordPress проверяет токен, чтобы убедиться, что запрос происходит с вашего сайта, а не с какого-то другого источника.

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

Таким образом, WP Nonce является важной частью безопасности вашего сайта на WordPress и помогает защитить его от различных типов атак.

🔗 Документация WP KAMA

🔗 Документация Wordpress

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

➡️ Ставьте реакции, если было полезно. Тогда я пойму, что такие темы интересны и посты будут выходить чаще.

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

⬜️ Новый формат изображений AVIF пришел в WordPress 6.5! ⬜️

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

AVIF (AV1 Image File Format) - это новый формат изображений, основанный на кодеке AV1, который разработан компанией Alliance for Open Media. Он позволяет уменьшить размер изображений до 50% по сравнению с форматом JPEG, при этом сохраняя высокое качество.

Но что это значит для вас, как для разработчика или владельца сайта на WordPress? 🤔

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

👍 Вот некоторые преимущества формата AVIF:
— Уменьшение размера изображений до 50% по сравнению с форматом JPEG
— Поддержка прозрачности и альфа-канала
— Поддержка анимации и динамических эффектов
— Широкая поддержка браузеров, включая Google Chrome, Mozilla Firefox и Microsoft Edge

👍 Браузеры, которые поддерживают формат AVIF:
— Google Chrome 85+
— Mozilla Firefox 77+
— Microsoft Edge 85+
— Opera 71+

🔗 Поддержка CanIUse 93.29%

🔗 Три интересных факта об Avif

🔗 Более подробно на wp kama

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

➡️ Ставьте реакции, если было полезно. Тогда я пойму, что такие темы интересны и посты будут выходить чаще.

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

⬜️ Как выровнять элемент по центру? ⬜️

Часто при создании сайта требуется поставить элемент по центру. Проблема в том, что стандартные top: 50% и left: 50% ставят элемент не по центру, так как точка отсчета исходит не из центра элемента, а из его левой верхней точки. Чтобы решить эту проблему, то нужно сместить точку отсчета в центр элемента. Для этого необходимо знать его размер и, использовав функцию calc, вычитать половину ширины/высоты соответственно. Пример ниже.

.wpc-term-swatch-wrapper:after {
    width: 10px;
    height: 5px;
    top: calc(50% - 2.5px);
    left: calc(50% - 5px);
}

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

➡️ Ставьте реакции, если было полезно. Тогда я пойму, что такие темы интересны и посты будут выходить чаще.

WEB PANDA | #верстка #сниппеты #cssхак