如何在 WordPress 中添加 Pinterest 的“Pin It”按钮（4 种方法）

Bug编译狮

要在 WordPress 站点上添加 Pinterest 的“Pin It”按钮，你可以选择多种方法来实现这一功能。以下是四种常见的方法：

方法一：使用插件

安装和激活“Pin It Button for WordPress”插件：
- 进入 WordPress 后台。
- 导航到“插件”->“常用插件”。
- 搜索并点击“Pin It Button for WordPress”，然后点击“安装”和“激活”。
配置插件：
- 插件安装后，访问你的站点管理面板，找到“Pin It”选项卡。
- 你可以自定义按钮的位置、颜色和其他样式。
测试：
- 在你的网站页面上测试一下“Pin It”按钮是否按预期工作。

方法二：通过 CSS 和 JavaScript 添加自定义按钮

如果你不想使用插件，可以手动创建一个带有“Pin It”功能的按钮。这需要一些基本的 HTML 和 CSS 编程知识。

HTML 结构：

<a href="javascript:void(0)" onclick="window.open('https://www.pinterest.com/pin/create/button/?url=http%3A%2F%2Fexample.com&media=https%3A%2F%2Fexample.com%2Fimage.jpg&description=Check+out+this+great+post!')">Pin It</a>

CSS 飘浮效果：

a {
   position: relative;
   display: inline-block;
}

a::before {
   content: "";
   position: absolute;
   top: 50%;
   left: 0;
   width: 100%;
   height: 1px;
   background-color: #f0f0f0;
   transform: translateY(-50%);
}

JavaScript 动画：

function pinIt() {
   window.open("https://www.pinterest.com/pin/create/button/?url=http%3A%2F%2Fexample.com&media=https%3A%2F%2Fexample.com%2Fimage.jpg&description=Check+out+this+great+post!", "_blank");
}

触发按钮：将上述代码插入你的主题文件夹中的 functions.php 或者 header.php 文件中，或者创建一个新的独立文件并在适当位置调用它。

方法三：使用自定义插件

除了上面提到的插件外，还有一些专门用于创建 Pinterest “Pin It”按钮的插件，如“Pinterest Share Buttons”等。

搜索和安装插件：
- 使用 WordPress 插件库搜索“Pinterest Share Buttons”或类似名称的插件。
- 安装并激活该插件。
配置插件：
- 根据插件提供的设置选项调整按钮的颜色、大小和其他外观属性。
测试：
- 浏览你的网站，确保按钮正常显示并且用户可以通过点击它分享内容。

方法四：使用 PHP 自动化脚本

对于更复杂的网站，可能需要编写PHP脚本来动态生成 Pinterest 共享按钮。

<?php
function create_pinterest_button($content) {
    $url = 'http://yourwebsite.com/'; // 替换为实际 URL
    $media = get_template_directory_uri(). '/images/image.jpg'; // 替换为图片路径
    return '<a class="pin-it-button" data-pin-do="buttonClick" data-pin-nofollow="true" href="' . esc_url_raw($url) . '" title="Share on Pinterest"><span>Pinterest</span></a>';
}
add_filter('the_content', 'create_pinterest_button');
?>

示例代码与效果

假设我们正在使用第一个方法，以下是如何在一个简单的 WordPress 博客文章中集成 Pinterest 共享按钮的例子：

步骤 1：安装和激活插件

登录到 WordPress 后台，导航到“插件”->“常用插件”。
找到“Pin It Button for WordPress”插件，点击“安装”和“激活”。

步骤 2：配置插件

返回插件界面，可以看到“Pin It”选项卡。在这里，你可以设置按钮的大小、颜色以及是否启用分享链接。

步骤 3：测试

访问你的博客页面，你应该会看到一个“Pin It”按钮出现在页面底部。

这个方法不仅简单易用，而且可以满足大多数网站的基本需求。如果你有特定的设计偏好或想要更多的自定义选项，可以选择其他方法或插件进行进一步的定制。

黑板前的Bug语法讲师

如何在 WordPress 中添加 Pinterest 的“Pin It”按钮

1. 使用自定义 CSS 来实现

虽然这不是一个推荐的做法，但如果你需要控制按钮的颜色、大小等属性，你可以使用自定义 CSS 来实现。

步骤 1: 打开 functions.php 文件。 步骤 2: 找到并编辑 <style> 标签内的内容，为按钮添加样式。

add_theme_support('custom-css');

步骤 3: 在 <style> 标签内添加以下 CSS 代码：

.pin-it-button {
    background-color: #F8B600; /* 背景色 */
    color: #ffffff; /* 文字颜色 */
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 16px;
}

.pin-it-button:hover {
    background-color: #FFC700; /* 鼠标悬停时背景色 */
}

