Wordpress подсчитывает дочерние записи каждого родительского пользовательского типа записей и использует их в массиве json для плагина jquery google maps

Прежде всего, вы всегда должны отделять php от javascript. Вообще говоря, это плохая практика смешивать их, и, в частности, для WordPress, это также заставляет вас добавлять встроенный javascript вместо правильного использования WordPress: использование wp_enqueue_script. Когда вам нужно передать переменные из PHP в javascript, правильный способ WordPress для этого - использовать wp_localize_script.

Итак, ваш код javascript должен быть примерно таким:

jQuery(document).ready(function($){
  var myMarkers = {"markers": [ my_map_data.markers ] };
  $("#map").mapmarker({
    zoom : 7,
    center : 'Liverpool',
    markers : myMarkers
  });
});

Читабельно, не так ли? Также обратите внимание, как я использовал оболочку jQuery без конфликтов, это потому, что я надеюсь, что вы правильно ставите jQuery в очередь (т.Е. Используете wp_enqueue_script для загрузки встроенной версии jQuery WP), и если это так, WordPress использует jQuery в режиме без конфликтов, поэтому, чтобы он работал, вы должны использовать без оболочек конфликтов.

Теперь, когда у вас есть приведенный выше код, вы должны сохранить его в файле и назвать его, например my-map.js и сохраните в папке темы (вложенной) (или в папке плагина, если вы разрабатываете плагин).

Предполагая, что здесь вы сохраните этот файл в подпапке "js" вашей темы. Теперь вам нужно включить в правильный шаблон. Я не знаю, где вы печатаете карту, и я предполагаю, что здесь у вас есть шаблон страницы под названием 'page-map.php', и вы хотите включить туда свою карту, поэтому вам нужно включить туда свой javascript.

В вашем functions.php вы должны добавить:

add_action('wp_enqueue_scripts', 'add_map_scripts');
function add_map_scripts() {
   if ( is_page_template('page-map.php') ) {
      $jsurl = get_template_directory_uri() . '/js/my-map.js';
      wp_enqueue_script('my-map', $jsurl, array('jquery') );
      wp_localize_script('my-map', 'my_map_data', get_map_data() );
   }
}

Это правильный способ добавить скрипт в WordPress. Если вы посмотрите на wp_enqueue_script документы, которые я связал, вы увидите, что я добавлен 3-й аргумент функции, это массив зависимостей, любой скрипт, который вы добавили в массив, если он еще не включен на странице, будет добавлен, а также ваш скрипт будет включен после этого. Я включил jQuery в массив зависимостей, таким образом, я уверен, что jQuery будет добавлен на страницу: если вы вручную добавляете jquery на страницу... уберите его. Вы сказали, что используете плагин, у которого есть собственный js-скрипт, вы должны посмотреть на дескриптор этого скрипта (это первый параметр wp_enqueue_script) и добавьте его в массив зависимостей, таким образом, вы уверены, что ваш скрипт добавлен после скрипта плагина.

Теперь, если вы посмотрите на код javascript, который я опубликовал, вы заметите, что массив маркеров взят из переменной my_map_data.markers. Но где определена эта переменная?

Ответ содержится в wp_localize_script, который я вызвал в приведенном выше коде, сразу после wp_enqueue_script. Если вы видите документы wp_localize_script, на которые я ссылался выше, вы видите, что я передаю объект скрипту под названием 'my_map_data' и его содержимое объект - это то, что возвращается функцией get_map_data. эта функция еще не существует, поэтому давайте напишем ее (должна идти в вашем functions.php):

function get_map_data() {
  // assure we are in right page
  if ( ! is_page_template('page-map.php' ) return;
  $areas = new WP_Query( array(
    'post_type' => 'area', 'post_status' => 'publish', 'posts_per_page' => -1,
    'orderby' => 'date', 'order' => 'desc'
  ) );
  if ( ! $areas->have_posts() ) return; // no areas, nothing to do    
  $markers = array();
  while ( $areas->have_posts() ) : $areas->the_post();
    global $post; // current area post object
    $deals_args = array(
      'post_type' => 'deal', 'post_status' => 'publish', 'numberposts' => -1
      'post_parent' => $post->post_parent
    );
    $d_num = count( get_posts($deals_args) );
    $ballon_f = 'We have <span>%d</span> deals in <strong>%s</strong>';
    $ballon_f .= '<br/><a href="%s">View deals</a>';
    $marker = array(
      'latidude' => get_post_meta( get_the_ID(), '_arealat', true),
      'longitude' => get_post_meta( get_the_ID(), '_arealong', true),
      'icon': get_template_directory_uri() . '/assets/img/design/logo-icon.png',
      'baloon_text' => sprintf($ballon_f, $d_num, get_the_title(), get_permalink() );
    );
    $markers[] = (object) $marker; // collect all markes in the $markes array
  endwhile;
  wp_reset_postdata(); // reset the post data after the custom query
  // return the array of markes to wp_localize_script that will json_encode it and
  // pass it to javascipt
  return array( 'markers' => $markers );
}

Теперь наша функция возвращает массив в wp_localize_script, и эта функция преобразует этот массив в JSON и передает его как глобальный объект (с именем "my_map_data") в javascript. Таким образом, когда в javascript вы используете

{"markers": [ my_map_data.markers ] };

Он будет содержать массив объектов, созданных функцией get_map_data.