साइट पर कस्टम जावास्क्रिप्ट फ़ाइलों को जोड़ने का पसंदीदा तरीका क्या है?

Question

मैंने अपनी स्क्रिप्ट पहले ही जोड़ ली है, लेकिन मैं पसंदीदा तरीका जानना चाहता था।
मैंने <script>सीधे header.phpअपने टेम्प्लेट में एक टैग लगाया ।

क्या बाहरी या कस्टम js फ़ाइलों को सम्मिलित करने का एक पसंदीदा तरीका है?
मैं किसी एकल पृष्ठ पर js फ़ाइल कैसे बाँधूंगा? (मेरे पास मुख पृष्ठ है)

Comments

कुछ दिनों पहले से मेरे प्रश्न पर एक नज़र डालें , आपके प्रश्न के भाग का उत्तर है: - वर्डप्रेस के साथ बाहरी jQuery / जावास्क्रिप्ट फ़ाइलों को कैसे लिंक करें

— बेन एवरर्ड

बड़ा अच्छा सवाल! यह एक बहुत ही सामान्य बात है जो लोग पूछते हैं और कुछ ऐसा है जिसे हमें निश्चित रूप से यहां अच्छी तरह से प्रलेखित करना होगा।

— माइकस्किंकेल

धन्यवाद। मैंने पहले ही देखा था, लेकिन इसने मेरे सवाल को पूरी तरह से कवर नहीं किया।

— नौगटुर

यह ठीक है, मुझे पता था कि यह आपके सभी सवालों का जवाब नहीं देगा, लेकिन भविष्य में सर्फिंग करने वाले लोगों के लिए अन्य पोस्ट का संदर्भ है :-)

— बेन एवरर्ड

इसके अलावा wordpress.stackexchange.com/questions/575/…

— naugtur

Answer 1

wp_enqueue_script()अपने विषय में उपयोग करें

मूल उत्तर व्यवस्थापक के लिए फ्रंट एंड के लिए wp_enqueue_script()एक wp_enqueue_scriptsहुक में उपयोग करना है admin_enqueue_scripts। यह कुछ इस तरह दिख सकता है (जो आप अपने विषय की functions.phpफ़ाइल से कॉल कर रहे हैं , ध्यान दें कि मैं कैसे स्टाइलशीट निर्देशिका का संदर्भ देता हूं):

<?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" );
}

यही मूल बात है।

पूर्व-परिभाषित और कई आश्रित लिपियों

लेकिन मान लीजिए कि आप वर्डप्रेस के साथ शामिल डिफ़ॉल्ट स्क्रिप्ट की सूची से jQuery और jQuery UI दोनों को शामिल करना चाहते हैं और आप चाहते हैं कि आपकी स्क्रिप्ट उन पर निर्भर हो? आसान, बस वर्डप्रेस में परिभाषित पूर्व-परिभाषित हैंडल का उपयोग करके पहले दो स्क्रिप्ट शामिल करें और आपकी स्क्रिप्ट के लिए एक 3 पैरामीटर प्रदान करें wp_enqueue_script()जो कि स्क्रिप्ट के प्रत्येक हैंडल द्वारा उपयोग किए जाने वाले स्क्रिप्ट हैंडल की एक सरणी है, जैसे:

<?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' ) );
}

एक प्लगइन में लिपियों

यदि आप इसके बजाय एक प्लगइन में करना चाहते हैं तो क्या होगा? plugins_url()अपनी जावास्क्रिप्ट फ़ाइल का URL निर्दिष्ट करने के लिए फ़ंक्शन का उपयोग करें :

<?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 );
}

आपके लिपियों का संस्करण

यह भी ध्यान दें कि ऊपर हमने अपने प्लगइन को एक वर्जन नंबर दिया और इसे 4 के पैरामीटर के रूप में पास किया wp_enqueue_script()। संस्करण संख्या स्क्रिप्ट में URL में क्वेरी तर्क के रूप में स्रोत में आउटपुट है और संस्करण बदलने पर संभवतः कैश की गई फ़ाइल को फिर से डाउनलोड करने के लिए ब्राउज़र को मजबूर करने का कार्य करता है।

केवल उन पृष्ठों पर लिपियों को लोड करें जहाँ ज़रूरत है

