Do you want to add the Pinterest “Pin It” button in WordPress? Recently, a new traffic source popped up in our blog stats.

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

It was significant enough for us to take notice. This traffic source was Pinterest.

这足以使我们注意。 该流量来源为Pinterest。

Pinterest is a popular social networking site that allows you to share visual content and drive a lot of traffic to your website (follow WPBeginner on Pinterest).

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

In this article, we will show you how to add the Pinterest “Pin It” button to your WordPress blog. We will also explain how to add the Pin It button over the images of your website.

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

使用插件添加Pinterest“ Pin It”按钮 (Adding a Pinterest “Pin It” Button Using a Plugin)

Pinterest officially changed the “Pin It” button name to Save in 2016.

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

Although some plugins still use the name “Pin It” instead of Save, they do the same job of pinning your images to Pinterest.

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

The easiest way to add a Pinterest button to your WordPress site is by using a social sharing plugin.

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

We recommend using Shared Counts plugin for this purpose. It is the best social media plugin for WordPress because it’s free and allows you to easily add the Pinterest button along with other popular social networks.

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

To get started, you need to install and activate the Shared Counts plugin. You can follow our step by step guide on how to install a WordPress plugin for detailed instructions.

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

Upon installation, head over to Settings » Shared Counts page to configure the plugin.

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

On the settings page, you need to scroll down to the Display section and then click on the “Share Buttons to Display” textbox.

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

This will open a dropdown menu where you can select the social media services you want to add. By default, Pinterest will be present in that box, along with Facebook and Twitter.

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

You can also select the location and post type where you want to display the Pinterest button. It comes with multiple button styles that you can choose from the ‘Share button style’ option.

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

Once you are done, don’t forget to click on the Save Changes button to store the settings.

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

You can now visit any post on your website to see the Pinterest button in action.

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

Another neat thing about SharedCounts is the free Custom Pinterest Image addon available on Github. This lets you set a custom Pinterest sharing image and description that’s optimized for Pinterest.

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

Note: We use SharedCount plugin on our website because it’s the best option in the market. It’s very well-coded and it’s free.

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

在WordPress中手动添加Pinterest Pin It按钮 (Manually Adding a Pinterest Pin It Button in WordPress)

Some intermediate users may prefer to add the social sharing buttons manually to their WordPress site instead of using a plugin.

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

Let’s take a look at how to manually add a Pinterest button in WordPress.

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

The first thing you need to do is make a complete WordPress backup of your site. This will help you restore your site in case something breaks by accident.

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

Next, you need to connect to your WordPress hosting using an FTP client and then go to the /wp-content/themes/ folder.

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

From here, you need to open your current theme folder and then locate the footer.php file.

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

Next, simply right-click on that file and then select Download from the menu. This will download the footer.php file to your computer.

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

Now you need to open the footer.php file using a plain text editor like Notepad and then paste the following script right before the </body> tag.

现在，您需要使用纯文本编辑器(如Notepad)打开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>

Once you have done that, you need to save the file and then upload it back to the current theme folder.

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

Next, you need to locate and download the single.php file from your theme folder and open it for editing. After that you need to add the following code.

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

You will need to choose the location where you want it to appear in your post. After post title is the most common placement for social media buttons.

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

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

The above code displays the Pinterest button with your featured image, title, description, and post URL in the share URL parameter.

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

Finally, you need to save the file and upload it back to your theme directory using FTP.

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

This will add a vertical share button to the posts of your website. If you want to display the horizontal share button, then simply change the count-layout parameter to horizontal.

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

为Pinterest按钮创建简码 (Creating a Shortcode for Pinterest Button)

Recently, one of our users asked us how to create a shortcode for the Pinterest “Pin It” button.

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

Shortcodes in WordPress allow you to easily add dynamic items to your WordPress posts, pages, and widgets. By creating a shortcode, you’ll be able to manually add Pinterest button in your articles.

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

First, you’ll need to add the following code to your theme’s functions.php file or a site-specific plugin:

首先，您需要将以下代码添加到主题的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');

After that, you can use the [pin] shortcode in your WordPress posts where you want to display the Pinterest button.

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

在图片上添加Pinterest Pin It按钮 (Adding Pinterest Pin It Button Over Your Images)

If you are running a fashion, photography, or portfolio site, then you definitely want your images to be shared on Pinterest to increase your website traffic.

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

Let’s take a look at how to add the Pinterest Pin it button over your images in WordPress. This button will appear only when the user brings their mouse over your images, allowing them to easily share the image on their Pinterest profile.

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

First, you need to install and activate the Pinterest Pin it Button for Images plugin.

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

Upon activation, go to Settings » Pinterest Pin It page to configure the plugin.

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

On the settings page, you can choose where you want to show the “Pin It” button on your WordPress site. You can display it only on single posts, pages, category pages, or everywhere on your site.

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

The next option is to choose the default description from the dropdown menu. This will be used as the image description for the pinned image.

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

Once done, you need to click on the Save button to store the settings. Now you can visit your website and then hover your mouse cursor over any image to see the Pinterest “Pin It” button.

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

If you want to exclude some images from showing the Pin It button, then you can add the nopin CSS class to the images you want to exclude.

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

To do that, you need to select the image block in the post editor and then click on the 3 vertical dots icon from the block toolbar. This will open a menu where you need to click on the Edit as HTML option.

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

You will now see the HTML code of your image. Go ahead to add nopin to the class attribute of the img tag:

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

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

Similarly, you can also use the plugin to disable automatic display of the “Pin It” button, and use the CSS class “pinthis” to selectively display the button on specific images.

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

To do that, you need to visit the plugin’s settings page and then locate the Advanced section on the right side of the page.

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

Now you need to check the option that says ‘Show “Pin it” button only on images with class=”pinthis” ‘, and then click on the Save button.

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

The next time you add an image to a post or page, you need to select the image block and then use the Edit as HTML option to add the pinthis CSS class to the image code. Here is an example:

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

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

This will show the Pinterest button on that specific image, even if you have disabled the option to automatically show the Pin It button on your site.

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

That’s all!

就这样！

We hope this article helped you understand how to add a Pinterest “Pin It” button to your WordPress blog. You may also want to see our guide on how to create an email newsletter and get more subscribers.

我们希望本文能帮助您了解如何在WordPress博客中添加Pinterest“ Pin It”按钮。 您可能还希望查看有关如何创建电子邮件通讯并获得更多订阅者的指南。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

如果您喜欢这篇文章，请订阅我们的YouTube频道 WordPress视频教程。 您也可以在Twitter和Facebook上找到我们。

翻译自: https://www.wpbeginner.com/wp-tutorials/how-to-add-pinterest-pin-it-button-in-your-wordpress-blog/