web-dev-qa-db-fra.com

Où et comment mettre en ligne js dans les pages

Sur Internet, des milliers d'articles expliquent comment insérer des scripts externes à l'aide de wp_enqueue_script ().

Quoi qu'il en soit, je n'ai rien trouvé qui explique comment ajouter inline, <script> inclus, des scripts.

J'utilise pour les ajouter au milieu du code de la page, mais je suppose que ce n'est pas le moyen le plus élégant et qu'il devrait exister un meilleur moyen, afin que le code de script soit automatiquement déplacé dans la tête ou dans le pied de page.

Des idées?

Edit: J'ai oublié le 'autour de <script> alors il a été annulé. Maintenant ma question devrait être plus claire

pagesjavascript
4
Bakaburg

Même si mrwweb est correct et que cette technique doit être utilisée, en réalité rien n’est parfait et il arrive que des scripts et des styles en ligne soient utilisés. Vous pouvez utiliser wp script is pour rechercher un script et les afficher dans l'en-tête ou le pied de page à l'aide de wp_head ou wp_footer.

Vous pouvez vous référer à la réponse de scribu dans cet article, wp script de mise en file d'attente en raison de dépendances

2
Wyck

Je regarde le code source Twenty Seventeen functions.php en ce moment et ils ont laissé un motif pour insérer une variable script (ou quoi que ce soit d'autre) dans le document avec la priorité, illustrée ici généralisée à l'aide d'une fonction nommée:

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

Vous voudrez peut-être faire cela, par exemple, si vous chargez un script async tel que l'extrait de suivi alternatif _ Google Analytics async , vous permettant de lancer des requêtes de script non bloquantes dès que le document commence à être analysé (s'il est placé au-dessus des demandes de blocage).

Outre async, les navigateurs modernes nous permettent également de gérer les dépendances asynchrones en tirant parti de l'API Fetch , ce qui permet de charger des dépendances externes de manière asynchrone en parallèle sans risquer une situation de concurrence critique.

L'image et l'exemple suivants illustrent l'utilisation de cette technique pour réduire le temps de chargement d'une page en chargeant des scripts sans bloquer dans le thème Twenty Eleven à l'aide de Fetch Inject :

Loading Twenty Seventeen with Fetch Injection  Figure 1: Vingt-sept scripts de thème plus lazysizes chargement asynchrone en parallèle.

Piggybacking sur une question concernant l’interpolation de chaîne . Utilisez-le en déposant des blocs de contenu arbitraires dans la page avec echo en utilisant NOWDOC ou HEREDOC et global et une interpolation de chaîne avec Fetch Inject, comme illustré ci-dessous:

/**
 * 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);

Réduit d'environ 50 pour cent le temps d'attente perçu sur un thème stock. Peut être appliqué à n'importe quel thème.

Comment ça marche?

  • Remplace all des scripts mis en file d'attente avec wp_enqueue_script afin qu'ils produisent plus rapidement en utilisant Fetch Injection. (Remarque: reportez-vous à la section Fetch Inject Docs pour une compatibilité ascendante des navigateurs avec les navigateurs plus anciens.)
  • Utilise HEREDOC pour tout afficher dans une balise script dans head.
  • Définit une fenêtre globale que le thème veut.
  • Charge tous les scripts de manière asynchrone en parallèle, comme indiqué dans l'image ci-dessus, mais attend que jQuery ait fini de se charger avant d'exécuter les dépendances (déjà téléchargées).
  • Fait tout le travail dans un IIFE pour empêcher toute variable libre de fuir dans la portée window.

HEREDOC est idéal pour contrôler la sortie lorsque vous devez conserver des notices de copyright ou un autre formatage via des modèles mixtes. Cela permet également d’accroître la vitesse de débogage des scripts lorsque vous ne disposez pas du code simplifié ou que vous souhaitez simplement insérer quelque chose dans le document à des fins de test.

Si vous souhaitez vous assurer que les éléments ne sont ajoutés qu'une fois, consultez la réponse suivante: https://wordpress.stackexchange.com/a/131640/117731

Enfin, si vous vouliez ajouter au pied de page au lieu de la tête, vous pouvez remplacer wp_head dans l'appel add_action par wp_footer.

EDIT: Après quelques recherches, j’ai trouvé ce post sur le blog de David Walsh, suggérant qu’au moins une simple insertion de ligne était disponible depuis au moins 2012. Amusez-vous!

4
Josh Habdas

wp_enqueue_script() est le seul moyen d’ajouter du javascript à votre site. Il vous permet, ainsi qu'aux autres plugins, de déclarer des dépendances et même de désenregistrer des scripts si nécessaire. Comme mentionné sur un autre fil aujourd'hui, les plugins de mise en cache ne peuvent pas gzip ou minimiser vos scripts si vous n'utilisez pas la technique WordPress appropriée.

Si vous consultez la page du codex, vous verrez que vous pouvez contrôler si le script se trouve dans l'en-tête ou le pied de page.

2
mrwweb