آموزش اضافه کردن دکمه "Pin It" پینترست در وردپرس

Pinterest یک سایت شبکه اجتماعی محبوب است که به شما امکان می دهد تا محتوای بصری را به اشتراک بگذارید و ترافیک زیادی را در وب سایت خود بگذارید.

در این مقاله، ما به شما نشان می دهیم که چگونه می توانید Pinterest "Pin It" را به وبلاگ خود اضافه کنید. ما همچنین توضیح خواهیم داد که چگونه دکمه Pin It روی تصاویر وب سایت شما اضافه شود.

اضافه کردن Pinterest دکمه "Pin It" با استفاده از یک پلاگین

ساده ترین راه برای اضافه کردن دکمه Pinterest به سایت وردپرس شما با استفاده از پلاگین به اشتراک گذاری اجتماعی است.

برای این منظور توصیه می کنیم از پلاگین Shared Counts  استفاده کنید. این بهترین پلاگین رسانه اجتماعی برای وردپرس است زیرا رایگان است و به شما امکان می دهد تا به راحتی دکمه Pinterest را همراه با سایر شبکه های اجتماعی محبوب اضافه کنید.

پس از نصب، به پیکربندی افزونه بروید تا به صفحه تنظیمات بروید .

در صفحه تنظیمات، شما باید به قسمت Display بروید و سپس روی جعبه متن“Share Buttons to Display” کلیک کنید.

این یک منوی کشویی باز می شود که شما می توانید خدمات رسانه های اجتماعی را که می خواهید اضافه کنید را انتخاب کنید. به طور پیش فرض، Pinterest در آن کادر همراه با فیس بوک و توییتر حضور خواهد داشت.

شما همچنین می توانید محل و نوع پست را در جایی که می خواهید دکمه Pinterest را نمایش دهید انتخاب کنید. 

پس از اتمام کار، فراموش نکنید که دکمه Save Changes را برای ذخیره تنظیمات کلیک کنید.

اکنون می توانید هر پستی در وب سایت خود را مشاهده کنید تا دکمه Pinterest را در عمل ببینید.

یکی دیگر از چیزهای شسته و رفته در مورد SharedCounts رایگان افزونه سفارشی Pinterest تصویر موجود در Github است. این به شما اجازه می دهد Pinterest سفارشی تصویر و توضیحات را برای Pinterest بهینه سازی کنید.

دکمه Pinterest Pin را به صورت دستی در وردپرس اضافه کنید

بعضی از کاربران متوسط ​​می توانند به جای استفاده از یک افزونه، دکمه های به اشتراک گذاری اجتماعی را به صورت دستی به سایت وردپرس خود اضافه کنند.

بیایید نگاهی به نحوه اضافه کردن یک دکمه Pinterest در وردپرس بکنیم.

اولین چیزی که باید انجام دهید این است که تهیه نسخه پشتیبان کامل وردپرس از سایت خود را انجام دهید.

بعد، شما باید به میزبانی وردپرس خود با استفاده از یک سرویس دهنده FTP متصل شوید و سپس به پوشه / wp-content / themes / folder بروید.

از اینجا، شما باید پوشه تم فعلی خود را باز کنید و سپس فایل footer.php را پیدا کنید.

بعد، به سادگی راست کلیک بر روی آن فایل و سپس دانلود از منو را انتخاب کنید. این فایل footer.php را به کامپیوتر شما دانلود می کند.

حالا شما باید فایل footer.php را با استفاده از یک ویرایشگر متن ساده مانند Notepad باز کنید و سپس اسکریپت زیر را درست قبل از </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>

پس از انجام این کار، شما باید فایل را ذخیره کنید و سپس آن را به پوشه تم فعلی آپلود کنید.

بعد، شما باید فایل 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 پارامتر را به صورت horizontal تغییر دهید .

ایجاد یک کد کوتاه برای دکمه Pinterest

کد کوتاه در وردپرس به شما این امکان را می دهد که به آسانی موارد پویا را به پست ها، صفحات و ویدجت های خود اضافه کنید. با ایجاد یک کد کوتاه، شما قادر خواهید بود به صورت دستی دکمه 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');

پس از آن، می توانید از کد کوتاه [pin] در پست های وردپرس خود استفاده کنید که در آن می خواهید دکمه Pinterest را نمایش دهید.

اضافه کردن Pinterest Pin آن را بر روی عکس های خود

اگر شما سایت مد ، عکاسی یا نمونه کارها دارید قطعا می خواهید تصاویر خود را در Pinterest به اشتراک بگذارید تا ترافیک وب سایت خود را افزایش دهید.

این دکمه تنها زمانی ظاهر می شود که کاربر ماوس خود را بر روی تصاویر شما هدایت می کند، به شما این امکان را می دهد که به آسانی تصویر را در پروفایل Pinterest خود به اشتراک بگذارید.

اول، شما نیاز به نصب و فعال سازی افزونه Pinterest Pin it Button for Images دارید.

پس از فعال سازی، به تنظیمات > Pinterest Pin It بروید.

در صفحه تنظیمات، شما می توانید جایی که می خواهید دکمه "Pin It" را در سایت وردپرسی خود نمایش دهید انتخاب کنید. شما می توانید آن را فقط در پست های تک، صفحات، صفحات دسته بندیو یا در همه جا در سایت خود نمایش دهد.

گزینه بعدی این است که توضیحات پیش فرض را از منوی کشویی انتخاب کنید. 

پس از انجام، شما باید بر روی دکمه ذخیره کلیک کنید تا تنظیمات ذخیره شود. حالا شما می توانید وب سایت خود را ببینید و سپس موس خود را روی هر تصویر قرار دهید تا دکمه "Pin It" را ببینید.

اگر میخواهید بعضی از تصاویر را از نمایش دکمه Pin آن حذف کنید، می توانید کلاسهای کد CSS را به تصاویری که می خواهید حذف کنید اضافه کنید.

برای انجام این کار، شما باید بلوک تصویر را در ویرایشگر پست انتخاب کنید و سپس روی نماد 3 نقطه عمودی از نوار ابزار بلوک کلیک کنید. این یک منو باز می شود که شما باید بر روی گزینه ویرایش به عنوان HTML کلیک کنید.

اکنون کد HTML تصویر خود را مشاهده خواهید کرد. برو جلو به اضافه کردن nopin به کلاس ویژگی تگ img است:

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

به طور مشابه، شما همچنین می توانید از افزونه برای غیرفعال کردن نمایش خودکار دکمه "Pin It" استفاده کنید و از کلاس "CSS" "pinthis" استفاده کنید تا به طور انتخابی روی تصاویر خاصی نمایش داده شود.

برای انجام این کار، شما باید از صفحه تنظیمات پلاگین بازدید کنید و سپس بخش Advanced را در سمت راست صفحه قرار دهید.

حالا شما باید گزینه ای را که می گوید "نمایش" را فشار دهید "فقط روی تصاویر با class =" pinthis "" بررسی کنید، و سپس روی دکمه ذخیره کلیک کنید.

دفعه بعد که یک تصویر را به یک پست یا صفحه اضافه می کنید، باید بلوک تصویر را انتخاب کنید و سپس گزینه Edit as 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>

این دکمه Pinterest را روی آن تصویر خاص نشان می دهد، حتی اگر این گزینه را غیرفعال کنید تا به طور خودکار دکمه Pin It را در سایت خود نشان دهید.

تمام

ما امیدواریم که این مقاله به شما در درک چگونگی اضافه کردن Pinterest "Pin It" به وبلاگ وردپرس کمک کند.