Abrir Entradas de WordPress en Ventana Modal de Bootstrap

Question

Abrir Entradas de WordPress en Ventana Modal de Bootstrap

13 abr 2013, 02:28:35

Vistas: 20.9K

Votos: 1

Estoy buscando ayuda para abrir entradas de WordPress en una ventana Modal de Bootstrap.

Actualmente tengo una página de inicio con una cuadrícula que muestra entradas.

Lo tengo configurado para que cada entrada esté en un cuadro y enlazada para abrir la ventana Modal de Bootstrap.

La ventana modal debería obtener los datos de la entrada en la que se hace clic.

En este momento, solo abre la última entrada de la página sin importar en qué entrada se haga clic.

Supongo que necesito hacer que la ventana modal sepa en qué entrada se ha hecho clic para que pueda obtener los datos correctos, pero estoy perdido.

Cualquier ayuda sería apreciada.

Aquí está mi código actual:

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

<div class="alert">
  <?php _e('Lo sentimos, no se encontraron resultados.', '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

publicaciones

Comentarios

Esto suena como un problema de javascript y no hay javascript en la pregunta.

Wyck

13 abr 2013 09:12:27

Todavía no puedo resolver esto. He estado buscando respuestas en Google toda la noche y me sorprende no encontrar a alguien con una solicitud similar.

minemind

13 abr 2013 17:20:51

No es un problema de javascript. Es un problema de WordPress y PHP. Necesito que de alguna manera la ventana Modal sepa qué <div> se hizo clic para que pueda hacer referencia al ID de página correcto y extraer la información correcta dependiendo de qué <div> se hizo clic.

minemind

13 abr 2013 17:22:01

Es difícil entender de lo que estás hablando, ¿quieres cargar vía AJAX?

Wyck

13 abr 2013 21:40:30

Déjame intentar ser más claro. Digamos que ya tengo un tipo de publicación personalizada creada y este tipo de publicación tiene una plantilla de página que muestra solo los títulos de las publicaciones. Quiero poder hacer que al hacer clic en el título de la publicación, esta se abra en una ventana modal de Bootstrap y muestre los metadatos: título, contenido, fecha, etc.

Actualmente tengo todo esto configurado, pero no importa qué título de publicación se haga clic, solo abre la publicación agregada más recientemente en el modal. Necesito asegurarme de que la ventana modal sepa qué título de publicación se hizo clic para que pueda abrir los metadatos correctos de la publicación.

¿Eso ayuda?

minemind

14 abr 2013 04:02:57

Mostrar los 1 comentarios restantes

Todas las respuestas a la pregunta

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

Esto ya ha sido respondido y así es como se hizo:

La cuadrícula y la ventana modal están en un bucle. Simplemente agregué -<? the_ID(); ?> tanto al <a href> que llama a la ventana modal como al <div id> de la ventana modal, lo que de alguna manera pasa el ID de la publicación a la ventana permitiéndole cargar la información correcta para la publicación.

    <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>
<?php endwhile; ?>
<?php wp_reset_query(); ?>
  </div>
</div>

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

Para obtener los contenidos de una publicación de WordPress en un modal de Bootstrap -

Llama al archivo modal

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

Crea el archivo modal.php en tu carpeta del tema

<?php
   require('/wp-blog-header.php');  // WordPress necesita reconocer que tu archivo modal carga la mayoría de la funcionalidad de WordPress que estás acostumbrado a usar.
   $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">Cerrar</span></button>
                 </div>
                 <div class="modal-body">
                       <?php
                       echo $queried_post->post_content;
                       ?>
                 </div>
              </div>
</div>