15196028940
info@mac163.com
会员登录

如何在WordPress中添加Pinterest的“ Pin It”按钮（最终指南）

您是否要在WordPress中添加Pinterest的“ Pin It”按钮？最近，我们的博客统计信息中弹出了一个新的流量来源。

对于我们来说足够重要了。该流量来源为Pinterest。

Pinterest是一个受欢迎的社交网站，它允许您共享视觉内容并为您的网站吸引大量流量（请关注Pinterest上的WPBeginner）。

在本文中，我们将向您展示如何将Pinterest“ Pin It”按钮添加到WordPress博客。我们还将说明如何在您的网站图片上方添​​加Pin It按钮。

使用插件添加Pinterest的“ Pin It”按钮

Pinterest 在2016年正式将“ Pin It”按钮的名称更改为Save。

尽管某些插件仍使用“ Pin It”代替“保存”，但它们将图像固定到Pinterest的工作相同。

将Pinterest按钮添加到WordPress网站的最简单方法是使用社交共享插件。

我们建议为此目的使用Shared Counts插件。它是WordPress的最佳社交媒体插件，因为它是免费的，并允许您轻松地将Pinterest按钮与其他流行的社交网络一起添加。

首先，您需要安装并激活Shared Counts插件。您可以按照分步指南了解如何安装WordPress插件，以获取详细说明。

如何在wordpress中添加pinterest的“ Pin It”按钮
如何在wordpress中添加pinterest的“ Pin It”按钮

安装后，转到设置»共享计数页面以配置插件。

在设置页面上，您需要向下滚动到“ 显示”部分，然后单击“显示的共享按钮”文本框。

这将打开一个下拉菜单，您可以在其中选择要添加的社交媒体服务。默认情况下，Pinterest会与Facebook和Twitter一起出现在该框中。

您还可以选择要显示Pinterest按钮的位置和帖子类型。它带有多种按钮样式，您可以从“共享按钮样式”选项中进行选择。

完成后，请不要忘记单击“ 保存更改”按钮来存储设置。

现在，您可以访问网站上的任何帖子，查看运行中的Pinterest按钮。

关于SharedCounts的另一件事是，Github上提供了免费的Custom Pinterest Image插件。这使您可以设置针对Pinterest优化的自定义Pinterest共享图像和描述。

注意：我们在网站上使用SharedCount插件，因为它是市场上最好的选择。它的编码非常好，而且是免费的。

在WordPress中手动添加Pinterest Pin It按钮

一些中级用户可能希望将社交共享按钮手动添加到他们的WordPress网站，而不是使用插件。

让我们看一下如何在WordPress中手动添加Pinterest按钮。

您需要做的第一件事是对网站进行完整的WordPress备份。如果意外损坏，这将帮助您恢复站点。

接下来，您需要使用FTP客户端连接到WordPress托管，然后转到/ wp-content / themes /文件夹。

在这里，您需要打开当前的主题文件夹，然后找到footer.php文件。

接下来，只需右键单击该文件，然后从菜单中选择下载。这会将footer.php文件下载到您的计算机。

现在，您需要使用纯文本编辑器（如记事本）打开footer.php文件，然后将以下脚本粘贴到</body>标签之前。

<script type="text/javascript">(function() {    window.PinIt = window.PinIt || { loaded:false };    if(window.PinIt.loaded) return;    window.PinIt.loaded = true;    functionasync_load(){        vars = document.createElement("script");        s.type = "text/javascript";        s.async = true;        s.src = "https://assets.pinterest.com/js/pinit.js";        varx = document.getElementsByTagName("script")[0];        x.parentNode.insertBefore(s, x);    }    if(window.attachEvent)        window.attachEvent("onload", async_load);    else        window.addEventListener("load", async_load, false);})();</script>

完成此操作后，需要保存文件，然后将其上传回当前主题文件夹。

接下来，您需要从主题文件夹中找到并下载single.php文件，然后将其打开以进行编辑。之后，您需要添加以下代码。

