Главная → Wordpress → by

Developer’ Руководство для бесконфликтного JavaScript и CSS в WordPress

Представьте, что вы играете в новейшие хэш-тег игру на Twitter, когда вы видите этот уютный твит-сообщения:

Вы можете проверить вашу # WP сайта.Она включает в себя две копии JQuery.Ничего не сломано, но время загрузки будет slower.

Вы проверить исходный код, и конечно же вы увидите следующее: 

<script src="/wp-includes/js/jquery/jquery.js?ver=1.6.1" type="text/javascript"></script>
<script src="/wp-content/plugins/some-plugin/jquery.js"></script>

sm-wp-css-js

What Went Wrong

Первый экземпляр JQuery включен способом WordPress, а some-plugin включает JQuery, как на статические HTML page.

Количество рамок наличие включены в WordPress по умолчанию, в том числе:

  • Scriptaculous,
  • JQuery (работает в noConflict mode),
  • JQuery основного пользовательского интерфейса и отдельных виджетов,
  • Prototype.

полный список можно найти в Codex.На той же странице есть инструкции по использованию JQuery в noConflict mode.

Отказ от Problem

WordPress включает в себя эти библиотеки, так что плагин и тема авторы могут избежать этой проблемы с помощью wp_register_script и wp_enqueue_script PHP функции включить JavaScript в HTML.

Регистрация файл сам по себе не делать ничего, чтобы выход вашего HTML, а только добавляет файл в список WordPress об известных сценариев.Как вы увидите в следующем разделе, мы регистрируем файлы на ранних стадиях тему или плагин, где мы можем следить за версиями information.

Чтобы вывести файл в HTML, вы должны поставить в очередь файлов.Как только вы сделаете это, WordPress будет добавить необходимые теги сценария в верхнем или нижнем колонтитуле выводимых страниц.Более подробная информация приводится далее в этой article.

Регистрация файла требуется более сложный код, чем enqueueing файлов, так что, быстро разбор файла сложнее, когда вы просматриваете ваш код.Enqueueing файл гораздо проще, и вы можете легко разобрать, как HTML в настоящее время affected.

За эти методы работают, тема о header.php Файл должен содержать строку <?php wp_head(); ?> незадолго до </head> теги и footer.php Файл должен содержать строку <?php wp_footer(); ?> перед</body> tag.

Регистрации JavaScript

Перед регистрацией в вашем браузере, вы должны решить, на несколько дополнительных вопросов:

  • Файла ручкой (т.е. имя, под которым WordPress будет знать файла);
  • Другие сценарии, что файл зависит от (JQuery, например);
  • Номер версии (опционально);
  • . Где файл появится в HTML (верхний или нижний)

Эта статья относится к строительству тему, но советов нев равной степени к строительству plugin.

Examples

Мы будем использовать два файла JavaScript, чтобы проиллюстрировать власти функций:

Первый base.js, которая представляет собой набор инструментов функций, используемых в нашем примере website.

function makeRed(selector){
  var $ = jQuery; //enable $ alias within this scope
  $(function(){
    $(selector).css('color','red');
  });
}

base.js файла опирается на jQuery, так JQuery можно считать dependency.

Это первая версия файла, версия 1.0.0, и нет никаких причин, чтобы запустить этот файл в HTML header.

Второй файл, custom.js, используется для добавления добра JavaScript, чтобы наши website.

makeRed('*');

Это custom.js файл вызывает функцию base.js, так base.js является dependency.

Мне нравится base.js custom.js является версия 1.0.0 и может быть запущен в HTML footer.

custom.js файл также косвенно опирается на jQuery.Но в данном случае, base.js может быть отредактирован, чтобы быть автономным или полагаться на других рамках.Существует не нужно для JQuery, должны быть перечислены в качестве зависимости custom.js.

Это теперь просто вопрос регистрации в вашем браузере с помощью функции wp_register_script.Это имеет следующие аргументы:

  • $handleString
  • $sourceString
  • $dependanciesМассив (опционально)
  • $versionСтрока (опционально)
  • $in_footerTrue / False (необязательный, по умолчанию является ложным)

