Статьи из категории Все статьи сайта Only-to-top.ru Страница 5

Все статьи сайта Only-to-top.ru Страница 5

HTML, CSS, SASS, JavaScript, jQuery, PHP. Работа с Wordpress, Gulp, а также другие инструменты и технологии для создания современных сайтов

Список статей категории Все статьи сайта Only-to-top.ru Страница 5

Как вставить svg картинку на свой сайт

Как вставить svg картинку на свой сайт

Дата размещения статьи 08/06/2019

Рассмотрим способы вставки SVG изображений: через тег img, инлайново, base64, теги object и embed; а также как вставить SVG картинку через CSS. Вставка SVG в HTML SVG через тег img Inline SVG HTML SVG data URI / base64 SVG через тег object Вставка SVG через CSS SVG через...

Вывод произвольных полей ACF

Вывод произвольных полей ACF

Дата размещения статьи 11/05/2019

Рассмотрим вывод произвольных полей, созданных в Advanced Custom Fields для WordPress. А так же, как вывести произвольные поля для терминов таксономии, например, "Рубрики" в шаблоне category.php Содержание: текст, число, область текста, файл, медиа; изображение: массив; ссылка; id; галерея; повторитель; объект записи; группа; вывод поля, если оно заполнено; вывод...

SVG анимация

SVG анимация

Дата размещения статьи 01/05/2019

Сегодня поговорим об анимации SVG. Реализуем следующее: при клике на svg-изображение, будет проигрываться анимация. А также попутно познакомимся с тегами <g></g> и <defs></defs>. Для примера я скачал svg картинку. Анимация внутри SVG Нам необходимо выполнить следующие действия. Загрузить svg изображение на страницу с помощью тега <embed>. Сгруппировать необходимые...

Эффекты при нажатии CSS

Эффекты при нажатии CSS

Дата размещения статьи 24/03/2019

Рассмотрим, как добавить красивые эффекты при нажатии на кнопку с помощью 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 на хостинг

Как перенести сайт WordPress на хостинг

Дата размещения статьи 16/03/2019

Рассмотрим, как перенести сайт WordPress с локального сервера на хостинг. Шаги следующие: заархивировать все файлы сайта; экспортировать базы данных; загрузить и разархивировать файлы на хостинге; внести правки в wp-config.php; импортировать базы данных; выполнить необходимые SQL-запросы. Архивация файлов сайта Архивируем все файлы в корне сайта. Выбираем формат архива -...

Настройте показ всего текста во время загрузки веб-шрифтов

Настройте показ всего текста во время загрузки веб-шрифтов

Дата размещения статьи 13/03/2019

Настройте показ всего текста во время загрузки веб-шрифтов - так звучит рекомендация от 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 хуки

Полезные WordPress хуки

Дата размещения статьи 08/03/2019

Полезные хуки по работе с 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 в зависимости от ширины экрана

Выполнение js в зависимости от ширины экрана

Дата размещения статьи 04/03/2019

Рассмотрим два способа как выполнить js код в зависимости от ширины экрана, а затем и высоты. 1 способ - с помощью нативного js, 2 способ - используя jQuery. 1 способ - нативный JavaScript. Выполнение js кода на экранах шириной более 768px. if (document.documentElement.clientWidth > 768) { } Пример:...

Сниппеты в VS Code

Сниппеты в VS Code

Дата размещения статьи 27/02/2019

Создание сниппетов в редакторе кода Visual Studio Code. Сниппеты в VS Code - это участки кода, которые можно использовать неограниченное количество раз в своих файлах: html, css, js, php и т.п. При вводе первых символов названия будет отображена подсказка для вывода сниппета. Для создания сниппета в VS Code...

Настройка и использование Redux Framework

Настройка и использование Redux Framework

Дата размещения статьи 06/02/2019

Redux Framework позволяет создавать панели опций для расширения тем WordPress. Рассмотрим, как установить, настроить и использовать Redux Framework. Так может выглядеть нами созданная панель опций темы: Установить Redux Framework можно двумя способами: загрузка с админки Wordpress; загрузка с официального сайта при помощи билдера. Сегодня будем использовать второй способ....

Подсветка активного пункта меню с помощью jQuery

Подсветка активного пункта меню с помощью jQuery

Дата размещения статьи 19/01/2019

Подсветка активного пункта меню с помощью jQuery и JavaScript (самый простой способ определения ссылки текущей страницы). А так же реализуем подсветку текущего пункта меню при скролле. Содержание: подсветка активного пункта одноуровнего меню (jQuery); подсветка вложенного активного пункта меню (jQuery); подсветка активного пункта меню (нативный JavaScript); подсветка активного пункта...