Question

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

功能：将鼠标悬停在帖子图片上，然后按钮按钮会显示哪些特定帖子网址带有标题的帖子。

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

我知道我不能拥有两个HREF属性，但是我被卡住了 - 这段代码完全打破了图像，没有按指定的方式拉取数据（描述，发布网址等）。

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 } ?>

Answer 1

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

Answer 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 } ?>

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

2 个答案: