Где и как установить встроенные js на страницах

В Интернете есть тысячи статей о том, как вставлять внешние скрипты с помощью wp_enqueue_script ().

Во всяком случае, я не нашел ничего объясняющего, как добавить встроенный <script> , скрипты.

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

Есть идеи?

Изменить: я забыл «around <script> чтобы он был отменен. Теперь мой вопрос должен быть яснее

Solutions Collecting From Web of "Где и как установить встроенные js на страницах"

Несмотря на то, что mrwweb является правильным и эта техника должна использоваться, на самом деле ничего не идеального, и бывают случаи, когда используются встроенные скрипты и стили. Вы можете использовать wp script is для проверки сценария и вывода его в wp_head или нижнем колонтитуле с помощью wp_head или wp_footer .

Вы можете ссылаться на ответ scribu в этом сообщении, wp enqueue встроенный скрипт из-за зависимостей

Я сейчас смотрю на исходный код Twenty Seventeen functions.php и они оставили шаблон для встраивания script (или что-то в этом отношении) в документ с приоритетом, показанный здесь, обобщенный с использованием именованной функции:

 function add_inline_script() { echo "<script>/* do awesome things */</script>\n"; } add_action( 'wp_head', 'add_inline_script', 0 ); 

Возможно, вы захотите сделать это, например, если вы загружаете скрипт async например, альтернативный фрагмент отслеживания асинхронного отслеживания Google Analytics, позволяющий запускать неблокирующие запросы скриптов, как только документ начинает разбираться (если он помещен выше запросов блокировки ).

Помимо async современных браузеров, мы также можем управлять асинхронными зависимостями, используя API-интерфейс Fetch , предоставляя возможность асинхронно загружать внешние зависимости параллельно, не рискуя условиями гонки.

Следующее изображение и пример иллюстрируют использование этого метода для уменьшения времени загрузки страницы путем загрузки сценариев без блокировки в теме Twenty Eleven с использованием Fetch Inject :

Загрузка семнадцати семнадцати с впрыском Fetch Рисунок 1: Двадцать семнадцать сценариев темы плюс lazysizes загружаются асинхронно параллельно.

Piggybacking на вопрос о строковой интерполяции . Используйте его, удаляя произвольные блоки контента на страницу с помощью echo используя NOWDOC или HEREDOC и global назначения и строчную интерполяцию с помощью Fetch Inject, как показано ниже:

 /** * Load scripts using Fetch Inject instead of wp_enqueue_script * for for faster page loads and lower perceived latency. * * @since WordCamp Ubud 2017 * @link https://wordpress.stackexchange.com/a/263733/117731 * @link https://github.com/jhabdas/fetch-inject * */ function add_inline_script() { $twentyseventeen_l10n = array( 'quote' => twentyseventeen_get_svg( array( 'icon' => 'quote-right' ) ), 'expand' => __( 'Expand child menu', 'twentyseventeen' ), 'collapse' => __( 'Collapse child menu', 'twentyseventeen' ), 'icon' => twentyseventeen_get_svg( array( 'icon' => 'angle-down', 'fallback' => true ) ) ); $jquery_script_path = '/wp-includes/js/jquery/jquery.js?ver=1.12.4'; $jquery_dependent_script_paths = [ get_theme_file_uri( '/assets/js/global.js' ), get_theme_file_uri( '/assets/js/jquery.scrollTo.js' ), get_theme_file_uri( '/assets/js/skip-link-focus-fix.js' ), get_theme_file_uri( '/assets/js/navigation.js' ) ]; $lazysizes_path = get_theme_file_uri( '/assets/js/lazysizes.min.js' ); $screen_reader_text_object_name = 'twentyseventeenScreenReaderText'; $twentyseventeen_l10n_data_json = json_encode($twentyseventeen_l10n); $jquery_dependent_script_paths_json = json_encode($jquery_dependent_script_paths); $inline_script = <<<EOD window.{$screen_reader_text_object_name} = $twentyseventeen_l10n_data_json; (function () { 'use strict'; if (!window.fetch) return; /** * Fetch Inject v1.6.8 * Copyright (c) 2017 Josh Habdas * @licence ISC */ var fetchInject=function(){"use strict";const e=function(e,t,n,r,o,i,c){i=t.createElement(n),c=t.getElementsByTagName(n)[0],i.type=r.blob.type,i.appendChild(t.createTextNode(r.text)),i.onload=o(r),c?c.parentNode.insertBefore(i,c):t.head.appendChild(i)},t=function(t,n){if(!t||!Array.isArray(t))return Promise.reject(new Error("`inputs` must be an array"));if(n&&!(n instanceof Promise))return Promise.reject(new Error("`promise` must be a promise"));const r=[],o=n?[].concat(n):[],i=[];return t.forEach(e=>o.push(window.fetch(e).then(e=>{return[e.clone().text(),e.blob()]}).then(e=>{return Promise.all(e).then(e=>{r.push({text:e[0],blob:e[1]})})}))),Promise.all(o).then(()=>{return r.forEach(t=>{i.push({then:n=>{"text/css"===t.blob.type?e(window,document,"style",t,n):e(window,document,"script",t,n)}})}),Promise.all(i)})};return t}(); fetchInject( $jquery_dependent_script_paths_json , fetchInject([ "{$jquery_script_path}" ])); fetchInject(["{$lazysizes_path}"]) })(); EOD; echo "<script>{$inline_script}</script>"; } add_action('wp_head', 'add_inline_script', 0); 

Снижает воспринимаемую задержку на акции Twenty Seventeen на ~ 50 процентов. Может применяться к любой теме.

Как это работает?

  • Заменяет все сценарии, wp_enqueue_script поэтому они быстрее выводятся с помощью Fetch Injection. (Примечание. См. Fetch Inject docs для обратной совместимости браузера со старыми браузерами.)
  • Использует HEREDOC для вывода всего в теге script в head .
  • Определяет окно Global, которое хочет тема.
  • Загружает все сценарии асинхронно параллельно, как показано на рисунке выше, но ждет, когда jQuery завершит загрузку перед выполнением зависимостей (уже загруженных).
  • Вся работа в IIFE предотвращает утечку каких-либо свободных переменных в область window .

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

Если вы хотите, чтобы элементы были добавлены только один раз, см. Этот ответ: https://wordpress.stackexchange.com/a/131640/117731

Наконец, если вы хотите добавить нижний колонтитул вместо головы, вы можете заменить wp_head на вызов add_action с помощью wp_footer .

EDIT: После некоторого дополнительного копания я нашел этот пост в блоге Дэвида Уолша, предлагая, по крайней мере, простую вставку, начиная с по крайней мере 2012 года. Получайте удовольствие!

wp_enqueue_script() – единственный способ добавить javascript на ваш сайт. Это позволяет вам и другим плагинам объявлять зависимости и даже отменять скрипты, если это необходимо. Как уже упоминалось в другой статье , кэширующие плагины не могут gzip или минимизировать ваши скрипты, если вы не используете надлежащую технику WordPress.

Если вы посмотрите на страницу codex, вы увидите, что вы можете контролировать, находится ли скрипт в верхнем или нижнем колонтитуле.