Интересные работы

Свежие записи

Бесконечный анимированный фон с эффектом параллакса

Бесконечный анимированный фон с эффектом параллаксасоздан на основе варианта 2 из этой статьи HTML CSS Рабочий пример

Бесконечный фон с автопрокруткой

Вариант 1 – с помощью JS меняем позицию фонового рисунка Вариант 2 – без JS с помощью CSS-анимации меняем позицию фоновой картинки Вариант 3 –...

Как получить параметр из URL страницы

Как получить нужный параметр из адреса страницы? Итак, у нас есть рекламная кампания, и при переходе по ссылкам из этой кампании, мы получим url типа...

Выводим колонку “Размер” для библиотеки медифайлов в админке CMS WordPress

Задача такая: просмотреть несколько сайтов и найти изображения, которые не оптимизированны для web’а, так как есть файлы весом более 5МБ. Как оптимизировать правильно изображения для...

Плавный скроллинг по странице к нужному элементу с использованием плагина PageScroll2id

В предыдущей статье Плавный скролл по странице к нужному ID (Scroll to id) рассматривал простой js-скрипт плавного скролла для навигации по странице, но в том...

Плавный скролл по странице к нужному ID (Scroll to id)

Очень популярная функция на различных одностраничниках – плавный скролл к нужному элементу на этой же странице. Чаще всего используется при навигации по меню. Если использовать...

Простой способ задать отступы между flexbox элементами

Самый простой способ установить минимальное расстояние между элементами flexbox – используем margin: 0 5px для дочерних элементов .item и отрицательный отступ margin: 0 -5px для...

Использование CSS-функции calc() в LESS

В CSS есть функция calc(), которая даёт возможность рассчитать значения свойств CSS во время их определения. Функция calc() принимает в качестве параметра математическое выражение, результат...

Итерация потомков (nth-child) с использованием SASS

Допустим, у нас есть несколько nth-child элементов, к которым мы хотим применить различную задержку для transition. Можно вручную задать transition delay для каждого элемента, но...

Используем медиа-запросы вместе с LESS

Стандартное использование медиа-запросов в CSS: CSS-препроцессор, на самом деле, может реально упростить вам работу с выражениями вида @media. Вне зависимости от предложенных способов ниже, профит...

Плагин для вывода тегов Facebook Open Graph

Плагин для вывода тегов Open Graph для социальных сетей – Facebook Open Graph, Google+ and Twitter Card Tags. Этот плагин вставляет теги Facebook Open Graph...

Вывод аватара комментатора на сайте

Получает html код аватара (<img>) комментатора, если пользователь авторизирован или указал email при комментировании. Используется внутри Цикла комментариев или ему обязательно нужно передать первый параметр!...

Убираем свойство прилепливания (Sticky Posts) записей из цикла

Убираем свойство прилепливания записей из цикла. Данный код игнорирует свойство прилепленности, выводя все записи в естественном порядке, прилепленные записи будут представлены в цикле, но отсортированы...

Отключить уведомления об обновлении плагина

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

Скрывать пустые категории из меню с помощью функции

Допустим, есть такая ситуация, что в меню сайта выводятся все категории с записями. Но периодически записи удаляются (допустим, это формат каталога) и нам нужно пустые...

Поиск только по записям на сайте

Для того чтобы поиск на сайте работал только по записям, и не выводил в результатах поиска страницы, нужно добавить такой код в functions.php:

Задаем формат для анонса записи с помощью тега Excerpt

Задаем формат для анонса статьи. При использовании вывода краткого содержания статьи, например в категории с помощью тега мы получим краткий текст со ссылкой “Читать далее”....

Как вывести описание категории на странице

Выводим описание для категории на WordPress только на первой странице. При этом описание задаем через кастомное поле 'desccat':

Получаем список категорий и тегов с кастомными полями

Получаем список всех категорий на отдельном шаблоне страницы: Выводим список категорий вместе с кастомным полем:

Google Fonts. Документация и примеры использования

Все умеют подключать и использовать Google Fonts, это так просто и так популярно, но никто и никогда не читал документацию по использованию шрифтов от Google,...

Использование @keyframes с препроцессором SASS

Использование @keyframes с препроцессором SASS. Базовый пример использования @keyframes в SASS: Создаем миксин, чтобы добавить вендорный префикс: Используем миксин в SASS:

Задаем различные размеры для миниатюр (post-thumbnails)

Данный код размещаем в файле functions.php В нужном месте выводим миниатюру с заданными размерами:

Как вставить в пост шорткод для вызова виджета

Задача такая – разместить в поcты на WordPress рекламные баннеры. Есть несколько вариантов: Вариант 1 – Добавляем рекламу в каждую статью сайта на CMS WordPress...

CSS счетчики

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

Валидация формы обратной связи с помощью Javascript

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

Анимация SVG

Есть много разных способов анимировать SVG-изображения. Сейчас я рассмотрю и сделаю себе пометки, как сделать самую простую анимацию. Пример анимации SVG с помощью плагина Vivus.js...

Анимация png-спрайта по слайдам

Недавно применял на сайте интересную анимацию, выглядит она как гифка, но по факту это одна png-картинка разбитая не несколько слайдов, которые крутятся с заданными параметрами....

301 Redirect в ModX

Столкнулся с проблемой редиректа в ModX. Стандартные варианты редиректа не работают. Нашел такое решение: Если нужно сделать редирект какой-то страницы, используем такой код: Если нужно...

Анимация элементов при скроле

Анимируем элементы на странице при прокрутке. В данном примере рассмотрим плавное появление элементов при скроле страницы, а так же плавное затухание элементов когда элемент уже...