bağımlılık olmadan wp_add_inline_script


11

Sayfanın altbilgisine enjekte etmek istediğim bir javascript snippet'im var. Bu bir izleme kodu, diyelim ki Google analitiklerine benzer. Bağımlılığı yoktur, bağımsız bir snippettir.

Böyle bir şey yapabilirim

function render_tracking_code(){
    wp_enqueue_script( 'depends-js', 'https://rdiv.com/dummy.js', array(), '0.01', true );
    wp_add_inline_script( 'depends-js', 'aWholeBunchOfJavascriptCode' );
}
add_action( 'wp_enqueue_scripts', 'render_tracking_code' );

Biraz aptal görünüyor (dummy.js boş bir dosya), ancak çalışıyor. Bağımlılığı atlamanın bir yolu var mı?

Yanıtlar:


13

wp_add_inline_style() - bağımlılık olmadan

wp_add_inline_style()Bir kaynak dosyası bağımlılığı olmadan kullanılabilir.

@Flix'ten bir örnek :

wp_register_style( 'dummy-handle', false );
wp_enqueue_style( 'dummy-handle' );
wp_add_inline_style( 'dummy-handle', '* { color: red; }' );

bunu wp_enqueue_scriptsharekete geçiririz.

wp_add_inline_script() - bağımlılık olmadan

43565 numaralı bilete göre , benzer wp_add_inline_script()sürüm için desteklenecek (yorumlardaki doğrulama için @MarcioDuarte, @ dev101 ve @DaveRomsey sayesinde):4.9.9 5.0

wp_register_script( 'dummy-handle-header', '' );
wp_enqueue_script( 'dummy-handle-header' );
wp_add_inline_script( 'dummy-handle-header', 'console.log( "header" );' );

başlıkta , <head>...</head>etiketler arasında aşağıdakileri görüntüleyen :

<script type='text/javascript'>
console.log( "header" );
</script>

Altbilgide görüntülemek için :

wp_register_script( 'dummy-handle-footer', '', [], '', true );
wp_enqueue_script( 'dummy-handle-footer'  );
wp_add_inline_script( 'dummy-handle-footer', 'console.log( "footer" );' );

Varsayılan $positiongiriş argüman wp_add_inline_script()DİR 'after'. 'before'Değeri yukarıda basar 'after'.


wp_add_inline_script()Olmadan bağımlılık hala 4.9.9 için kabul ediliyor, bu mutlaka eklenecektir anlamına gelmez. Bu nedenle, bu özelliği kullanmadan önce onay beklemek akıllıca olacaktır.
Marcio Duarte

1
WP 5.0'dan itibaren gitmemiz güzel .
Dave Romsey

Birisi yorumumu buradan sildi (Birgire'ın aslında WP 5.0 + 'da çalıştığının cevabını doğruladım) ve bir ay sonra aslında bu koda tekrar ihtiyacım vardı, googled, bu cevabı buldum, bir bakışta süpürdüm, yorumumu bulamadım ve taşındım diğer sonuçlara. Bir saat sonra buraya geldim ve aradığım cevap olduğunu fark ettim! Moderatörlük için: lütfen yararlı yorumlarımı SİLMEYİN, sadece diğerleri için değil, bana ve gelecekteki referanslara ve hatırlatıcılara hizmet ederler. Teşekkür ederim.
dev101

Ne yazık ki Sürüm 4.9.x'e bağlı kalmalıyım.
Lucas Vendramini

5

Güncelleştirme: WordPress, v5.0'da bağımlılık olmadan satır içi komut dosyaları ve stiller eklemek için destek ekledi. Uygulamalar için @ birgire'nin cevabına bakınız .

Kullanırken wp_add_inline_script(), WP_Scripts::print_inline_script()nihayetinde satır içi komut dosyalarını çıktılamak için kullanılacaktır. Tasarım gereği, print_inline_script()geçerli bir bağımlılık gerektirir $handle,.

Bu durumda bağımlılık wp_add_inline_script()olmadığından, iş için doğru araç değildir. Sahte bağımlılık dosyası (ve istenmeyen ek HTTP isteği) oluşturmak yerine , satır içi komut dosyasının çıktısını almak için wp_headveya wp_footerkullanın:

add_action( 'wp_head', 'wpse_add_inline_script' );
function wpse_add_inline_script() {
  echo '<script>' . PHP_EOL;

  // aWholeBunchOfJavascriptCode

  echo '</script>' . PHP_EOL;
}

Genellikle, JavaScript bir .jsdosyaya eklenmeli wp_enqueue_script()ve wp_enqueue_scriptskancada kullanılarak sıralanmalıdır . Veriler, komut dosyasının kullanımına açık hale getirilebilir wp_localize_script(). Ancak yine de satır içi bir komut dosyası eklemek gerekebilir.


0

Bunu yapmanın bir yolu, komut dosyanızı bir <script>etiketin içinde yansıtan bir işlev oluşturmak ve onu wp_print_footer_scriptseyleme bağlamaktır . Kesinlikle kontrol etmediğiniz herhangi bir şeyden kaçmaya dikkat etmelisiniz, ancak bu genellikle güvenli ve kolay bir yöntemdir.

Örneğin:

add_action( 'wp_print_footer_scripts', function () { 
    ?>
    <script>
        (function myFunction() { 
            /* your code here */
        })();
    </script>
<?php 
} );
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.