वेब प्रदर्शन का पहला नियम HTTP अनुरोधों को कम से कम करने के लिए कहता है, इसलिए जब भी संभव हो आपको केवल जहां लोड करने के लिए स्क्रिप्ट को सीमित करना चाहिए। उदाहरण के लिए यदि आपको केवल व्यवस्थापक में अपनी स्क्रिप्ट की आवश्यकता है, तो admin_enqueue_scriptsहुक का उपयोग करके इसे पृष्ठों तक सीमित करने के लिए इसे सीमित करें :

<?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 );
}

पाद में अपनी लिपियों को लोड करें

यदि आपकी स्क्रिप्ट उन लोगों में से एक है जिन्हें पाद लेख में लोड करने की आवश्यकता है, तो इसका एक 5 वाँ पैरामीटर है wp_enqueue_script()जो वर्डप्रेस को इसे देरी से बताता है और इसे पाद लेख में रखता है (यह मानते हुए कि आपका विषय गलत नहीं था और यह वास्तव में wp_freeer हुक को सभी की तरह कहता है। अच्छी वर्डप्रेस थीम ):

<?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 );
}

महीन दानेदार नियंत्रण

अगर आपको इससे बेहतर नियंत्रण की आवश्यकता है तो Ozh के पास एक बेहतरीन लेख है जिसका शीर्षक How To: Load Javascript With Your WordPress Plugin है जो अधिक विवरण देता है।

नियंत्रण प्राप्त करने के लिए लिपियों को अक्षम करना

जस्टिन टैडलॉक का एक अच्छा लेख है, जिस पर आप चाहते हैं कि स्क्रिप्ट और शैलियों को कैसे निष्क्रिय करें :

1. एकल फ़ाइलों में कई फ़ाइलों को मिलाएं (यहाँ जावास्क्रिप्ट के साथ माइलेज भिन्न हो सकती है)।
2. केवल स्क्रिप्ट या शैली का उपयोग कर रहे पृष्ठों पर फ़ाइलों को लोड करें।
3. सरल CSS समायोजन करने के लिए हमारी style.css फ़ाइल में महत्वपूर्ण उपयोग करना बंद करें।

PHP से JS में पासिंग वैल्यूज़ के साथ wp_localize_script()

अपने ब्लॉग पर व्लादिमीर प्रीलोवैक के पास वर्डप्रेस प्लगइन्स में जावास्क्रिप्ट कोड जोड़ने के लिए सर्वोत्तम अभ्यास का एक बेहतरीन लेख है, जहां वह wp_localize_script()आपके सर्वर-साइड PHP में चर के मूल्य को बाद में आपके क्लाइंट-साइड जावास्क्रिप्ट में उपयोग करने की अनुमति देने के लिए चर्चा करते हैं ।

वास्तव में ठीक अनाज नियंत्रण के साथ wp_print_scripts()

और अंत में अगर आपको वास्तव में ठीक-ठाक नियंत्रण की आवश्यकता है, तो आप पोस्ट के अनुसार बीयर प्लैनेटwp_print_scripts() पर चर्चा कर सकते हैं कि कैसे सीएसएस और जावास्क्रिप्ट को सम्मिलित किया जाए और केवल जब पोस्ट की आवश्यकता हो ।

Epiloque

वर्डप्रेस के साथ जावास्क्रिप्ट फ़ाइलों को शामिल करने के सर्वोत्तम तरीकों के लिए इसके बारे में है। अगर मुझे कुछ याद आया (जो मेरे पास शायद है) तो मुझे टिप्पणियों में बताना सुनिश्चित करें ताकि मैं भविष्य के यात्रियों के लिए एक अपडेट जोड़ सकूं।

Comments

यह एक बहुत बड़ा लेख है! अब मेरे पास चुनने के लिए बहुत कुछ है;)

— naugtur

ठीक है, यह काम किया। अब प्रश्न का दूसरा भाग - मैं मुखपृष्ठ पर कैसे जाँचूं?

— नौगटुर

यहाँ उत्तर के लिए देखें: wordpress.stackexchange.com/questions/575/…

— naugtur

