Как добавить кнопку Pinterest «Pin It» в WordPress (полное руководство)

/

Вы хотите добавить кнопку Pinterest «Pin It» в WordPress? Недавно в статистике нашего блога появился новый источник трафика.

Это было достаточно важно, чтобы мы заметили. Этим источником трафика был Pinterest.

Pinterest - популярная социальная сеть, которая позволяет вам делиться визуальным контентом и привлекать большой трафик на ваш сайт.

В этой статье мы покажем вам, как добавить кнопку Pinterest «Закрепить» в свой блог WordPress. Мы также объясним, как добавить кнопку «Прикрепить» к изображениям вашего сайта.

Добавить кнопку Pinterest Pin It в WordPress

Добавление кнопки Pinterest «Прикрепить» с помощью плагина

Pinterest официально изменил название кнопки «Прикрепить» на «Сохранить» в 2016 году.

Хотя некоторые плагины по-прежнему используют имя «Закрепить» вместо «Сохранить», они выполняют ту же работу по закреплению ваших изображений в Pinterest.

Самый простой способ добавить кнопку Pinterest на свой сайт WordPress - использовать плагин для обмена в социальных сетях.

Для этого мы рекомендуем использовать плагин Shared Counts. Это лучший плагин для социальных сетей WordPress, потому что он бесплатный и позволяет легко добавлять кнопку Pinterest вместе с другими популярными социальными сетями.

Для начала вам необходимо установить и активировать плагин Shared Counts. Вы можете следовать нашему пошаговому руководству по установке плагина WordPress для получения подробных инструкций.

После установки перейдите на страницу Настройки »Общее количество, чтобы настроить плагин.

Страница настроек общего счетчика

На странице настроек вам нужно прокрутить вниз до раздела «Дисплей» и затем щелкнуть текстовое поле «Совместное использование кнопок для отображения».

Откроется раскрывающееся меню, в котором вы можете выбрать службы социальных сетей, которые хотите добавить. По умолчанию Pinterest будет отображаться в этом поле вместе с Facebook и Twitter.

Вы также можете выбрать место и тип публикации, где вы хотите отображать кнопку Pinterest. Он поставляется с несколькими стилями кнопок, которые вы можете выбрать в опции «Поделиться стилем кнопки».

Когда вы закончите, не забудьте нажать кнопку «Сохранить изменения», чтобы сохранить настройки.

Теперь вы можете посетить любую публикацию на своем веб-сайте, чтобы увидеть кнопку Pinterest в действии.

Кнопка Pinterest добавлена ​​в сообщение WordPress

Еще одна интересная особенность SharedCounts - это бесплатное дополнение Custom Pinterest Image, доступное на Github. Это позволяет вам установить собственное изображение и описание для публикации в Pinterest, оптимизированные для Pinterest.

Примечание. Мы используем плагин SharedCount на нашем веб-сайте, потому что это лучший вариант на рынке. Он очень хорошо запрограммирован и бесплатный.

Добавление кнопки Pinterest в WordPress вручную

Некоторые промежуточные пользователи могут предпочесть добавлять кнопки социальных сетей вручную на свой сайт WordPress вместо использования плагина.

Давайте посмотрим, как вручную добавить кнопку Pinterest в WordPress.

Первое, что вам нужно сделать, это сделать полную резервную копию вашего сайта WordPress. Это поможет вам восстановить ваш сайт, если что-то случайно сломается.

Затем вам нужно подключиться к вашему хостингу WordPress с помощью FTP-клиента, а затем перейти в папку / wp-content / themes /.

Отсюда вам нужно открыть папку с текущей темой, а затем найти файл footer.php.

Скачать php файл нижнего колонтитула

Затем просто щелкните этот файл правой кнопкой мыши и выберите в меню «Загрузить». Это загрузит файл 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>

Как только вы это сделаете, вам нужно сохранить файл, а затем загрузить его обратно в текущую папку темы.

Затем вам нужно найти и загрузить файл 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

Недавно один из наших пользователей спросил нас, как создать шорткод для кнопки Pinterest «Закрепить».

Шорткоды в WordPress позволяют легко добавлять динамические элементы в ваши записи, страницы и виджеты WordPress. Создав шорткод, вы сможете вручную добавлять кнопку Pinterest в свои статьи.

