Cómo agregar el botón “Pin It” de Pinterest en WordPress (Guía definitiva)

¿Desea agregar el botón “Pin It” de Pinterest en WordPress? Recientemente, una nueva fuente de tráfico apareció en las estadísticas de nuestro blog.

Fue lo suficientemente significativo como para que lo notáramos. Esta fuente de tráfico fue Pinterest.

Pinterest es un sitio popular de redes sociales que le permite compartir contenido visual y generar mucho tráfico a su sitio web (siga WPBeginner en Pinterest).

En este artículo, le mostraremos cómo agregar el botón “Pin It” de Pinterest a su blog de WordPress. También explicaremos cómo agregar el botón Pin It sobre las imágenes de su sitio web.

Agregue el botón Pin It de Pinterest en WordPress

Agregar un botón “Pin It” de Pinterest con un complemento

Pinterest cambió oficialmente el nombre del botón “Pin It” a Salvar en 2016.

Aunque algunos complementos todavía usan el nombre “Pin It” en lugar de Guardar, hacen el mismo trabajo de fijar sus imágenes a Pinterest.

La forma más fácil de agregar un botón de Pinterest a su sitio de WordPress es mediante el uso de un complemento para compartir en redes sociales.

Recomendamos usar el complemento Shared Counts para este propósito. Es el mejor complemento de redes sociales para WordPress porque es gratuito y le permite agregar fácilmente el botón de Pinterest junto con otras redes sociales populares.

Para comenzar, debe instalar y activar el complemento Shared Counts. Puede seguir nuestra guía paso a paso sobre cómo instalar un complemento de WordPress para obtener instrucciones detalladas.

Tras la instalación, dirígete a Configuración »Recuentos compartidos página para configurar el complemento.

Página de configuración de recuentos compartidos

En la página de configuración, debe desplazarse hacia abajo para Monitor sección y luego haga clic en el cuadro de texto “Compartir botones para mostrar”.

Esto abrirá un menú desplegable donde puede seleccionar los servicios de redes sociales que desea agregar. Por defecto, Pinterest estará presente en ese cuadro, junto con Facebook y Twitter.

También puede seleccionar la ubicación y el tipo de publicación donde desea mostrar el botón Pinterest. Viene con varios estilos de botones que puede elegir entre la opción “Compartir estilo de botón”.

Una vez que haya terminado, no olvide hacer clic en el Guardar cambios botón para almacenar la configuración.

Ahora puede visitar cualquier publicación en su sitio web para ver el botón Pinterest en acción.

Botón de Pinterest agregado a la publicación de WordPress

Otra cosa interesante sobre SharedCounts es el complemento gratuito de imagen personalizada de Pinterest disponible en Github. Esto le permite configurar una imagen y descripción personalizada para compartir en Pinterest que está optimizada para Pinterest.

Nota: Utilizamos el complemento SharedCount en nuestro sitio web porque es la mejor opción del mercado. Está muy bien codificado y es gratis.

Agregar manualmente un botón Pin It de Pinterest en WordPress

Algunos usuarios intermedios pueden preferir agregar los botones para compartir en redes sociales manualmente a su sitio de WordPress en lugar de usar un complemento.

Echemos un vistazo a cómo agregar manualmente un botón de Pinterest en WordPress.

Lo primero que debe hacer es hacer una copia de seguridad completa de WordPress de su sitio. Esto lo ayudará a restaurar su sitio en caso de que algo se rompa por accidente.

A continuación, debe conectarse a su alojamiento de WordPress utilizando un cliente FTP y luego ir a la carpeta / wp-content / themes /.

Desde aquí, debe abrir su carpeta de tema actual y luego ubicar el archivo footer.php.

Descargar el archivo php de pie de página

Luego, simplemente haga clic derecho en ese archivo y luego seleccione Descargar del menú Esto descargará el archivo footer.php a tu computadora.

Ahora debe abrir el archivo footer.php usando un editor de texto plano como el Bloc de notas y luego pegar el siguiente script justo antes de la etiqueta.

(función () {
window.PinIt = window.PinIt || {cargado: falso};
if (window.PinIt.loaded) return;
window.PinIt.loaded = true;
función async_load () {
var s = document.createElement ("guión");
s.type = "texto / javascript";
s.async = verdadero;
s.src = "https://assets.pinterest.com/js/pinit.js";
var x = document.getElementsByTagName ("guión") [0];
x.parentNode.insertBefore (s, x);
}
if (window.attachEvent)
window.attachEvent ("onload", async_load);
más
window.addEventListener ("carga", async_load, false);
}) ();

Una vez que haya hecho eso, debe guardar el archivo y luego cargarlo nuevamente en la carpeta del tema actual.

A continuación, debe ubicar y descargar el archivo single.php de su carpeta de temas y abrirlo para editarlo. Después de eso, debe agregar el siguiente código.

Deberá elegir la ubicación donde desea que aparezca en su publicación. Después del título de la publicación es la ubicación más común para los botones de redes sociales.

