Быстрые способы создать пользовательскую полосу прокрутки в WordPress

Можно с уверенностью сказать, что по какой-то причине вы хотите, чтобы ваш сайт выделялся. Наличие такой платформы гарантирует, что вещь, которую вы размещаете, дольше останется в памяти посетителя, и это почти всегда хорошо. Помимо контента на вашем веб-сайте, еще одним способом привлечь внимание к вашему продукту является визуальный аспект. Это ни в коем случае не новое знание. Есть причина, по которой McDonald's красно-желтый, а Facebook синий. Однако здесь мы поговорим об одной небольшой части опыта, который предлагает ваш веб-сайт. Это часть, которая может показаться не слишком важной, но мы считаем, что она все еще имеет свою ценность — полоса прокрутки. В следующих нескольких строках вы узнаете несколько быстрых способов создания пользовательской полосы прокрутки в WordPress.

Простые способы создания пользовательской полосы прокрутки в WordPress

Создание пользовательской полосы прокрутки — важный шаг в создании пользовательской темы для вашего веб-сайта. Итак, если вы заинтересованы в том, чтобы ваш веб-сайт выделялся во всех отношениях , давайте познакомим вас с первым методом создания уникальной полосы прокрутки.

Добавьте пользовательскую полосу прокрутки в WordPress с помощью плагина

Как и в большинстве вещей, которые вы хотите сделать в WordPress, использование плагина в качестве средства создания гладкой полосы прокрутки — хороший путь. Причина, по которой этот метод настоятельно рекомендуется большинству пользователей, заключается в его простоте. С помощью нескольких простых щелчков вы обнаружите, что смотрите на полосу прокрутки, которая соответствует вашему стилю. Тем не менее, стоит упомянуть об одном крошечном недостатке, связанном с этим методом. А именно, этот плагин не поддерживает мобильные браузеры. Однако, если это не кажется большой потерей, продолжайте читать.

В первую очередь вам потребуется установить и активировать плагин Advanced Scrollbar . Это действие достаточно простое:

1. Посетите раздел «Плагины», затем перейдите на страницу «Добавить новый» в административной области WordPress. Введите название указанного плагина в строку поиска и нажмите Enter.
2. Как только вы найдете плагин, нажмите кнопку «Установить сейчас». Затем WordPress загрузит и установит плагин для вас. После этого вы сможете заметить, что кнопка «Установить сейчас» изменилась на кнопку «Активировать».
3. Нажмите на эту кнопку «Активировать», и все готово к работе.

Теперь, когда вы установили и активировали необходимый плагин, вам нужно его настроить. Хотя это слово может показаться пугающим, процесс очень прост. Просто перейдите в «Настройки»> «Настройки пользовательской цветовой полосы прокрутки». Оказавшись там, вы сможете изменить цвет полосы прокрутки, а также цвета ее фона. Затем вы можете выбрать шаг прокрутки мыши, который будет скоростью прокрутки колесика мыши. Что еще хорошо в этом плагине, так это то, что он позволяет вам выбрать, хотите ли вы автоматически скрывать полосу прокрутки или всегда отображать ее.

У вас также есть возможность выбрать опцию «Только курсор», которая будет отображать полосу прокрутки без кнопки. Ниже вы сможете найти параметры для установки скорости прокрутки, изменения выравнивания рельсов (влево или вправо) и включения сенсорного поведения.

После того, как вы просмотрели все варианты, поиграли с цветами и нашли ту комбинацию, которая лучше всего соответствует вашему стилю и предпочтениям, не забудьте нажать кнопку «Сохранить изменения», чтобы сохранить всю эту работу. После этого вы можете посетить свой веб-сайт, чтобы увидеть эти великолепные настраиваемые цвета полосы прокрутки в действии.

Добавьте пользовательские цвета полосы прокрутки в WordPress с помощью CSS

Как видно из подзаголовка, этот метод использует CSS для стилизации полосы прокрутки. Этот метод зарекомендовал себя быстрее, чем тот, где вы используете jQuery. Однако важно отметить, что он работает только в настольных браузерах, использующих механизмы рендеринга WebKit, такие как Google Chrome, Safari и Opera. К сожалению, это не повлияет на мобильные браузеры или Firefox и Edge на настольных компьютерах. С учетом сказанного, если это вариант, который вы хотите выбрать, вот как это сделать.

Начните с перехода в Темы > Пользовательская страница. Это действие запустит интерфейс настройщика темы WordPress. Вы сможете увидеть предварительный просмотр вашего сайта в режиме реального времени с множеством параметров в левой части экрана . Продолжайте, щелкнув вкладку «Дополнительные CSS» на левой панели. Вкладка покажет вам простое поле, где вы сможете добавить свой собственный CSS. Как только вы добавите допустимое правило CSS, вы увидите, что оно применяется к панели предварительного просмотра вашего веб-сайта. Что касается этого действительного правила CSS, вот что вы должны добавить, чтобы ваша полоса прокрутки была восприимчива к изменениям:

::-вебкит-полоса прокрутки {

-webkit-внешний вид: нет;

}

::-вебкит-полоса прокрутки {

ширина: 10 пикселей;

}

::-webkit-scrollbar-track {

фон: #ffb400 ;

боргер : 1px сплошной #ccc ;

}

::-webkit-scrollbar-thumb {

фон: #cc00ff ;

боргер : 1px сплошной #eee ;

высота: 100 пикселей;

радиус границы: 5 пикселей;

}

::-webkit-scrollbar-thumb: hover {

фон: синий;

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

Хотя это отличный способ выделить ваш веб-сайт, мы должны упомянуть об одном недостатке создания пользовательской полосы прокрутки в WordPress. А именно, по умолчанию в CSS нет набора правил, который позволил бы вам изменять свойства полосы прокрутки. Есть предложения добавить эту опцию, но на данный момент они не поддерживаются большинством браузеров. Чтобы решить эту проблему, дизайнеры и разработчики используют псевдоэлементы для конкретных браузеров или JavaScrip для переопределения внешнего вида полосы прокрутки по умолчанию. Это методы, которые мы вам описали. Тем не менее, вы должны помнить, что вы должны протестировать свой сайт в разных браузерах и на разных устройствах, чтобы убедиться, что он работает так, как вы себе представляли, во всех браузерах. Как только вы это сделаете, можно с уверенностью сказать, что вы знаете, как создать пользовательскую полосу прокрутки в WordPress.