您需要选择要在帖子中显示的位置。帖子后标题是社交媒体按钮最常见的位置。

<?php $pinterestimage= wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full'); ?><a href="http://pinterest.com/pin/create/button/?url=<?php echo urlencode(get_permalink($post->ID)); ?>&media=<?php echo $pinterestimage[0]; ?>&description=<?php the_title(); ?>"class="pin-it-button"count-layout="vertical">Pin It</a>

上面的代码显示“ Pinterest”按钮，并在“共享URL”参数中显示您的特色图片，标题，描述和发布URL。

最后，您需要保存文件，然后使用FTP将其上传回主题目录。

这将在您的网站帖子中添加一个垂直共享按钮。如果要显示水平共享按钮，只需将count-layout参数更改为水平。

为Pinterest按钮创建简码

最近，我们的一位用户问我们如何为Pinterest的“ Pin It”按钮创建简码。

WordPress中的简码可让您轻松地将动态项目添加到WordPress帖子，页面和小部件中。通过创建简码，您将能够在文章中手动添加Pinterest按钮。

首先，您需要将以下代码添加到主题的functions.php文件或特定于站点的插件中：

functionget_pin($atts) {$pinterestimage= wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full');return'<a href="http://pinterest.com/pin/create/button/?url='. urlencode(get_permalink($post->ID)) . '&media='. $pinterestimage[0] . '&description='. get_the_title() .'" class="pin-it-button" count-layout="vertical">Pin It</a>'; }
add_shortcode('pin', 'get_pin');

之后，您可以在想要显示Pinterest按钮的WordPress帖子中使用[pin]短代码。

在图片上添加Pinterest Pin It按钮

如果您经营的是时装，摄影或投资组合网站，则绝对希望在Pinterest上共享图像，以增加网站流量。

让我们看一下如何在WordPress图片上添加Pinterest Pin it按钮。仅当用户将鼠标移到您的图片上时，此按钮才会显示，从而使他们可以轻松地在其Pinterest个人资料上共享图片。

首先，您需要安装并激活“ Pinterest图片固定按钮”插件。

激活后，转到设置»Pinterest Pin It页面以配置插件。

在设置页面上，您可以选择要在WordPress网站上显示“固定”按钮的位置。您只能在单个帖子，页面，类别页面或网站上的任何位置显示它。

下一个选项是从下拉菜单中选择默认描述。这将用作固定图像的图像描述。

完成后，您需要单击“ 保存”按钮来存储设置。现在，您可以访问您的网站，然后将鼠标悬停在任何图像上，以查看Pinterest的“ Pin It”按钮。

如果要排除某些图像以使其不显示Pin It按钮，则可以将nopin CSS类添加到要排除的图像中。

为此，您需要在帖子编辑器中选择图像块，然后单击块工具栏上的3个垂直点图标。这将打开一个菜单，您需要单击“ 另存为HTML”选项。

现在，您将看到图像的HTML代码。继续将nopin添加到img标签的class属性中：

<figureclass="wp-block-image"><imgsrc="https://example.com/wp-content/uploads/2019/06/imagename.jpg"alt="image name"class="nopin wp-image-1687"/></figure>

同样，您也可以使用插件禁用“ Pin It”按钮的自动显示，并使用CSS类“ pinthis”在特定图像上有选择地显示按钮。

为此，您需要访问插件的设置页面，然后在页面右侧找到“ 高级”部分。

现在，您需要选中仅在class =“ pinthis”’的图像上显示’Pin it’按钮的选项，然后单击Save按钮。

下次将图像添加到帖子或页面时，需要选择图像块，然后使用“ 编辑为HTML”选项将pinthis CSS类添加到图像代码。这是一个例子：

<figureclass="wp-block-image"><imgsrc="https://example.com/wp-content/uploads/2019/06/imagename.jpg"alt="image name"class="pinthis wp-image-1687"/></figure>

即使您已禁用自动在您的网站上显示Pin It按钮的选项，这也会在该特定图像上显示Pinterest按钮。

相关内容

回到顶部