জাভাস্ক্রিপ্ট ফাইলে থিমের পথ


15

আমার থিম ফাইলের পথটি জাভাস্ক্রিপ্ট ফাইলের মধ্যে অন্তর্ভুক্ত করা দরকার। আমি এই সম্পর্কে কিভাবে যেতে হবে? আমি ইতিমধ্যে চেষ্টা করেছি:

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(); ?>আসল পথের পরিবর্তে কেবল সন্নিবেশ করায় । কোন ধারনা? আগাম ধন্যবাদ!

উত্তর:


33

আপনি যা খুঁজছেন তা হ'ল 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 );

আপনার স্টাইল.জেজে, এখানে হতে চলেছে:

var templateUrl = object_name.templateUrl;
...

অসাধারণ. মোহন মত কাজ!
জেমস হল

6

জাভাস্ক্রিপ্ট ফাইলে থিমের পাথ যুক্ত করার জন্য নিম্নলিখিত দুটি উপায়।

1) আপনি আপনার ফাংশন.এফপি ফাইলে ওয়ার্ডপ্রেস দ্বারা প্রস্তাবিত 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); 

২) আপনি একটি জাভাস্ক্রিপ্ট স্নিপেট তৈরি করতে পারেন যা টেম্পলেট ডিরেক্টরি ইউরি একটি ভেরিয়েবলে সংরক্ষণ করে এবং নিম্নলিখিত হিসাবে এটি পরে ব্যবহার করুন: আপনি যে পথটি ব্যবহার করতে চান সেই জেএস ফাইলের আগে এই কোডটি হেডার.এফপি ফাইলটিতে যুক্ত করুন। উদাহরণ:

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

এবং আপনার জেএস ফাইলটিতে নিম্নলিখিত হিসাবে ব্যবহার করতে পারেন:

alert(stylesheet_directory_uri);

wp_localize কাজ! আমি ২ য় পন্থাটিও চেষ্টা করেছি, তবে আমি এটি কার্যকর করতে পরিচালিত করি না। wp_localize কাজগুলি সম্ভবত আরও ভাল অনুশীলন, না?
শার্লিনমাস্টাররা

@ চার্লিনমাস্টাররা দ্বিতীয় পন্থাটি ভেরিয়েবল ঘোষণার এবং এটির অ্যাক্সেসের ক্রমটি কার্যকর করার জন্য তৈরি করা অত্যন্ত গুরুত্বপূর্ণ।
বিনোদদলভি

2
দ্বিতীয় পদ্ধতির echoকাজ করার সাথে সাথে হওয়া উচিত
ক্লদিউ ক্র্যাঙ্গা

@ ক্লাউডিউ ক্রাইঙ্গা ধন্যবাদ, প্রতিধ্বনিত হওয়া উচিত: var stylesheet_directory_uri = "<?php echo get_stylesheet_directory_uri(); ?>";
ycc_swe

1

আপনি আপনার জাভাস্ক্রিপ্ট ফাইলগুলি স্থানীয়করণ করতে পারেন, যা আপনাকে পিএইচপি সংজ্ঞায়িত মানগুলি (যেমন স্থানীয়করণ বা ডিরেক্টরিগুলি) দিয়ে ভরা একটি জাভাস্ক্রিপ্ট অ্যারে তৈরি করার সুযোগ দেয়।

আপনি যদি নিজের জাভাস্ক্রিপ্ট ফাইল ট্রিট লোড করেন 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

1

আমি ওয়ার্ডপ্রেস থিম ডিরেক্টরিটি পেতে এবং এটি একটি বিশ্বব্যাপী জাভাস্ক্রিপ্ট ভেরিয়েবল (সমস্ত জাভাস্ক্রিপ্ট ফাইলের মধ্যে থেকে) হিসাবে সঞ্চয় করার জন্য এই সুবিধাজনক ছোট্ট পদ্ধতিটি ব্যবহার শুরু করেছি:

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>

    ২. জেএস ফাইলটি আপনার সাইটের থিম ডিরেক্টরিতে (বা উপ-ডিরেক্টরি) অন্তর্ভুক্ত।


1

এইভাবে আমি এটি করেছি।

থিম-ফোল্ডার / সম্পদে জাভাস্ক্রিপ্ট ফাইল এবং চিত্রগুলি রাখুন

এবং নিম্নলিখিত ফাইলগুলি সম্পাদনা করুন।

ফাংশন.এফপি-তে

/* 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/';

0

যদি জাভাস্ক্রিপ্ট ফাইলটি অ্যাডমিন ড্যাশবোর্ড থেকে লোড করা হয়, আপনি জাভাস্ক্রিপ্ট ফাংশনটি আপনার ওয়ার্ডপ্রেস ইনস্টলেশনটির মূল পেতে পারেন।

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';
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.