Прелоадер для сайта WordPress, плагин The Preloader
Сегодня будем говорить о том, как скрыть загрузку сайта на WordPress с помощью прелоадера. Все мы видели такие сайты, на которых вместо белого экрана загрузки выводиться анимированное изображение. Этот маленький трюк может помочь в том случае, если у вас медленно грузиться сайт, но вы все же хотите удержать нетерпеливых пользователей, которые не любят по долгу смотреть на пустой белый экран монитора. Ну что поехали добавлять прелоадер для сайта WordPress
Перед тем как начну описывать плагин и принцип его работы, настоятельно рекомендую ускорить wordpress сайт. Только в том случае если все указанные рекомендации не помогут, тогда вся надежда на прелоадер и его влияние на терпение пользователей сайта.
- Что такое прелоадер (preloader)
- Плагин The Preloader, обзор и настройка
Что такое прелоадер (preloader)
Прелоадер — это механизм вывода анимации или индикатора загрузки, до полной обработки веб страницы и вывода ее на экран.
Другими словами, пока страница сайта обрабатывается и загружается браузером, на экран выводиться анимация, которая заменяет пустой экран.
Я противник данного инструмента, считаю что лучше оптимизировать загрузку сайта чем ставить прелоадер. В моем понимании прелоадер нужен только крупным порталам, интернет магазинам и интернет сервисам с огромными базами данных, которые обрабатывают миллионы данных и у них ну никак не получиться ускорить загрузку. Это лично мое мнение и со мной вы можете не согласиться.
По статистике если сайт грузиться более 4 секунд, возникает большая вероятность отказа. Пользователь может покинуть сайт так и не дождавшись полной загрузки, а это очень плохой показатель. При нормальной оптимизации, не идеальной, но все же, мой сайт грузиться за 2-3 секунды и этот показатель вполне устраивает меня, и как показывает статистика пользователей тоже. По этому еще раз говорю о том, при медленной загрузке сайта нужна оптимизация, а не прелоадер.
После небольшого предисловия вернемся к нашим «баранам».
Установим и настроем плагин.
Самый адекватный и бесплатный плагин прелоадер, который я нашел это плагин с уникальным названием — Прелоадер. Да вот так, никаких неожиданностей. Дело в том, что при поиске плагина в библиотеке wordpress.org, вы его не найдете. Нужно в строку поиска писать the preloader. Как устанавливать плагин можно узнать тут. Выглядит он так:
После установки переходим во вкладку Плагины/Preloader, с этого небольшого меню и начинаются настройки.
Итак, все настройки в коротком списке:
- Первой строчкой настройки является цвет заднего фона прелоадера, по умолчанию он белый (#FFFFFF). Вы можете задать интересующий вас параметр.
- Второе, это место размещение gif анимации, ее можно будет поменять на любую, нужно только учитывать размер 128х128 пикселей. По предложенной в настройках ссылке вы можете скачать интересующую вас анимацию.
- Следующим шагом будет выбор директорий где будет подгружаться прелоадер. Можно установить загрузчик на категории, на весь сайт, отдельно на страницы меток, или только на главную, вам решать.
- Последнее что вам нужно сделать это открывать файл header.php в папке вашей активной темы и добавить сразу после открывающегося тега <body> предложенный див (<div id=»wptime-plugin-preloader»></div>).
- Если плагин активен, тогда вы сможете уже убедиться в работоспособности плагина.
Стоит еще заметить что при смене GIFки ее название должно быть preloader, и такая анимация в папке плагина image должна быть только одна.
На этом скромное руководство по использованию плагина Preloader для сайта на WordPress закончено, если будут вопросы или проблемы, пишите в комментариях.
Поделиться статьей:
дизайнов, тем, шаблонов и графических элементов для загрузки на Dribbble
Просмотр анимации обработки
Обработка анимации
Просмотр эксперимента по обработке анимации
Эксперимент по обработке анимации
Просмотр цикла обработки
Цикл обработки
Просмотр веб-дизайна и взаимодействия Happysad
Happysad Веб-дизайн и взаимодействие
Просмотреть геномику дроплетов — веб-загрузчик
Droplet Genomics — Web Preloader
Посмотреть концепцию спирального предварительного загрузчика
Концепция спирального предварительного загрузчика
Загрузка страницы портфолио разработчика
Просмотр предварительного загрузчика
Предварительный загрузчик
Посмотреть анимацию логотипа Prado
анимация логотипа Prado
Просмотр загрузчиков
Погрузчики
Просмотр предварительного загрузчика
Предварительный загрузчик
Посмотреть погрузчик XL
Погрузчик XL
Просмотр пользовательского интерфейса Surface [Обработка]
Surface UI [Обработка]
Просмотр куба PRO по умолчанию
Куб PRO по умолчанию
Посмотреть анимацию логотипа Happysad
Анимация логотипа Happysad
Посмотреть Giggl — анимация талисмана
Гиггл — Анимация талисмана
Посмотреть загрузчик XLVIII [AR/VR]
Загрузчик XLVIII [AR/VR]
Посмотреть загрузчик O для Born.
comO загрузчик для Born.com
Просмотр VR-загрузчика
VR-погрузчик
Просмотр VR-загрузчика
VR-погрузчик
Просмотр индикатора активности
Индикатор активности
Просмотр движущихся точек
Движущиеся точки
Посмотреть Клинт — Новый веб-сайт
Клинт — Новый сайт
Посмотреть взаимодействие Happysad
Веселое и печальное взаимодействие
comЗарегистрируйтесь, чтобы продолжить или войдите
Загрузка еще…
Как сделать предварительный загрузчик WordPress для любого сайта Тип
- Фейсбук
- Твиттер
Если на вашем веб-сайте есть видео или изображения, вам нужен предварительный загрузчик WordPress.
Прелоадер отображает «загружающееся» изображение, обычно анимированное, которое позволяет посетителю понять, что контент загружается.
Некоторые темы содержат эти элементы, но я собираюсь показать вам, как добавить предварительный загрузчик на любой веб-сайт WordPress. Поэтому, если в вашей теме нет изображения для предварительной загрузки, к концу этого руководства вы сможете его установить.
Предварительный загрузчик веб-сайта особенно важно использовать, если у вас есть контент, который может медленно загружаться при некоторых соединениях. Без какого-либо визуального обозначения посетитель может увидеть пустое место на месте вашего медиафайла, и он может подумать, что это ошибка. Предварительный загрузчик сообщает им, что что-то находится в пути.
Чтобы отобразить предварительный загрузчик мультимедиа или видео, мы будем использовать плагин WP Smart Preloader. Он работает с большинством тем, фреймворков и плагинов, включая WooCommerce.
Установка плагина WP Smart Preloader
Войдите в панель администратора WordPress.
В левой колонке навигации наведите указатель мыши на ссылку «Плагины» и щелкните ссылку «Добавить новый».
В поле «Поиск плагинов…» введите «WP Smart Preloader».
Найдя плагин, нажмите кнопку «Установить сейчас».
Нажмите кнопку «Активировать».
Настройка WP Smart Preloader
В левой колонке навигации наведите указатель мыши на ссылку «Настройки» и щелкните ссылку «WP Smart Preloader».
Выберите предварительный загрузчик — раскрывающийся список позволяет вам выбирать между предоставленными анимациями предварительного загрузчика. Окно под раскрывающимся списком показывает предварительный загрузчик.
Показывать только на домашней странице — установите этот флажок, если вы хотите, чтобы прелоадер отображался только на вашей домашней странице.
Пользовательская анимация — это черное поле для ввода собственного кода, если у вас есть собственная анимация HTML5.
Этот код выходит за рамки того, что мы здесь делаем, но здесь вы должны ввести его.
Пользовательский CSS — как и «Пользовательская анимация», это также поле ввода кода, но для CSS. Вы можете изменить внешний вид предоставленных предварительных загрузчиков с помощью CSS или добавить CSS, необходимый для пользовательской анимации HTML5. (Конечно, при условии, что вы добавили его в поле «Пользовательская анимация».)
Продолжительность показа загрузчика . Это значение в миллисекундах. Значение по умолчанию, если вы ничего здесь не вводите, составляет 1500 мс или полторы секунды.
Уменьшение этого значения ниже значения по умолчанию не будет иметь никакого эффекта. Анимация будет отображаться до тех пор, пока не загрузится изображение или видео. Однако его повышение увеличивает время, в течение которого анимация предварительного загрузчика отображается сама по себе .
Это означает, что если вы увеличили это значение до 10000 (десять секунд) и ваше изображение или видео загрузилось за пять секунд, предварительный загрузчик все равно будет отображаться сам по себе в течение десяти секунд, после чего будет отображаться изображение или видео.
Loader to Fade Out – время затухания прелоадера в миллисекундах.
Нажмите кнопку «Сохранить изменения» после внесения любых изменений на странице конфигурации.
WP Smart WordPress Preloader в действии
Я активировал один из предварительных загрузчиков и заменил изображение заголовка темы по умолчанию на изображение размером более 5 МБ, загрузка которого занимает несколько секунд. Вы можете видеть, что анимация предварительного загрузчика отображается во время загрузки изображения.
Есть приятный плавный переход, где прелоадер исчезает по мере загрузки изображения. Время этого затухания контролируется значением «Loader to Fade Out», как объяснялось выше.
Впечатление посетителя почти такое же, если на вашем веб-сайте используется заголовок видео.
Я здесь немного в невыгодном положении, пытаясь продемонстрировать анимацию с помощью неподвижных изображений, но вы поняли идею.
😉
Что произойдет, если вы удалите плагин
Если вы удалите плагин, страницы и сообщения, которые его использовали, не пострадают.
Использование темы с поддержкой анимации
Кажется, что большинство популярных тем WordPress используют большой (или полноразмерный) заголовок. Этот заголовок может содержать изображение или видео, и WP Smart Preloader (и большинство других загрузчиков) будет работать с ним. Но если ваша тема не имеет большого заголовка домашней страницы, вот несколько тем, созданных специально для этой цели.
Indiana
Indiana — бесплатная, гибкая, масштабируемая, многоцелевая тема для коммерческих, корпоративных и бизнес-сайтов. Отзывчивый и динамичный, свежий и элегантный дизайн Indiana и простота использования делают его популярным выбором. Вы можете настроить заголовок, меню, нижний колонтитул, домашнюю страницу и боковую панель. Он также оптимизирован для SEO и поставляется с интеграцией WooCommerce.
Elevation Lite
Elevation Lite — это бесплатная тема параллакса с хорошо продуманной домашней страницей, разделом услуг с тремя столбцами, полноразмерным слайдером Nivo, разделом приветствия и областью функций.
У вас будет полноэкранный или блочный макет и виджеты для верхнего, нижнего колонтитула и боковой панели. Он также имеет адаптивный дизайн и оптимизирован для SEO.
Ultra Theme
Наконец, Ultra Theme — это премиальная (платная) тема. Но он предлагает множество премиальных функций, таких как прокрутка всего раздела, анимированные изменения цвета, фильтры изображений и многое другое. Ultra предоставляет множество инструментов, необходимых для создания анимированных эффектов и (нескольких) привлекательных, готовых к использованию макетов. Как и Indiana, Ultra готов к WooCommerce.
Если WP Smart Preloader не для вас, попробуйте эти альтернативы
Не каждый плагин совместим с каждым веб-сайтом (или владельцем веб-сайта). Если вы ищете альтернативу WP Smart Preloader, вот несколько других плагинов предварительной загрузки WordPress, которые стоит попробовать.
Preloader
Preloader поддерживает Retina и поставляется с пользовательскими цветами фона и несколькими вариантами отображения предварительного загрузчика.
Он использует jQuery и CSS3, что делает его совместимым с Chrome, Firefox, Opera, Safari, IE9.+ и большинство современных мобильных устройств. Вы также можете проверить живую демонстрацию, чтобы увидеть его в действии.
Эффекты загрузки страницы
Эффекты загрузки страницы — это легкий и простой в использовании подключаемый модуль, который отображает анимированную графику загрузки до тех пор, пока страница не будет полностью загружена. И у этого также есть живая демонстрация, чтобы увидеть, как это работает.
LoftLoader
LoftLoader имеет расширенные возможности настройки с настройщиком WordPress. Он поставляется с анимацией CSS3, которая работает во всех современных браузерах. Он дает вам неограниченные цвета фона и загрузчика, включая возможность изменять непрозрачность предварительного загрузчика. Он отзывчивый и готов к работе с сетчаткой, а также минимизирован с помощью CSS и JS.
Сообщите своим посетителям, что происходит
Сегодня пользователи веб-сайтов возлагают очень большие надежды на скорость загрузки страниц.
Имея это в виду, может показаться нелогичным отображать изображение в ожидании загрузки другого или видео.
Но WP Smart Preloader не использует изображения, он создает свое «изображение» предварительного загрузчика в браузере с помощью CSS. Поэтому загрузка дополнительных изображений не является проблемой. Большинство плагинов предварительной загрузки работают аналогичным образом, используя анимацию CSS и/или HTML5.
Конечно, анимация CSS или HTML5 требует кода, и вы можете возразить, что загрузка и синтаксический анализ дополнительного кода также влияет на пропускную способность. Технически это так. Но это такой небольшой фрагмент кода по сравнению с общим размером средней страницы WordPress, что он не вызывает заметной разницы в скорости загрузки страницы.
Даже если бы это было так, лучше добавить на страницу небольшой элемент, чем представить посетителю пустое место без указания, будет ли оно когда-либо заполнено. Это плохо для пользовательского опыта и плохо отражается на вашем сайте.