Получать контент из сообщений WordPress в модальном окне Boostrap – сторона Javascript?

У меня есть страница WordPress с сеткой, которая вытягивает сообщения. Каждое сообщение находится в поле с надписью + миниатюра и при нажатии на нее содержимое сообщения должно также отображаться в модальном (а именно, вытягивая данные из поста, который щелкнут).

Я смотрю на этот пример: открывайте сообщения WordPress в Bootstrap Modal и можете заставить его работать с атрибутами данных, а именно:

<ul class="thumbnails-x"> <?php $labels = new WP_Query(array( 'post_type' => 'x', 'posts_per_page' => 1000 )); while ( $labels->have_posts() ) : $labels->the_post(); ?> <li class="yy"> <?php echo '<div class="thumbnail">';?> <a href="<?php echo get_permalink(); ?>"> <?php the_post_thumbnail('');?></a> **<button type="button" data-toggle="modal" data-target="#myModal-<? the_ID(); ?>"><?php the_title();?></button>** </li> <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(); ?> </ul> 

Но, к сожалению, я просто не могу заставить его работать через Javascript. Было бы здорово, если кто-нибудь сможет мне помочь с кодом и как я могу реализовать динамическую функцию в нем? Следующие просто не работают, если у меня вместо кнопки:

 <a href="#myModal-<? the_ID(); ?>" data-toggle="modal" id="clickme"> <?php the_title();?> </a> 

а затем в файле js:

  **$(document).ready(function(){ $("#clickme").on ("click", function(){ $("myModal-<?the_ID();>").modal();}); });** 

Спасибо большое!

Solutions Collecting From Web of "Получать контент из сообщений WordPress в модальном окне Boostrap – сторона Javascript?"

Поскольку я предполагаю, что вы не отрисовываете этот Javascript-файл с PHP, вам нужно будет отправить идентификатор сообщения этой анонимной функции, используя что-то другое, кроме PHP. Вы можете использовать атрибут data в свой #clickme <a> как data-id="<?php the_ID(); ?>" затем изменить свой клик на:

  $(document).ready(function(){ $("#clickme").on ("click", function(){ $("#myModal-" + $(this).attr('data-id')).modal();}); }); 

Или что-то подобное этому.

Есть два возможных способа выполнить то, что вы собираетесь делать, как подробно описано в моем сообщении в блоге: https://allurewebsolutions.com/open-wordpress-post-modal-without-plugin

Первый метод

Первый метод требует изменения шаблона, который обслуживает контент, который вы хотите отобразить в модальном. Например, у вас есть шаблон под названием modal-content-template.php .

Внутри этого шаблона мы переносим содержимое, которое мы хотим загрузить в модальный, с помощью:

 <?php if (!$_GET) { ?> // content that gets loaded on mobile <?php } ?> 

Полный пример шаблона, в котором мы исключаем заголовок и нижний колонтитул WordPress:

 <?php if (!$_GET) { get_header(); } ?> <article> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <h1 class="page-title"></h1> <section class="entry-content cf"> <?php the_content(); ?> </section> </article> <?php if (!$_GET) { get_footer(); } ?> 

Пример CodePen для JS, необходимый для выполнения этой работы

Второй метод

Второй способ немного более изящный. Мы используем modalContent.load(post_link + ' #modal-ready'); метод загрузки модального контента.

Модальный контакт обернут в контейнер-упаковщик с идентификатором #modal-ready . Это можно сделать, даже не касаясь шаблона страницы, используя функцию, которая перехватывает содержимое.

 add_action('the_content', 'wrap_content'); function wrap_content($content) { return '<div id="modal-ready">' . $content . '</div>'; }