তৃতীয় পক্ষের জেএসের জন্য স্ক্রিপ্ট ট্যাগে অতিরিক্ত বৈশিষ্ট্য যুক্ত করা

Question

আমি যে প্লাগইনটি লিখছি তাতে ড্রপবক্সের ড্রপ চয়নকারী এপিআই- তে সংহত করার চেষ্টা করার সময় আমি এতে ছুটে এসেছি।

এপিআই ডকুমেন্টেশন আপনাকে scriptআপনার ফাইলের শীর্ষে নীচের ট্যাগটি রাখার নির্দেশ দেয়:

<script type="text/javascript" src="https://www.dropbox.com/static/api/1/dropins.js" id="dropboxjs" data-app-key="MY_APP_KEY"></script>

সমস্ত সূক্ষ্ম এবং ভাল, এবং এটি আসলে কাজ করে যখন আমি এটিকে অ্যাডমিন বিভাগে ডাকা পৃষ্ঠাটিতে সরাসরি আটকান। তবে, আমি প্রয়োজনীয় আইডি এবং ডেটা-অ্যাপ-কী পাস করতে wp_register_script (), wp_enqueue_script () এবং wp_localize_script () এর কিছু প্রকরণ ব্যবহার করতে চাই।

আমি এর কয়েকটি ভিন্ন ভিন্নতা চেষ্টা করেছি:

add_action('admin_enqueue_scripts', 'add_dropbox_stuff');
function add_dropbox_js() {
    wp_register_script('dropbox.js','https://www.dropbox.com/static/api/1/dropins.js');
    wp_enqueue_script('dropbox.js');
    wp_localize_script('dropbox.js','dropboxdata',array('id'=>"dropboxjs",'data-app-key'=>"MY_APP_KEY"));
}

এবং:

add_action('admin_enqueue_scripts', 'add_dropbox_stuff');
function add_dropbox_stuff() {
        wp_register_script('dropbox.js','https://www.dropbox.com/static/api/1/dropins.js');
        wp_enqueue_script('dropbox.js');
        wp_localize_script('dropbox.js','dropboxdata',array(array('id'=>"dropboxjs"),array('data-app-key'=>"MY_APP_KEY")));
    }

MY_APP_KEY আমার কোডে যথাযথ অ্যাপ্লিকেশন কী দিয়ে প্রতিস্থাপন করা হয়েছে। কোন দিক প্রশংসা করবে। ধন্যবাদ।

সম্পাদনা: কিছু জ্যাকোয়ারি দিয়ে এটি করার চেষ্টাও করা হয়েছিল, তবে কোনও ফল হয় নি। এটি নথির লোড এবং নথিতে প্রস্তুত করার চেষ্টা করেছেন। আমি একটি error "ত্রুটি" পেয়েছি: "অবৈধ অ্যাপ্লিকেশন_কি"} রিটার্ন।

$('script[src="https://www.dropbox.com/static/api/1/dropins.js?ver=3.6"]').attr('id','dropboxjs').attr('data-multiselect','true').attr('data-app-key','MY_APP_KEY');

Comments

wp_localize_scriptপৃষ্ঠার এইচটিএমএল আউটপুটে কোনও জসন-এনকোডযুক্ত বস্তুটি কী মুদ্রণ করা যায়। এই অবজেক্টটি স্ক্রিপ্ট দ্বারা স্বীকৃত এবং তাই আপনি এটি ব্যবহার করতে পারেন। আপনার যা দরকার তা হ'ল স্ক্রিপ্ট ট্যাগে কিছু বৈশিষ্ট্য যুক্ত করা এবং তাই wp_localize_scriptআপনাকে সহায়তা করতে পারে না।

— গাজাজাপ

জিএম ঠিক আছে যা wp_localize_scriptস্ক্রিপ্টের বৈশিষ্ট্য তৈরি করে না। তবে অ্যাপ্লিকেশন কীটি সরাসরি ড্রপবক্স.জেজে পাস করা সম্ভব? শুধু অনুমান কিন্তু আপনি চেষ্টা করেছেন array('appKey'=>"MY_APP_KEY")? এই কোডটি এই বৈশিষ্ট্যটি থেকে কীটি ধরেছেif(!Dropbox.appKey){Dropbox.appKey=(e=document.getElementById("dropboxjs"))!=null?e.getAttribute("data-app-key"):void 0}

— এপিলেক্ট্রিক

আরে @Pilektric আপনি কি একটি উত্তর দিতে পারেন? কীভাবে এটি বাস্তবায়ন করা যায় তা আমি পুরোপুরি অনুসরণ করছি না।

— অ্যান্ড্রু বার্টেল

wp_localize_scriptআপনি স্ক্রিপ্টের জন্য বৈশিষ্ট্যগুলি পাস করতে পারবেন তা নিশ্চিত করে @ পেলেক্ট্রিক ric আমি সত্যিই জানি না এটি কাজ করবে কিনা, তবে এটি কোনও ওয়ারপ্রেস সম্পর্কিত বিষয় নয়।

— গাজাজাপ

@ অ্যান্ড্রুবার্টেল আমি জানি না কীভাবে হয় sure সম্ভবত এটি সাহায্য করবে। pippinsplugins.com/use-wp_localize_script-it-is-awesome

— এপিলেক্ট্রিক

Answer 1

আপনি script_loader_srcফিল্টার হুক যেমন ব্যবহার করার চেষ্টা করতে পারেন :

add_filter('script_loader_src','add_id_to_script',10,2);
function add_id_to_script($src, $handle){
    if ($handle != 'dropbox.js') 
            return $src;
    return $src."' id='dropboxjs' data-app-key='MY_APP_KEY";
}

হালনাগাদ

এসএস_আরএল দ্বারা এসআরসি পালিয়ে গেছে বলে আমি নিজেই এটি আবিষ্কার করেছি, তাই আরও কিছুটা সন্ধান করে আমি clean_urlফিল্টারটি খুঁজে পেল যা আপনি নিজের আইডি এবং অ্যাপ্লিকেশন কী ডেটার সাহায্যে মানটি ফেরত দিতে ব্যবহার করতে পারেন:

add_filter('clean_url','unclean_url',10,3);
function unclean_url( $good_protocol_url, $original_url, $_context){
    if (false !== strpos($original_url, 'data-app-key')){
      remove_filter('clean_url','unclean_url',10,3);
      $url_parts = parse_url($good_protocol_url);
      return $url_parts['scheme'] . '://' . $url_parts['host'] . $url_parts['path'] . "' id='dropboxjs' data-app-key='MY_APP_KEY";
    }
    return $good_protocol_url;
}

Comments

এটি কাজ করে না। মুদ্রিত হওয়ার আগে, 'স্ক্রিপ্ট_লোডার_সিআরসি'-র ফলাফলটি এড়িয়ে যায়, তাই উদ্ধৃতিগুলি কেটে ফেলা হয় এবং আপনার আউটপুটটি কী' এসসিআর 'বৈশিষ্ট্যের অংশ হিসাবে স্বীকৃত হয় পৃথক বৈশিষ্ট্য হিসাবে নয়। এই কোড মত HTML মার্কআপ কিছু করা হবে<script type='text/javascript' src='https://www.dropbox.com/static/api/1/dropins.js?ver=3.6&#039;id=&#039;dropboxjs&#039;data-app-key=&#039;MY_APP_KEY'></script>

— gmazzap

হ্যাঁ আমি আমার উত্তর আপডেট করেছি।

— বাইনারনেট

আমি আমার সম্পাদনার পরে কোড পরীক্ষা করেছি এবং এটি কাজ করে। এটি দিয়ে আমাকে কিছু শেখানোর জন্য ধন্যবাদ।

— gmazzap

আমি মনে করি ওপি আপনার চেয়ে আমার চেয়ে বেশি সুখী হবে। ;)

