Як пов’язати зовнішні файли jQuery / Javascript з WordPress


15

Тому я використовую Starkers для основи своєї наступної теми WP, і я зіткнувся з невеликою проблемою, я включав свою власну версію jQuery у header.phpфайл, але під час огляду мого сайту за допомогою Firebug я помітив, що jquery завантажується двічі, я трохи копав і помітив, що я не тільки включав файл, але так це було і wp_head()функцією.

Намагаючись виправити проблему, я помітив коментар у файлі заголовка, який виник із теми «Двадцять десять»:

/* Always have wp_head() just before the closing </head>
 * tag of your theme, or you will break many plugins, which
 * generally use this hook to add elements to <head>, such 
 * as styles, scripts, and meta tags
 */

Тож ось моя проблема, я маю враження, що файл jQuery повинен бути встановлений перед будь-яким іншим файлом, який хоче його використовувати, і це wp_head()має бути останньою справою в <head>елементі, я трохи заплутався, тому що мені цікаво Я ставлю wp_head()вгорі, щоб файл, включений у WP, jQuery буде використовуватися для всіх моїх плагінів, навіть якщо він говорить, що не робити цього.

Я прокоментував рядок jQuery у wp_head()функції, але це потрібно для сторінки адміністратора, тому мені довелося повернути його назад.

Я також хотів би використати (принаймні експеримент) з використанням версії jQuery Google CDN, але не хочу її включати двічі!

Сподіваюся, ви зрозуміли, що я намагаюся пояснити, будь-які пропозиції щодо того, як я можу вирішити цю проблему, були б дуже вдячні. Я також буду вдячний за будь-яку пораду щодо обробки файлів JavaScript з файлом заголовка.

Спасибі!


Це слід повернути до чогось типу "Як зв’язати зовнішні файли jQuery / Javascript з WordPress."
MikeSchinkel

Я погоджуюся, я не знав, як це назвати, оскільки не надто знайомий з проблемою, яку я мав :-)
Бен Еверард

Відповіді:


9

З формулювань свого питання ви повинні додавати сценарії, писаючи <script>теги у ваш шаблон. Додайте свої власні сценарії за допомогою wp_enqueue_script()шаблону functions.php, відповідно встановивши залежність від jQuery, і wp_head()додайте сценарії для вас.

function my_scripts() {
    wp_enqueue_script( 'my-sweet-script', get_bloginfo('template_directory') . '/script.js', array('jquery') );
}
add_action('template_redirect', 'my_scripts');

Для отримання додаткової інформації див. Сторінку кодексу .


Ви вірно думаєте, що я додаю сценарії за допомогою <script>тегу, це альтернатива, яку я шукав, велике спасибі! :-)
Бен Еверард

3
Якщо ви хочете додати свій скрипт лише на передній частині, зачепіть його 'template_redirect'замість 'init'.
Джон П Блох

Хороший матеріал, я оновлю свою відповідь. Я ледь не запропонував упакувати анкету is_admin().
Annika Backstrom

Я, як правило, запускаю скрипти у файлі шаблону над get_header(), але це functions.phpробитиму за допомогою його на кожній сторінці, яка може не знадобитися. Якщо у мене є глобальний, я header.phpзаздалегідь wp_head()його закликаю. Таким чином, запитання - це те, де ви б очікували, що вони опиняться в<head>
Джо Хойл,

Іноді краще додати сценарії внизу сторінки. Це останній параметр codex.wordpress.org/Function_Reference/wp_enqueue_script (5-й, $ in_footer), встановивши його як true. Невелика інформація для тих, хто потребує більшого контролю.
хакре

7

Пропоную переглянути 5 підказок щодо використання jQuery з WordPress . Крім усього іншого, він показує код, необхідний для завантаження jQuery з бібліотеки Google:

function my_init() {
    if (!is_admin()) {
        // comment out the next two lines to load the local copy of jQuery
        wp_deregister_script('jquery');
        wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js', false, '1.3.2');
        wp_enqueue_script('jquery');
    }
}
add_action('init', 'my_init');

Ви також можете перевірити плагін Use Google Libraries .


1
Це насправді краща відповідь, оскільки він показує, як встановити чергу в CDD версію jQuery Google. Хоча, як запропонував Джон в іншому місці, якщо ви хочете зробити це лише на передовій, зачепіться template_redirectзамість цього init.
EAMann

Хороший момент про те, куди він завантажується. Хоча насправді область адміністратора також використовує jQuery, правда? У будь-якому випадку, дякую, що показали, як це контролювати.
Травіс Нортчетт

Так, я щойно знайшов 5 порад щодо jquery / wp post, дякую за вашу відповідь :-)
Бен Еверард

5 порад щодо використання jQuery з WordPress - посилання більше не працює.
хакре

ПРИМІТКА: Приклад включає "старішу" версію jQuery, поточна версія WP (3.0.1) працює jQuery 1.4.2 ...
t31о

1

Хоча @tnorthcutt вірно, що вам слід належним чином відмовитись від початкового jquery WP, якщо ви хочете завантажити свій власний, ви впевнені, що у вас виникнуть проблеми, коли ви завантажуєте іншу версію jquery, яка є ядром WP. І ядро, і плагіни покладаються на те, що він там є. Тому якщо ви не оновлюєте свою тему найновішим jquery щоразу, коли WP оновлюється, ваш сайт може зламатися.

Наступний код гарантує, що ваша тема завжди завантажує правильну версію jquery, спочатку знайдіть, яку версію використовує WP, а потім завантажте її з Google:

$wp_jquery_version = $GLOBALS['wp_scripts']->registered['jquery-core']->ver;
$jquery_version = ( $wp_jquery_version == '' ) ? '1.8.3' : $wp_jquery_version; // fallback, just in case 
wp_deregister_script('jquery');
wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/'. $jquery_version .'/jquery.min.js', $jquery_version, false );
wp_enqueue_script('jquery');
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.