Простой пример, как добавить эффект свечения для svg-элемента с помощью добавления тени. Итак, у нас есть такой svg-файл с градиентом: Первым делом, кидаем файл в...

Простой пример очередной анимированной кнопки с эффектом свечения при наведении. Можно сделать свечение кнопки и без наведения, это уже дело вкуса и дизайна. HTML для...

Тема вопроса на самом деле гораздо шире. Что лучше использовать для своего сайта? Статичную верстку на HTML, популярную CMS или самописный движок? Я не буду...

Разберемся, какие видео нужно использовать на своем сайте, какие нужны форматы и какого размера видео должно быть. Разбирать будем видео для тега <video>, понятно, что...

Когда-то я уже делал небольшую статью про создание видео-фона в блоке (Делаем видео-фон для блока с помощью CSS). Но в статье было много лишнего кода...

Суть проблемы – мобильные браузеры, в частности, Safari отображают семизначные числа как ссылку на телефон. В общем-то, это было бы удобно, если бы, это был...

Для различных вариантов дизайна страниц нужно указывать разный цвет для плейсхолдеров в формах. Рассмотрим такой вариант input’а: Для изменения цвета placeholder пропишем такие правила в...

В общем, идея такая, слайдер листается и где-то рядом возле него меняются картинки в блоке, или фоновые картинки, или еще какие-то связанные со слайдами элементы....

Разрешаем пользователю прокомментировать запись только один раз – например, это нужно для кастомного типа записи, в котором под комментарием подразумевается отзыв с оценкой. При этом...

Рассмотрим 2 наиболее часто применяющихся примера. Для обоих примеров будет общий HTML: И общие правила стилей для внешнего вида: Весь этот код просто для примера,...

Суть задачи будет понятна для тех, кто уже столкнулся с этой проблемой. Но попробую объяснить для всех, потому как рано или поздно пригодится. Есть страница,...

Простая валидация email с помощью javaScript. Суть в том, чтобы не дать отправить форму, пока не будет правильно введен email. Форма обязательно должна валидироваться еще...

Задача простая – копировать текст из какого-то блока нажатием кнопки, например, это может быть код купона или ссылка на статью в конце самой статьи. Согласитесь...

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

Простой пример, как убрать стрелки в поле input[type=”number”] с помощью CSS: Важное дополнение: по прежнему можно менять числа в поле обычным скроллом мышки или стрелками...

Для перевода сайта используем Loco Translate. В файл функций добавляем такой код: В это коде: languages – это папка, которая находится в дочерней теме и...

Суть проблемы – при добавлении кода в визуальном редакторе с помощью плагина SyntaxHighlighter символ & отображается как &amp; А значит при копировании данного кода у...

Задаем отдельный формат для комментариев в дочерней теме. Сами комментарии подключаем стандартным вызовом: В файле functions.php или можете создать отдельный плагин добавляем такой код: Вид...

Выводим список терминов, к которым относится данный кастомный тип записи (custom post type): где my_custom_taxonomy – кастомная таксономия, например books. Выводим список категорий (элементов таксономии...

Часто в мобильной версии сайта используется кнопка типа “бургера” для вызова основного меню сайта. На эту кнопку вешается событие 'click' с обработчиком – вызовом функции,...

Суть задачи – внизу после основного контента кастомного поста нужно вывести 3 записи, рекомендуемые к чтению. Эти записи должны выводиться из той же категории, что...

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

Суть задачи – вывести на странице все кастомные категории и кастомные записи из каждой категории. В моем примере выводятся кастомные таксономии partner_cat и кастомные записи...

Краткое вступление. Есть сайт на WordPress, сайт живой, посещаемый и вполне рабочий. Нужно внести какие-то изменения в стили и в скрипты. Все изменения произведены, но...

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

В общем, когда-то давно была задача сделать рамку вокруг кнопки с градиентом, оказалось, что это не так просто. Пробовал сделать с помощью SVG, но не...

Уменьшаем вес файлов HTML – для этого убираем все переносы и лишние пробелы, а так же все комментарии. Данную задачу выполняем при билде продакшена, потому...

Хотелось бы в двух словах рассказать, как настроить Source Maps для GULP 4, но не получится вырвать из контекста просто пару строк кода, поэтому разобью...

Для оптимизации запросов на сервер можно объединить иконки и небольшие картинки, которые используются в css, в один файл – спрайт. Есть различные сервисы для автоматической...

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