it-swarm.asia

Özel javascript dosyalarını siteye eklemek için tercih edilen yol nedir?

Senaryolarımı zaten ekledim, ancak tercih edilen yolu bilmek istedim.
Sadece şablonumun <script> içine doğrudan bir header.php etiketi koydum.

Harici veya özel js dosyaları eklemek için tercih edilen bir yöntem var mı?
Bir js dosyasını tek bir sayfaya nasıl bağlarım? (Ana sayfam aklımda)

68
naugtur

Mikes’e ilâç kullanmanın harika bir resmini iltifat etmek için, sadece sınırsızlıklar olarak dahil edilen betiklerin sıkıştırılmasının gerekmediğine işaret etmek istiyorum.

Mike'ın cevabındaki bir - Eklentideki Scripts başlığının altındaki örneği kullanacağım.

define('MY_PLUGIN_VERSION','2.0.1');

add_action( 'wp_enqueue_scripts', 'my_plugin_enqueue_scripts' );
function my_plugin_enqueue_scripts() {
    wp_enqueue_script('jquery');
    wp_enqueue_script('jquery-ui-sortable');
    wp_enqueue_script('my-script',plugins_url('/js/my-script.js',__FILE__),array('jquery','jquery-ui-sortable'),MY_PLUGIN_VERSION);
}

Bu okumak için kesilebilir ..

define('MY_PLUGIN_VERSION','2.0.1');

add_action( 'wp_enqueue_scripts', 'my_plugin_enqueue_scripts' );
function my_plugin_enqueue_scripts() {
    wp_enqueue_script('my-script', plugins_url( '/js/my-script.js', __FILE__ ), array('jquery','jquery-ui-sortable'), MY_PLUGIN_VERSION);
}

Bağımlılıkları belirlediğinizde, WordPress onları betiğiniz için hazır bulur ve zorlar, bu nedenle bu komut dosyaları için bağımsız çağrılar yapmanız gerekmez.

Ek olarak, bazılarınız birden fazla bağımlılık oluşturmanın komut dosyalarının yanlış sırayla çıkmasına neden olup olmadığını merak ediyor olabilirsiniz, burada bir örnek vereyim

wp_enqueue_script( 'first-script', 'example/path/example_script_1.js', array('second-script','third-script') );

Eğer ikinci komut dosyası üçüncü komut dosyasına bağımlıysa (yani, üçüncü komut dosyası yüklenmeli), bu önemli olmaz, WordPress bu komut dosyaları için önceleme belirleyecek ve bunları doğru sırayla çıkaracak, kısacası hepsi otomatik olarak çalışacaktır. WordPress tarafından sizin için.

11
t31os

Ayrı bir dosyaya dahil etmek istemediğiniz küçük komut dosyaları için, örneğin dinamik olarak oluşturuldukları için, WordPress 4.5 ve ayrıca wp_add_inline_script . Bu işlev temel olarak komut dosyasını başka bir komut dosyasına mandallar.

Örneğin, bir tema geliştirdiğinizi ve müşterinizin seçenekler sayfasında kendi komut dosyalarını (Google Analytics veya AddThis gibi) ekleyebilmesini istediğinizi varsayalım. Daha sonra, bu betiği ana js dosyanıza kilitlemek için wp_add_inline_script komutunu kullanabilirsiniz (mainjs diyelim):

$custom_script = get_option('my-script')
if (!empty($custom_script)) wp_add_inline_script ('mainjs', $custom_script);
0
cjbj

Tercih ettiğim yöntem iyi performans elde etmektir, bu yüzden wp_enqueue_script kullanmak yerine her şeyi paralel olarak eşzamanlı olarak yüklemek için HEREDOC'u Fetch API ile birlikte kullanıyorum:

$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' )
];
$jquery_dependent_script_paths_json = json_encode($jquery_dependent_script_paths);
$inline_scripts = <<<EOD
<script>
(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}"
  ]));
})();
</script>
EOD;

Sonra bunları kafaya, bazen bunun gibi stillerle birlikte yerleştirin:

function wc_inline_head() {
  global $inline_scripts;
  echo "{$inline_scripts}";
  global $inline_styles;
  echo "{$inline_styles}";
}

Şuna benzeyen, her şeyi bir seferde yükleyen, ancak yürütme sırasını kontrol eden:

 enter image description here 

Not: Bu, tüm tarayıcılarda bulunmayan Fetch API'sinin kullanılmasını gerektirir.

0
Josh Habdas