⬜️ Поддержка :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хак

⬜️ REST API в WordPress: Основы и Применение ⬜️

В WordPress REST API реализован как часть ядра, начиная с версии 4.7. Этот API позволяет разработчикам получать и обновлять данные на сайте, используя HTTP-методы.

💬Основные концепции REST API в WordPress

1) Эндпоинты: Это URL-адреса, по которым можно получить доступ к определённым данным или выполнить определённые действия. Например, /wp-json/wp/v2/posts — эндпоинт для получения списка постов.

2) HTTP-методы: В REST API WordPress используются следующие методы: GET, POST, PUT, DELETE.

💬Примеры использования

Получение списка постов:

GET /wp-json/wp/v2/posts

Создание нового поста:

POST /wp-json/wp/v2/posts
{
  "noscript": "Новый пост",
  "content": "Содержание нового поста",
  "status": "publish"
}

Обновление существующего поста:

PUT /wp-json/wp/v2/posts/123
{
  "noscript": "Обновлённый пост",
  "content": "Обновлённое содержание поста"
}

💬Применение в разработке

1) Мобильные приложения. Взаимодействие с сайтом.

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

3) Интеграция с другими сервисами. Интегрировать сайт на WordPress с другими сервисами, такими как CRM системы, аналитика и тд.

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

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

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

⬜️ Как добавить товары в корзину без цены ⬜️

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

add_filter('woocommerce_is_purchasable', 'allow_add_to_cart_without_price', 10, 2);

function allow_add_to_cart_without_price($purchasable, $product) {
    // Проверяем, имеет ли товар цену
    if (!$product->get_price()) {
        // Если цена не установлена, разрешаем добавление в корзину
        return true;
    }
    return $purchasable;
}

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

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

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

⬜️ Изменить текст на кнопке "оформить заказ" в зависимости от метода оплаты ⬜️

Данный код меняет, когда выбран метод "оплата при доставке". Замените значение "cod" на нужный вам id метода оплаты.

add_filter( 'woocommerce_available_payment_gateways', 'woocommerce_available_payment_gateways' );
function woocommerce_available_payment_gateways( $available_gateways ) {
    if (! is_checkout() ) return $available_gateways;  // stop doing anything if we're not on checkout page.
    if (array_key_exists('cod',$available_gateways)) {
 
         $available_gateways['cod']->order_button_text = __( 'Подтвердить заказ', 'woocommerce' );
    }
    return $available_gateways;
}

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

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

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

⬜️ Отключение редиректов wp-login ⬜️

Простой wordpress плагин в виде одного файла, который выключает создания дублей типа /wp-login.php?redirect_to=xxxxx

В ряде случаев такие дубли могут вызывать проблемы для SEO, когда таких страниц становятся сотни.
Добавляете в wp-content/plugins/ и активируете в админке. Актуален для любого сайта.

Плагин написан мной.

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

⬜️ Урок 1 — введение.
Как создавать сайты на bricks builder? ⬜️

Начал записывать первый в СНГ бесплатный курс по конструктору страниц bricks. Первое видео является вводным. В нем разбираются основы, чтобы в последствии охватить весь конструктор.
Если вы уже создаете сайты на bricks, то вы вряд ли подчерпнете что-то новое. Видео предназначено для тех, кто еще не сталкивался с Bricks. Дальше будет интереснее: авторские решения, создания сложных элементов и так далее.

https://youtu.be/XkdJ8Mq5sIo

Пишите в комментариях, что хотите рассмотреть или узнать.

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

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

WEB PANDA | #wordpress #bricks #обучение

⬜️ Web Panda → OlegTix: логичная трансформация ⬜️

Друзья, если вы давно следите за этим каналом, то знаете его как Web Panda. Но пришло время для логичной трансформации — теперь это OlegTix.

✏️ Что изменилось?
На самом деле, ничего кардинального. Это все так же я — только теперь без маски, напрямую от лица фрилансера, предпринимателя и человека, который делится опытом.

📌 Почему так?
Web Panda начинался как проект про веб-разработку и технологии. Сейчас мой вектор сместился — я больше про личный бренд, фриланс, предпринимательство, развитие. Поэтому логично, что и название теперь ближе ко мне.

ℹ️ Что изменится в контенте?
По большему счету ничего, будет тот же контент про wordpress, код и так далее.
Добавятся новые рубрики:
— Мысли, советы, опыт
— Анонсы видео с youtube канала, рекомендую подписаться

Спасибо, что остаётесь здесь! Дальше — только интереснее 🚀

#новости

⬜️ Урок 2.
Изучение базовых элементов построения макетов Bricks Builder ⬜️

В этом уроке мы погрузились в мир Bricks Builder WordPress, разобрав ключевые элементы, которые лежат в основе создания современных и стильных сайтов. Мы рассмотрели блоки, дивы, секции и контейнеры, объяснили их различия, особенности и применение. Если вы только начинаете работать с Bricks Builder или хотите углубить свои знания, этот урок станет для вас отличным руководством.

Что вы узнаете из этого видео:
Блоки, дивы, секции и контейнеры:
-- В чем разница между этими элементами?
-- Как правильно использовать каждый из них в вашем проекте.
-- Примеры, когда лучше использовать блоки, а когда — секции или контейнеры.


