Содержание
На прошлой неделе мы запустили специальный сайт Crunchify Services, который будет очень удобен для пользователей, чтобы получить представление о том, какие услуги мы предоставляем.
Есть несколько основных категорий услуг:
- Обзор WordPress сайта SEO за очень небольшую плату
- Полный дизайн сайта
- WordPress Консультация и Оптимизация
- Служба разработки Java
Как вы, наверное, видели на официальном Slack.com сайт, они используют Typed.js оживить их заголовок с эффектом пишущей машинки, который мне очень понравился.
Посмотрев на это, я решил добавить аналогичный эффект и на свой сайт Сервисов . Этот учебник работает, если у вас есть какие-либо из следующих вопросов questions
- JQuery Анимированный набор текста с
Typed.js - Создать
Typing EffectВ CSS - Как создать эффект «Пишущая машинка / Текст» в HTML с помощью CSS
- Как реализовать Typed.js на вашем сайте WordPress
- Как я могу использовать этот скрипт jQuery , Typed.js?
Вот шаги, если вы хотите добавить Typed.js Анимированный эффект Typewriter на ваш сайт WordPress:
Шаг 1
- Мы собираемся использовать официальный
typed.min.jsJavaScript. - Скачайте ZIP с официального сайта .
- Извлеките это и поместите это под своей темой
js folder.Если в вашей теме нет папки js, тогдаgood idea to create oneи положить файл под ним.
Шаг 2
- Нам нужно загрузить JQuery и
typed.min.jsфайл в заголовок вашего сайта. - Для этого я использую раздел Header, доступный в плагине All in One для веб-мастеров .
- Просто поместите ниже код в заголовок раздела и плагин будет добавлять как скрипты и функции JQuery в заголовок вашей темы автоматически .
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<скрипт>
$ ( function ( ) {
$ ( .element ) . набрал ( {
строки : [ «App Shah …» , «Инженер (MS) …» , «Любитель WordPress …» , Java-разработчик … ] ,
typeSpeed : 100 ,
Задняя задержка : 3000 ,
цикл : правда
} ) ;
} ) ;
|
NOTE: Убедитесь, что изменили путь к typed.js в соответствии с вашей средой.
Здесь мы используем 3 параметра:
- TypeSpeed: который составляет 100 мс
- Задержка: 3 секунды
- цикл: правда
Пожалуйста, измените параметр typed.js, если требуется, согласно вашим потребностям.
Шаг 3
Теперь, когда мы добавили все необходимые скрипты на ваш сайт, следующая задача — добавить HTML-тег, который вы хотите показать typing effect , Есть несколько вариантов:
Вы можете добавить типизированный эффект к
- Боковая панель
- нижний колонтитул
- заголовок
- заглавие
- и больше…
За Sidebar , Footer а также Header раздел, вам просто нужно добавить следующий код в раздел виджета или заголовок темы или файл нижнего колонтитула :
|
1
|
Я 'м < span class = element > < / span > < span class = typed-cursor > < / span >
|
NOTE:Часть заголовка раздела довольно сложна и полностью зависит от темы вашего сайта . Я бы сказал, взгляните на файл шаблона вашей темы и измените местоположение, в которое вы хотите поместить этот типизированный эффект.
В моем случае я поставил анимационный эффект only on Home page а также removed Post Title тоже.
Кажется, WordPress не позволяет никаким хукам добавлять теги HTML в заголовок. Поэтому я поднял вопрос в Crunchify Forum, если кто-нибудь знает, как его настроить. Is there any way to add HTML tag to WordPress Post Title? Дайте мне знать, что вы ответите на этот вопрос.
Кроме того, если вам нужно какое-либо специальное решение, не стесняйтесь спрашивать в разделе выше, и я обновлю вас в ближайшее время.
0.00 (0%) 0 votes