admin_initमाँगने के बदले हुक देना is_admin()। यदि आप Google CDN का उपयोग करते हैं तो संस्करण पैरामीटर को हटा दें , अन्यथा ब्राउज़र कैश दो संस्करण धारण करेगा: एक अन्य साइटों से क्वेरी स्ट्रिंग के बिना और आपके।

— FUXIA

@toscho - अच्छा कॉल, मैं अपडेट करूंगा।

— माइकस्किंकल

Answer 2

तारीफों का उपयोग करते हुए माइक के अद्भुत चित्रण के लिए, मैं सिर्फ यह बताना चाहता हूं कि लिपियों को निर्भरता के रूप में शामिल करने की आवश्यकता नहीं है ...

मैं माइक के जवाब में एक प्लगइन शीर्षक में लिपियों के तहत उदाहरण का उपयोग करूँगा ।

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);
}

इसे पढ़ने के लिए नीचे ट्रिम किया जा सकता है।

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);
}

जब आप निर्भरताएँ सेट करते हैं, तो वर्डप्रेस उन्हें आपकी स्क्रिप्ट के लिए तैयार करेगा और उन्हें संलग्न करेगा, इसलिए आपको इन स्क्रिप्ट्स के लिए कोई स्वतंत्र कॉल करने की आवश्यकता नहीं है।

इसके अतिरिक्त, आप में से कुछ सोच रहे होंगे कि क्या कई निर्भरताएँ सेट करने से स्क्रिप्ट गलत क्रम में आउटपुट हो सकती है, तो मुझे एक उदाहरण दें

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

यदि स्क्रिप्ट दो स्क्रिप्ट तीन (यानी स्क्रिप्ट तीन पहले लोड होनी चाहिए) पर निर्भर थी, तो यह मायने नहीं रखेगा, वर्डप्रेस उन स्क्रिप्ट के लिए प्राथमिकता प्राथमिकताएं निर्धारित करेगा और उन्हें सही क्रम में आउटपुट करेगा, संक्षेप में, यह सब स्वचालित रूप से काम हो जाता है वर्डप्रेस द्वारा आपके लिए।

Comments

मुझे लगता initहै कि एनकाउंटर करने के लिए उचित जगह नहीं है।

— ब्रासोफिलो

कोड को मूल रूप से माइक के जवाब से कॉपी किया गया था, फिर एक बिंदु को चित्रित करने के लिए समायोजित किया गया। आप हालांकि सही हैं, इसलिए मैंने बेहतर और अधिक सही हुक का उपयोग करने के लिए उत्तर अपडेट किया है।

— 14:31 बजे t31os

Answer 3

स्क्रिप्ट के छोटे टुकड़ों के लिए, जिन्हें आप एक अलग फ़ाइल में शामिल नहीं करना चाहते हैं, उदाहरण के लिए क्योंकि वे गतिशील रूप से उत्पन्न होते हैं, वर्डप्रेस 4.5 और आगे की पेशकश wp_add_inline_script। यह फ़ंक्शन मूल रूप से स्क्रिप्ट को किसी अन्य स्क्रिप्ट पर ले जाता है।

उदाहरण के लिए, मान लीजिए कि आप एक थीम विकसित कर रहे हैं और चाहते हैं कि आपका ग्राहक विकल्प पृष्ठ के माध्यम से अपनी स्वयं की स्क्रिप्ट (जैसे Google Analytics या AddThis) सम्मिलित कर सके। फिर आप wp_add_inline_scriptइस स्क्रिप्ट को अपनी मुख्य js- फाइल में लेट कर सकते हैं (मान लें कि mainjs) इस तरह है:

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

Answer 4

मेरा पसंदीदा तरीका अच्छा प्रदर्शन प्राप्त करना है, इसलिए wp_enqueue_scriptमैं बराबरी से सब कुछ लोड करने के लिए HEREDOC का उपयोग करने के बजाय समानांतर में सब कुछ समान रूप से लोड करता हूं:

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

और फिर उन्हें सिर में डालें, कभी-कभी इस तरह की शैलियों के साथ:

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

इस तरह दिखने वाले जलप्रपात के परिणामस्वरूप, एक ही बार में सब कुछ लोड हो रहा है लेकिन निष्पादन आदेश को नियंत्रित करना है:

नोट: इसके लिए Fetch API का उपयोग आवश्यक है, जो सभी ब्राउज़रों में उपलब्ध नहीं है।