Deschide Articole WordPress în Modal Bootstrap

Question

Deschide Articole WordPress în Modal Bootstrap

13 apr. 2013, 02:28:35

Vizualizări: 20.9K

Voturi: 1

Caut ajutor pentru a deschide articolele WordPress într-o fereastră modală Bootstrap.

În prezent, am o pagină principală cu un grid care extrage articolele.

Am configurat astfel încât fiecare articol să fie într-o casetă pătrată și să se deschidă într-o fereastră modală Bootstrap.

Fereastra modală ar trebui să preia datele din articolul pe care s-a făcut click.

Momentan, se deschide doar ultimul articol de pe pagină, indiferent pe care articol se face click.

Presupun că trebuie să informez fereastra modală despre care articol a fost selectat pentru a putea prelua datele corecte, dar nu știu cum.

Orice ajutor ar fi apreciat.

Iată codul meu actual:

<?php get_template_part('templates/page', 'header'); ?>
<?php if (!have_posts()) : ?>

<div class="alert">
  <?php _e('Ne pare rău, nu s-au găsit rezultate.', 'roots'); ?>
</div>
<?php get_search_form(); ?>
<?php endif; ?>
<div class="row">
  <?php while (have_posts()) : the_post(); ?>
  <?php
$src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), array( 5600,1000 ), false, '' );
?>
  <a href="#myModal" data-toggle="modal">
  <div class="span2" style="background: #09F url(<?php echo $src[0]; ?>) center no-repeat !important;">
    <?php get_template_part('templates/content', get_post_format()); ?>
  </div>
  </a>




  <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">

      <h3 id="myModalLabel">
        <?php the_title(); ?>
      </h3>
    </div>
    <div class="modal-body">
      <p><?php the_post_thumbnail(); ?></p>
    </div>
    <div class="modal-footer">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    </div>
  </div>


  <?php endwhile; ?>

minemind

41

postări

Comentarii

Aceasta pare a fi o problemă de javascript, dar în întrebare nu există mențiune de javascript.

Wyck

13 apr. 2013 09:12:27

Încă nu reușesc să rezolv. Am căutat soluții toată noaptea pe Google și mă uimește faptul că nu găsesc pe cineva cu o cerință similară.

minemind

13 apr. 2013 17:20:51

Nu este o problemă de javascript. Este o problemă legată de WordPress și PHP. Trebuie să găsesc o metodă prin care fereastra Modal să recunoască care <div> a fost apăsat, astfel încât să poată referenția ID-ul corect al paginii pentru a extrage informațiile potrivite în funcție de elementul <div> pe care se face clic.

minemind

13 apr. 2013 17:22:01

Este greu de înțeles despre ce vorbești, vrei să încarci prin AJAX?

Wyck

13 apr. 2013 21:40:30

Încerc să fiu mai clar. Să presupunem că am deja un tip de postare personalizată creat, iar acest tip de postare are un șablon de pagină care afișează doar titlurile postărilor. Vreau ca atunci când fac clic pe titlul unei postări, aceasta să se deschidă într-o fereastră modală Bootstrap și să conțină metadatele: titlu, conținut, dată etc.

Am deja toate acestea configurate, dar indiferent pe ce titlu de postare fac clic, se deschide doar cea mai recentă postare adăugată în fereastra modală. Trebuie să mă asigur cumva că fereastra modală știe pe ce titlu de postare s-a făcut clic, pentru a putea afișa metadatele corecte ale postării.

Acum este mai clar?

minemind

14 apr. 2013 04:02:57

Arată celelalte 1 comentarii

Toate răspunsurile la întrebare

minemind 41 · Answer 1 · 2013-04-14T06:47:34Z

Acest lucru a fost rezolvat și iată cum s-a făcut:

Grila și fereastra modală sunt într-o buclă. Am adăugat pur și simplu -<? the_ID(); ?> atât la <a href> care apelează fereastra modală, cât și la <div id> pentru fereastra modală, care cumva transmite ID-ul articolului către fereastră, permițându-i să extragă informațiile corecte pentru articol.

    <div class="container" style="margin-top:20px; min-height:500px;" >
  <div class="row">
    <?php 
   // Interogare pentru slider-uri cu maxim 1000 de articole
   $labels = new WP_Query(array(
    'post_type' => 'slider', 
    'posts_per_page' => 1000
    )); 
   while ( $labels->have_posts() ) : 
   $labels->the_post();
  ?>
    <?php
// Obține sursa imaginii featured cu dimensiunea specificată
$src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), array( 5600,1000 ), false, '' );
?>
    <a href="#myModal-<? the_ID(); ?>" data-toggle="modal" >
    <div class="span2" style="background: #09F url(<?php echo $src[0]; ?>) center no-repeat !important;">
      <?php the_title();?>
    </div>
    </a>




    <div id="myModal-<? the_ID(); ?>" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-header">
        <h3 id="myModalLabel">
          <?php the_title();?>
        </h3>
        <p>
          <?php the_content();?>
        </p>
      </div>
      <div class="modal-body">
        <?php the_post_thumbnail(); ?>
      </div>
      <div class="modal-footer">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
      </div>
    </div>

Wasim Khan 159 · Answer 2 · 2019-06-22T10:56:57Z

Pentru a obține conținutul postărilor WordPress într-un modal Bootstrap -

Apelarea fișierului modal

<a href="<?php bloginfo('template_url');?>/modal.php?ID=<?php the_ID(); ?>" data-toggle="modal"> Vezi Detaliile </a>

Creează fișierul modal.php în directorul temei tale

<?php
   require('/wp-blog-header.php');  // WordPress are nevoie să recunoască fișierul modal care încarcă majoritatea funcționalităților WordPress pe care le folosești.
   $post_id = $_GET['ID'];
   $queried_post = get_post($post_id);
   $queried_object = get_queried_object();
?>

<div class="modal-dialog">
           <div class="modal-content">
                <div class="modal-header">
                   <h4 class="modal-title" id="myModalLabel"><?php echo $queried_post->post_title; ?></h4>
                   <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">X</span><span class="sr-only">Închide</span></button>
                 </div>
                 <div class="modal-body">
                       <?php
                       echo $queried_post->post_content;
                       ?>
                 </div>
              </div>
</div>