Я разрабатываю сайт WordPress на http://fremont.alchemycs.com и продолжаю сталкиваться с проблемами jQuery. На странице есть две функции, использующие jQuery - слайд-шоу в верхней части страницы и аккордеонное меню на боковой панели. Почему-то я не могу заставить их обоих работать сразу. Я получаю ошибки «не функции» для одного или другого, в зависимости от того, где я загружаю jQuery.
Вот мой заголовок в текущем виде:
<!DOCTYPE html> <html dir="ltr" lang="en-US"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="initial-scale=1.0, width=device-width" /> <title>Fremont, Seattle</title> <link rel="profile" href="http://gmpg.org/xfn/11" /> <link rel="stylesheet" type="text/css" media="all" href="http://fremont.alchemycs.com/wp-content/themes/center/style.css" /> <link rel="pingback" href="http://fremont.alchemycs.com/xmlrpc.php" /> <!-- <script src="http://fremont.alchemycs.com/wp-content/themes/center/js/modernizr-1.6.min.js"></script> --> <link rel="alternate" type="application/rss+xml" title="Fremont, Seattle » Feed" href="http://fremont.alchemycs.com/feed/" /> <link rel="alternate" type="application/rss+xml" title="Fremont, Seattle » Comments Feed" href="http://fremont.alchemycs.com/comments/feed/" /> <link rel="alternate" type="application/rss+xml" title="Fremont, Seattle » Home Comments Feed" href="http://fremont.alchemycs.com/home/feed/" /> <link rel='stylesheet' id='ccf_custom-css' href='http://fremont.alchemycs.com/wp-content/plugins/constant-contact-form/class/ccf_custom.css?ver=3.2.1' type='text/css' media='screen' /> <link rel='stylesheet' id='contact-form-7-css' href='http://fremont.alchemycs.com/wp-content/plugins/contact-form-7/styles.css?ver=3.1' type='text/css' media='all' /> <link rel='stylesheet' id='amr-ical-events-list-css' href='http://fremont.alchemycs.com/wp-content/plugins/amr-ical-events-list/css/icallist.css?ver=1' type='text/css' media='all' /> <link rel='stylesheet' id='amr-ical-events-list_print-css' href='http://fremont.alchemycs.com/wp-content/plugins/amr-ical-events-list/css/icalprint.css?ver=1' type='text/css' media='print' /> <script type='text/javascript' src='http://fremont.alchemycs.com/wp-includes/js/l10n.js?ver=20101110'></script> <script type='text/javascript' src='http://fremont.alchemycs.com/wp-content/plugins/constant-contact-form/class/ccf_ajax.js?ver=3.2.1'></script> <script type='text/javascript' src='http://fremont.alchemycs.com/wp-includes/js/jquery/jquery.js?ver=1.6.1'></script> <script type='text/javascript' src='http://fremont.alchemycs.com/wp-content/plugins/jquery-vertical-accordion-menu/js/jquery.hoverIntent.minified.js?ver=3.2.1'></script> <script type='text/javascript' src='http://fremont.alchemycs.com/wp-content/plugins/jquery-vertical-accordion-menu/js/jquery.cookie.js?ver=3.2.1'></script> <script type='text/javascript' src='http://fremont.alchemycs.com/wp-content/plugins/jquery-vertical-accordion-menu/js/jquery.dcjqaccordion.2.9.js?ver=3.2.1'></script> <script type='text/javascript' src='http://fremont.alchemycs.com/wp-includes/js/comment-reply.js?ver=20090102'></script> <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://fremont.alchemycs.com/xmlrpc.php?rsd" /> <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://fremont.alchemycs.com/wp-includes/wlwmanifest.xml" /> <link rel='index' title='Fremont, Seattle' href='http://fremont.alchemycs.com/' /> <link rel='next' title='Calendar' href='http://fremont.alchemycs.com/events/' /> <meta name="generator" content="WordPress 3.2.1" /> <!-- All in One SEO Pack 1.6.13.8 by Michael Torbert of Semper Fi Web Designob_start_detected [-1,-1] --> <meta name="description" content="The Center of the Universe" /> <link rel="canonical" href="http://fremont.alchemycs.com/" /> <!-- /all in one seo pack --> <link rel="stylesheet" type="text/css" href="http://fremont.alchemycs.com/wp-content/plugins/social-media-widget/social_widget.css" /> <link rel='stylesheet' id='wop-css' href='http://fremont.alchemycs.com/wp-content/plugins/widgets-on-pages/wop.css' type='text/css' media='all' /><!-- BEGIN Hackadelic Sliding Notes 1.6.5 --> <style type="text/css"> .concealed { display: none } .block { display: block } </style> <!-- END Hackadelic Sliding Notes 1.6.5 --> <script src="http://fremont.alchemycs.com/wp-content/themes/center/js/jquery.flexslider.js"></script> <link rel="stylesheet" type="text/css" media="all" href="http://fremont.alchemycs.com/wp-content/themes/center/css/flexslider.css" /> <script type="text/javascript" charset="utf-8"> $(window).load(function() { $('.flexslider').flexslider(); }); </script> </head>
Когда выше указан мой заголовок, я получаю сообщение об ошибке: $ не является функцией
Но если я изменю заголовок для загрузки jQuery позже в заголовке, я получу похожие ошибки в функции меню аккордеона.
Возможно, это что-то простое, но у меня проблемы с его выяснением.
Спасибо!
РЕДАКТИРОВАТЬ - Позвольте мне подчеркнуть, что я экспериментировал с тем, где я загружаю jQuery, и даже если я делаю это в верхней части заголовка, так что это самое первое, работает только один скрипт.
Убедитесь, что вы сначала загрузили ядро jQuery.Это означает, что эта строка
<script type='text/javascript' src='http://fremont.alchemycs.com/wp-includes/js/jquery/jquery.js?ver=1.6.1'></script>
должна быть первым тегом скрипта.
Вы должны добавить ссылку на код jquery над любым другим плагином
Вместо вы можете использовать ссылку Google lib на последнюю версию jquery (1.7.1)
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
Это должно увеличить время загрузки для ваших пользователей (Это также должен быть первый тег скрипта.).
Вы должны включить сначала jquery.js, а затем остальные файлы плагина js, которые используют jQuery, порядок имеет значение и обернуть код jQuery в обработчик готовности
jquery.js
js
jQuery
$(function(){ // });