Руководство разработчика по бесконфликтным JavaScript и CSS в WordPress

<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>

Что пошло не так?

Первая копия j’s’query включена путь WordPress, в то время как some-plugin включает в себя j’sry, как вы бы на статической странице HTML.

Ряд платформ JavaScript включены в WordPress по умолчанию, в том числе:

Сценарий,
j’ery (работает в режиме noConflict),
ядро и выбранные виджеты,
Прототип.

Полный список можно найти в Кодексе. На той же странице находятся инструкции по использованию j’sinin.A.

Как избежать проблемы

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

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

Дальнейшее чтение на SmashingMag:

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

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

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

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

Перед регистрацией JavaScript необходимо определиться с несколькими дополнительными элементами:

ручка файла (т.е. имя, по которому WordPress будет знать файл);
другие скрипты, от которого зависит файл (например, j’ery);
номер версии (необязательно);
где файл будет отображаться в HTML (заголовок или колонтитул).

Эта статья относится к созданию темы, но советы в равной степени относятся к созданию плагина.

Примеры

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

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

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

Файл base.js опирается на j’sry, поэтому j’sry можно считать зависимой.

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

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

makeRed('*');

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

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

Файл custom.js также косвенно полагается на j’sry. Но в этом случае, base.js может быть отредактирован, чтобы быть автономным или полагаться на другую структуру. Существует нет необходимости для j’sary, которые будут перечислены в качестве зависимости custom.js.

Теперь это просто вопрос регистрации JavaScript с помощью wp_register_script функции. Для этого приводятся следующие аргументы:

$handleСтрока
$sourceСтрока
$dependanciesМассив (необязательно)
$versionСтрока (необязательно)
$in_footerПравда/ложь (необязательно, по умолчанию является ложным)

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

Чтобы зарегистрировать скрипты в нашем примере, добавьте следующее в файл theme.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');

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

Вы ничего не достигли!

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

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

Выход JavaScript HTML

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

Добавление 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 и custom.js),только второй добавляет функциональность JavaScript на веб-сайт. Без второго файла нет необходимости добавлять первый файл.

После enqueued custom.js для вывода в HTML, WordPress будет выяснить, что это зависит от base.js настоящее время и что base.js, в свою очередь, требует j’ury. В результате 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>

Регистрация стиль листов

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

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

Файл mobile.css — это CSS для создания мобильной версии веб-сайта. Он не имеет зависимостей.

Файл desktop.css — это CSS, который загружается только для настольных устройств. Настольная версия построена на мобильной версии, поэтому mobile.css является зависимостью.

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

$handleСтрока
$sourceСтрока
$dependanciesМассив (необязательно, по умолчанию нет)
$versionСтрока (необязательно, по умолчанию является текущий номер версии WordPress)
$media_typeСтрока (необязательно, по умолчанию все)

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

К функциям вашей темы.php,вы добавили бы это:

function mytheme_register_styles(){ 
  //mobile.css for all devices 
  wp_register_style( 
    'theme-mobile', //handle 
    '/wp-content/themes/my-theme/mobile.css', //source 
    null, //no dependencies 
    '1.0.0' //version 
  ); 

  //desktop.css for big-screen browsers 
  wp_register_style( 
    'theme-desktop', 
    '/wp-content/themes/my-theme/desktop.css', 
    array('theme-mobile'), 
    '1.0.0', 
    'only screen and (min-width : 960px)' //media type 
  ); 

  /* *keep reading* */ 
} 
add_action('init', 'mytheme_register_styles');

Мы использовали медиа-запросы CSS3 для предотвращения разбора мобильных браузеров с листом настольного стиля. Но Internet Explorer версии 8 и ниже не понимают CSS3 медиа-запросов и поэтому не будет разбирать рабочий стол CSS либо.

IE8 только два года, поэтому мы должны поддерживать своих пользователей с условными комментариями.

Условные комментарии

При регистрации CSS с использованием функций регистра и очереди условные комментарии немного сложнее. WordPress использует объект $wp_styles для хранения зарегистрированных листов стилей.

Чтобы обернуть файл в условные комментарии, добавьте дополнительную информацию к этому объекту.

Для Internet Explorer 8 и ниже, за исключением мобильных IE, мы должны зарегистрировать еще одну копию нашего рабочего стола стиль листа (с использованием типа all носителя) и обернуть его в условных комментариев.

В приведенной выше примере кода /* keep reading */ будет заменено следующее:

global $wp_styles; 
wp_register_style( 
  'theme-desktop-ie', 
  '/wp-content/themes/my-theme/desktop.css', 
  array('theme-mobile'), 
  '1.0.0' 
); 

$wp_styles->add_data( 
  'theme-desktop-ie', //handle 
  'conditional',  //is a conditional comment 
  '!(IEMobile)&(lte IE 8)' //the conditional comment 
);

К сожалению, нет эквивалента для упаковки файлов JavaScript в условных комментариях, предположительно из-за конкатизации JavaScript в разделе админ.

Если вам нужно обернуть файл JavaScript в условные комментарии, вам нужно будет добавить его в header.php или footer.php в теме. Кроме того, вы можете использовать wp_head или wp_footer крючки.

Выход таблицы стиля HTML

Выход листа стиля HTML очень похож на выход JavaScript HTML. Мы используем функцию enqueue и запускаем ее на wp_print_styles крючок.

В нашем примере, мы могли бы уйти с говорю WordPress в очередь только стиль листов, которые имеют ручки theme-desktop и theme-desktop-ie . WordPress затем выход mobile / all медиа-версии.

Тем не менее, оба стиля листов применять стили на веб-сайте за пределами основной сбросить: mobile.css строит веб-сайт для мобильных телефонов, и desktop.css строит на вершине этого. Если он делает что-то, и я зарегистрировал его, то я должен enqueue его. Это помогает отслеживать, что происходит.

Вот код для вывода CSS в HTML:

function mytheme_enqueue_styles(){ 
  if (!is_admin()): 
    wp_enqueue_style('theme-mobile'); //mobile.css 
    wp_enqueue_style('theme-desktop'); //desktop.css 
    wp_enqueue_style('theme-desktop-ie'); //desktop.css lte ie8 
  endif; //!is_admin 
} 
add_action('wp_print_styles', 'mytheme_enqueue_styles');

В чем смысл?

Вы можете быть удивлены, что точка переживает все эти дополнительные усилия, когда мы могли бы просто вывести наши JavaScript и стиль листов в теме заголовок.php или с помощью wp_head крючка.

В случае CSS в автономной теме, это действительный момент. Это дополнительная работа без особого выигрыша.

Но с JavaScript, это помогает предотвратить столкновения между плагинами и темами, когда каждый использует другую версию платформы JavaScript. Это также делает время загрузки страниц как можно быстрее, избегая дублирования файлов.

Рамки WordPress

Эта группа функций может быть наиболее полезна при использовании фреймворка для тематики. В моем агентстве, Soupgiant, мы создали основу для ускорения нашего производства веб-сайтов.

Как и в большинстве агентств, у нас есть внутренние конвенции для именования файлов JavaScript и CSS.

Когда мы создаем заказ WordPress тему для клиента, мы развиваем его как детскую тему нашей структуры. В самой рамках мы регистрируем ряд файлов JavaScript и CSS в соответствии с нашей конвенцией о присвоении имен.

В детской теме мы просто окунимаем файлы для вывода HTML.

function clienttheme_enqueue_css() { 
  if (!is_admin()): 
    wp_enqueue_style('theme-mobile'); 
    wp_enqueue_style('theme-desktop'); 
    wp_enqueue_style('theme-desktop-ie'); 
  endif; //!is_admin 
} 
add_action('wp_print_styles', 'clienttheme_enqueue_css'); 

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

Добавление CSS и JavaScript к нашим темам путь WordPress позволяет нам отслеживать именно то, что происходит с первого взгляда.

Небольшое ограничение

Если вы используете платформу JavaScript в вашей теме или плагине, то вы застряли с версией, которая поставляется с текущей версией WordPress, которая иногда падает версия или два за последний официальный релиз платформы. (Обновление до более новой версии фреймворка технически возможно, но это может вызвать проблемы с другими темами или плагинами, которые ожидают версию, которая поставляется с WordPress, так что я опустил эту информацию из этой статьи.)

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

Единый пункт регистрации

Зарегистрируйте свои стили и скрипты в одном блоке кода, так что при обновлении файла, вы сможете вернуться и обновить номер версии легко.

Если вы используете другой код в разных частях веб-сайта, вы можете обернуть логику вокруг скриптов enqueue.

Если, скажем, на страницах архива используется другой JavaScript, чем остальная часть веб-сайта, то вы можете зарегистрировать три файла:

базовая JavaScript (зарегистрирована как theme-base ),
архив JavaScript (зарегистрирован как theme-archive ),
общий JavaScript (зарегистрирован как theme-general ).

Опять же, базовый JavaScript ничего не добавляет на веб-сайт. Скорее, это группа функций по умолчанию, на которые опираются два других файла. Затем можно оставить файлы в анонсе, используя следующий код:

function mytheme_enqueue_js(){ 
  if (is_archive()) { 
    wp_enqueue_script('theme-archive'); 
  } 
  elseif (!is_admin()) { 
    wp_enqueue_script('theme-general');
  }
} 
add_action('wp_print_scripts', 'mytheme_enqueue_js');

Использование Google AJAX CDN

При использовании JavaScript WordPress способ сэкономит вам проблему общих библиотек, противоречащих друг другу, вы можете предпочесть служить эти библиотеки с сервера Google, а не свой собственный.

Использование Джейсон Пенни Использование Google Библиотеки плагин является самым простым способом сделать это. Плагин автоматически удерживает j’sinва в режиме noConflict.

Ввод все это вместе

После того как вы начали регистрации и outputting ваши сценарии и стили WordPress образом, вы обнаружите, что управление этими файлами становится ряд логических шагов:

Регистрация для управления:
- номера версий,
- файлзависимости,
- типы мультимедиа для CSS,
- размещение кода для JavaScript (заголовок или колонтитул);
Enqueue/выходные файлы для HTML:
- логика таргетинга вывода на конкретные страницы WordPress,
- WordPress автоматизировать зависимости.

Устранение потенциальных конфликтов JavaScript из вашей темы WordPress или плагин ажиотаж освобождает вас, чтобы попасть на более важные вещи, такие как следить за продажами приводит или вернуться к этой хэш-тег игры, которая была так грубо прерван.

Источник: smashingmagazine.com

Руководство разработчика по бесконфликтным JavaScript и CSS в WordPress

Что пошло не так?

Как избежать проблемы

Дальнейшее чтение на SmashingMag:

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

Примеры

Вы ничего не достигли!

Выход JavaScript HTML

Регистрация стиль листов

Условные комментарии

Выход таблицы стиля HTML

В чем смысл?

Рамки WordPress

Небольшое ограничение

Единый пункт регистрации

Использование Google AJAX CDN

Ввод все это вместе

Понравилось это:

Похожее

Добавить комментарийОтменить ответ

Что пошло не так?

Как избежать проблемы

Дальнейшее чтение на SmashingMag:

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

Примеры

Вы ничего не достигли!

Выход JavaScript HTML

Регистрация стиль листов

Условные комментарии

Выход таблицы стиля HTML

В чем смысл?

Рамки WordPress

Небольшое ограничение

Единый пункт регистрации

Использование Google AJAX CDN

Ввод все это вместе

Sharing is caring

Понравилось это:

Похожее

Добавить комментарийОтменить ответ