Как вывести заголовок для каждого поста Wordpress в popup?

Question

[4yk777]

выводится одинаковый заголовок для всех постов

<?php
/*
Template Name: Разводящая страница
*/
?>





<?php get_header(); ?>
<div class="strelki">
<div class="container-fluid">
    <div class="row">  
        <div class="col-md-6">
        <div class="img__head" >       <?php 

$image = get_field('icon');

if( !empty($image) ): ?>

    <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />

<?php endif; ?> </div>
            <h1 class="zagolovok__pred"><?php the_title();?></h1>
        </div>
        <div class="col-md-6">
            <span class="phone text-right">7777777</span>
        </div>
        </div>
        </div>
    </div>


<div class="otstup__header"></div>

<div class="container-fluid">
 <div class="row">  
 <div class="col-md-12">

     <div class="crumbs">
<?php if( function_exists('kama_breadcrumbs') ) kama_breadcrumbs(); ?>
</div>
</div>

<div class="col-md-3">
<div class="sidebar">
     <?php dynamic_sidebar( 'left-side' ); ?>
</div>
</div>

        <div class="col-md-9">
        <div class="content__page">



<?php
$stati_children = new WP_Query(array(
  'post_type' => 'page',
  'post_parent' => get_the_ID()
  )
);

if($stati_children->have_posts()) :
  while($stati_children->have_posts()): $stati_children->the_post();
?>
  <div class="usluga__wrapper">
<?
  echo '<h2>'.get_the_title().'</h2>';
  ?>



   <div class="price">
    <?php echo get_field('price') ?>
    </div>
    <?php
  echo '<p>'.get_the_excerpt().'</p>';
  echo '<a class="button4" href="'.get_the_permalink().'">'.Подробнее.'</a>' ?>   
  
  
  <a data-toggle="modal" data-target="#exampleModal" class="button4 button2  popmake-1" href="#">заказать услугу</a>  <a class="button4 button3 popmake-204" href="">бесплатная консультация</a>



  <!-- Modal -->
  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Заказ услуги    <?php  echo get_the_title( $post  )   ;   ?>          </h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
    
     

      </div>
      <div class="modal-footer">
      
      </div>
    </div>
  </div>
</div>











   </div>
  <?php
  


endwhile;


endif; wp_reset_query();
?>




<?php get_footer(); ?>

Answer 1

[Егор Мальцев]

Я в таких случаях использую js (jquery).

На кнопку «Заказать услугу» вешаете data аттрибут с нужным названием, например

<a data-toggle="modal" data-title="<?php the_title(); ?>" data-target="#exampleModal" class="button4 button2 order-btn  popmake-1" href="#">заказать услугу</a>

Потом создаете функцию, которая при нажатии на кнопку будет менять заголовок попапа:

jQuery(document).ready(function($){
    $('.order-btn').click(function(){
    	var title = $(this).data('title');
    	$('#exampleModalLabel').text('Заказ услуги ' + title);
    })
});

Comments

[4yk777]

А без jquery можно реализовать? Встроенным функционалом wp или это более оптимальный вариант?

[Егор Мальцев]

4yk777, как решить без jquery я описал в комментариях к первому ответу Vova. Но у вас ведь модальное окно от Бутстрепа, значит jquery уже есть. И вообще, не стоит его бояться. Зайдите на главную яндекса и поищите «jquery» в их исходном коде. Даже там он есть.

[4yk777]

Егор Мальцев, как теперь этот заголовок передать в тему письма, скачал плагин Contact Form 7 - Dynamic Text Extension , в function.php добавил

/*Шорткод для cf7*/
 add_filter( 'wpcf7_form_elements', 'do_shortcode' );
 function hello_world_cf7_func($content) {
	return '[span id="exampleModalLabel"]    [/span>]' ;
}
add_shortcode('hello_world', 'hello_world_cf7_func');


add_filter('wpcf7_mail_components', 'do_shortcode_mail', 10, 3);
function do_shortcode_mail( $components, $contactForm, $mailComponent ){
	if( isset($components['body']) ){
		$components['body'] = do_shortcode($components['body']);
	}
	return $components;
}

[Егор Мальцев]

Не надо никаких дополнительных плагинов. Создайте обычное текстовое поле в cf7, скройте его через css и меняйте его значение вместе с заголовком окна при клике на кнопку, допишите туда что-то вроде $('.class').attr('value', title);

Answer 2

[Vova]

Надо к каждому посту прикрутить отдельный попап.
Или модалку так же запились в луп.

Comments

[4yk777]

Более 200 постов, как реализовать второй вариант

[Егор Мальцев]

Модалка и так «в лупе». Модальное окно выводится до функции endwhile;. Поэтому, можно, либо сразу прописывать заголовок модального окна и менять его id и менять target вызова окна на кнопке, либо выносить его из цикла и менять заголовок при клике на кнопку, как я ниже написал.

Answer 3

[id_baton4eg]

использовать анонимную функцию для приклейки в футер.
ид окна = $post->ID

add_action('wp_footer',function($post) {
тут код вспл. окна.
и не забудьте, что get_the_title($post->ID), а не просто $post
},99)