Рассмотрим способы вставки SVG изображений: через тег img, инлайново, base64, теги object и embed; а также как вставить SVG картинку через CSS. Вставка SVG в HTML SVG через тег img Inline SVG HTML SVG data URI / base64 SVG через тег object Вставка SVG через CSS SVG через...
Рассмотрим вывод произвольных полей, созданных в Advanced Custom Fields для WordPress. А так же, как вывести произвольные поля для терминов таксономии, например, "Рубрики" в шаблоне category.php Содержание: текст, число, область текста, файл, медиа; изображение: массив; ссылка; id; галерея; повторитель; объект записи; группа; вывод поля, если оно заполнено; вывод...
Сегодня поговорим об анимации SVG. Реализуем следующее: при клике на svg-изображение, будет проигрываться анимация. А также попутно познакомимся с тегами <g></g> и <defs></defs>. Для примера я скачал svg картинку. Анимация внутри SVG Нам необходимо выполнить следующие действия. Загрузить svg изображение на страницу с помощью тега <embed>. Сгруппировать необходимые...
Рассмотрим, как добавить красивые эффекты при нажатии на кнопку с помощью CSS и jQuery. Создадим три кнопки с разными эффектами. Структура: <button class="mybutton mybutton--animate-click-one"> <span class="mybutton__text">Первый эффект при нажатии</span> </button> <button class="mybutton mybutton--animate-click-two"> <span class="mybutton__text">Второй эффект при нажатии</span> </button> <button class="mybutton mybutton--animate-click-three"> <span class="mybutton__text">Третий эффект при нажатии</span> </button>...
Рассмотрим, как перенести сайт WordPress с локального сервера на хостинг. Шаги следующие: заархивировать все файлы сайта; экспортировать базы данных; загрузить и разархивировать файлы на хостинге; внести правки в wp-config.php; импортировать базы данных; выполнить необходимые SQL-запросы. Архивация файлов сайта Архивируем все файлы в корне сайта. Выбираем формат архива -...
Настройте показ всего текста во время загрузки веб-шрифтов - так звучит рекомендация от Google PageSpeed Insights. Рассмотрим, как это реализовать. 1. Подключаем шрифт инлайново в теге head в формате <head> ... <style> @font-face { font-family: 'FontBeautifulName'; font-display: swap; src: local('FontBeautifulName'), url('fonts/FontBeautifulName.woff2') format('woff2'); font-weight: 400; } </style> </head> 2....
Полезные хуки по работе с WordPress: фильтры, события и просто полезный PHP-код при разработке сайта на WordPress. Отключение редакций WordPress // Отключить редакции WP function my_revisions_to_keep( $revisions ) { return 0; } add_filter( 'wp_revisions_to_keep', 'my_revisions_to_keep' ); Ограничение количества редакций до 4-х # Ограничение до 4-х редакций WP function...
Рассмотрим два способа как выполнить js код в зависимости от ширины экрана, а затем и высоты. 1 способ - с помощью нативного js, 2 способ - используя jQuery. 1 способ - нативный JavaScript. Выполнение js кода на экранах шириной более 768px. if (document.documentElement.clientWidth > 768) { } Пример:...
Создание сниппетов в редакторе кода Visual Studio Code. Сниппеты в VS Code - это участки кода, которые можно использовать неограниченное количество раз в своих файлах: html, css, js, php и т.п. При вводе первых символов названия будет отображена подсказка для вывода сниппета. Для создания сниппета в VS Code...
Redux Framework позволяет создавать панели опций для расширения тем WordPress. Рассмотрим, как установить, настроить и использовать Redux Framework. Так может выглядеть нами созданная панель опций темы: Установить Redux Framework можно двумя способами: загрузка с админки Wordpress; загрузка с официального сайта при помощи билдера. Сегодня будем использовать второй способ....
Подсветка активного пункта меню с помощью jQuery и JavaScript (самый простой способ определения ссылки текущей страницы). А так же реализуем подсветку текущего пункта меню при скролле. Содержание: подсветка активного пункта одноуровнего меню (jQuery); подсветка вложенного активного пункта меню (jQuery); подсветка активного пункта меню (нативный JavaScript); подсветка активного пункта...