步骤 4: 保存文件后，在主题的 functions.php 文件中注册这个支持。

add_action( 'after_setup_theme', 'register_custom_css' );
function register_custom_css() {
    add_theme_support(
        'custom-css',
        array(
            'pin_it_button' => array(
                'selector' => '.pin-it-button',
            ),
        )
    );
}

步骤 5: 测试按钮是否按预期工作。

echo '<a href="https://www.example.com/pin-it" class="pin-it-button">Pin It!</a>';

确保链接指向的是正确的 URL。

2. 使用 jQuery 插件

另一种方式是在 WordPress 主题中引入和使用 jQuery 插件来添加“Pin It”按钮。

步骤 1: 首先，从 https://jquery.com/ 下载 jQuery 并将其放在 WordPress 主题的 js 目录下。 步骤 2: 安装插件：Add to Front End > Add Custom HTML/JS/CSS，选择包含 jQuery 和 Pin It 功能的插件，如 jQuery UI Bootstrap Core Bundle.

步骤 3: 激活插件并配置。 步骤 4: 在您的主题中加载 jQuery 和 Pin It 功能。

require_once get_template_directory() . '/js/jquery.min.js';
require_once get_template_directory() . '/js/jquery-ui-1.10.4.custom.min.js';

// 加载 Pin It 功能
wp_enqueue_script('pin-it', get_template_directory_uri() . '/js/jquery-pin-it.min.js', array(), '1.0.0', true);

步骤 5: 测试按钮是否按预期工作。

echo '<button type="button" class="btn btn-primary pin-it-button">Pin It!</button>';

注意：这种方法可能会导致页面加载时间变长，因为 jQuery 是一个非常受欢迎的库，可能会影响其他脚本的性能。

3. 使用第三方 JavaScript 库

对于更轻量级的方法，可以考虑使用第三方 JavaScript 库，如 pinterest-pins 或者 Pinterest.js。

步骤 1: 安装这些库。

npm install pinterest-pins --save

或

yarn add pinterest-pins

步骤 2: 在您的主题中引入和使用库。

import PinIt from 'pinterest-pins';

const pinItButton = document.querySelector('.pin-it-button');

if (pinItButton) {
  new PinIt({
    buttonId: 'my-pin-it-button',
    url: 'https://example.com/pin-it',
    callback: function(data) {
      console.log(`Pin It! - ${data.title} | ${data.description}`);
    },
  });
}

步骤 3: 测试按钮是否按预期工作。

echo '<button type="button" class="btn btn-primary my-pin-it-button">Pin It!</button>';

注意：这将使您的网站与 Pinterest 网站相关联，因此您需要遵循 Pinterest 的 API 条款以获取授权并遵守其服务条款。

4. 自动化生成“Pin It”按钮

最后，您可以编写一些代码来自动化生成“Pin It”按钮。例如，当用户点击某个链接时，立即生成一个“Pin It”按钮。

步骤 1: 创建一个简单的函数来生成“Pin It”按钮。

function generatePinItButton(url, text) {
    return `<a href="${url}" target="_blank" class="btn btn-primary pin-it-button">${text}</a>`;
}

步骤 2: 在您的 WordPress 主题的 functions.php 文件中使用此函数。

function your_theme_scripts() {
    wp_register_script('your-script-name', get_stylesheet_directory_uri() . '/js/script-name.js', array(), '1.0.0', true);

    // 每次加载新文章时自动显示“Pin It”按钮
    add_action('wp_footer', 'generatePinItButton');

    function generatePinItButton() {
        $url = 'https://example.com/pin-it'; // 替换为您想要链接的目标网址
        $title = 'Pin It!'; // 假设您想设置标题
        echo generatePinItButton($url, $title); // 输出带有标题的“Pin It”按钮
    }
}
add_action('init', 'your_theme_scripts');

步骤 3: 测试按钮是否按预期工作。

echo '<button type="button" class="btn btn-primary my-pin-it-button">Pin It!</button>';

请注意，以上示例代码仅作为参考，实际操作时应根据您的需求调整参数和功能。

如何在 WordPress 中添加 Pinterest 的“Pin It”按钮（4 种方法）

方法一：使用插件

方法二：通过 CSS 和 JavaScript 添加自定义按钮

方法三：使用自定义插件

方法四：使用 PHP 自动化脚本

示例代码与效果

步骤 1：安装和激活插件

步骤 2：配置插件

步骤 3：测试

如何在 WordPress 中添加 Pinterest 的“Pin It”按钮

1. 使用自定义 CSS 来实现

2. 使用 jQuery 插件

3. 使用第三方 JavaScript 库

4. 自动化生成“Pin It”按钮

最新更新

如何在 WordPress 中添加 Pinterest 的“Pin It”按钮（4 种方法）