Сегодня мы реализуем форму регистрации, входа, выхода и обновления учётной записи пользователя, используя JSON Web Token. Что такое JWT? Файловая структура Настройка базы данных Создание API для регистрации пользователей Создание API для входа пользователей Создание API для валидации JWT Создание API для учетных записей пользователей Создание интерфейса для...
Рассмотрим способы вставки 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; загрузка с официального сайта при помощи билдера. Сегодня будем использовать второй способ....