— গাজাজাপ

আপনার সহায়তার জন্য @ বেন্টারনেটকে ধন্যবাদ, এটি আপনার উত্তরটি ব্যবহার করে কাজ করে চলেছে।

— অ্যান্ড্রু বার্টেল

Answer 2

ডাব্লুপি 4.1.0 থেকে, সহজেই এটি অর্জনের জন্য একটি নতুন ফিল্টার হুক উপলব্ধ:

script_loader_tag

এটি এইভাবে ব্যবহার করুন:

add_filter( 'script_loader_tag', 'add_id_to_script', 10, 3 );

function add_id_to_script( $tag, $handle, $source ) {
    if ( 'dropbox.js' === $handle ) {
        $tag = '<script type="text/javascript" src="' . $source . '" id="dropboxjs" data-app-key="MY_APP_KEY"></script>';
    }

    return $tag;
}

Comments

কোনও জেএস ক্যাচিংয়ের আগে এটি কার্যকর হয়?

— জোয়ান মিকালাই

Answer 3

ঠিক আছে, মনে হচ্ছে (আমার কাছে) স্ক্রিপ্ট ট্যাগ বৈশিষ্ট্য হিসাবে আইডি এবং অ্যাপ্লিকেশন কী মুদ্রণ করা সম্ভবwp_enqueque_scripts নয় ।

আমি 90% এ নিশ্চিত, কারণ WP_Dependenciesযে ক্লাসটি আমি ভাল করে জানি না, তবে কোডটি দেখানো আমার পক্ষে সম্ভব নয় বলে মনে হয়।

তবে আমি নিশ্চিত যে 100% এ ব্যবহার wp_localize_scriptকরা আপনার সুযোগের পক্ষে কার্যকর নয় ।

আমি উপরে আমার মন্তব্যে যেমন বলেছি:

Wp_localize_script কী করে তা হ'ল পৃষ্ঠার এইচটিএমএল আউটপুটে একটি জসন-এনকোডযুক্ত বস্তু মুদ্রণ করা। এই অবজেক্টটি স্ক্রিপ্ট দ্বারা স্বীকৃত এবং তাই আপনি এটি ব্যবহার করতে পারেন।

আমি মন্তব্যে যা বলিনি তা হ'ল জসন-এনকোডযুক্ত একটি স্বেচ্ছাসেবী নাম হিসাবে আপনি যা সিদ্ধান্ত নিয়েছেন বাস্তবে বাক্য গঠনটি দেখে:

wp_localize_script( $handle, $object_name, $l10n );

নামযুক্ত বস্তুটি স্ক্রিপ্ট দ্বারা ব্যবহার করা $object_name যেতে পারে কারণ এটি বিশ্বব্যাপী স্কোপে রয়েছে এবং পৃষ্ঠার এইচটিএমএলতে মুদ্রিত হয়েছে।

তবে এটি $object_nameএমন একটি নাম যা আপনি সিদ্ধান্ত নেন , তাই এটি সবকিছু হতে পারে ।

তাই নিজেকে জিজ্ঞাসা করুন:

রিমোট ড্রপবক্স সার্ভারের স্ক্রিপ্ট কীভাবে এমন একটি ভেরিয়েবল ব্যবহার করতে পারে যা তারা জানে না কীভাবে বলা হয়?

সুতরাং স্ক্রিপ্টে আইডি এবং / বা অ্যাপ্লিকেশন কী পাস করার কোনও কারণ নেইwp_localize_script : ড্রপবক্স এপিআই ডক্সে যেমন বলা হয়েছে তেমন আপনাকে স্ক্রিপ্ট ট্যাগ বৈশিষ্ট্য হিসাবে মুদ্রণ করতে হবে ।

আমি জেএস বিকাশকারী নই, তবে আমি মনে করি ড্রপবক্স স্ক্রিপ্টটি কী করে:

