मैंने एक कस्टम पोस्ट प्रकार "महिला" की स्थापना की। 56 पोस्ट हैं जिनमें एक पोर्ट्रेट और बायो शामिल है। फिर, मैंने एक गैलरी पेज सेट किया है जो प्रत्येक पोस्ट से थंबनेल प्राप्त करता है और इसे गैलरी में प्रदर्शित करता है। थंबनेल पर क्लिक करने से मैग्नीफिक पॉपअप का उपयोग करके पूर्ण आकार की छवि वाला एक मोडल खुल जाता है। जहां मैं फंस गया हूं वह यह पता लगाने की कोशिश कर रहा है कि छवि कैप्शन से महिला एकल पृष्ठ पर परमालिंक कैसे जोड़ा जाए? इस स्निपेट में, परमालिंक वर्तमान पृष्ठ पर वापस लिंक करता है, पोस्ट पैरेंट से नहीं। क्या मुझे शीर्षक एसआरसी स्वरूपित कुछ दिशा मिल सकती है? धन्यवाद।

<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>';
        }
    }
});
0
Cory M 12 पद 2018, 05:29

1 उत्तर

सबसे बढ़िया उत्तर

पीएचपी भाग

<a> टैग में, href को सिंगल पोस्ट परमालिंक पर सेट करें, और data-mfp-src को इमेज यूआरएल ($url) पर सेट करें:

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

जेएस भाग

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 विशेषता के बारे में विवरण, दस्तावेज देखें। ए>।

1
Sally CJ 13 पद 2018, 14:14