Aprire Articoli WordPress in una Modal Bootstrap

Question

Aprire Articoli WordPress in una Modal Bootstrap

13 apr 2013, 02:28:35

Visualizzazioni: 20.9K

Voti: 1

Sto cercando assistenza per aprire gli articoli WordPress in una Modal Bootstrap.

Attualmente ho una homepage con una griglia che mostra gli articoli.

Ho configurato ogni articolo in un riquadro quadrato con un collegamento per aprire la finestra Modal di Bootstrap.

La finestra modale dovrebbe recuperare i dati dall'articolo su cui si fa clic.

Al momento, apre solo l'ultimo articolo della pagina indipendentemente dall'articolo su cui si fa clic.

Presumo di dover far sapere alla finestra modale quale articolo è stato cliccato in modo che possa recuperare i dati corretti, ma non so come fare.

Qualsiasi aiuto sarebbe apprezzato.

Ecco il mio codice attuale:

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

<div class="alert">
  <?php _e('Spiacenti, nessun risultato trovato.', '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

Commenti

Sembra un problema di javascript ma nella domanda non c'è javascript.

Wyck

13 apr 2013 09:12:27

Ancora non riesco a capirlo. Ho passato tutta la notte a cercare soluzioni su Google e mi sbalordisce non trovare nessuno con una richiesta simile.

minemind

13 apr 2013 17:20:51

Non è un problema di javascript. È un problema di WordPress e PHP. Devo in qualche modo far sapere alla finestra modale quale <div> è stato cliccato in modo che possa riferirsi al corretto ID della pagina per recuperare le informazioni giuste a seconda di quale <div> viene cliccato.

minemind

13 apr 2013 17:22:01

È difficile capire di cosa stai parlando, vuoi caricare via AJAX?

Wyck

13 apr 2013 21:40:30

Cerco di essere più chiaro. Supponiamo che ho già creato un custom post type e che questo tipo di post abbia un page template che mostra solo i titoli dei post. Voglio che quando si clicca sul titolo di un post, questo si apra in una finestra modale Bootstrap e mostri i metadati: titolo, contenuto, data, ecc.

Attualmente ho tutto configurato, ma non importa quale titolo venga cliccato, si apre sempre il post aggiunto più di recente nella modale. Devo fare in modo che la finestra modale sappia quale titolo del post è stato cliccato per poter aprire i metadati corretti del post.

Ora è più chiaro?

minemind

14 apr 2013 04:02:57

Mostra i restanti 1 commenti

Tutte le risposte alla domanda

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

Questa domanda è già stata risolta e questo è come è stato fatto:

La griglia e la finestra modale si trovano all'interno di un ciclo. Ho semplicemente aggiunto -<? the_ID(); ?> sia al tag <a href> che richiama la finestra modale, sia al <div id> della finestra modale, in modo da passare l'ID del post alla finestra consentendole di recuperare le informazioni corrette per il post specifico.

    <div class="container" style="margin-top:20px; min-height:500px;" >
  <div class="row">
    <?php 
   $labels = new WP_Query(array(
    'post_type' => 'slider', 
    'posts_per_page' => 1000
    )); 
   while ( $labels->have_posts() ) : 
   $labels->the_post();
  ?>
    <?php
$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>
  </div>
</div>

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

Per ottenere i contenuti dei post di WordPress in una modale Bootstrap -

Chiama il file della modale

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

Crea il file modal.php nella tua cartella del tema

<?php
   require('/wp-blog-header.php');  // WordPress ha bisogno di riconoscere che il tuo file modale carica la maggior parte delle funzionalità di WordPress che sei abituato a usare.
   $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">Chiudi</span></button>
                 </div>
                 <div class="modal-body">
                       <?php
                       echo $queried_post->post_content;
                       ?>
                 </div>
              </div>
</div>