Открытие записей WordPress в модальном окне Bootstrap

Question

Открытие записей WordPress в модальном окне Bootstrap

13 апр. 2013 г., 02:28:35

Просмотры: 20.9K

Голосов: 1

Мне нужна помощь в открытии записей WordPress в модальном окне Bootstrap.

Сейчас у меня есть главная страница с сеткой, которая выводит записи.

Настроено так, что каждая запись находится в квадратном блоке и связана ссылкой для открытия модального окна Bootstrap.

Модальное окно должно загружать данные из той записи, по которой был совершен клик.

На данный момент оно открывает только последнюю запись на странице, независимо от того, по какой записи был сделан клик.

Полагаю, мне нужно сообщить модальному окну, какая запись была выбрана, чтобы оно могло загрузить правильные данные, но я не знаю как это сделать.

Буду благодарен за любую помощь.

Вот мой текущий код:

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

<div class="alert">
  <?php _e('Извините, результаты не найдены.', '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

записи

Комментарии

Похоже на проблему с javascript, но в вопросе нет ничего о javascript.

Wyck

13 апр. 2013 г. 09:12:27

Я все еще не могу разобраться с этим. Я провел всю ночь в поисках ответов в Google, и меня поражает, что я не могу найти никого с похожим запросом.

minemind

13 апр. 2013 г. 17:20:51

Это не проблема javascript. Это проблема WordPress и PHP. Мне нужно каким-то образом дать модальному окну понять, по какому <div> был выполнен клик, чтобы оно могло ссылаться на правильный ID страницы и получать соответствующую информацию в зависимости от того, по какому <div> был выполнен клик.

minemind

13 апр. 2013 г. 17:22:01

Трудно понять, о чем вы говорите, вы хотите загружать через AJAX?

Wyck

13 апр. 2013 г. 21:40:30

Попробую объяснить понятнее. Допустим, у меня уже есть созданный пользовательский тип записи, и у этого типа записи есть шаблон страницы, который показывает только заголовки записей. Я хочу, чтобы при клике на заголовок записи она открывалась в модальном окне Bootstrap и содержала метаданные: заголовок, контент, дату и т.д.

Сейчас у меня все это настроено, но независимо от того, на какой заголовок записи я кликаю, в модальном окне открывается самая недавно добавленная запись. Мне нужно каким-то образом убедиться, что модальное окно понимает, на какой именно заголовок был клик, чтобы открывать корректные метаданные записи.

Теперь понятнее?

minemind

14 апр. 2013 г. 04:02:57

Показать остальные 1 комментариев

Все ответы на вопрос

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

Это было решено следующим образом:

Сетка и модальное окно находятся в цикле. Я просто добавил -<? the_ID(); ?> как к <a href>, вызывающей модальное окно, так и к <div id> для модального окна, что каким-то образом передает ID записи в окно, позволяя подтягивать правильную информацию для записи.

    <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>

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

Для получения содержимого записи WordPress в модальном окне Bootstrap -

Вызов файла модального окна

<a href="<?php bloginfo('template_url');?>/modal.php?ID=<?php the_ID(); ?>" data-toggle="modal"> Получить детали </a>

Создайте файл modal.php в папке вашей темы

<?php
   require('/wp-blog-header.php');  // WordPress должен распознать ваш файл модального окна, фактически загружая большую часть функционала WordPress, который вы привыкли использовать.
   $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">Закрыть</span></button>
                 </div>
                 <div class="modal-body">
                       <?php
                       echo $queried_post->post_content;
                       ?>
                 </div>
              </div>
</div>