如何在 WordPress 中添加 Pinterest“Pin It”按钮(4 种方式)

您想在 WordPress 中添加 Pinterest 的"Pin It"按钮吗?

Pinterest 是一个流行的社交网站,可让您分享视觉内容并为您的网站带来大量流量.添加固定按钮可让访问者更轻松地分享您的内容.

在本文中,我们将向您展示如何将 Pinterest 的"Pin It"按钮添加到您的 WordPress 博客.

Add Pinterest Pin It button in WordPress

有多种方法可以将 Pinterest Pin It 按钮添加到您的 WordPress 网站.您可以使用 WordPress 插件来固定图像或使用代码手动添加 Pin It 按钮.

除此之外,您还可以创建一个短代码,将 Pinterest 按钮添加到您网站的任何位置,并允许用户通过将鼠标悬停在图像上来将图像保存到 Pinterest.

在本指南中,我们将介绍所有这些方法,因此您可以跳到您喜欢的方法.

  • 使用插件添加 Pinterest"Pin It"按钮
  • 在 WordPress 中手动添加 Pinterest Pin It 按钮
  • 为 Pinterest 按钮创建简码
  • 在您的图像上添加 Pinterest Pin It 按钮

使用插件添加 Pinterest"Pin It"按钮

Pinterest 于 2016 年正式将"Pin It"按钮名称更改为保存.

尽管某些插件仍然使用"Pin It"这个名称而不是 Save,但它们的作用是将您的图片固定到 Pinterest.

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

我们建议为此使用共享计数插件.它是 WordPress 最好的社交媒体插件之一,因为它是免费的,并且允许您轻松添加 Pinterest 按钮以及其他流行的社交网络.

要开始使用,您需要安装并激活 Shared Counts 插件.您可以按照我们关于如何安装 WordPress 插件的分步指南获取详细说明.

安装后,转到设置»用于配置插件的共享计数页面.

Shared Counts settings page

在设置页面上,您需要向下滚动到显示部分,然后单击"共享按钮以显示"文本框.

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

该插件带有多种按钮样式,您可以从"共享按钮样式"选项中进行选择.您还可以选择要显示 Pinterest 按钮的位置和帖子类型.

完成设置选择后,不要忘记点击保存更改按钮.

您现在可以访问您网站上的任何帖子,查看 Pinterest 按钮的运行情况.

Pinterest button added to WordPress post

SharedCounts 的另一个优点是 Github 上提供的免费自定义 Pinterest 图片插件.这让您可以设置针对 Pinterest 优化的自定义 Pinterest 共享图片和说明.

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

一些中级用户可能更喜欢手动将社交分享按钮添加到他们的 WordPress 网站,而不是使用插件.

我们来看看如何在 WordPress 中手动添加 Pinterest 按钮.

您需要做的第一件事是对您的网站进行完整的 WordPress 备份.这将帮助您在意外中断时恢复您的网站.

接下来,您需要向页脚添加一些代码.您可以使用插件将页脚代码添加到您的 WordPress 网站,或按照以下说明手动添加.

首先,您需要使用 FTP 客户端连接到您的 WordPress 主机,然后转到/wp-content/themes/文件夹.

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

Download footer php file

接下来,只需右键单击该文件,然后从菜单中选择下载.这会将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;
    function async_load(){
        var s = document.createElement("script");
        s.type = "text/javascript";
        s.async = true;
        s.src = "https://assets.pinterest.com/js/pinit.js";
        var x = 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>

完成后,您需要保存文件,然后将其上传回当前主题文件夹.

接下来,您需要在主题中找到要添加按钮的模板文件.如果您不确定,可以查看我们的 WordPress 模板层次结构初学者指南.通常它是 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 按钮创建简码

WordPress 中的短代码允许您轻松地将动态项目添加到您的 WordPress 帖子、页面和小部件.通过创建短代码,您将能够在文章中手动添加 Pinterest 按钮.

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


function get_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');

如需更多帮助,请参阅我们的初学者指南,将网页中的片段粘贴到 WordPress 中.

添加代码后,您可以在要显示 Pinterest 按钮的 WordPress 帖子中使用 [pin] 短代码.

在图片上添加 Pinterest Pin It 按钮

如果您经营的是时尚、摄影或作品集网站,那么您肯定希望在 Pinterest 上分享您的图片以增加网站流量.

在 WordPress 中的图片上方添​​加 Pinterest Pin it 按钮,用户只需将鼠标悬停在他们想要分享的图片上,即可轻松固定您网站上的任何图片.

首先,您需要安装并激活 Weblizar Pin It Button On Image Hover And Post 插件.有关更多详细信息,您可以参阅我们关于如何安装 WordPress 插件的指南.

激活后,从您的 WordPress 管理面板转到 PinIt 按钮页面以配置插件.

Pin it Button settings

您可以选择是否要在 WordPress 博客文章或设置页面上的页面上显示 Pin It 按钮.您还应该确保"在图像悬停时显示固定按钮"选项设置为"是".

除此之外,该插件还允许您在移动设备上显示 Pin It 按钮并编辑按钮的大小.完成后,您需要存储设置.

现在您可以访问您的网站,然后将鼠标光标悬停在任何图像上以查看 Pinterest 固定或"保存"按钮.

View your pin it button

如果您想从显示"固定"或"保存"按钮中排除某些图像,则可以从 WordPress 仪表板转到 PinIt 按钮 页面,然后从设置中选择"排除图像"选项卡.

您所要做的就是输入要从显示固定按钮中排除的图像 URL,然后单击"+ 添加"按钮.

Exclude images from pin it button

您还可以使用插件从显示 Pinterest 保存或固定按钮的页面中排除页面.只需转到"排除页面"选项卡并添加页面名称.

Exclude pages from pin it button

仅此而已!

我们希望本文能帮助您了解如何将 Pinterest 的"Pin It"按钮添加到您的 WordPress 博客.您可能还想查看我们关于如何创建电子邮件简报的指南,或者查看我们对最佳网页设计软件的比较.

1
订阅评论
提醒
0 评论
内联反馈
查看所有评论