Intereting Posts
Как добавить столбец в wp_list_table из области администрирования? где я могу увидеть свой шаблонный шаблон архива типа публикации? Удалите дополнительный скрипт Google Maps Если тема претерпит серьезные изменения, было бы лучше клонировать родителя вместо написания детской темы? Создать галерею в сообщениях, как в Woocommerce Как взять параметры из функции и сделать их редактируемыми как атрибуты в коротком коде Как правильно удалить определенные файлы CSS / JS из шаблона Установить порядок возвращаемых элементов в классе / функции WP_Query () Импортировать JSON-канал, если контент должен быть очищен? Как разместить статьи в каталоге / blog? Добавить пользовательскую таксономию, которая представляет собой текстовый виджет Как я могу отменить случайное дублирование значений ключа метаданных пользователя? Азиатский язык многоуровневый поддомен IDN Где «описание» пользовательского типа сообщения всплыло в WordPress? Customizer – загрузка настроек / элементов управления / разделов / панелей на основе идентификатора id / page id

Как я могу передать $ atts Shortcode переменную для функции Javascript плагина

Мне нужно передать переменную $ atts плагина в функцию javascript, но я не уверен, как это сделать. Для построения карты функция javascript нуждается в переменной php широты shortcode.

Мой плагин выглядит так:

<?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. Каков наилучший способ его изменить?

Извините, за основные вопросы. Я учу, как писать плагин.

Какие-либо предложения?

Спасибо.

-Laxmidi


ОБНОВИТЬ:

Если я добавлю это:

 $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. Спасибо.

Вы должны иметь некоторый начальный (возможно, глобальный) 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

Теперь вы можете написать некоторую функцию document.ready() внутри вашего нового файла обработки ajax json. Там вы можете получить доступ к своим данным через javascript-объект ajax_object . Вы можете использовать $.post() для обработки данных через формы или иначе. Вы также можете createMarkers маркеры в некоторой функции createMarkers которую вы также можете использовать для создания исходного массива (вам нужно обработать создание маркера где-нибудь.

Почему вы не должны добавлять эти данные в качестве атрибутов элемента разметки

Пометьте, чтобы get был обработан браузером, только что обработанные данные. Представьте себе, как ваш div будет выглядеть, если вы сбросите сотни лат / лин. За короткое время вам потребуется отказаться от поддержки браузеров устройств и ноутбуков, планшетов и т. Д.

Вы можете использовать wp_localize_script, чтобы взять ваши PHP-переменные и поместить их в JavaScript.

Я бы сделал так:

в коде плагина добавить данные-широту attr в div # map_canvas:

 $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 читать атрибуты data-latitude из div # map_canvas

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

Вероятно, вам понадобятся аналогичные фрагменты кода для долготы.

используйте атрибуты с префиксом «data-», чтобы иметь проверку html5.

Надеюсь, поможет