मैंने जो समाधान देखे हैं, वे एक विषय में जावास्क्रिप्ट सुविधाओं को जोड़ने के दृष्टिकोण से हैं। हालांकि, ओपी ने विशेष रूप से पूछा, "मैं वास्तव में इसे एक एकल के लिए कैसे जोड़ता हूं वर्डप्रेस पृष्ठ के ?" ऐसा लगता है कि यह हो सकता है कि मैं अपने वर्डप्रेस ब्लॉग में जावास्क्रिप्ट का उपयोग कैसे करूं, जहां अलग-अलग पोस्ट में विभिन्न जावास्क्रिप्ट-संचालित "विगेट्स" हो सकते हैं। उदाहरण के लिए, कोई पोस्ट उपयोगकर्ता को चर (स्लाइडर्स, चेकबॉक्स, टेक्स्ट इनपुट फ़ील्ड) और प्लॉट या परिणामों को सूचीबद्ध करने की अनुमति दे सकती है।
जावास्क्रिप्ट परिप्रेक्ष्य से शुरू:
- एक अलग ".js" फ़ाइल में अपने जावास्क्रिप्ट कार्यों को लिखें
अपने पोस्ट के html में महत्वपूर्ण जावास्क्रिप्ट को शामिल करने के बारे में भी न सोचें - अपने कोड के साथ एक जावास्क्रिप्ट फ़ाइल, या फ़ाइलें बनाएँ।
- अपने पोस्ट के HTML के साथ अपने जावास्क्रिप्ट को इंटरफेस करें
यदि आपका जावास्क्रिप्ट विजेट html नियंत्रण और फ़ील्ड के साथ इंटरैक्ट करता है, तो आपको यह समझने की आवश्यकता होगी कि जावास्क्रिप्ट से उन तत्वों को कैसे क्वेरी और सेट करें, और यूआई तत्वों को आपके जावास्क्रिप्ट कार्यों को कैसे करने दें। यहां कुछ उदाहरण दिए गए हैं; सबसे पहले, जावास्क्रिप्ट से:
var val = document.getElementById(“AM_Freq_A_3”).value;
और html से:
<input type="range" id="AM_Freq_A_3" class="freqSlider" min="0" max="1000" value="0" oninput='sliderChanged_AM_widget(this);'/>
- अपने जावास्क्रिप्ट विजेट के आरंभीकरण फ़ंक्शन को कॉल करने के लिए jQuery का उपयोग करें
जब पृष्ठ इसके लिए तैयार हो तो अपने जावास्क्रिप्ट विजेट को कॉन्फ़िगर और आरेखित करने वाले अपने फ़ंक्शन के नाम का उपयोग करते हुए, इसे अपनी .js फ़ाइल में जोड़ें:
jQuery(document).ready(function( $ ) {
your_init_function();
});
- अपने पोस्ट के HTML कोड में, अपनी पोस्ट के लिए आवश्यक स्क्रिप्ट लोड करें
वर्डप्रेस कोड एडिटर में, मैं आमतौर पर पोस्ट के अंत में स्क्रिप्ट निर्दिष्ट करता हूं। उदाहरण के लिए, मेरे पास मेरी मुख्य निर्देशिका में एक स्क्रिप्ट फ़ोल्डर है। मेरे अंदर आम जावास्क्रिप्ट के साथ एक उपयोगिताओं की निर्देशिका है जो मेरे कुछ पोस्ट साझा कर सकते हैं - इस मामले में मेरे अपने गणित उपयोगिता फ़ंक्शन और फ़्लोट्र 2 प्लॉटिंग लाइब्रेरी में से कुछ। उदाहरण के लिए, मीडिया प्रबंधक का उपयोग करने के बजाय दिनांक के आधार पर उपनिर्देशिकाओं के साथ एक और निर्देशिका में पोस्ट-विशिष्ट जावास्क्रिप्ट को समूहित करना मुझे अधिक सुविधाजनक लगता है।
<script type="text/javascript" src="/scripts/utils/flotr2.min.js"></script>
<script type="text/javascript" src="/scripts/utils/math.min.js"></script>
<script type="text/javascript" src="/scripts/widgets/20161207/FreqRes.js"></script>
- Enqueue jQuery
Wordpress jQuery को पंजीकृत करता है, लेकिन यह तब तक उपलब्ध नहीं होता है जब तक आप Wordpress को यह नहीं बताते कि आपको इसकी आवश्यकता है, इसे enqueuing करके। यदि आप नहीं करते हैं, तो jQuery कमांड विफल हो जाएगी। कई सूत्र आपको बताते हैं कि इस कमांड को अपने फ़ंक्शन में कैसे जोड़ें।
सबसे पहले, किसी विषय को संपादित करना एक बुरा विचार है - विषय का कोई भी भविष्य का अद्यतन आपके परिवर्तनों को मिटा देगा। बच्चे की थीम बनाओ। ऐसे:
https://developer.wordpress.org/themes/advanced-topics/child-themes/
बच्चे के फ़ंक्शन.php फ़ाइल एक ही नाम के मूल विषय की फ़ाइल को ओवरराइड नहीं करती है, यह इसमें जोड़ता है। चाइल्ड-थीम ट्यूटोरियल सुझाव देता है कि माता-पिता और बच्चे के स्टाइल को कैसे बनाया जाए। फाइल। हम बस उस समारोह में jQuery के लिए भी एक और लाइन जोड़ सकते हैं। बाल विषय के लिए यहाँ मेरे पूरे कार्य हैं।
<?php
add_action( 'wp_enqueue_scripts', 'earlevel_scripts_enqueue' );
function earlevel_scripts_enqueue() {
// styles
$parent_style = 'parent-style';
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style ),
wp_get_theme()->get('Version')
);
// posts with js widgets need jquery
wp_enqueue_script('jquery');
}