{"id":2666,"date":"2025-06-11T05:17:02","date_gmt":"2025-06-10T21:17:02","guid":{"rendered":"https:\/\/www.zhaozhao123.cn\/wpcms\/wpdt\/2666.html"},"modified":"2025-06-11T05:17:02","modified_gmt":"2025-06-10T21:17:02","slug":"%e5%a6%82%e4%bd%95%e5%9c%a8-wordpress-%e4%b8%ad%e6%b7%bb%e5%8a%a0-pinterest-%e7%9a%84pin-it%e6%8c%89%e9%92%ae%ef%bc%884-%e7%a7%8d%e6%96%b9%e6%b3%95%ef%bc%89","status":"publish","type":"post","link":"https:\/\/www.zhaozhao123.cn\/wpcms\/post\/2666.html","title":{"rendered":"\u5982\u4f55\u5728 WordPress \u4e2d\u6dfb\u52a0 Pinterest \u7684\u201cPin It\u201d\u6309\u94ae\uff084 \u79cd\u65b9\u6cd5\uff09"},"content":{"rendered":"<div class=\"wp-block-columns p-0 border is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\r\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\r\n<div class=\"wp-block-columns px-4 py-3 border-bottom has-background is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\" style=\"background:linear-gradient(243deg,rgb(238,238,238) 0%,rgba(58,166,242,0.15) 100%)\">\r\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\r\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-6c531013 wp-block-group-is-layout-flex\">\r\n<figure class=\"wp-block-image size-thumbnail is-resized is-style-rounded is-style-rounded--1\"><img decoding=\"async\" src=\"https:\/\/www.zhaozhao123.cn\/myitems\/images\/sites16\/2025\/06\/dyA-1-400x300.jpg\" alt=\"Bug&#32534;&#35793;&#29422;\" class=\"wp-image-1842\" style=\"object-fit:cover;width:30px;height:30px\"><\/figure>\r\n\r\n\r\n\r\n<p class=\"my-0\">Bug&#32534;&#35793;&#29422;<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"wp-block-columns px-xl-5 px-4 py-xl-4 py-3 is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\r\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\r\n<p>&#35201;&#22312; WordPress &#31449;&#28857;&#19978;&#28155;&#21152; Pinterest &#30340;&ldquo;Pin It&rdquo;&#25353;&#38062;&#65292;&#20320;&#21487;&#20197;&#36873;&#25321;&#22810;&#31181;&#26041;&#27861;&#26469;&#23454;&#29616;&#36825;&#19968;&#21151;&#33021;&#12290;&#20197;&#19979;&#26159;&#22235;&#31181;&#24120;&#35265;&#30340;&#26041;&#27861;&#65306;<\/p>\n<h3>&#26041;&#27861;&#19968;&#65306;&#20351;&#29992;&#25554;&#20214;<\/h3>\n<ol>\n<li>\n<p><strong>&#23433;&#35013;&#21644;&#28608;&#27963;&ldquo;Pin It Button for WordPress&rdquo;&#25554;&#20214;<\/strong>&#65306;<\/p>\n<ul>\n<li>&#36827;&#20837; WordPress &#21518;&#21488;&#12290;<\/li>\n<li>&#23548;&#33322;&#21040;&ldquo;&#25554;&#20214;&rdquo;-&gt;&ldquo;&#24120;&#29992;&#25554;&#20214;&rdquo;&#12290;<\/li>\n<li>&#25628;&#32034;&#24182;&#28857;&#20987;&ldquo;Pin It Button for WordPress&rdquo;&#65292;&#28982;&#21518;&#28857;&#20987;&ldquo;&#23433;&#35013;&rdquo;&#21644;&ldquo;&#28608;&#27963;&rdquo;&#12290;<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong>&#37197;&#32622;&#25554;&#20214;<\/strong>&#65306;<\/p>\n<ul>\n<li>&#25554;&#20214;&#23433;&#35013;&#21518;&#65292;&#35775;&#38382;&#20320;&#30340;&#31449;&#28857;&#31649;&#29702;&#38754;&#26495;&#65292;&#25214;&#21040;&ldquo;Pin It&rdquo;&#36873;&#39033;&#21345;&#12290;<\/li>\n<li>&#20320;&#21487;&#20197;&#33258;&#23450;&#20041;&#25353;&#38062;&#30340;&#20301;&#32622;&#12289;&#39068;&#33394;&#21644;&#20854;&#20182;&#26679;&#24335;&#12290;<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong>&#27979;&#35797;<\/strong>&#65306;<\/p>\n<ul>\n<li>&#22312;&#20320;&#30340;&#32593;&#31449;&#39029;&#38754;&#19978;&#27979;&#35797;&#19968;&#19979;&ldquo;Pin It&rdquo;&#25353;&#38062;&#26159;&#21542;&#25353;&#39044;&#26399;&#24037;&#20316;&#12290;<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<h3>&#26041;&#27861;&#20108;&#65306;&#36890;&#36807; CSS &#21644; JavaScript &#28155;&#21152;&#33258;&#23450;&#20041;&#25353;&#38062;<\/h3>\n<p>&#22914;&#26524;&#20320;&#19981;&#24819;&#20351;&#29992;&#25554;&#20214;&#65292;&#21487;&#20197;&#25163;&#21160;&#21019;&#24314;&#19968;&#20010;&#24102;&#26377;&ldquo;Pin It&rdquo;&#21151;&#33021;&#30340;&#25353;&#38062;&#12290;&#36825;&#38656;&#35201;&#19968;&#20123;&#22522;&#26412;&#30340; HTML &#21644; CSS &#32534;&#31243;&#30693;&#35782;&#12290;<\/p>\n<ol>\n<li>\n<p><strong>HTML &#32467;&#26500;<\/strong>&#65306;<\/p>\n<pre><code class=\"language-html\">&lt;a href=\"javascript:void(0)\" onclick=\"window.open('https:\/\/www.pinterest.com\/pin\/create\/button\/?url=http%3A%2F%2Fexample.com&amp;media=https%3A%2F%2Fexample.com%2Fimage.jpg&amp;description=Check+out+this+great+post!')\"&gt;Pin It&lt;\/a&gt;<\/code><\/pre>\n<\/li>\n<li>\n<p><strong>CSS &#39128;&#28014;&#25928;&#26524;<\/strong>&#65306;<\/p>\n<pre><code class=\"language-css\">a {\n   position: relative;\n   display: inline-block;\n}\n\na::before {\n   content: \"\";\n   position: absolute;\n   top: 50%;\n   left: 0;\n   width: 100%;\n   height: 1px;\n   background-color: #f0f0f0;\n   transform: translateY(-50%);\n}<\/code><\/pre>\n<\/li>\n<li>\n<p><strong>JavaScript &#21160;&#30011;<\/strong>&#65306;<\/p>\n<pre><code class=\"language-js\">function pinIt() {\n   window.open(\"https:\/\/www.pinterest.com\/pin\/create\/button\/?url=http%3A%2F%2Fexample.com&amp;media=https%3A%2F%2Fexample.com%2Fimage.jpg&amp;description=Check+out+this+great+post!\", \"_blank\");\n}<\/code><\/pre>\n<\/li>\n<li>\n<p><strong>&#35302;&#21457;&#25353;&#38062;<\/strong>&#65306;\n&#23558;&#19978;&#36848;&#20195;&#30721;&#25554;&#20837;&#20320;&#30340;&#20027;&#39064;&#25991;&#20214;&#22841;&#20013;&#30340; <code>functions.php<\/code> &#25110;&#32773; <code>header.php<\/code> &#25991;&#20214;&#20013;&#65292;&#25110;&#32773;&#21019;&#24314;&#19968;&#20010;&#26032;&#30340;&#29420;&#31435;&#25991;&#20214;&#24182;&#22312;&#36866;&#24403;&#20301;&#32622;&#35843;&#29992;&#23427;&#12290;<\/p>\n<\/li>\n<\/ol>\n<h3>&#26041;&#27861;&#19977;&#65306;&#20351;&#29992;&#33258;&#23450;&#20041;&#25554;&#20214;<\/h3>\n<p>&#38500;&#20102;&#19978;&#38754;&#25552;&#21040;&#30340;&#25554;&#20214;&#22806;&#65292;&#36824;&#26377;&#19968;&#20123;&#19987;&#38376;&#29992;&#20110;&#21019;&#24314; Pinterest &ldquo;Pin It&rdquo;&#25353;&#38062;&#30340;&#25554;&#20214;&#65292;&#22914;&ldquo;Pinterest Share Buttons&rdquo;&#31561;&#12290;<\/p>\n<ol>\n<li>\n<p><strong>&#25628;&#32034;&#21644;&#23433;&#35013;&#25554;&#20214;<\/strong>&#65306;<\/p>\n<ul>\n<li>&#20351;&#29992; WordPress &#25554;&#20214;&#24211;&#25628;&#32034;&ldquo;Pinterest Share Buttons&rdquo;&#25110;&#31867;&#20284;&#21517;&#31216;&#30340;&#25554;&#20214;&#12290;<\/li>\n<li>&#23433;&#35013;&#24182;&#28608;&#27963;&#35813;&#25554;&#20214;&#12290;<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong>&#37197;&#32622;&#25554;&#20214;<\/strong>&#65306;<\/p>\n<ul>\n<li>&#26681;&#25454;&#25554;&#20214;&#25552;&#20379;&#30340;&#35774;&#32622;&#36873;&#39033;&#35843;&#25972;&#25353;&#38062;&#30340;&#39068;&#33394;&#12289;&#22823;&#23567;&#21644;&#20854;&#20182;&#22806;&#35266;&#23646;&#24615;&#12290;<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong>&#27979;&#35797;<\/strong>&#65306;<\/p>\n<ul>\n<li>&#27983;&#35272;&#20320;&#30340;&#32593;&#31449;&#65292;&#30830;&#20445;&#25353;&#38062;&#27491;&#24120;&#26174;&#31034;&#24182;&#19988;&#29992;&#25143;&#21487;&#20197;&#36890;&#36807;&#28857;&#20987;&#23427;&#20998;&#20139;&#20869;&#23481;&#12290;<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<h3>&#26041;&#27861;&#22235;&#65306;&#20351;&#29992; PHP &#33258;&#21160;&#21270;&#33050;&#26412;<\/h3>\n<p>&#23545;&#20110;&#26356;&#22797;&#26434;&#30340;&#32593;&#31449;&#65292;&#21487;&#33021;&#38656;&#35201;&#32534;&#20889;PHP&#33050;&#26412;&#26469;&#21160;&#24577;&#29983;&#25104; Pinterest &#20849;&#20139;&#25353;&#38062;&#12290;<\/p>\n<pre><code class=\"language-php\">&lt;?php\nfunction create_pinterest_button($content) {\n    $url = 'http:\/\/yourwebsite.com\/'; \/\/ &#26367;&#25442;&#20026;&#23454;&#38469; URL\n    $media = get_template_directory_uri(). '\/images\/image.jpg'; \/\/ &#26367;&#25442;&#20026;&#22270;&#29255;&#36335;&#24452;\n    return '&lt;a class=\"pin-it-button\" data-pin-do=\"buttonClick\" data-pin-nofollow=\"true\" href=\"' . esc_url_raw($url) . '\" title=\"Share on Pinterest\"&gt;&lt;span&gt;Pinterest&lt;\/span&gt;&lt;\/a&gt;';\n}\nadd_filter('the_content', 'create_pinterest_button');\n?&gt;<\/code><\/pre>\n<h3>&#31034;&#20363;&#20195;&#30721;&#19982;&#25928;&#26524;<\/h3>\n<p>&#20551;&#35774;&#25105;&#20204;&#27491;&#22312;&#20351;&#29992;&#31532;&#19968;&#20010;&#26041;&#27861;&#65292;&#20197;&#19979;&#26159;&#22914;&#20309;&#22312;&#19968;&#20010;&#31616;&#21333;&#30340; WordPress &#21338;&#23458;&#25991;&#31456;&#20013;&#38598;&#25104; Pinterest &#20849;&#20139;&#25353;&#38062;&#30340;&#20363;&#23376;&#65306;<\/p>\n<h4>&#27493;&#39588; 1&#65306;&#23433;&#35013;&#21644;&#28608;&#27963;&#25554;&#20214;<\/h4>\n<ul>\n<li>&#30331;&#24405;&#21040; WordPress &#21518;&#21488;&#65292;&#23548;&#33322;&#21040;&ldquo;&#25554;&#20214;&rdquo;-&gt;&ldquo;&#24120;&#29992;&#25554;&#20214;&rdquo;&#12290;<\/li>\n<li>&#25214;&#21040;&ldquo;Pin It Button for WordPress&rdquo;&#25554;&#20214;&#65292;&#28857;&#20987;&ldquo;&#23433;&#35013;&rdquo;&#21644;&ldquo;&#28608;&#27963;&rdquo;&#12290;<\/li>\n<\/ul>\n<h4>&#27493;&#39588; 2&#65306;&#37197;&#32622;&#25554;&#20214;<\/h4>\n<ul>\n<li>&#36820;&#22238;&#25554;&#20214;&#30028;&#38754;&#65292;&#21487;&#20197;&#30475;&#21040;&ldquo;Pin It&rdquo;&#36873;&#39033;&#21345;&#12290;&#22312;&#36825;&#37324;&#65292;&#20320;&#21487;&#20197;&#35774;&#32622;&#25353;&#38062;&#30340;&#22823;&#23567;&#12289;&#39068;&#33394;&#20197;&#21450;&#26159;&#21542;&#21551;&#29992;&#20998;&#20139;&#38142;&#25509;&#12290;<\/li>\n<\/ul>\n<h4>&#27493;&#39588; 3&#65306;&#27979;&#35797;<\/h4>\n<ul>\n<li>&#35775;&#38382;&#20320;&#30340;&#21338;&#23458;&#39029;&#38754;&#65292;&#20320;&#24212;&#35813;&#20250;&#30475;&#21040;&#19968;&#20010;&ldquo;Pin It&rdquo;&#25353;&#38062;&#20986;&#29616;&#22312;&#39029;&#38754;&#24213;&#37096;&#12290;<\/li>\n<\/ul>\n<p>&#36825;&#20010;&#26041;&#27861;&#19981;&#20165;&#31616;&#21333;&#26131;&#29992;&#65292;&#32780;&#19988;&#21487;&#20197;&#28385;&#36275;&#22823;&#22810;&#25968;&#32593;&#31449;&#30340;&#22522;&#26412;&#38656;&#27714;&#12290;&#22914;&#26524;&#20320;&#26377;&#29305;&#23450;&#30340;&#35774;&#35745;&#20559;&#22909;&#25110;&#24819;&#35201;&#26356;&#22810;&#30340;&#33258;&#23450;&#20041;&#36873;&#39033;&#65292;&#21487;&#20197;&#36873;&#25321;&#20854;&#20182;&#26041;&#27861;&#25110;&#25554;&#20214;&#36827;&#34892;&#36827;&#19968;&#27493;&#30340;&#23450;&#21046;&#12290;<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div><div class=\"wp-block-columns p-0 border is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\r\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\r\n<div class=\"wp-block-columns px-4 py-3 border-bottom has-background is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\" style=\"background:linear-gradient(243deg,rgb(238,238,238) 0%,rgba(58,166,242,0.15) 100%)\">\r\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\r\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-6c531013 wp-block-group-is-layout-flex\">\r\n<figure class=\"wp-block-image size-thumbnail is-resized is-style-rounded is-style-rounded--2\"><img decoding=\"async\" src=\"https:\/\/www.zhaozhao123.cn\/myitems\/images\/sites16\/2025\/06\/zp-400x300.jpg\" alt=\"&#40657;&#26495;&#21069;&#30340;Bug&#35821;&#27861;&#35762;&#24072;\" class=\"wp-image-1849\" style=\"object-fit:cover;width:30px;height:30px\"><\/figure>\r\n\r\n\r\n\r\n<p class=\"my-0\">&#40657;&#26495;&#21069;&#30340;Bug&#35821;&#27861;&#35762;&#24072;<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"wp-block-columns px-xl-5 px-4 py-xl-4 py-3 is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\r\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\r\n<h3>&#22914;&#20309;&#22312; WordPress &#20013;&#28155;&#21152; Pinterest &#30340;&ldquo;Pin It&rdquo;&#25353;&#38062;<\/h3>\n<h4>1. &#20351;&#29992;&#33258;&#23450;&#20041; CSS &#26469;&#23454;&#29616;<\/h4>\n<p>&#34429;&#28982;&#36825;&#19981;&#26159;&#19968;&#20010;&#25512;&#33616;&#30340;&#20570;&#27861;&#65292;&#20294;&#22914;&#26524;&#20320;&#38656;&#35201;&#25511;&#21046;&#25353;&#38062;&#30340;&#39068;&#33394;&#12289;&#22823;&#23567;&#31561;&#23646;&#24615;&#65292;&#20320;&#21487;&#20197;&#20351;&#29992;&#33258;&#23450;&#20041; CSS &#26469;&#23454;&#29616;&#12290;<\/p>\n<p><strong>&#27493;&#39588; 1:<\/strong>\n&#25171;&#24320; <code>functions.php<\/code> &#25991;&#20214;&#12290;\n<strong>&#27493;&#39588; 2:<\/strong>\n&#25214;&#21040;&#24182;&#32534;&#36753; <code>&lt;style&gt;<\/code> &#26631;&#31614;&#20869;&#30340;&#20869;&#23481;&#65292;&#20026;&#25353;&#38062;&#28155;&#21152;&#26679;&#24335;&#12290;<\/p>\n<pre><code class=\"language-php\">add_theme_support('custom-css');<\/code><\/pre>\n<p><strong>&#27493;&#39588; 3:<\/strong>\n&#22312; <code>&lt;style&gt;<\/code> &#26631;&#31614;&#20869;&#28155;&#21152;&#20197;&#19979; CSS &#20195;&#30721;&#65306;<\/p>\n<pre><code class=\"language-css\">.pin-it-button {\n    background-color: #F8B600; \/* &#32972;&#26223;&#33394; *\/\n    color: #ffffff; \/* &#25991;&#23383;&#39068;&#33394; *\/\n    padding: 5px 10px;\n    border-radius: 5px;\n    font-size: 16px;\n}\n\n.pin-it-button:hover {\n    background-color: #FFC700; \/* &#40736;&#26631;&#24748;&#20572;&#26102;&#32972;&#26223;&#33394; *\/\n}<\/code><\/pre>\n<p><strong>&#27493;&#39588; 4:<\/strong>\n&#20445;&#23384;&#25991;&#20214;&#21518;&#65292;&#22312;&#20027;&#39064;&#30340; <code>functions.php<\/code> &#25991;&#20214;&#20013;&#27880;&#20876;&#36825;&#20010;&#25903;&#25345;&#12290;<\/p>\n<pre><code class=\"language-php\">add_action( 'after_setup_theme', 'register_custom_css' );\nfunction register_custom_css() {\n    add_theme_support(\n        'custom-css',\n        array(\n            'pin_it_button' =&gt; array(\n                'selector' =&gt; '.pin-it-button',\n            ),\n        )\n    );\n}<\/code><\/pre>\n<p><strong>&#27493;&#39588; 5:<\/strong>\n&#27979;&#35797;&#25353;&#38062;&#26159;&#21542;&#25353;&#39044;&#26399;&#24037;&#20316;&#12290;<\/p>\n<pre><code class=\"language-bash\">echo '&lt;a href=\"https:\/\/www.example.com\/pin-it\" class=\"pin-it-button\"&gt;Pin It!&lt;\/a&gt;';<\/code><\/pre>\n<p>&#30830;&#20445;&#38142;&#25509;&#25351;&#21521;&#30340;&#26159;&#27491;&#30830;&#30340; URL&#12290;<\/p>\n<h4>2. &#20351;&#29992; jQuery &#25554;&#20214;<\/h4>\n<p>&#21478;&#19968;&#31181;&#26041;&#24335;&#26159;&#22312; WordPress &#20027;&#39064;&#20013;&#24341;&#20837;&#21644;&#20351;&#29992; jQuery &#25554;&#20214;&#26469;&#28155;&#21152;&ldquo;Pin It&rdquo;&#25353;&#38062;&#12290;<\/p>\n<p><strong>&#27493;&#39588; 1:<\/strong>\n&#39318;&#20808;&#65292;&#20174; <a href=\"https:\/\/www.zhaozhao123.cn\/skin\/go?url=aHR0cHM6Ly9qcXVlcnkuY29tLw==\" rel=\"noopener noreferrer nofollow\">https:\/\/jquery.com\/<\/a> &#19979;&#36733; jQuery &#24182;&#23558;&#20854;&#25918;&#22312; WordPress &#20027;&#39064;&#30340; <code>js<\/code> &#30446;&#24405;&#19979;&#12290;\n<strong>&#27493;&#39588; 2:<\/strong>\n&#23433;&#35013;&#25554;&#20214;&#65306;<code>Add to Front End &gt; Add Custom HTML\/JS\/CSS<\/code>&#65292;&#36873;&#25321;&#21253;&#21547; jQuery &#21644; Pin It &#21151;&#33021;&#30340;&#25554;&#20214;&#65292;&#22914; <code>jQuery UI Bootstrap Core Bundle<\/code>.<\/p>\n<p><strong>&#27493;&#39588; 3:<\/strong>\n&#28608;&#27963;&#25554;&#20214;&#24182;&#37197;&#32622;&#12290;\n<strong>&#27493;&#39588; 4:<\/strong>\n&#22312;&#24744;&#30340;&#20027;&#39064;&#20013;&#21152;&#36733; jQuery &#21644; Pin It &#21151;&#33021;&#12290;<\/p>\n<pre><code class=\"language-php\">require_once get_template_directory() . '\/js\/jquery.min.js';\nrequire_once get_template_directory() . '\/js\/jquery-ui-1.10.4.custom.min.js';\n\n\/\/ &#21152;&#36733; Pin It &#21151;&#33021;\nwp_enqueue_script('pin-it', get_template_directory_uri() . '\/js\/jquery-pin-it.min.js', array(), '1.0.0', true);<\/code><\/pre>\n<p><strong>&#27493;&#39588; 5:<\/strong>\n&#27979;&#35797;&#25353;&#38062;&#26159;&#21542;&#25353;&#39044;&#26399;&#24037;&#20316;&#12290;<\/p>\n<pre><code class=\"language-bash\">echo '&lt;button type=\"button\" class=\"btn btn-primary pin-it-button\"&gt;Pin It!&lt;\/button&gt;';<\/code><\/pre>\n<p>&#27880;&#24847;&#65306;&#36825;&#31181;&#26041;&#27861;&#21487;&#33021;&#20250;&#23548;&#33268;&#39029;&#38754;&#21152;&#36733;&#26102;&#38388;&#21464;&#38271;&#65292;&#22240;&#20026; jQuery &#26159;&#19968;&#20010;&#38750;&#24120;&#21463;&#27426;&#36814;&#30340;&#24211;&#65292;&#21487;&#33021;&#20250;&#24433;&#21709;&#20854;&#20182;&#33050;&#26412;&#30340;&#24615;&#33021;&#12290;<\/p>\n<h4>3. &#20351;&#29992;&#31532;&#19977;&#26041; JavaScript &#24211;<\/h4>\n<p>&#23545;&#20110;&#26356;&#36731;&#37327;&#32423;&#30340;&#26041;&#27861;&#65292;&#21487;&#20197;&#32771;&#34385;&#20351;&#29992;&#31532;&#19977;&#26041; JavaScript &#24211;&#65292;&#22914; <code>pinterest-pins<\/code> &#25110;&#32773; <code>Pinterest.js<\/code>&#12290;<\/p>\n<p><strong>&#27493;&#39588; 1:<\/strong>\n&#23433;&#35013;&#36825;&#20123;&#24211;&#12290;<\/p>\n<pre><code class=\"language-bash\">npm install pinterest-pins --save<\/code><\/pre>\n<p>&#25110;<\/p>\n<pre><code class=\"language-bash\">yarn add pinterest-pins<\/code><\/pre>\n<p><strong>&#27493;&#39588; 2:<\/strong>\n&#22312;&#24744;&#30340;&#20027;&#39064;&#20013;&#24341;&#20837;&#21644;&#20351;&#29992;&#24211;&#12290;<\/p>\n<pre><code class=\"language-javascript\">import PinIt from 'pinterest-pins';\n\nconst pinItButton = document.querySelector('.pin-it-button');\n\nif (pinItButton) {\n  new PinIt({\n    buttonId: 'my-pin-it-button',\n    url: 'https:\/\/example.com\/pin-it',\n    callback: function(data) {\n      console.log(`Pin It! - ${data.title} | ${data.description}`);\n    },\n  });\n}<\/code><\/pre>\n<p><strong>&#27493;&#39588; 3:<\/strong>\n&#27979;&#35797;&#25353;&#38062;&#26159;&#21542;&#25353;&#39044;&#26399;&#24037;&#20316;&#12290;<\/p>\n<pre><code class=\"language-bash\">echo '&lt;button type=\"button\" class=\"btn btn-primary my-pin-it-button\"&gt;Pin It!&lt;\/button&gt;';<\/code><\/pre>\n<p>&#27880;&#24847;&#65306;&#36825;&#23558;&#20351;&#24744;&#30340;&#32593;&#31449;&#19982; Pinterest &#32593;&#31449;&#30456;&#20851;&#32852;&#65292;&#22240;&#27492;&#24744;&#38656;&#35201;&#36981;&#24490; Pinterest &#30340; API &#26465;&#27454;&#20197;&#33719;&#21462;&#25480;&#26435;&#24182;&#36981;&#23432;&#20854;&#26381;&#21153;&#26465;&#27454;&#12290;<\/p>\n<h4>4. &#33258;&#21160;&#21270;&#29983;&#25104;&ldquo;Pin It&rdquo;&#25353;&#38062;<\/h4>\n<p>&#26368;&#21518;&#65292;&#24744;&#21487;&#20197;&#32534;&#20889;&#19968;&#20123;&#20195;&#30721;&#26469;&#33258;&#21160;&#21270;&#29983;&#25104;&ldquo;Pin It&rdquo;&#25353;&#38062;&#12290;&#20363;&#22914;&#65292;&#24403;&#29992;&#25143;&#28857;&#20987;&#26576;&#20010;&#38142;&#25509;&#26102;&#65292;&#31435;&#21363;&#29983;&#25104;&#19968;&#20010;&ldquo;Pin It&rdquo;&#25353;&#38062;&#12290;<\/p>\n<p><strong>&#27493;&#39588; 1:<\/strong>\n&#21019;&#24314;&#19968;&#20010;&#31616;&#21333;&#30340;&#20989;&#25968;&#26469;&#29983;&#25104;&ldquo;Pin It&rdquo;&#25353;&#38062;&#12290;<\/p>\n<pre><code class=\"language-javascript\">function generatePinItButton(url, text) {\n    return `&lt;a href=\"${url}\" target=\"_blank\" class=\"btn btn-primary pin-it-button\"&gt;${text}&lt;\/a&gt;`;\n}<\/code><\/pre>\n<p><strong>&#27493;&#39588; 2:<\/strong>\n&#22312;&#24744;&#30340; WordPress &#20027;&#39064;&#30340; <code>functions.php<\/code> &#25991;&#20214;&#20013;&#20351;&#29992;&#27492;&#20989;&#25968;&#12290;<\/p>\n<pre><code class=\"language-php\">function your_theme_scripts() {\n    wp_register_script('your-script-name', get_stylesheet_directory_uri() . '\/js\/script-name.js', array(), '1.0.0', true);\n\n    \/\/ &#27599;&#27425;&#21152;&#36733;&#26032;&#25991;&#31456;&#26102;&#33258;&#21160;&#26174;&#31034;&ldquo;Pin It&rdquo;&#25353;&#38062;\n    add_action('wp_footer', 'generatePinItButton');\n\n    function generatePinItButton() {\n        $url = 'https:\/\/example.com\/pin-it'; \/\/ &#26367;&#25442;&#20026;&#24744;&#24819;&#35201;&#38142;&#25509;&#30340;&#30446;&#26631;&#32593;&#22336;\n        $title = 'Pin It!'; \/\/ &#20551;&#35774;&#24744;&#24819;&#35774;&#32622;&#26631;&#39064;\n        echo generatePinItButton($url, $title); \/\/ &#36755;&#20986;&#24102;&#26377;&#26631;&#39064;&#30340;&ldquo;Pin It&rdquo;&#25353;&#38062;\n    }\n}\nadd_action('init', 'your_theme_scripts');<\/code><\/pre>\n<p><strong>&#27493;&#39588; 3:<\/strong>\n&#27979;&#35797;&#25353;&#38062;&#26159;&#21542;&#25353;&#39044;&#26399;&#24037;&#20316;&#12290;<\/p>\n<pre><code class=\"language-bash\">echo '&lt;button type=\"button\" class=\"btn btn-primary my-pin-it-button\"&gt;Pin It!&lt;\/button&gt;';<\/code><\/pre>\n<p>&#35831;&#27880;&#24847;&#65292;&#20197;&#19978;&#31034;&#20363;&#20195;&#30721;&#20165;&#20316;&#20026;&#21442;&#32771;&#65292;&#23454;&#38469;&#25805;&#20316;&#26102;&#24212;&#26681;&#25454;&#24744;&#30340;&#38656;&#27714;&#35843;&#25972;&#21442;&#25968;&#21644;&#21151;&#33021;&#12290;<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Bug&#32534;&#35793;&#29422; &#35201;&#22312; WordPress &#31449;&#28857;&#19978;&#28155;&#21152; Pinterest &#30340;&ldquo;Pin It&rdquo;&#25353;&#38062;&#65292;&#038;#..<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[59],"tuisongtax":[],"class_list":["post-2666","post","type-post","status-publish","format-standard","hentry","category-wpdt","tag-pzjc"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/posts\/2666","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/comments?post=2666"}],"version-history":[{"count":0,"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/posts\/2666\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/media?parent=2666"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/categories?post=2666"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/tags?post=2666"},{"taxonomy":"tuisongtax","embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/tuisongtax?post=2666"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}