Архив статей автора: Pavel

Как в Yoast SEO отключить пагинацию в канонических ссылках категорий и тегов
Как в Yoast SEO отключить пагинацию в канонических ссылках категорий и тегов

Есть такой замечательный Yoast SEO плагин от Yoast в репозитории WordPress. В нем имеется достаточно много функций удовлетворяющих большинство потребностей не продвинутого (а может даже и продвинутого СЕО специалиста).

Но речь сейчас пойдет не о его функциональных возможностях и преимуществах перед другими похожими плагинами. А о пагинации в канонических ссылках тегов и категорий.

читать далее...

Как в Yoast SEO отключить пагинацию в канонических ссылках категорий и тегов
Как создать WordPress шорткод отображающий дату
Как создать WordPress шорткод отображающий дату

В сегодняшнем уроке, вернемся немного к WP и рассмотрим пример разработки шорткода отображающего дату в произвольном формате. Формат будет задаваться шаблоном PHP функции date().

читать далее...

Как создать WordPress шорткод отображающий дату
Как сделать кнопку «наверх» / to-top с плавной прокруткой
Как сделать кнопку «наверх» / to-top с плавной прокруткой

Здравствуйте! В сегодняшнем уроке, рассмотрим реализацию простого кода кнопки «вверх» на Html, jquery и css.

Как и всегда, приступаем к рассмотрению HTML кода. Сегодня он будет довольно примитивный:


<div class="to-top" data-btn="toTop">
	&#10145;
</div>

где:
to-top — класс, используя который мы будем стилизировать нашу кнопку
data-btn="toTop" — дата-атрибут, используя который мы будем отслеживать события скрола и клика по кнопке (да-да, мы можем это сделать и по классу «to-top», я же остановился на дата-атрибуте)

читать далее...

Как сделать кнопку «наверх» / to-top с плавной прокруткой
Как написать самый простой скрипт степпера
Как написать самый простой скрипт степпера

В этой статье рассмотрим разработку простейшего скрипта степпера. Степпер — такой скрипт, который переключает экраны/слайды по нажатию на кнопки вперед или назад. Определения так себе, но думаю по примеру будет понятнее что это такое и для чего оно нужно.

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

Подключаем библиотеки

Нам понадобится:

  1. bootstrap. Нам он просто облегчит подключение шрифтов и визуализацию кнопок
  2. font-awesome. От него мы получим три иконки (стрелка назад, вверх и вперед)
  3. animate.css, для простенькой анимации (вам никто не мешает использовать чистый css для этого)
  4. jquery, да-да, пора от него отказываться и отлавливать события на чистом JS. Но пока что лень)

А выглядит это так:

<link rel="stylesheet" href="../library/bootstrap-4/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../library/font-awesome/css/all.min.css">
<link rel="stylesheet" href="../library/animate.css/animate.min.css">
<script src="../library/jquery/dist/jquery.min.js"></script>

читать далее...

Как написать самый простой скрипт степпера
Как сделать табы на flexbox и jQuery
Как сделать табы на flexbox и jQuery

В этом уроке рассмотрим, как самостоятельно реализовать дружественные СЕО табы на flex и jQuery.
Наш код будет разделен на три части.

HTML код

Первое. HTML код без которого никуда:

<div class="tabs" data-tabs="name">
	<ul class="tab-items">
		<li class="tab__item active" data-tab-item="tab-item-1">
			Вкладка 1
		</li>
		<li class="tab__item" data-tab-item="tab-item-2">
			Вкладка 2
		</li>
		<li class="tab__item" data-tab-item="tab-item-3">
			Вкладка 3
		</li>
	</ul>

	<div class="tab-contents">
		<div class="tab__content active" data-tab-content="tab-item-1">
			Содержимое вкладки 1
		</div>
		<div class="tab__content" data-tab-content="tab-item-2">
			Содержимое вкладки 2
		</div>
		<div class="tab__content" data-tab-content="tab-item-3">
			Содержимое вкладки 3
		</div>
	</div>
</div>

грубо говоря, наш код состоит из трех частей:

  1. Обертки для табов, с названием одной группы. Это задано в дата-свойстве «data-tabs».
  2. В наших табах (или вкладках). Где у каждой вкладки есть свое название, определенное в свойстве «data-tab-item». Название данного свойства должно совпадать с одним из названий свойств «data-tab-content» в блоках хранящих содержимое вкладок (табов).
  3. Содержимое табов, обернутое в класс «tab-contents». Каждое содержимое таба имеет свойство «data-tab-content», и должно совпадать с одним из свойств вкладок «data-tab-item». Данные свойства служат для сопоставления того, какой таб, какое содержимое должен отображать.

читать далее...

Как сделать табы на flexbox и jQuery