<?php $ pinterestimage = wp_get_attachment_image_src (get_post_thumbnail_id ($ post->ID), ‘completo’); ?>
CARNÉ DE IDENTIDAD)); ?>&medios =<?php echo $ pinterestimage [0]; ?>&descripción =<?php the_title (); ?>" clase ="pin-it-button" cuenta-diseño ="vertical">Pin It

El código anterior muestra el botón Pinterest con su imagen destacada, título, descripción y URL de publicación en el parámetro compartir URL.

Finalmente, debe guardar el archivo y cargarlo nuevamente en su directorio de temas usando FTP.

Esto agregará un botón de compartir vertical a las publicaciones de su sitio web. Si desea mostrar el botón de compartir horizontal, simplemente cambie el parámetro de diseño de conteo a horizontal.

Crear un código corto para el botón Pinterest

Recientemente, uno de nuestros usuarios nos preguntó cómo crear un código corto para el botón “Pin It” de Pinterest.

Los códigos cortos en WordPress le permiten agregar fácilmente elementos dinámicos a sus publicaciones, páginas y widgets de WordPress. Al crear un código corto, podrá agregar manualmente el botón Pinterest en sus artículos.

Primero, deberá agregar el siguiente código al archivo functions.php de su tema o un complemento específico del sitio:

función get_pin ($ atts) {
$ pinterestimage = wp_get_attachment_image_src (get_post_thumbnail_id ($ post->ID), ‘completo’);
volver ‘ID)). ‘&media = ‘. $ pinterestimage [0]. ‘&descripción = ‘. get_the_title () “." clase ="pin-it-button" cuenta-diseño ="vertical">Pin It ‘; }

add_shortcode (‘pin’, ‘get_pin’);

Después de eso, puede usar el código corto [pin] en sus publicaciones de WordPress donde desea mostrar el botón Pinterest.

Agregar el botón Pin It de Pinterest sobre tus imágenes

Si está ejecutando un sitio de moda, fotografía o portafolio, definitivamente desea que sus imágenes se compartan en Pinterest para aumentar el tráfico de su sitio web.

Veamos cómo agregar el botón Pin it de Pinterest sobre tus imágenes en WordPress. Este botón aparecerá solo cuando el usuario pase el mouse sobre sus imágenes, lo que le permitirá compartir fácilmente la imagen en su perfil de Pinterest.

Primero, debe instalar y activar el complemento Pin it de Pinterest para imágenes.

Tras la activación, vaya a Configuración »Pinterest Pin It página para configurar el complemento.

Botón Pin It de Pinterest para la página de configuración de imágenes

En la página de configuración, puede elegir dónde desea mostrar el botón “Pin It” en su sitio de WordPress. Puede mostrarlo solo en publicaciones individuales, páginas, páginas de categoría o en cualquier lugar de su sitio.

La siguiente opción es elegir la descripción predeterminada del menú desplegable. Esto se usará como la descripción de la imagen para la imagen anclada.

Una vez hecho esto, debe hacer clic en el Salvar botón para almacenar la configuración. Ahora puede visitar su sitio web y luego pasar el cursor del mouse sobre cualquier imagen para ver el botón “Pin It” de Pinterest.

Botón Pin It de Pinterest sobre las imágenes

Si desea excluir algunas imágenes de mostrar el botón Pin It, entonces puede agregar el nopin Clase CSS para las imágenes que desea excluir.

Para hacer eso, debe seleccionar el bloque de imagen en el editor de publicaciones y luego hacer clic en el icono de 3 puntos verticales de la barra de herramientas de bloque. Esto abrirá un menú donde debe hacer clic en el Editar como HTML opción.

Opción Editar imagen como HTML para agregar clase CSS

Ahora verá el código HTML de su imagen. Adelante para agregar nopin al clase atributo de la etiqueta img:

Nombre de la imágen

Del mismo modo, también puede usar el complemento para deshabilitar la visualización automática del botón “Pin It”, y usar la clase CSS “pinthis” para mostrar selectivamente el botón en imágenes específicas.

Para hacerlo, debe visitar la página de configuración del complemento y luego ubicar el Avanzado sección en el lado derecho de la página.

Pinterest Pin It plugin configuraciones avanzadas

Ahora debe marcar la opción que dice ‘Mostrar el botón” Pin it “solo en las imágenes con class =” pinthis “‘, y luego hacer clic en el botón Salvar botón.

La próxima vez que agregue una imagen a una publicación o página, debe seleccionar el bloque de imagen y luego usar el Editar como HTML opción para agregar el pinthis Clase CSS para el código de la imagen. Aquí hay un ejemplo:

Nombre de la imágen

Esto mostrará el botón Pinterest en esa imagen específica, incluso si ha desactivado la opción de mostrar automáticamente el botón Pin It en su sitio.

Eso es todo!

Esperamos que este artículo te haya ayudado a entender cómo agregar un botón “Pin It” de Pinterest a tu blog de WordPress. También puede consultar nuestra guía sobre cómo crear un boletín electrónico y obtener más suscriptores..

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me