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

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

Данный код меняет, когда выбран метод "оплата при доставке". Замените значение "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

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

В 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

⬜️ 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
{
  "title": "Новый пост",
  "content": "Содержание нового поста",
  "status": "publish"
}

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

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

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

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

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

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

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

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

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хак

⬜️ Новый формат изображений 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 #оптимизация #новости

⬜️ 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 #оптимизация #безопасность #советы

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

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

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

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

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

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

WEB PANDA |  #верстка

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

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

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

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

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

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

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

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

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

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

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

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

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

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

WEB PANDA |  #верстка

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

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

🔗 Посмотреть

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

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

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

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

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

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

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

🔗 Посмотреть

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

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

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

document.designMode = "on"

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

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

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

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

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

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

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

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

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

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

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

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

🔗 Темы WordPress

🔗 Плагины WordPress


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

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

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

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

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

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

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


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

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

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

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

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

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

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

WEB PANDA |  #bricks #wordpress

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

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

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

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

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

🔗 Посмотреть

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

WEB PANDA |  #дизайн

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

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

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

🔗 Посмотреть

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

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