web-dev-qa-db-ja.com

アクセス方法 PHP 別の変数 PHP 関数

Lax_google_map_init（）のlax_google_map_maker（）関数から$ atts変数を使用したいのですが。アクセス方法私はそれを「グローバル化」しようとしましたが、何らかの理由でうまくいきませんでした。

function lax_google_map_init() {
    wp_enqueue_script('google-maps', 'http://maps.googleapis.com/maps/api/js?sensor=false');
    wp_enqueue_script('lax_google_map_script', plugins_url('js/lax_google_map_script.js', __FILE__), array('google-maps','jquery'));

    $params = array (
       'latitude'=>  '39.01',
       'longitude'=> '-76.02'
        );

    wp_localize_script('lax_google_map_script', 'lax_map_params', $params); 
}

add_action('init', 'lax_google_map_init');


function lax_google_map_maker($atts,$content=null) {

     $atts = shortcode_atts( array(
        'latitude'=>'38.9205',
               'longitude'=>'-77.04505920410156'),
        $atts);

    $output .= '<div id="map_canvas" style="width: 500px; height: 500px; border:1px solid black;"></div>';

    return $output;
}


 add_shortcode('lax-google-map', 'lax_google_map_maker');

私の目標は、ショートコードの$ attsを使って$ params変数を設定することです。私が理解しているように、私は$ params変数をwp_enqueue_script行とwp_localize_script行と同じ関数に保持しなければなりません。そうでなければ、それを新しい関数に分割し、$ attsをパラメータとして渡します。

関数lax_google_map_initに$ attsを渡す方法があれば、私は黄金になるでしょう。

私は私が考えることができるすべてを試みました。あなたの良いアイデアを聞くのを楽しみにしています。

functionsvariables
3
Laxmidi

G'day mate;）

私はこれを、本体の中のscriptタグ内の変数を出力することによって行いました。私はあなたのコードで遊んで、この解決策を思いつきました：

function lax_google_map_init() {

  // Don't bother loading the scripts if we're in the admin area
  if ( is_admin() ) {
    return;
  }

  wp_enqueue_script( 'google-maps', 'http://maps.googleapis.com/maps/api/js?sensor=false' );
  wp_enqueue_script( 'lax_google_map_script', plugins_url( 'js/lax_google_map_script.js', __FILE__ ), array ( 'google-maps','jquery' ) );
}
add_action( 'wp_print_scripts', 'lax_google_map_init' );


function lax_google_map_maker( $atts, $content = null ) {
    // Default params.
    $atts = shortcode_atts( array ( 
      'latitude'=>'-25.068302',
      'longitude'=>'-130.095581',
      'zoom' => 18,
      'id' => 'map_canvas',
      'width' => '500px',
      'height' => '500px'
      ), $atts );

    $output .= '<div id="' . esc_attr( $atts['id'] ) . '" style="width:' . esc_attr( $atts['width'] ) . '; height: '. esc_attr( $atts['height'] ) .'; border:1px solid black;"></div>';
    $output .= 
    "<script>" . "\n" . 
      "var lax_map_params_" . $atts['id'] . " = " . json_encode( $atts ) . "; lax_google_map_maker_js( lax_map_params_" . $atts['id'] . " );" . "\n" . 
    "</script>" . "\n";  

    return $output;
}
add_shortcode( 'lax-google-map', 'lax_google_map_maker' );
// [lax-google-map latitude='-66.552635' longitude='84.137421' zoom='12'] // no id, usees default
// [lax-google-map latitude='65.032366' longitude='-376.747681' zoom='12' id="map_1"] // id specified.  Will be used in js variable name, so no hyphens or other chars that will break js variable names allowed.
// [lax-google-map latitude='-25.068302' longitude='-130.095581' zoom='12' id="map_2" width="200px" height="200px"] // custom dimensions
// [lax-google-map latitude='-34.397' longitude='150.644' zoom='12' id="map_3"]

これがlax_google_map_script.jsファイルです。

jQuery(document).ready(function($) { 
  // alert ('hi');
});

function lax_google_map_maker_js( args ) {

  // Default js args.  Args passed to function will override these.
  var default_args = {
    latitude :  -34.397,
    longitude :  150.644,
    id : 'map_canvas',
    zoom : 8
  }; // @link http://www.openjs.com/articles/optional_function_arguments.php

  for ( var index in default_args ) {
    if ( typeof args[index] == "undefined" ) {
      args[index] = default_args[index];
    }
  }

  var latlng = new google.maps.LatLng(args['latitude'], args['longitude']);

  var myOptions = {
    zoom: parseInt( args['zoom'] ),
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

    // alert ('hi'); // just showing that you can use jQuery with the dollar method in here.

  var map = new google.maps.Map(document.getElementById( args['id'] ), myOptions);  
}

注意：localize_scriptは深さ1レベルのjs配列しかできないので、個人的にはそのルートに行きませんでした （source - コメントを参照） 。

Bainternetによる 素晴らしいWPSE回答 からインラインjs変数トリックを学びました。

これを行う最良の方法は、すべてをクラスに入れ、ショートコードが使用されているかどうかを確認するメソッドによってトリガーされるwp_footerアクションで起動された適切なフォーマットのjsタグでラップされたプロパティから連結jsを出力することです。それは将来の修正のために考慮するべきものです。 最適なスクリプトの読み込み

私の最初の答えでは、jQueryがスクリプトで使用されていなかったので、jQueryのビットを削除しました。 jQuery.noConflict（）; WPに含まれているバージョンのjQueryを使用する場合は必要ありません。私の修正された答えでは、jQueryのものを一番上に残しましたが、それ以外の場合はエラーが発生するため、lax_google_map_maker_js（）関数をそのブロックの外に移動しました。

1
Dave Romsey