Просто напишу, что нашла отличное решение здесь https://www.labnol.org/internet/light-youtube-embeds/27941 Если коротко, автор предлагает сначала подгрузить картинку (превью, которое youtube автоматически делает). По клику на картинке будет подгружаться видео с автоматическим проигрыванием (с помощью скрипта). Код для вставки в html страницу: где VIDEO_ID — это ID вашего видео, в ссылке на видео есть. Например, ссылка на видео… Читать далее Встраиваемое видео с youtube с быстрой загрузкой
Блог
Передача значения атрибута кнопки в форму Contact Form 7
Встала задача на странице каталога товаров по клику кнопки «Заказать» (в каждой карточке товара) передать в форму ссылку на товар. Та же задача на странице карточки товара решалась очень просто, через тег [_url]. Если этот тег вставить в каталог, то будет отправляться ссылка на страницу каталога, а нужно на товар. Сама кнопка выглядит так: где… Читать далее Передача значения атрибута кнопки в форму Contact Form 7
Плавное подчеркивание ссылки
В моем случае это плавное подчеркивание слева направо. Отключаем стандартное подчеркивание. Создаем псевдоэлемент — линию в 1px и задаем ширину 0. При наведении ширина становится 100%.
Полезные плагины для Figma
Здесь я собрала плагины, которыми регулярно пользуюсь. Font Fascia — выводит все шрифты и начертания в макете Inspect Styles — замена режиму разработчика, который Фигма недавно сделала платным, выводит код градиента, тени и т.д. Iconify — простые иконки SBOL Typograph — переносит тире и предлоги, ставит неразрывные пробелы.
Redux — установка и настройка
Не первый проект на WordPress делаю с Redux Framework и каждый раз как заново) Поэтому решила написать прежде всего для себя коротенькую инструкцию, но может и вам будет полезно. Дальше начинаю менять поля и секции под себя, где через чтение документации, где методом тыка)) Вывод нужного поля в шаблоне: где $house — это глобальная переменная,… Читать далее Redux — установка и настройка
Полезные функции при создании новой темы
Здесь у меня подборка функций для functions.php новой темы. 2. Функция для вставки svg изображений инлайн. Чтобы при верстке страницы не загромождать код вставками кода svg. А они нужны для анимирования hover-эффекта.
Woocommerce. Как добавить бейдж «В наличии» на карточках товаров
Появилась задача сделать бейдж на карточках товаров на странице категории. На данный момент выводился бейдж «Нет в наличии», когда на вкладке Запасы устанавливали соответствующий флажок. На просторах интернета нашла код, немного переделала, вставила в function.php (дочерняя тема): Добавила следующие стили css: Получился такой вид: Но на этом еще не всё, нужно было добавить бейдж на… Читать далее Woocommerce. Как добавить бейдж «В наличии» на карточках товаров
Как наложить градиент на картинку с помощью css
Подсмотрела следующее решение: Мой код, где blog-card__image — внешний блок с картинкой внутри. blog-card__date — блок вывода даты, которая лежит поверх картинки внизу и должна быть видна на любом изображении, для этого и нужен градиент с прозрачного на черный, переходящий вниз. Код css:
Оптимизация WordPress
Многие заказчики хотят ускорить загрузку сайта и видеть показатели в зеленой зоне Pagespeed. Это и понятно, скорость загрузки сайта влияет на ранжирование в поисковых системах. Пока я в поиске лучшего решения. На данный момент тестирую связку: Super Page Cache for Cloudflare + Image optimization service by Optimole. Тут надо отметить, что этот плагин сильно сжимает… Читать далее Оптимизация WordPress
Создание сайтов во Владивостоке под ключ
Создание сайтов во Владивостоке большей частью не отличается от разработки сайтов удаленно на фрилансе, но имеет один важный момент — возможность личной встречи с исполнителем. При личной встрече можно не только обсудить все детали разработки сайта, но и понять, что за человек перед тобой, насколько он вызывает доверие и проявляет себя как эксперт. Если у… Читать далее Создание сайтов во Владивостоке под ключ