Magnific Popup получить постоянную ссылку на пост родителя

Question

Я настроил пользовательский тип сообщения "Женщины".Есть 56 постов, которые включают портрет и биографию.Затем я настроил страницу галереи, которая получает миниатюру каждого поста и отображает ее в галерее.При нажатии на миниатюру открывается модальное с полноразмерным изображением с помощью Magnific Popup.Где я застреваю, пытается выяснить, как добавить постоянную ссылку из подписи к изображению на одну страницу для женщин?В этом фрагменте постоянная ссылка ссылается на текущую страницу, а не на родительский пост.Могу ли я получить направление форматирования titleSrc?Спасибо.

<ul class="popup-gallery scroll-effect">
            <?php
            $args = array('post_type' => 'women','orderby' => 'title', 'order' => 'ASC', 'posts_per_page' => 100);
            $loop = new WP_Query( $args ); 

            while ( $loop->have_posts() ) : $loop->the_post(); 
                $image = get_field('portrait');
                $post_id = get_field('url', false, false);

                if( !empty($image) ): 
                $url = $image['url'];
                $title = $image['title'];
                $alt = $image['alt'];
                $size = 'medium';
                $thumb = $image['sizes'][ $size ];
                $width = $image['sizes'][ $size . '-width' ];
                $height = $image['sizes'][ $size . '-height' ];
                ?>

                <li>
                    <a href="<?php echo $url; ?>" title="<?php echo $title; ?>">
                        <img class="icon" src="<?php echo get_template_directory_uri(); ?>/i/icon-image-expand.png">
                        <img src="<?php echo $thumb; ?>" alt="<?php echo $alt; ?>" width="<?php echo $width; ?>" height="<?php echo $height; ?>" />
                    </a>
                </li>

                <?php endif; ?>
            <?php endwhile; wp_reset_query();?> 
        </ul>

$('.popup-gallery').magnificPopup({
    delegate: 'a',
    type: 'image',
    tLoading: 'Loading image #%curr%...',
    mainClass: 'mfp-img-mobile',
    gallery: {
        enabled: true,
        navigateByImgClick: true,
        preload: [0,1]
    },
    image: {
        tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
        titleSrc: function(item) {
         return item.el.attr('title') + ' &bull; <a href="<?php echo get_the_permalink(); ?>">Her Story</a>';
        }
    }
});

Answer 1

PHP part

В теге <a> установите для href постоянную ссылку для одного сообщения и установите data-mfp-src для URL-адреса изображения ($url):

<li>
  <a href="<?php the_permalink(); ?>" data-mfp-src="<?php echo $url; ?>" title="<?php echo $title; ?>">...</a>
</li>

JS part

В обратном вызове titleSrc вы можете использовать item.el.attr('href'), чтобы получить постоянную ссылку для одного сообщения:

titleSrc: function(item){
  return item.el.attr('title') + ' &bull; <a href="' + item.el.attr('href') + '">Her Story</a>';
}

Я положил демо на CodePen , а более подробную информацию об атрибуте data-mfp-src см. в документации .