web-dev-qa-db-ja.com

Wordpressは各親カスタム投稿タイプの子投稿を数え、Googleマップのjqueryプラグインのjson配列で使用

だから私は今数日を探していて、どこでもこれに対する解決策を見つけることができません。それはクライアントからのかなりオーダーメイドの要求です...管理者が緯度と経度の座標を持つカスタムメタボックスを使用して作成する各投稿（エリア）にマーカーを追加するのにjQueryグーグルマッププラグインを使用しています。

これらの各マーカーにはツールチップが関連付けられています。ツールチップで私はいくつかのテキスト、マーカー自身を作成するために使用される各投稿のタイトル、および投稿への固定リンク（領域）を持っています。

しかし、私は各投稿（エリア）のすべての子供の投稿（ディール）の数を表示したいと思います。

私はこれを（area）投稿自体に取り組んでいますが、地図のツールチップに表示させることはできません。

これは私が今まで持っているコードです私は私が解決策から遠く離れているとは思わないが私のphpスキルはまだ初心者レベルであるのでどんな助けでも大いに感謝されるでしょう。

<script type="text/javascript">
    $(document).ready(function(){
        var myMarkers = {"markers": [
            <?php $items3 = new wp_Query( array(
                'post_type' => 'area',
                'post_status' => 'publish',
                'posts_per_page' => -1,
                'orderby' => 'date',
                'order' => 'desc',
            ) );
            $post_id = $post->ID; //or somehow get the current post ID.
            $parent_id = get_post_ancestors($post_id);
            $parent = get_post_type( $parent_id );
            $args = array(
                'post_type' => 'deal',
                'post_status' => 'published',
                'post_parent' => $parent,
                'numberposts' => -1
            );
            $this_page_id=$wp_query->post->ID;
            $num = count( get_posts( $args ) );
            while ( $items3->have_posts() ) : $items3->the_post(); ?>
                        {"latitude": "<?php echo get_post_meta($post->ID, '_arealat', true); ?>", "longitude": "<?php echo get_post_meta($post->ID, '_arealong', true); ?>", "icon": "/wp-content/themes/localdoubleglazingdeals/assets/img/design/logo-icon.png", "baloon_text": 'We have <span><?php echo $num ?></span> deals in <strong><?php the_title(); ?></strong><br/><a href="<?php the_permalink(); ?>">View deals</a>'},
            <?php endwhile; ?>
            ]
                };
    $("#map").mapmarker({
        zoom    : 7,
        center  : 'Liverpool',
        markers : myMarkers
    });
});

それは….

<?php echo $num ?>

私は立ち往生している部分。

custom-post-typesget-postscountget-children
1
jonhodson1984

まず第一にあなたはjavascriptからphpを常に切り離すべきです。一般的に言って、これは悪い習慣であり、特にWordPressにとっては、WordPressの適切な方法を使用してJavaScriptをインラインで追加することを強制します。using 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埋め込まれたjQueryバージョンをロードするためにwp_enqueue_scriptを使用して）そのためには、 confict wrappers を使用しないでください。

上記のコードができたので、それをファイルに保存して呼び出します。 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コードを見てみると、marker配列は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関数によって作成されたオブジェクトの配列を含みます。

2
gmazzap