আমি যে সমাধানগুলি দেখেছি সেগুলি থিমের সাথে জাভাস্ক্রিপ্ট বৈশিষ্ট্য যুক্ত করার দৃষ্টিকোণ থেকে। যাইহোক, ওপি বিশেষত জিজ্ঞাসা করেছিল, "আমি কীভাবে এটি একটি একক ওয়ার্ডপ্রেস পৃষ্ঠার জন্য যুক্ত করব?" এটির মতো শোনা যাচ্ছে আমি কীভাবে আমার ওয়ার্ডপ্রেস ব্লগে জাভাস্ক্রিপ্ট ব্যবহার করব, যেখানে পৃথক পোস্টের বিভিন্ন জাভাস্ক্রিপ্ট-চালিত "উইজেট" থাকতে পারে। উদাহরণস্বরূপ, একটি পোস্ট ব্যবহারকারীকে পরিবর্তনশীল (স্লাইডার, চেকবক্স, টেক্সট ইনপুট ক্ষেত্র) পরিবর্তন করতে এবং ফলাফলগুলি প্লট বা তালিকায় দিতে পারে।
জাভাস্ক্রিপ্ট দৃষ্টিকোণ থেকে শুরু:
- আপনার জাভাস্ক্রিপ্ট ফাংশনগুলি একটি পৃথক ".js" ফাইলে লিখুন
এমনকি আপনার পোষ্টের এইচটিএমএল-তে উল্লেখযোগ্য জাভাস্ক্রিপ্ট অন্তর্ভুক্ত করার বিষয়ে ভাববেন না your আপনার কোড সহ একটি জাভাস্ক্রিপ্ট ফাইল বা ফাইল তৈরি করুন।
- আপনার পোস্টের এইচটিএমএল দিয়ে আপনার জাভাস্ক্রিপ্ট ইন্টারফেস করুন
যদি আপনার জাভাস্ক্রিপ্ট উইজেটটি এইচটিএমএল নিয়ন্ত্রণ এবং ক্ষেত্রগুলির সাথে ইন্টারেক্ট করে, আপনাকে জাভাস্ক্রিপ্ট থেকে কীভাবে এই উপাদানগুলি জিজ্ঞাসা করতে এবং সেট করতে হবে এবং ইউআই উপাদানগুলি কীভাবে আপনার জাভাস্ক্রিপ্ট ফাংশনগুলিতে কল করতে দেয় তা বুঝতে হবে। এখানে উদাহরণ তুলে ধরা হলো; প্রথম, জাভাস্ক্রিপ্ট থেকে:
var val = document.getElementById(“AM_Freq_A_3”).value;
এবং এইচটিএমএল থেকে:
<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();
});
- আপনার পোস্টের এইচটিএমএল কোডে, আপনার পোস্টের জন্য প্রয়োজনীয় স্ক্রিপ্টগুলি লোড করুন
ওয়ার্ডপ্রেস কোড সম্পাদকে, আমি সাধারণত পোস্টের শেষে স্ক্রিপ্টগুলি নির্দিষ্ট করি। উদাহরণস্বরূপ, আমার প্রধান ডিরেক্টরিতে আমার একটি স্ক্রিপ্ট ফোল্ডার রয়েছে। আমার ভিতরে সাধারণ জাভাস্ক্রিপ্টের সাথে একটি ইউটিলিটি ডিরেক্টরি রয়েছে যা আমার কিছু পোস্ট ভাগ করে নিতে পারে - এক্ষেত্রে আমার নিজস্ব গণিতের কিছু ইউটিলিটি ফাংশন এবং ফ্লোটার 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>
- এনকুই jQuery
ওয়ার্ডপ্রেস jQuery নিবন্ধভুক্ত করে, তবে যদি আপনি ওয়ার্ডপ্রেসকে এটির প্রয়োজন হয় না, তবে এটি উপলব্ধ হয় না it আপনি যদি না করেন তবে jQuery কমান্ড ব্যর্থ হবে। অনেক উত্স আপনাকে ফাংশন.এফপি-তে এই কমান্ডটি কীভাবে যুক্ত করবেন তা আপনাকে জানিয়েছে, তবে ধরে নিন আপনি আরও কিছু গুরুত্বপূর্ণ বিবরণ জানেন।
প্রথমত, কোনও থিম সম্পাদনা করা খারাপ ধারণা the ভবিষ্যতের থিমের কোনও আপডেট আপনার পরিবর্তনগুলি মুছে দেবে। একটি শিশু থিম তৈরি করুন। এখানে কীভাবে:
https://developer.wordpress.org/themes/advanced-topics/child-themes/
সন্তানের ফাংশন.এফপি ফাইলটি একই নামের পিতামাতার থিমের ফাইলটিকে ওভাররাইড করে না, এটি এতে যুক্ত করে। চাইল্ড-থিমস টিউটোরিয়ালটি পরামর্শ দেয় যে কীভাবে পিতামাতাকে এবং সন্তানের স্টাইল। CSS ফাইলটিকে সজ্জিত করা যায়। আমরা সহজেই সেই ফাংশনে আরও একটি লাইন যুক্ত করতে পারি জিকুয়েরি তৈরি করতে। শিশু থিমের জন্য আমার সম্পূর্ণ ফাংশন.এফপি ফাইলটি এখানে:
<?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');
}