web-dev-qa-db-ja.com

ショートコードの$ atts変数をプラグインのJavascript関数に渡す方法はありますか

プラグインの$ atts変数をJavaScript関数に渡す必要がありますが、その方法がわかりません。 javascript関数は地図を作成するためにショートコードのphp緯度変数を必要とします。

私のプラグインはこんな感じです：

<?php
/*
Plugin Name: Lax Google Map Plugin
Plugin URI: http://www.mysite.com
Description: Makes Map
Version: 1.0
Author URI: http://www.mysite.com
*/

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

add_action('init', 'lax_google_map_init');


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

    $atts = shortcode_atts( array(
        'width' => '600', 
        'height'=>'600',
        'latitude'=>'38.9205'
        ),
        $atts);


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

    return $output;
}

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

?>

JavaScriptファイルは次のようになります。

jQuery.noConflict();

jQuery(document).ready(function($) {

  var latlng = new google.maps.LatLng(39.73, -76.02);
  var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

      var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);

});

だから私は '39 .73'を次のように置き換える必要があります。

疑似コード：

var latlng = new google.maps.LatLng（+ $ atts ['緯度'] +、 - 76.02）;

また、JavaScriptはショートコード$ attsが利用可能になる前にロードされます。それを変更するための最良の方法は何ですか？

基本的な質問でごめんね。プラグインの書き方を学んでいます。

助言がありますか？

ありがとうございました。

- ラクミディ

更新：

これを追加すると：

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

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

lax_google_map_init()へ

そして私は加えます：

var latlng = new google.maps.LatLng( lax_map_params.latitude, csf_crime_map_params.longitude);

私のjavascript関数には、マップは機能します。 '39.01'を$atts[latitude]に、-76.02を$atts[longitude]に置き換えるにはどうすればよいですか。私はまだphpの範囲について学んでいます。ありがとうございました。

pluginsshortcode
1
Laxmidi

あなたはいくつかの初期の（おそらくグローバルな）js var markers_array = [];を持つ必要があります。それからajaxコールバック関数を使ってマーカーをその配列にぶつけてください。

スクリプトを登録する

// Define
$root_url = plugin_dir_path(); // Example path
$ajax_nonce = 'your_nonce';
$ajax_nonce_val = 'your_val';

// Ajax
wp_register_script( 'json2', false, false, false, true );
wp_enqueue_script( 'json2' );

wp_enqueue_script( 
     'ajax-script'
    ,"{$root_url}js/ajax_json.js" // your ajax callback script that handles the request (inside a /js folder)
    ,array( 
        'json2'
     )
    ,false
    ,true 
);
wp_localize_script( 
     'ajax-script' 
    ,'ajax_object' // YOUR MAIN DATA OBJECT
    ,array( 
         'ajaxurl'          => admin_url( 'admin-ajax.php' )
        ,$ajax_nonce    => wp_create_nonce( $ajax_nonce_val ) 
    ) 
);

初期のマーカー

// inside some <script> part: You need the following php function to build your markers array:
// This js array will be used by your custom build markers js function to build the initial markers. It can also be used to update markers and overlays.
var mapsInitMarkers = <?php echo build_markers_array(); ?>;

// Markers builder callback function for init js-var
function build_markers_array()
{
    $output = '';
    $markers = array( /* DEFINE MARKERS HERE */ );
    foreach ( $markers as $marker )
    {
        // id, lat, lng, name
        $output .= "[
             {$marker['ID']}, 
             {$marker['lat']}, 
             {$marker['lng']}, 
            '{$marker['name']}', 
        ],";
    }
    $output = substr( $output, 0, -1 ); // get rid of last comma
    $output = "[{$output}]";

    return $output;
}

Ajaxコールバック関数

function ajax_cb_fn() 
{

    check_ajax_referer( 'referer_name', $ajax_nonce ); // needed if performed some update via some ex. form

    $output = ''; // do stuff here - example, use build_markers_array(); with some input to update your markers

    $response = json_encode( array( 
         'data' => $output 
    ) );
    header( "Content-Type: application/json" );
    echo $response;

    exit();
}

Ajax_json.js内のデータ処理

これで、新しいajax jsonハンドリングファイルの中にdocument.ready()関数を書くことができます。そこにあなたはajax_object javascriptオブジェクトを通してあなたのデータにアクセスすることができます。 $.post()を使用して、フォームなどを介してデータ処理を実行できます。あなたのマーカーをあなたの初期配列を作るのにも使えるcreateMarkers js関数にぶつけることもできます（あなたはどこかでマーカー作成を扱う必要があります）。

このデータをマークアップ要素の属性として追加してはいけない理由

ブラウザによってレンダリングされたgetをマークアップし、処理されたばかりのデータ。そこに何百もの緯度/経度の属性をドロップした場合、divがどのように見えるかを想像してください。しばらくすると、デバイスブラウザやネットブックのラップトップ、タブレットなどのサポートを終了する必要があります。

3
kaiser

あなたは wp_localize_script をあなたのPHP変数を使ってJavaScriptに入れることができます。

2
Toby

私はこうします：

プラグインコードでdiv＃map_canvasにデータ緯度attrを追加します。

$output .= '<div id="map_canvas" data-latitude="'.$atts['latitude'].'" style="width:'. $atts['width'] .'px; height: '. $atts['height'] .'px; border:1px solid black;"></div>';

そしてJavascriptではJQueryがdiv＃map_canvasから属性データの緯度を読み取ることを可能にします

var latlng = new google.maps.LatLng($('#map_canvas').attr('data-latitude'), -76.02);

おそらく、経度についても同様のコードスニペットが必要です。

html5検証をするために "data-"を前に付けた属性を使用してください。

それが役に立てば幸い

0
Maciej Kuś