3. taraf JS için Komut Dosyası Etiketine Ek Özellikler Ekleme

Yazdığım bir eklentiye Dropbox'ın seçici API'sındaki düşüşü entegre etmeye çalışırken buna rastladım .

API belgeleri, aşağıdaki scriptetiketi dosyanızın üstüne yerleştirmenizi ister:

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

Hepsi iyi ve iyi ve aslında doğrudan yönetici bölümünde çağrılan sayfaya yapıştırdığımda çalışır. Ancak, gerekli kimliği ve veri-app-anahtarını geçmek için wp_register_script (), wp_enqueue_script () ve wp_localize_script () 'in bazı varyasyonlarını kullanmak istiyorum.

Bunun birkaç farklı varyasyonunu denedim:

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"));
}

Ve:

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, kodumdaki uygun uygulama anahtarıyla değiştirildi. Herhangi bir yönü takdir ediyorum. Teşekkürler.

EDIT: Ayrıca bazı jquery ile yapmaya çalıştı, ama boşuna. Belge yükünde ve belge hazırda denedi. {"Hata": "Geçersiz app_key"} dönüşü alıyorum.

$('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');

script_loader_srcfiltre kancasını kullanmayı deneyebilirsiniz, örneğin:

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";
}

Güncelleme

Ben sadece src esc_url tarafından kaçtı kendimi düşündüm, bu yüzden biraz daha bakarak ben clean_urlid ve uygulama anahtar verileri ile değer döndürmek için kullanabileceğiniz filtre bulundu :

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;
}

WP 4.1.0'dan beri, bunu kolayca gerçekleştirmek için yeni bir filtre kancası mevcuttur:

script_loader_tag

Bu şekilde kullanın:

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;
}

Tamam, öyle görünüyor ki (ile) id ve uygulama anahtarını komut dosyası etiketi nitelikleri olarak yazdırmak mümkünwp_enqueque_scripts değildir .

% 90 eminim, çünkü WP_Dependenciesiyi bildiğim bir sınıf değil, ama koda bakarak Benim için mümkün görünmüyor.

Ama kullanarak bu% 100 eminim wp_localize_scriptolduğu için kapsam için kullanışlı değildir .

Yukarıdaki yorumda söylediğim gibi:

Wp_localize_script'in yaptığı şey, sayfanın html çıktısında json kodlu bir nesne yazdırmaktır. Bu nesne komut dosyası tarafından tanınır ve böylece onu kullanabilirsiniz.

Yorumda söylemediğim şey, aslında sözdizimine bakmaya karar verdiğiniz keyfi bir isim olarak json kodlu nesnenin:

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

Adlandırılmış nesne $object_name olabilir küresel dar olduğundan sayfanın html baskılı çünkü komut dosyası tarafından kullanılabilir.

Ama $object_namebu bir isimdir sen karar, bu yüzden olabilir her şey .

O zaman kendinize sorun:

uzak dropbox sunucusundaki komut dosyası nasıl adlandırıldığını bilmedikleri bir değişkeni nasıl kullanabilir?

Bu nedenle , komut dosyasına id ve / veya uygulama anahtarını iletmek için hiçbir neden yokturwp_localize_script : bunları yalnızca Dropbox API dokümanlarında belirtildiği gibi komut dosyası etiketi nitelikleri olarak yazdırmanız gerekir .

Ben bir js geliştirici değilim, ama dropbox betiğinin ne yaptığını düşünüyorum:

1. <script>sayfadaki tüm html öğelerini al
2. 'id' == 'dropboxjs' olanı aramak için gezinin
3. bu komut dosyası bulunursa, söz konusu komut dosyasının 'veri-uygulama-anahtarına' bakarak
4. bu uygulama anahtarının (varsa) geçerli olup olmadığını kontrol edin ve varsa size yetki verin

Lütfen bunu bilmediğime dikkat et, sadece tahmin ediyorum .

Bu şekilde, dropbox sunucusundan yüklenen komut dosyası, uygulama anahtarınızı kendileri için kolay ve sizin için uygulanması kolay bir şekilde kontrol edebilir.

İlk cümledeki komut dosyasını kullanarak id ve uygulama anahtarını yazdırmanın mümkün olmadığını söyledim wp_enqueque_scripts, hikayenin ahlakı, bunları işaretlemede başka bir şekilde yazdırmanız gerektiğidir.

Çok fazla kokmayan bir yol (alternatif olmadığında) wp_print_scriptskomut dosyası etiketini yazdırmak için kanca kullanmaktır :

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

}

Bainternet'in yukarıdaki cevabından. Bu kod benim için çalıştı.

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";
    }
}

Düzenleme: Bainternet kodu tek fark, ben komut dosyası URL dropbox olup olmadığını kontrol etmek için bir koşul ekledi ve bu bir .js dosyası.

Diğer tüm URL'leri yok sayıyorum ve dropbox URL'sini yeniden yazıyorum.

Neler olduğunu ve bunu en iyi şekilde nasıl çözeceğinizi görmek için dropbox.js kodunda (v2) bazı kontroller yaptım. Anlaşıldığı gibi, data-app-key sadece Dropbox.appKey değişkenini ayarlamak için kullanılır. Değişkeni aşağıdaki ekstra çizgi ile ayarlayabilirim.

Dropbox sayfasındaki javascript örneğini kullanarak 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>

Kodumda Dropbox.appKey Dropbox javascript yordamları başvuru her yerde ayarlayın. Bunu yapmak, ekstra parametreler olmadan wp_enqueue_script () kullanmamı sağladı.

Bunu eCards eklentim ile yaptım ve gerçekten basit.

İşte eklentiden doğrudan kopyala / yapıştır:

$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 anahtarının bir seçenek üzerinden geçtiğine dikkat edin.

Bunu yapmanın daha basit bir yolu var

 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 );

Script_loader_tag için Wordpress sözdizimi :

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

Herhangi bir özellik eklemek için $ etiketinizi şu şekilde değiştirebilirsiniz:

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;
}

Hangi URL doğru kaçacaktır.

Tüm gönderiler için teşekkürler, gerçekten yardımcı oldular. Bazı yapıyı vermek ve okumayı ve güncellemeyi kolaylaştırmak için kendi sürümümü yuvarladım. Enqueue'yu normal olarak kullanın, sonunda yanlış etiketli CSS dosyaları için komut dosyası kullanın, böylece üste yüklenir. Rağmen muhtemelen biraz basitleştirilebilir.

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;
}