1. <script>পৃষ্ঠায় সমস্ত এইচটিএমএল উপাদান পান
2. তাদের মধ্যে দিয়ে 'আইডি' == 'ড্রপবক্সজেস' দিয়ে একটিকে সন্ধান করুন
3. যদি সেই স্ক্রিপ্টটি পাওয়া যায়, তবে সেই স্ক্রিপ্টটির 'ডেটা-অ্যাপ-কী'-এর দিকে তাকানো
4. সেই অ্যাপ্লিকেশন কীটি (উপস্থিত থাকলে) বৈধ কিনা তা পরীক্ষা করে দেখুন এবং যদি তা থাকে তবে আপনাকে অনুমোদন দিন

দয়া করে মনে রাখবেন , আমি এটি নিশ্চিতভাবে জানি না, আমি কেবল অনুমান করছি ।

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

কারণ প্রথম বাক্যে আমি বলেছি যে স্ক্রিপ্টে আইডি এবং অ্যাপ কীটি মুদ্রণ করা সম্ভব নয়wp_enqueque_scripts , গল্পের নৈতিকতাটি হ'ল আপনাকে সেগুলি অন্য কোনওভাবে মার্কআপে মুদ্রণ করতে হবে।

যেভাবে খুব বেশি গন্ধ না আসে (যখন কোনও বিকল্প নেই তখন) wp_print_scriptsস্ক্রিপ্ট ট্যাগটি প্রিন্ট করতে হুক ব্যবহার করা হয়:

add_action('wp_print_scripts', 'do_dropbox_stuff');

function do_dropbox_stuff() {

  if ( ! is_admin() ) return; // only for admin area

  $app_key = 'MY_APP_KEY';

  // why do not create an option for it?
  // $app_key = get_option('dropbox_app_key');

  if ( empty($app_key) ) return;

  echo '<script type="text/javascript" src="https://www.dropbox.com/static/api/1/dropins.js" id="dropboxjs" data-app-key="' . esc_attr($app_key) . '"></script>';

}

Comments

ধন্যবাদ জিএম, আমি এটি ব্যবহার করে এটি পেয়েছি। এনকুই হুক ব্যবহার করে বিকল্প সমাধান আছে কিনা তা দেখতে আমি আগ্রহী তবে আপনি উত্তরে যে চিন্তাভাবনা করেছিলেন তা আমি প্রশংসা করি।

— অ্যান্ড্রু বার্টেল

@ অ্যান্ড্রুবার্টেল আমার মনে হয় আপনার ক্ষেত্রে wp_enqueque_script ব্যবহার করার কোনও উপায় নেই তবে আপনি যদি এটি খুঁজে পান তবে আমাদের জানান! :)

— গাজাজাপ

আপনি ইকো করে সরাসরি আরও 1 টি http অনুরোধ করছেন বলে আপনার সমাধানটি সার্ভারে লোড বাড়িয়ে তুলতে পারে। সমাধানটি ভাল তবে অনুকূলিত নয়।

— ফয়সাল শায়খ

@ ফয়সালশাইখ কী বোঝাতে চাইছেন? echoবিবৃতি যতটা আমি বলতে পারেন কোন HTTP অনুরোধ না, এবং ওয়ার্ডপ্রেস wp_enqueue_scriptপাশাপাশি (দেখুন প্রতিধ্বনি করে core.trac.wordpress.org/browser/tags/4.9/src/wp-includes/... ) নিশ্চয়ই কমাতে পারে আপনার কাছে থাকা অন্যান্য স্ক্রিপ্টের সাথে স্ক্রিপ্টটি সংযুক্ত করে অনুরোধের সংখ্যার সংখ্যা: তবে 1) এই ক্ষেত্রে তৃতীয় পক্ষের সার্ভারে স্ক্রিপ্টগুলি বিদ্যমান 2) এইচটিটিপি 2 এর সাথে আজকাল স্ক্রিপ্টের সংমিশ্রণটি কার্যকারিতা হ্রাস করবে, তাদের বৃদ্ধি করবে না। তাহলে হয়তো আমি কিছু মিস করছি?