При регистрации сценарии, то лучше использовать init крюк и зарегистрировать их все once.

Чтобы зарегистрировать сценарии в нашем примере, добавьте следующие строки в __ 6 тема в | functions.php файла: 

function mytheme_register_scripts() { 
  //base.js – dependent on jQuery 
  wp_register_script( 
    'theme-base', //handle 
    '/wp-content/themes/my-theme/base.js', //source 
    array('jquery'), //dependencies 
    '1.0.0', //version 
    true //run in footer 
  ); 

  //custom.js – dependent on base.js 
  wp_register_script( 
    'theme-custom', 
    '/wp-content/themes/my-theme/custom.js', 
    array('theme-base'), 
    '1.0.0', 
    true 
  ); 
} 
add_action('init', 'mytheme_register_scripts');

Существует нет необходимости регистрироваться JQuery, потому что WordPress уже есть.Перерегистрация это может привести к problems.

Вы ничего не добились

Все эти файлы JavaScript регистрации путем WordPress была, до сих пор ничего не добились.Ничего не будет выводиться на ваш HTML files.

Чтобы получить WordPress для вывода соответствующих HTML, мы должны поставить в очередь наши файлы.В отличие от относительно скучный команды, необходимые для регистрации функции, это очень просто process.

Вывод наличие HTML

Добавление <script> теги на HTML осуществляется с wp_enqueue_script функции.После того, как сценарий зарегистрирован, он принимает один аргумент, handle.

Добавление JavaScript в HTML делается в wp_print_scripts крючок с следующий код: 

function mytheme_enqueue_scripts(){ 
  if (!is_admin()): 
    wp_enqueue_script('theme-custom'); //custom.js 
  endif; //!is_admin 
} 
add_action('wp_print_scripts', 'mytheme_enqueue_scripts');

Из наших двух зарегистрированных файлов JavaScript ( base.js __ и 6 | custom.js), только второе добавляет наличие функциональности сайта.Без второй файл, нет необходимости добавлять first.

После в очереди custom.js для вывода HTML, WordPress будет выяснить, что это зависит от base.js присутствует, и что base.js, в свою очередь, требует JQuery.В результате HTML является: 

<script src="/wp-includes/js/jquery/jquery.js?ver=1.6.1" type="text/javascript"></script>
<script src="/wp-content/themes/my-theme/base.js?ver=1.0.0" type="text/javascript"></script>
<script src="/wp-content/themes/my-theme/custom.js?ver=1.0.0" type="text/javascript"></script>

Регистрации Стиль Sheets

Обе функции для добавления JavaScript, чтобы наш HTML есть сестра PHP функции для добавления таблиц стилей для HTML. wp_register_style и wp_enqueue_style

Как и в примере JavaScript,Мы будем использовать несколько файлов CSS в этой статье, используя мобильные первый методологии реагировать Web design.

mobile.css файл CSS для создания мобильной версии сайта.Он не имеет dependencies.

desktop.css файл CSS, который загружается на рабочий стол устройствами.Настольная версия основывается на мобильной версии, так mobile.css является dependency.

Как только вы решили на номер версии, зависимости и типов носителей, пришло время зарегистрировать свой таблиц стилей с помощью wp_register_style функции.Эта функция принимает следующие аргументы:

  • $handleString
  • $sourceString
  • $dependanciesМассив (опционально, по умолчанию нет)
  • $versionСтрока (опционально, по умолчанию это текущая версия WordPress номер)
  • $media_typeСтрока (опционально, по умолчанию все)

Опять же, зарегистрировав таблиц стилей с помощью init действие best.

Для вашей темы functions.php, можно добавить следующее: 

function mytheme_register_styles(){

  //mobile.css for all ... 

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров



 		
		
				
		
				

			  Главная   →  Wordpress  →   by

Comments are closed.