Pinit 按钮，每个图像都有唯一的 URL（带有链接到帖子页面的图像的类别页面）答案

【问题标题】：Pinit button with unique URL for each image (category page with images linking to post pages)Pinit 按钮，每个图像都有唯一的 URL（带有链接到帖子页面的图像的类别页面）
【发布时间】：2016-03-25 06:52:14
【问题描述】：

我试图让用户能够从类别页面固定帖子：

功能：将鼠标悬停在帖子图片上，pin 按钮会显示该特定帖子 URL 的 pin 以及从帖子中提取的标题。

他们应该能够固定的唯一方法是单击按钮，单击图像上的任意位置应将用户带到帖子页面本身。

我知道我不能有两个 HREF 属性，但我被卡住了 - 这段代码完全破坏了图像，并且没有按照指定的方式提取任何数据（描述、发布 url 等）。

script async defer src="//assets.pinterest.com/js/pinit.js"></script>

<a data-pin-do="buttonPin" data-pin-hover="true" data-pin-url="<?php the_permalink(); ?>" data-pin-description="<?php the_title(); ?>" href="https://www.pinterest.com/pin/create/button/" href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__('%s', 'minti'), the_title_attribute('echo=0') ); ?>" rel="bookmark">
    <?php the_post_thumbnail(); ?>
</a>

谢谢！

想出解决方案以防万一：

<div class="entry-image">
        <script async defer src="//assets.pinterest.com/js/pinit.js"></script>
        <?php $feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>
        <div class="pinbutton" style="position: absolute; top: 10px; right: 10px; display: none;"><a data-pin-do="buttonPin" data-pin-hover="true" data-pin-media="<?php echo $feat_image; ?>" data-pin-url="<?php the_permalink(); ?>" data-pin-description="<?php the_title(); ?>" href="https://www.pinterest.com/pin/create/button/"></a></div>
        <a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__('%s', 'minti'), the_title_attribute('echo=0') ); ?>" rel="bookmark">
            <?php the_post_thumbnail(); ?>
        </a>
    </div>
    <script type="text/javascript">
    jQuery(document).ready(function($) {
        $('.entry-image').mouseenter(function() {
            $(this).children('.pinbutton').fadeIn('fast');
        }); 
        $('.entry-image').mouseleave(function() {
            $(this).children('.pinbutton').fadeOut('fast');
        });
    });
    </script>
    <?php } ?>

【问题讨论】：

标签： html pinterest

【解决方案1】：

我想答案在这里等着你：Pinterest Developers

【讨论】：

谢谢，但没有答案。您不能有一个带有两个 HREF 属性的“pinterest.com/pin/create/button，而图片实际上需要链接到帖子的URL。
那时你需要 HTML、CSS 和 JS，但我也不懂 JS。我建议您尝试为每个 pin-it 按钮制作
，然后在悬停时显示它。
好主意！这应该可以通过一点 css 操作来实现。谢谢！ :)

【解决方案2】：

该解决方案需要一些 js/css 和（在这种情况下）wordpress 调用：

<div class="entry-image">
        <script async defer src="//assets.pinterest.com/js/pinit.js"></script>
        <?php $feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>
        <div class="pinbutton" style="position: absolute; top: 10px; right: 10px; display: none;"><a data-pin-do="buttonPin" data-pin-hover="true" data-pin-media="<?php echo $feat_image; ?>" data-pin-url="<?php the_permalink(); ?>" data-pin-description="<?php the_title(); ?>" href="https://www.pinterest.com/pin/create/button/"></a></div>
        <a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__('%s', 'minti'), the_title_attribute('echo=0') ); ?>" rel="bookmark">
            <?php the_post_thumbnail(); ?>
        </a>
    </div>
    <script type="text/javascript">
    jQuery(document).ready(function($) {
        $('.entry-image').mouseenter(function() {
            $(this).children('.pinbutton').fadeIn('fast');
        }); 
        $('.entry-image').mouseleave(function() {
            $(this).children('.pinbutton').fadeOut('fast');
        });
    });
    </script>
    <?php } ?>

【讨论】：