— গাজাজ্যাপ

@gmazzap আপনি ঠিক বলেছেন আসলে, আমার এটি করার একটি আলাদা উপায় আছে। আমরা এই তৃতীয় অংশ জেএসকে আমাদের সার্ভারে রাখতে পারি এবং আমি সত্যিই মনে করি না যে স্ক্রিপ্টের সংমিশ্রণটি সার্ভারে লোড বাড়িয়ে তুলতে পারে।

— ফয়সাল শায়খ

Answer 4

উপরের বেনটারনেটের উত্তর থেকে। এই কোডটি আমার পক্ষে কাজ করেছিল।

function pmdi_dropbox( $good_protocol_url, $original_url, $_context){
    if ( FALSE === strpos($original_url, 'dropbox') or FALSE === strpos($original_url, '.js')) {
        return $url;
    } else {
        remove_filter('clean_url','pmdi_dropbox',10,3);
        $url_parts = parse_url($good_protocol_url);
        return $url_parts['scheme'] . '://' . $url_parts['host'] . $url_parts['path'] . "' id='dropboxjs' data-app-key='APIKEY";
    }
}

সম্পাদনা: বাইনারনেট কোড থেকে একমাত্র পার্থক্য, আমি স্ক্রিপ্ট URL টি ড্রপবক্স কিনা তা যাচাই করার জন্য একটি শর্ত যুক্ত করেছিলাম এবং এটি একটি .js ফাইল file

আমি অন্য সমস্ত ইউআরএল উপেক্ষা করে ড্রপবক্স ইউআরএল পুনরায় লিখছি।

Comments

আপনি কী পরিবর্তন করেন এবং কেন আপনি এটি পরিবর্তন করেছেন (বা এটি পরিবর্তন করতে হয়েছিল) সম্পর্কে দয়া করে কিছু ব্যাখ্যা যুক্ত করুন।

— tfrommen

আমি জানি এটি একটি পুরানো প্রতিক্রিয়া তবে উপরের কোডে আপনার কি বোঝানো হয়েছে যে কেবল return url এর পরিবর্তে আইএফ স্টেটমেন্টের মধ্যে statement original_url ফিরিয়ে দেবেন?

— লরোমেট

Answer 5

কী ঘটছে এবং কীভাবে এটি সেরা সমাধান করা যায় তা দেখার জন্য আমি ড্রপবক্স.জেএস কোড (ভি 2) এ কিছু পরীক্ষা করেছিলাম। দেখা যাচ্ছে যে, ডেটা-অ্যাপ-কীটি কেবলমাত্র ভেরিয়েবল ড্রপবক্স.অ্যাপকি সেট করতে ব্যবহৃত হয়। আমি নিম্নলিখিত অতিরিক্ত লাইন দিয়ে ভেরিয়েবল সেট করতে সক্ষম।

ড্রপবক্স পৃষ্ঠাতে জাভাস্ক্রিপ্ট উদাহরণ ব্যবহার https://www.dropbox.com/developers/dropins/chooser/js :

<script>
Dropbox.appKey = "YOUR-APP-ID";
var button = Dropbox.createChooseButton(options);
document.getElementById("container").appendChild(button);
</script>

আমার কোডে আমি ড্রপবক্স জাভাস্ক্রিপ্টের রুটিনগুলিকে যেখানে উল্লেখ করেছি সেখানে যেখানে ড্রপবক্স.এপকেই সেট করেছি। এটি করার ফলে আমাকে অতিরিক্ত পরামিতি ছাড়াই wp_enqueue_script () ব্যবহারের অনুমতি দেওয়া হয়েছিল।

Answer 6

আমি আমার ইকার্ডস প্লাগইন দিয়ে এটি করেছি এবং এটি সত্যই সহজ।

এখানে প্লাগইন থেকে সরাসরি অনুলিপি / পেস্ট করুন:

$output .= '<!-- https://www.dropbox.com/developers/chooser -->';
$output .= '<script type="text/javascript" src="https://www.dropbox.com/static/api/1/dropbox.js" id="dropboxjs" data-app-key="' . get_option('ecard_dropbox_private') . '"></script>';
$output .= '<p><input type="dropbox-chooser" name="selected-file" style="visibility: hidden;" data-link-type="direct" /></p>';

লক্ষ্য করুন যে API কীটি কোনও বিকল্পের মধ্য দিয়ে গেছে।

Comments

কিভাবে $ আউটপুট ব্যবহার করা হয়? প্রতিধ্বনিত? Wp_print_scriptts () এ যুক্ত করবেন?

— অ্যান্ড্রু বার্টেল

এটি হয় আপনার ফাংশনের উপর নির্ভর করে ফেরত বা প্রতিধ্বনিত হয়।

— সিপরিয়ান

Answer 7

এটি করার একটি সহজ উপায় আছে

 function load_attributes( $url ){
    if ( 'https://www.dropbox.com/static/api/1/dropins.js' === $url ){
        return "$url' id='dropboxjs' data-app-key='MY_APP_KEY";
    }

    return $url;
}

add_filter( 'clean_url', 'load_attributes', 11, 1 );

Answer 8

স্ক্রিপ্ট_লোডার_ট্যাগের জন্য ওয়ার্ডপ্রেস সিনট্যাক্স :

apply_filters( 'script_loader_tag', string $tag, string $handle, string $src )

কোনও বৈশিষ্ট্য যুক্ত করতে, আপনি আপনার ট্যাগটি এইভাবে সংশোধন করতে পারেন:

add_filter('script_loader_tag', 'add_attributes_to_script', 10, 3); 
function add_attributes_to_script( $tag, $handle, $src ) {
    if ( 'dropbox.js' === $handle ) {
        $tag = '<script type="text/javascript" src="' . esc_url( $src ) . '" id="dropboxjs" data-app-key="MY_APP_KEY"></script>';
    } 
    return $tag;
}

যা ইউআরএল থেকে সঠিকভাবে পালাতে পারবে।

Answer 9

সমস্ত পোস্টিং জন্য ধন্যবাদ, তারা সত্যিই সাহায্য করেছে। এটিকে কিছু কাঠামো দেওয়ার জন্য এবং পড়তে এবং আপডেট করা আরও সহজ করার জন্য আমি আমার নিজের সংস্করণটি রোল করেছি। সাধারণ হিসাবে এনকুই ব্যবহার করুন, সিএসএস ফাইলের জন্য স্ক্রিপ্টটি শেষে একটি মিথ্যা ট্যাগ সহ ব্যবহার করুন যাতে এটি শীর্ষে লোড হয়। যদিও এটি সম্ভবত কিছুটা সহজ করা যেতে পারে।

add_filter('script_loader_tag', 'add_attributes_to_script', 10, 3); 
function add_attributes_to_script( $tag, $handle, $src ) {

    $scripts_to_load = array (

        (0) => Array
          (
            ('name') => 'bootstrap_min_css',
            ('type') => '<link rel="stylesheet" href="',            
            ('integrity') => 'sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB',
            ('close') => ' type="text/css" media="all">'
          ),

        (1) => Array
          (
            ('name') => 'popper_min_js',
            ('type') => '<script type="text/javascript" src="',         
            ('integrity') => 'sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49',
            ('close') => '></script>'
          ),

         (2) => Array
           (
            ('name') => 'bootstrap_min_js', 
            ('type') => '<script type="text/javascript" src="',
            ('integrity') => 'sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T',
            ('close') => '></script>'
           )
    );  

    $key = array_search($handle, array_column($scripts_to_load, 'name'));

    if ( FALSE !== $key){

        $tag = $scripts_to_load[$key]['type'] . esc_url($src) . '" integrity="' . $scripts_to_load[$key]['integrity'] .'" crossorigin="anonymous"' . $scripts_to_load[$key]['close'] . "\n";

    }
    return $tag;
}