😉 Смотреть

Пишите в комментариях, что хотите рассмотреть или узнать.

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

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

WEB PANDA | #wordpress #bricks #обучение

⬜️ Урок 3.
Создание стилей темы, индивидуальные настройки страницы, структурная панель ⬜️

В этом видео мы разобрали, как создавать стили сайта в теме bricks. Посмотрели индивидуальные настройки страницы и прошлись по всей верхней панели конструктора. В конце затронули структурную панель редактора.

😉 Смотреть

Пишите в комментариях, что хотите рассмотреть или узнать.

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

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

WEB PANDA | #wordpress #bricks #обучение

⬜️ Урок 4.
Классы, БЭМ, переменные Bricks builder ⬜️

В этом видео были разобраны css классы, нейминг классов с помощью методологии БЭМ, создание переменных.

😉 Смотреть

Пишите в комментариях, что хотите рассмотреть или узнать.

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

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

WEB PANDA | #wordpress #bricks #обучение

⬜️ Компоненты в Bricks. Обновление 1.12. Революция в создании wordpress сайтов ⬜️

В этом видео мы подробно разбираем новое обновление Bricks 1.12, которое привносит революционные изменения в процесс создания сайтов на WordPress. Основной фокус обновления — Компоненты — мощный инструмент, который позволяет значительно ускорить и упростить разработку.

Вы узнаете:
1) Что такое Компоненты и как они работают.
2) Как создавать и управлять компонентами для повторного использования на разных страницах.
3) Примеры практического применения компонентов для headers, footers, карточек товаров и других элементов сайта.
4) Как нововведения в Bricks 1.12 помогут вам экономить время и делать сайты более гибкими и удобными в поддержке.

Если вы используете Bricks для создания сайтов на WordPress, это обновление станет настоящим прорывом в вашем workflow. Не пропустите возможность узнать, как вывести свои проекты на новый уровень!

😉 Смотреть

Пишите в комментариях, что хотите рассмотреть или узнать.

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

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

WEB PANDA | #wordpress #bricks #обучение

⬜️ Урок 5.
Шапка и первый блок. Семантическая верстка сайта на Bricks Builder Wordpress ⬜️

В этом уроке мы разберем, как правильно сверстать шапку и первый блок сайта в Bricks Builder на WordPress. Мы сосредоточимся на семантической верстке, правильной структуре HTML и использовании гибких возможностей конструктора Bricks. Вы узнаете, как создать адаптивную и удобную для SEO шапку, добавить навигацию, логотип, кнопки и стилизовать первый экран сайта. Покажу лучшие практики по работе с Flexbox, а также поделюсь лайфхаками для оптимизации кода.

🔥 Что вы узнаете в этом видео?
✅ Основы семантической верстки в Bricks Builder
✅ Создание шапки сайта с логотипом и меню
✅ Улучшение структуры HTML и SEO-оптимизация
✅ Как правильно работать с Flexbox в Bricks

💡 Если вы хотите научиться создавать быстрые, адаптивные и SEO-дружественные сайты на WordPress, обязательно подписывайтесь и включайте уведомления!

😉 Смотреть

Пишите в комментариях, что хотите рассмотреть или узнать.

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

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

WEB PANDA | #wordpress #bricks #обучение

⬜️ Все способы создания сайтов на WordPress ⬜️

Привет, друзья! Сегодня расскажем о том, как создать сайт на WordPress. Знаете, это может быть проще, чем вы думаете, и в то же время — настоящим искусством. В этом видео я поделюсь с вами всеми способами, которые только существуют, начиная с самых простых до сложных.

Вот, честно говоря, на первых этапах может показаться, что это море возможностей и плыть в нём страшновато. Но как только понимаешь, какие есть инструменты, всё становится проще. Вы когда-нибудь задумывались, что один и тот же сайт можно создать совершенно разными способами? И все они будут по-своему крутыми. Давайте посмотрим, какие на текущий момент самые актуальные решения для создания сайтов на WordPress.

😉 Смотреть

Пишите в комментариях, что хотите рассмотреть или узнать.

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

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

OlegTix | #wordpress #обучение

⬜️ Динамические данные в Bricks ⬜️

Привет, друзья!
В этом видео мы изучили использование динамической информации для сайта. Вы узнаете:
✅ Поддерживаемые плагины
✅ Интеграция с ACF PRO. Страницы опций
✅ Вывод acf repeater
✅ Использование фильтров для динамической информации
✅ Использование php функций

😉 Смотреть

👩‍💻 Код из видео:

add_filter( 'bricks/code/echo_function_names', function() {
  return [
    'phoneLink',
  ];
} ); 

function phoneLink($phone)
{
    if ($phone[0] == "8"){
        return "tel:" . preg_replace("/[^0-9]/", "", $phone);
    }
    return "tel:+" . preg_replace("/[^0-9]/", "", $phone);
}

Пишите в комментариях, что хотите рассмотреть или узнать.

😉 Смотреть

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

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

OlegTix | #wordpress #обучение #bricks #olegtix