php
  • wordpress
  • advanced-custom-fields
  • 2017-06-12 1 views 0 likes 
    0

    私は、それぞれのタイルに追加の情報を表示するために独自のモーダルを開くようにしたいクライアントのための "機能"のグリッドを構築しようとしています。モーダル関数とカスタムポストタイプの統合

    これは私がこれまで持っているものです。

    「機能」と呼ばれるカスタムポストタイプ「機能」ポストタイプ(「main_photo」、「modal_copy」)

    に割り当てられ

    二ACFフィールド

    これは私が実行している問題です:

    カスタムポストタイプ= '能力'の各グリッドイメージとタイトルは完全に表示され、モダールそのものも素晴らしいです。モーダルの内容は、すべての投稿の最初の投稿から表示されます。つまり、リストの最初の投稿に割り当てられたタイトルとコピーは、残りの11個の投稿について同じように表示されます。ここで

    は、現在の状態で私のコードです:

    <section class="capability clearfix"> 
    
          <?php 
          // For creating multiple, customized loops. 
          // http://codex.wordpress.org/Class_Reference/WP_Query 
    
          $custom_query = new WP_Query(array('post_type' => 'capability','posts_per_page' => '-1', 'orderby' => 'title', 'order' => 'ASC')); 
    
          while($custom_query->have_posts()) : $custom_query->the_post(); ?> 
    
          <article <?php post_class(); ?> id="post-<?php the_ID(); ?>"> 
    
           <div class="inner">      
    
            <div class="imagecontainer"> 
    
            <img title="check us out" data-toggle="modal" data-target="#myModal"          
    
             <?php 
    
             $image = get_field('main_photo'); 
    
              if($image): ?> 
              onmouseout="src='<?php echo $image['url']; ?>'" alt="<?php echo $image['alt']; ?>" title="<?php echo $image['alt']; ?>';"         
              src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" title="<?php echo $image['alt']; ?>" 
    
              <?php endif; ?> 
    
             /> 
    
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    
             <div class="modal-dialog" role="document"> 
    
             <div class="modal-content"> 
    
              <div class="modal-header"> 
    
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
    
              <h4 class="modal-title" id="myModalLabel"><?php echo the_title(); ?></h4> 
    
              </div> 
    
              <div class="modal-body"> 
    
              <?php 
    
               $copy = get_field('modal_copy'); 
    
               if($copy): ?> 
    
               <p><?php echo $copy; ?></p> 
    
              <?php endif; ?> 
    
              </div>         
    
             </div> 
    
             </div> 
    
            </div> 
    
            </div> 
    
           <div class="entry-summary"> 
    
            <h2 class="entry-title"><?php the_title(); ?></h2> 
    
            <?php echo the_excerpt(); ?> 
    
           </div> 
    
           <?php //the_content(); ?> 
    
           </div> 
    
          </article> 
    
          <?php endwhile; ?> 
    
          <?php wp_reset_postdata(); // reset the query ?> 
    
         </section> 
    

    そしてここでは、グリッドへのリンクである私が働いている:私は解決策が痛いほど明白である必要があります知っているhttp://eightsevencentral.com/corporate-program/

    が、私数日前からこれと闘っていて、コミュニティに手を出そうとしていた時期だと思った。

    問題を解読するために重要な情報が少し含まれていないかどうか教えてください。これは私の初めての投稿ですので、何かを残している可能性があります。

    ありがとうございます!

    答えて

    0

    私は上記のポストを作った後、戻って私のコードをもう一度実行し、解決策を見つけた:

    私は問題が各ポストタイプ内のカスタムフィールドのコンテンツを生成していないことを知っていた(画像やタイトルなど明らかに適切に機能していたので)、私はモーダルのIDを対象としたものがないと考えました。これが正解かどうかは分かりませんが、今は私のために働いています。

    注意がイメージをラップアンカータグ= <a href="#myModal-<? the_ID(); ?>" data-toggle="modal" >

    画像タグ= <img title="check us out" data-toggle="modal" data-target="#myModal-<? the_ID(); ?>"

    そしてモーダル自体は私の知る限り<div class="modal fade" id="myModal-<? the_ID(); ?>"

    を=、これは今働いている理由は、最初の投稿のコンテンツを呼び出してmyModalのすべてのインスタンスに適用するループの代わりに、各投稿のIDがユニークな投稿IDとして生成されているためです。

    私はそれを正しく説明していないと確信しています。つまり、私はWPクエリと一般的なモーダルに関していくつかの宿題を持っています。それにもかかわらず、私はこの機能を意図した通りにしておくことで安心しており、将来的に誰かに頭痛を与えてくれることを願っています。ここで

    は私のコードは、比較のために、今ある:

    <section class="capability clearfix"> 
    
          <?php 
          // For creating multiple, customized loops. 
          // http://codex.wordpress.org/Class_Reference/WP_Query 
    
          $custom_query = new WP_Query(array('post_type' => 'capability','posts_per_page' => '-1', 'orderby' => 'title', 'order' => 'ASC')); 
    
          while($custom_query->have_posts()) : $custom_query->the_post(); ?> 
    
          <article <?php post_class(); ?> id="post-<?php the_ID(); ?>"> 
    
           <div class="inner">      
    
            <div class="imagecontainer"> 
    
            <a href="#myModal-<? the_ID(); ?>" data-toggle="modal" > 
    
            <img title="check us out" data-toggle="modal" data-target="#myModal-<? the_ID(); ?>" 
    
             <?php 
    
             $image = get_field('main_photo'); 
    
              if($image): ?> 
              onmouseout="src='<?php echo $image['url']; ?>'" alt="<?php echo $image['alt']; ?>" title="<?php echo $image['alt']; ?>';"         
              src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" title="<?php echo $image['alt']; ?>" 
    
              <?php endif; ?> 
    
             /> 
    
             </a> 
    
            <div class="modal fade" id="myModal-<? the_ID(); ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    
             <div class="modal-dialog" role="document"> 
    
             <div class="modal-content"> 
    
              <div class="modal-header"> 
    
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
    
              <h4 class="modal-title" id="myModalLabel"><?php echo the_title(); ?></h4> 
    
              </div> 
    
              <div class="modal-body"> 
    
              <?php 
    
               $copy = get_field('modal_copy'); 
    
               if($copy): ?> 
    
               <p><?php echo $copy; ?></p> 
    
              <?php endif; ?> 
    
              </div>         
    
             </div> 
    
             </div> 
    
            </div> 
    
            </div> 
    
           <div class="entry-summary"> 
    
            <h2 class="entry-title"><?php the_title(); ?></h2> 
    
    
           </div> 
    
           <?php //the_content(); ?> 
    
           </div> 
    
          </article> 
    
          <?php endwhile; ?> 
    
          <?php wp_reset_postdata(); // reset the query ?> 
    
         </section> 
    
    関連する問題