Уроки с меткой «JQuery» — Уроки по созданию сайтов на WordPress
Домой / Архивы с метками: JQuery
Александр 15.01.2015 6 комментариев Просмотров: 9 202
В данной статье хочу предложить вашему вниманию пример создания выезжающего меню. Данный пример выезжающего меню создан с помощью CSS и jQuery. Меню выезжает сверху при нажатии на «кнопку» расположенную по центру в самом верху. После того как меню выехало, вся остальная область страницы становится недоступной для выделения мышкой. Изменить скорость с которой меню выезжает вниз или прячется вверх очень просто, для этого необходимо изменить … Читать далее »
Александр 05.01.2015 22 комментария Просмотров: 14 461
Здравствуйте друзья! В этой статье предлагаю вашему вниманию очередной интересный и простой пример создания плавной навигации на странице сайта в стиле «Go To». Это не первая подобная статья, и если вам интересует данная тематика, вы можете ознакомиться с другими схожими статьями тут и тут.
Работает данный пример так: Для начала необходимо создать блок, в котором будет страница. Делаем это так: Как … Читать далее »
Александр 22.12.2014 Оставить комментарий Просмотров: 2 129
Хороший и достаточно интересный пример создания оригинального и необычного SkewY hover-эффекта для текста. В данном примере, при наведении на текст наклоняется одна из осей. Трансформация skewX сдвигает все y-координаты на определенный угол, оставляя x-координаты без изменения. Важно! Для работы с данным примером трансформации текста не забудьте обязательно подключить библиотеку jQuery. Посмотреть и скачать демо пример вы можете перейдя по ссылкам ниже. … Читать далее »
Александр 08.11.2014 Оставить комментарий Просмотров: 2 691
Отличный пример создания оригинального и необычного модального окна для вашего сайта. Данный пример реализован с помощью CSS, jQuery и библиотеки TweenMax.min.js. Важно! Не забудьте обязательно подключить библиотеку jQuery и TweenMax. Использование данного примера ограничивается практически только вашей фантазией.
Александр 12.09.2014 5 комментариев Просмотров: 2 543
Пример реализации плавной прокрутки сайта до якоря. Для того чтобы назначить на любой из пунктов меню свой якорь, создайте блок div и назначьте ему уникальный id. После этого в навигации (меню) укажите ссылку на id блока. Пример ссылки в меню на якорь блока: где #defaults это id блока div «О нас». Для работы необходимо обязательно подключить библиотеку jQuery. Посмотреть и скачать демо пример вы можете перейдя по ссылкам ниже. HTML … Читать далее »
Александр 11.09.2014 8 комментариев Просмотров: 42 925
Давайте рассмотрим создание модальных всплывающих окон, которые в народе еще называются popup-окна. О создании всплывающих (модальных) окон в WordPress, мы говорили в отдельном уроке. В данном примере модальные окна появляются при клике на кнопку (текст) и исчезают при нажатии в любую область мимо модального окна, или при клике на ключевое слово.
Александр 11.09.2014 Оставить комментарий Просмотров: 1 896
Предлагаю вашему вниманию пример создания модального окна с помощью CSS и jQuery. Модальное окно с сообщением появляется сразу после загрузки страницы. Для закрытия окна необходимо нажать на клавиатуре клавишу Esc или кликнуть по кнопке размещенной в сообщении модального (popup) окна. Изменяя в скрипте значение можно назначить любую клавишу (или несколько клавиш) на клавиатуре для закрытия модального окна. Виртуальные коды клавиш можно узнать тут. Для работы необходимо обязательно подключить библиотеку jQuery. … Читать далее »
Александр 10.09.2014 20 комментариев Просмотров: 47 636
В этом примере я хочу показать вам как создать плавную навигацию (прокрутку) страницы до якоря для вашего сайта. При нажатии на любой из пунктов меню происходит плавный переход без перезагрузки и обновления страницы к заданному блоку или элементу.
Такой скролл называют еще «go to». Данный пример вы легко можете применить при создании своего сайта или для улучшения уже существующего проекта. Для … Читать далее »
Александр 09.09.2014 18 комментариев Просмотров: 16 307
В примере реализован jQuery фильтр, который можно использовать для сортировки/фильтрации практически любых элементов (включая изображения, списки, фото, и т.д.). Возможности для применения данного фильтра достаточно широкие. Сортировка элементов создана с помощью простого скрипта, для работы которого необходимо обязательно подключить библиотеку jQuery. Если у вас есть вопросы, задавайте в комментариях. HTML CSS JS Читать далее »
Александр 08.09.2014 1 Комментарий Просмотров: 3 198
Предлагаю вашему вниманию пример создания портфолио (галереи) с помощью CSS и JS. В части кода ниже вы видите пример добавления книги A Clockwork Orange. Вначале в машинописный апострофах необходимо указать ссылку на изображение книги, далее через запятую и также в апострофах указываем название книги, имя автора и описание.
Для работы необходимо обязательно подключить библиотеку jQuery. Данный пример можно использовать как готовое решение для одностраничного … Читать далее »
javascript — ошибка «jQuery не определен» при подключении к PayPal
Задавать вопрос
спросил
Изменено 2 года, 9 месяцев назад
Просмотрено 158 раз
Я уже несколько часов просматриваю весь Google и очень запутался. У каждого свой ответ, и большинство не объясняет, куда поместить фрагмент кода, который они публикуют.
Я пытаюсь создать новый блог и интернет-магазин на собственном сайте WordPress. Сайт работает на машине с последней версией Ubuntu Server и apache2. Я использую плагин «WP Simple PayPal Shopping Cart», чтобы пользователи могли оформить заказ.
На странице проверки попытка оформить заказ с помощью PayPal Express вызовет ошибку «ReferenceError: jQuery не определена», по-видимому, из-за файла JavaScript на серверах PayPal.
Я не знаю, как это исправить. Я знаю, что jQuery должен быть загружен до того, как что-либо попытается его запустить, но я понятия не имею, как это сделать, или если это уже правильно, и это вообще не проблема. Я также видел, что некоторые плагины для повышения скорости могут вызывать проблему, но я не устанавливал ни один из них. Любая помощь будет оценена по достоинству.
Сайт: breaktrainэнтузиаст.com , но чтобы увидеть проблему, вам нужно добавить этот поддельный товар в корзину по адресу breaktrainэнтузиаст.com/example/, а затем инициировать покупку, нажав кнопку PayPal на сайте breaktrainэнтузиаста.com /cart/ (не волнуйтесь, это в режиме песочницы).
Как я уже сказал, любая помощь в этом будет оценена, так как эта ошибка предотвращает выполнение любой успешной транзакции.
- javascript
- jquery
- paypal
Это может быть вызвано обновлением WordPress 5.5, которое удалило jQuery. Я бы предложил попробовать плагин Enable jQuery Migrate Helper.
1Зарегистрируйтесь или войдите в систему
Зарегистрируйтесь с помощью Google Зарегистрироваться через Facebook Зарегистрируйтесь, используя адрес электронной почты и парольОпубликовать как гость
Электронная почтаТребуется, но никогда не отображается
Опубликовать как гость
Электронная почтаТребуется, но не отображается
Нажимая «Опубликовать свой ответ», вы соглашаетесь с нашими условиями обслуживания, политикой конфиденциальности и политикой использования файлов cookie
Как интегрировать собственный плагин Isotope jQuery в WordPress
Первая публикация: воскресенье, 28 апреля 2013 г.
Последнее обновление: 15 марта 2022 г.
3 минуты чтения Недавно меня спросили, легко ли интегрировать плагин Isotope jQuery в веб-сайт WordPress . Добавить isotope.js на свой сайт не так уж и просто — это не так просто, как связать скрипт с вашим заголовком.
2 способа добавить плагин Isotope jQuery в WordPress
Как всегда, есть (по крайней мере) 2 способа добиться этого
- Создайте шаблон страницы для этой цели — со всем кодом, который вы хотите
- Добавьте код в файл function.php вашей темы, а затем создайте шаблон страницы
Как интегрировать Isotope jQuery с WordPress
Вероятно, есть сотни статей на тему интеграции Isotope с WordPress, и это «отчасти» мое. В середине 2012 года я запустил свой первый плагин Isotope jQuery для WordPress… ну, это был не плагин. Это был шаблон страницы, который нужно было скопировать в папку темы.
Isotope jQuery для шаблона страницы WordPress
Шаблон страницы и инструкции для него все еще находятся на моем веб-сайте… Многие разработчики не одобряют подход с использованием шаблона страницы, поскольку начинающие программисты будут жестко кодировать js и CSS в шаблоне страницы.
Хуже того, шаблон страницы привязан к вашей теме… поэтому, если вы удалите свою тему, ваша изотопная страница перестанет работать, как только вы удалите эту папку темы.
Плагин Isotope jQuery для WordPress
В конце 2012 года я запустил свой первый Плагин WordPress для Isotope, который был быстро удален из репозитория плагинов WordPress, потому что Isotope jQuery не имеет открытого исходного кода. Итак, если вы делаете это дома, то будьте честны и идите, заплатите Дэвиду/Метафиззи за его тяжелую работу и получите лицензию.
- и, таким образом, лучший подход — это файл function.php. Если вы откроете папку с темой, отредактируйте файл functions.php — возможно, это пустой файл или он содержит код того, кто написал вашу тему
Затем вы можете начать перемещать код из моего файла dbc_isotope.php в functions.php.
Функции, которые вам необходимо иметь: —
- функция для регистрации и постановки в очередь isotope.js
- функция для регистрации и постановки в очередь CSS начальной загрузки Twitter (если хотите) —
- Затем вы должны создать свой собственный скрипт/функцию для привязки атрибутов CSS к isotope.
js - Затем вам нужно будет добавить условную функцию, чтобы определить, какие шаблоны страниц получат изотопную обработку – Посмотрите условные выражения WordPress, например is_home или is_archive
- Теперь вы можете просмотреть свой веб-сайт, чтобы убедиться, что isotope.js вызывается, и просмотреть источник, чтобы убедиться, что сценарий js печатается в нижнем колонтитуле, а не в заголовке. Isotope.js, как и многие jQuery, не может вызываться в шаблоне страницы header.php.
jsНаконец, вы можете изменить существующие шаблоны тем или создать новый шаблон страницы, чтобы все работало так, как вы хотите.
Метки: изотоп, jQuery, WordPressПознакомьтесь с автором
Дэмиен Сондерс
Опытный консультант по управлению и бизнес-лидер, заинтересованный в цифровой трансформации, проектировании, ориентированном на продукт, и масштабируемой гибкости. Если я не пишу о жизни с НДСТ (аутоиммунное заболевание), я, вероятно, слушаю музыку, читаю книгу или узнаю больше о вине.