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

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

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)

Kullan wp_enqueue_script()senin tema

Temel cevap admin için ön uç için wp_enqueue_script()bir wp_enqueue_scriptskanca kullanmaktır admin_enqueue_scripts. Böyle bir şeye benzeyebilir (temanızın functions.phpdosyasından aradığınızı varsayar ; stil sayfası dizinine nasıl başvurduğumu not edin):

<?php
add_action( 'wp_enqueue_scripts', 'mysite_enqueue' );

function mysite_enqueue() {
  $ss_url = get_stylesheet_directory_uri();
  wp_enqueue_script( 'mysite-scripts', "{$ss_url}/js/mysite-scripts.js" );
}

Bu temeldir.

Önceden Tanımlanmış ve Birden Çok Bağımlı Komut Dosyası

Ancak diyelim ki, hem jQuery hem de jQuery UI'yı dahil etmek istediğinizi ve WordPress'in içerdiği varsayılan komut dosyaları listesinden Sıralanabilir'i ve komut dosyanızın bunlara bağlı olmasını mı istediğinizi varsayalım. Kolay, sadece WordPress'te tanımlanan önceden tanımlanmış tutamaçları kullanan ilk iki komut dosyasını ekleyin wp_enqueue_script()ve komut dosyanız için, her bir komut dosyası tarafından kullanılan komut dosyası tutamaçlarının bir dizisi olan 3. bir parametre sağlayın :

<?php
add_action( 'wp_enqueue_scripts', 'mysite_enqueue' );

function mysite_enqueue() {
  $ss_url = get_stylesheet_directory_uri();
  wp_enqueue_script( 'mysite-scripts', "{$ss_url}/js/mysite-scripts.js", array( 'jquery', 'jquery-ui-sortable' ) );
}

Eklentideki Komut Dosyaları

Ya bunun yerine bir eklentide yapmak istersen? plugins_url()Javascript dosyanızın URL'sini belirtmek için işlevi kullanın :

<?php
define( 'MY_PLUGIN_VERSION', '2.0.1' );
add_action( 'wp_enqueue_scripts', 'my_plugin_enqueue' );

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

Komut Dosyalarınızı Sürüm Oluşturma

Ayrıca yukarıda eklentimize bir sürüm numarası verdiğimizi ve bunu 4. parametre olarak geçirdiğimizi unutmayın wp_enqueue_script(). Sürüm numarası, komut dosyasında URL'de sorgu argümanı olarak kaynak olarak verilir ve sürüm değiştiğinde tarayıcıyı önbelleğe alınmış dosyayı yeniden indirmeye zorlar.

Komut Dosyalarını yalnızca ihtiyaç duyulan sayfalara yükleyin

Web Performans 1 kuralı diyor HTTP istekleri Minimize sen gerektiğinde sadece yüklemek için komut sınırı olmalı mümkünse bu yüzden. Örneğin, betiğinize yalnızca yöneticide ihtiyaç duyuyorsanız, onu admin_enqueue_scriptskanca kullanarak yönetici sayfalarıyla sınırlandırın :

<?php
define( 'MY_PLUGIN_VERSION', '2.0.1' );
add_action( 'admin_enqueue_scripts', 'my_plugin_admin_enqueue' );

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

Komut Dosyalarınızı Altbilgiye Yükleme

Komut dosyalarınız altbilgiye yüklenmesi gerekenlerden biriyse wp_enqueue_script(), WordPress'e geciktirmesini ve altbilgiye yerleştirmesini söyleyen bir 5. parametre vardır (temanızın yanlış davranmadığını ve gerçekte wp_footer kancasını tümüyle çağırdığını varsayarak) iyi WordPress temaları gerekir ):

<?php
define( 'MY_PLUGIN_VERSION', '2.0.1' );
add_action( 'admin_enqueue_scripts', 'my_plugin_admin_enqueue' );

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

İnce Taneli Kontrol

Bundan daha hassas bir kontrol gerektiriyorsa, Ozh'un Nasıl Yapılır: WordPress Eklentinizle Javascript Yüklemek başlıklı harika bir makalesi vardır .

Kontrolü Elde Etmek için Komut Dosyalarını Devre Dışı Bırakma

Justin Tadlock'un , aşağıdaki durumlarda komut dosyalarını ve stilleri nasıl devre dışı bırakabileceği konulu güzel bir makaleye sahiptir :

1. Birden fazla dosyayı tek bir dosyada birleştirin (kilometre burada JavaScript ile değişebilir).
2. Dosyaları yalnızca komut dosyasını veya stilini kullandığımız sayfalara yükleyin.
3. Basit CSS ayarlamaları yapmak için style.css dosyamızdaki!

Değerleri PHP'den JS'ye Geçmek wp_localize_script()

Vladimir Prelovac'ın blogunda, WordPress eklentilerine JavaScript kodu eklemek için En İyi Uygulama başlıklı harika bir makalesi var. Burada wp_localize_script(), sunucu tarafı PHP'nizdeki değişkenlerin değerini daha sonra müşteri tarafı Javascript'inizde kullanılacak şekilde ayarlamanıza izin vermek için kullanmayı açıklıyor .

Gerçekten İnce Taneli Kontrol wp_print_scripts()

Ve gerçekten hassas denetim ihtiyaç nihayet eğer içine bakabilirsiniz wp_print_scripts()üzerinde tartışıldığı gibi Bira Planet başlıklı bir yayında CSS ve JavaScript şartlı Ve Dahil Nasıl Sadece mesaj gönderdiği Gerekli olduğunda .

Epiloque

Bu, WordPress ile Javascript dosyalarını dahil etmenin En İyi Uygulamaları için geçerlidir. Bir şeyi kaçırdıysam (ki muhtemelen sahip olduğum gibi) yorumlarda bana bildirdiğinizden emin olun, böylece gelecekteki gezginler için bir güncelleme ekleyebilirim.

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 Eklenti başlığındaki Scriptler 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ının envanter önceliklerini belirler ve doğru sırayla çıkarır, kısacası hepsi otomatik olarak çalışır WordPress tarafından sizin için.

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 başka teklifler 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 wp_add_inline_script, bu betiği ana js dosyasına (diyelim mainjs) şöyle bağlamak için kullanabilirsiniz :

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

Tercih edilen yöntemim, iyi performans elde etmektir, bu yüzden wp_enqueue_scripther şeyi paralel olarak eşzamanlı olarak yüklemek için HEREDOC'u Fetch API ile birlikte kullanmak yerine :

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

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