Интеграция файлов javascript в пользовательской теме Wordpress

Question

Я знаю, что в этом вопросе уже есть несколько тем, но ни одна из них, похоже, не разрешает мою проблему.

Я хочу связать в пользовательской теме WordPress, что я создаю несколько файлов JavaScript. Я пробовал много возможных способов, и никто из них, похоже, не работает для меня.

Чтобы пропустить все способы, по которым я уже пытался добавить файлы, скажите, пожалуйста, например, как добавить файл «prettyPhoto.js», чтобы работать в моей настраиваемой теме.

Спасибо, Анди

Answer 1

Правильный путь заключается в использовании wp_register_script и wp_enqueue_script. Используя их, вы будете проинструктировать WordPress загрузить ваш скрипт после любых зависимых скриптов.

Скажите, что ваш prettyPhoto.js файл находится в mytheme/js. В functions.php, добавить что-то вроде:

<?php 
add_action('wp_enqueue_scripts', 'mytheme_load_scripts'); 
function mytheme_load_scripts() { 
    // this only registers the script with WordPress 
    wp_register_script('prettyPhoto', get_stylesheet_directory_uri().'/js/prettyPhoto.js'); 
    // this actually loads the script in `wp_head` 
    wp_enqueue_script('prettyPhoto'); 
} 
?> 

Если prettyPhoto.js зависит от JQuery или что-то, то укажите это в wp_register_script. Выполнение ниже скажет WordPress, чтобы обеспечить загрузку jQuery перед загрузкой вашего скрипта.

<?php 
wp_register_script('prettyPhoto', get_stylesheet_directory_uri().'/js/prettyPhoto.js', array('jquery')); 
?> 

См wp_register_script и wp_enqueue_script в Codex больше.

This article, вероятно, поможет.

Answer 2

Я предполагаю, что это не работает для Вас, потому что Вы, вероятно, забыл о размещении wp_head()

непосредственно перед тегом в шаблоне темы (напр. Header.php, index.php)

или о размещении wp_footer()

непосредственно перед тегом в шаблоне темы (напр. footer.php, index.php).

Потратьте некоторое время и станьте знакомым с Theme Development Checklist.

Это трудно догадаться, не видя шаблон и не зная, что вы уже пробовали уже, , но то, что Вам нужно это wp_enqueue_script функция (в functions.php) вместе с wp_head() и | или wp_footer() (в шаблоне).

1. Убедитесь, что есть wp_head() прямо сейчас </head> в шаблоне.
2. Убедитесь, что есть wp_footer() прямо сейчас </body> в шаблоне.

3. Поместите следующий код в functions.php:

   function my_theme_add_javascript() { 
       wp_enqueue_script(
        'pretty-photo', 
        get_template_directory_uri() . '/js/prettyPhoto.js', 
        array('jquery') 
       ); 
   } 
   add_action('wp_enqueue_scripts', 'my_theme_add_javascript');