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

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

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

⬜️ 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 канала, рекомендую подписаться

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

#новости