जावास्क्रिप्ट फ़ाइल में विषय पथ

Question

मुझे जावास्क्रिप्ट फ़ाइल के भीतर अपनी थीम फ़ाइल में पथ शामिल करने की आवश्यकता है। मैं इसे किस तरह लूं? मैंने पहले ही कोशिश कर ली है:

var templateUrl = "<?php get_stylesheet_directory_uri(); ?>";

function LightboxOptions() {
  this.fileLoadingImage = "'"+templateUrl+"/img/loading.gif'";
  this.fileCloseImage = "'"+templateUrl+"/img/close.png'";
  this.resizeDuration = 700;
  this.fadeDuration = 500;
  this.labelImage = "Image";
  this.labelOf = "of";
}

यह मुझे रास्ता नहीं देता है, लेकिन <?php get_stylesheet_directory_uri(); ?>वास्तविक पथ के बजाय सिर्फ सम्मिलित करता है। कोई विचार? अग्रिम में धन्यवाद!

Answer 1

आप जो खोज रहे हैं वह wp_localize_script फ़ंक्शन है ।

स्क्रिप्ट को एंक्लेट करते समय आप इसका इस्तेमाल इस तरह से करते हैं

wp_register_script( 'my-script', 'myscript_url' );
wp_enqueue_script( 'my-script' );
$translation_array = array( 'templateUrl' => get_stylesheet_directory_uri() );
//after wp_enqueue_script
wp_localize_script( 'my-script', 'object_name', $translation_array );

आपकी शैली में। Js, होने जा रहा है:

var templateUrl = object_name.templateUrl;
...

Comments

बहुत बढ़िया। एक जादू की तरह काम किया!

— जेम्स हॉल

Answer 2

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

1) आप अपने function.php फ़ाइल में वर्डप्रेस द्वारा सुझाए गए wp_localize_script () का उपयोग कर सकते हैं । यह हेडर में एक जावास्क्रिप्ट ऑब्जेक्ट बनाएगा, जो रनटाइम पर आपकी स्क्रिप्ट के लिए उपलब्ध होगा।

उदाहरण :

wp_register_script('custom-js',get_stylesheet_directory_uri().'/js/custom.js',array(),NULL,true);
wp_enqueue_script('custom-js');

$wnm_custom = array( 'stylesheet_directory_uri' => get_stylesheet_directory_uri() );
wp_localize_script( 'custom-js', 'directory_uri', $wnm_custom );

और निम्नलिखित के रूप में अपने जेएस फ़ाइल में उपयोग कर सकते हैं:

alert(directory_uri.stylesheet_directory_uri); 

2) आप एक जावास्क्रिप्ट स्निपेट बना सकते हैं जो टेम्प्लेट डायरेक्टरी उरई को एक वैरिएबल में सेव करता है, और इसे बाद में निम्नानुसार उपयोग कर सकते हैं: जेएस फाइल से पहले हैडर में इस कोड को जोड़ें। जिसमें आप इस पथ का उपयोग करना चाहते हैं। उदाहरण:

<script type="text/javascript">
var stylesheet_directory_uri = "<?php echo get_stylesheet_directory_uri(); ?>";
</script>

और निम्नलिखित के रूप में अपने जेएस फ़ाइल में उपयोग कर सकते हैं:

alert(stylesheet_directory_uri);

Comments

wp_localize काम करता है! मैंने दूसरा तरीका भी आजमाया, लेकिन मैंने इसे काम करने के लिए प्रबंधित नहीं किया। wp_localize कार्य शायद बेहतर अभ्यास है, नहीं?

— charlenemasters

दूसरे दृष्टिकोण को चर घोषित करने और इसे एक्सेस करने का क्रम बनाने के लिए @charlenemasters बहुत महत्वपूर्ण है।

— विनोद दलवी

दूसरा तरीका echoकाम करने के लिए होना चाहिए

— क्लॉडिउ क्रेंगना

@ कलैउड़ीउरंगिया धन्यवाद, प्रतिध्वनि होनी चाहिए:var stylesheet_directory_uri = "<?php echo get_stylesheet_directory_uri(); ?>";

— ycc_swe

Answer 3

आप अपनी जावास्क्रिप्ट फ़ाइलों को स्थानीय कर सकते हैं, जो आपको PHP परिभाषित मूल्यों (जैसे स्थानीयकरण या निर्देशिकाओं) से भरी एक जावास्क्रिप्ट सरणी उत्पन्न करने का अवसर देता है।

यदि आप अपनी जावास्क्रिप्ट फ़ाइल गर्त wp_enqueue_scriptया wp_register_scriptउसके आसान को इस तरह सेट करना चाहते हैं:

function localize_vars() {
    return array(
        'stylesheet_directory' => get_stylesheet_directory_uri()
    );
}

wp_enqueue_script( 'my_script', plugins_url( 'my_plugin/my_script.js' ), array( 'jquery' ) );
wp_localize_script( 'my_script', 'my_unique_name', localize_vars() );

और आपकी जावास्क्रिप्ट फ़ाइलों में, आप इन चरों को कॉल कर सकते हैं:

my_unique_name.stylesheet_directory

Answer 4

मैंने वर्डप्रेस थीम डायरेक्टरी प्राप्त करने और इसे एक वैश्विक जावास्क्रिप्ट चर के रूप में संग्रहीत करने के लिए इस सुविधाजनक छोटे तरीके का उपयोग करना शुरू किया (सभी एक जावास्क्रिप्ट फ़ाइल के भीतर से:

function getThemeDir() {
    var scripts = document.getElementsByTagName('script'),
        index = scripts.length - 1,
        myScript = scripts[index];

    return myScript.src.replace(/themes\/(.*?)\/(.*)/g, 'themes/$1');
}
themeDir = getThemeDir();

यह केवल तभी काम करेगा जब निम्न स्थितियाँ मिलेंगी:

    1. इस स्निपेट को बाहरी जावास्क्रिप्ट फ़ाइल के माध्यम से निष्पादित किया जाता है - इस तरह:

<script src="/wp-content/themes/themename/assets/app.js"></script>

    2. जेएस फ़ाइल आपकी साइट की थीम डायरेक्टरी (या उपनिर्देशिका) में रहती है।

Answer 5

मैंने इस तरह से इसे किया।

जावास्क्रिप्ट फ़ाइल और छवियों को विषय-फ़ोल्डर / परिसंपत्तियों में रखें

और निम्न फ़ाइलों को संपादित करें।

फ़ंक्शन में

/* for javascript (only when using child theme) */
wp_enqueue_script('my-script', get_template_directory_uri() . '-child/assets/test.js');
wp_localize_script('my-script', 'myScript', array(
    'theme_directory' => get_template_directory_uri() 
));

आपकी जावास्क्रिप्ट फ़ाइल में

var url = myScript.theme_directory + '-child/assets/';

Answer 6

यदि जावास्क्रिप्ट फ़ाइल को व्यवस्थापक डैशबोर्ड से लोड किया गया है, तो आप इस जावास्क्रिप्ट फ़ंक्शन का उपयोग करके अपने वर्डप्रेस इंस्टॉलेशन की जड़ प्राप्त कर सकते हैं।

function getHomeUrl() {
  var href = window.location.href;
  var index = href.indexOf('/wp-admin');
  var homeUrl = href.substring(0, index);
  return homeUrl;
}

तो बस नीचे की तरह अपने विषय के लिए पथ से संपर्क करें।

var myThemePath = getHomeUrl() + '/wp-content/themes/myTheme';