Во-первых, вам нужно добавить следующий код в файл functions.php вашей темы или в плагин для конкретного сайта:

<?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] в своих сообщениях WordPress, где вы хотите отображать кнопку Pinterest.

Добавление кнопки Pinterest поверх изображений

Если у вас есть сайт о моде, фотографии или портфолио, то вы определенно хотите, чтобы ваши изображения публиковались в Pinterest, чтобы увеличить посещаемость вашего сайта.

Давайте посмотрим, как добавить кнопку Pinterest «Закрепить» поверх изображений в WordPress. Эта кнопка появляется только тогда, когда пользователь наводит указатель мыши на ваши изображения, что позволяет им легко поделиться изображением в своем профиле Pinterest.

Во-первых, вам необходимо установить и активировать плагин Pinterest Pin it Button for Images.

После активации перейдите в Настройки »Pinterest Pin It, чтобы настроить плагин.

Кнопка Pinterest Pin It для страницы настроек изображений

На странице настроек вы можете выбрать, где вы хотите отображать кнопку «Закрепить» на своем сайте WordPress. Вы можете отображать его только в отдельных сообщениях, страницах, страницах категорий или везде на вашем сайте.

Следующий вариант - выбрать описание по умолчанию из раскрывающегося меню. Он будет использоваться как описание закрепленного изображения.

После этого вам нужно нажать кнопку «Сохранить», чтобы сохранить настройки. Теперь вы можете посетить свой веб-сайт, а затем навести курсор мыши на любое изображение, чтобы увидеть кнопку Pinterest «Закрепить».

Pinterest кнопка Закрепить его над изображениями

Если вы хотите исключить некоторые изображения из отображения кнопки «Закрепить», вы можете добавить класс CSS nopin к изображениям, которые хотите исключить.

Для этого вам нужно выбрать блок изображения в редакторе сообщений, а затем щелкнуть значок с тремя вертикальными точками на панели инструментов блока. Это откроет меню, в котором вам нужно нажать на опцию Редактировать как HTML.

Редактировать изображение как вариант HTML для добавления класса CSS

Теперь вы увидите HTML-код вашего изображения. Давайте добавим nopin в атрибут class тега 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>

Точно так же вы можете использовать плагин для отключения автоматического отображения кнопки «Закрепить» и использовать класс CSS «pinthis» для выборочного отображения кнопки на определенных изображениях.

Для этого вам нужно посетить страницу настроек плагина, а затем найти раздел «Дополнительно» в правой части страницы.

Расширенные настройки плагина Pinterest Pin It

Теперь вам нужно установить флажок «Показывать кнопку« Закрепить »только на изображениях с class =« pinthis »‘, а затем нажать кнопку «Сохранить».

В следующий раз, когда вы добавите изображение в сообщение или страницу, вам нужно будет выбрать блок изображения, а затем использовать параметр «Редактировать как HTML», чтобы добавить этот класс 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 на этом конкретном изображении, даже если вы отключили возможность автоматического отображения кнопки «Закрепить» на своем сайте.

Это все!

Мы надеемся, что эта статья помогла вам понять, как добавить кнопку Pinterest «Закрепить» в свой блог WordPress. Вы также можете ознакомиться с нашим руководством о том, как создать информационную рассылку по электронной почте и получить больше подписчиков.

Нужна помощь с WordPress? Свяжитесь сейчас
[email protected]

Это переведенная версия оригинальной статьи от wpbeginner, весь контент, изображения и авторство принадлежит автору

Как загрузить HTML-страницу в WordPress без ошибок 404

Вы хотите загрузить HTML-страницу на свой сайт WordPress? Иногда вам может потребоваться добавить статическую HTML-страницу и сделать ее доступной вместе

Как принудительно вывести из системы всех пользователей в WordPress

Вы хотите принудительно выйти из системы всех пользователей в WordPress? Если вы подозреваете, что ваш WordPress может быть взломан или вам просто нужно

Как установить WordPress локально на Mac с помощью MAMP

Вы хотите установить WordPress локально на Mac? Установка WordPress на свой компьютер позволяет вам опробовать WordPress перед тем, как начать вести блог. В этой

Как добавить подпись или рекламу после контента публикации в WordPress

Вы хотите добавить подпись или рекламу после контента вашего блога в WordPress? По умолчанию WordPress не предоставляет простой способ отображения подписи