Coloque los botones de las redes sociales en la plantilla de WordPress sin complementos y servicios - Profit Hunter

¡Hacemos que sea fácil cargar el sitio usando nuestro propio código en lugar de complementos! Cuanto menos sean, más fácil y más rápida se cargará nuestra plantilla, y esta es una forma directa de mejorar el comportamiento de los visitantes del sitio. En esta publicación, aprenderemos cómo hacer un bloque vertical de botones sociales que se desplaza junto con el artículo. Con él, el lector podrá compartir un enlace a la publicación y guardar en su página, sin importar cuánto texto lea.

Sucede que no tenemos tiempo para estudiar el material hasta el final y, para volver a él más tarde, lo guardamos en algún lugar (en marcadores o redes sociales, por ejemplo). Por lo tanto, a menudo sucede que el bloque de botones está lejos del final de un artículo largo y que el lector no puede verlo en este momento, porque la persona aún no ha leído el material. Con la ayuda de un código especial, lo haremos para que el bloque esté a la vista todo el tiempo y se desplace junto con el artículo.

Coloque los botones de las redes sociales en la plantilla de WordPress sin complementos y servicios - Profit Hunter

El código de "botones atascados" en redes sociales

Vamos a ordenar el código del botón social para Facebook. El resto se puede hacer por analogía.

. ! - Botones sociales -.
. span style = "display: scroll; position: fixed; bottom: 280px; left: 50px;".
. noindex . a target = "blank" rel = "nofollow" href = "http: // www. facebook. com / sharer. php? u =.? php the_permalink ();?.". . img src = "http: // site. en / f. png" width = "50" height = "50" title = "Share on Facebook" alt = "Publicar en Facebook". . / a . / noindex. . / lapso
. ! - Botones sociales -.

Firma . ! - Botones sociales -. le permite determinar visualmente en qué parte del código de la página está nuestro bloque de botones. Hasta ahora, solo hemos colocado un botón en el bloque, pero el código será mucho más grande.
En la etiqueta. lapso Los atributos de c son estilos. Los registraremos para cada botón. Pantalla de grabación : desplazamiento; posición: fijo significa que el botón se "pegará" a la pantalla y no se ocultará con el texto ya leído en el proceso de desplazamiento de la página.

Los indicadores inferior e izquierdo determinan la posición del botón en relación con los bordes inferior e izquierdo de la pantalla. En nuestro caso, será a la izquierda del post. Si necesita colocarlo a la derecha, simplemente reemplace "izquierda" con "derecha". Como ya ha notado, los valores de estos indicadores se configuran en píxeles, y puede cambiarlos como desee, hasta que encuentre la posición más óptima en su plantilla. Tenga en cuenta que en el ejemplo anterior, la sangría del botón de la parte inferior de la pantalla es de 280 píxeles.

Pero si queremos poner otro debajo de este botón, entonces desde 280 debemos restar 50 o un poco más (50 es la altura del botón). Resulta que el siguiente botón inferior ya no tendrá 280, sino un máximo de 230 (si es más, las imágenes se golpearán entre sí). Por lo tanto, este valor debería cambiar con cada nuevo botón.
Con la etiqueta . noindex y el atributo rel = "nofollow" cerramos los enlaces que están ocultos en los botones para que no sean indexados por los motores de búsqueda.

En la etiqueta . a El atributo target = "en blanco" es responsable de abrir la ventana con la oferta para compartir en una nueva pestaña. Esto es importante porque el usuario todavía puede querer volver a la página del sitio que leyó.
El atributo href = encaja directamente en el código del enlace, que será responsable de mostrar el cuadro de diálogo de la red social cuando se haga clic en el botón. Para cada uno de ellos, este código será diferente. Registro . ? php the_permalink (); ? (no solo es necesario para el botón de suscripción de feedburner) le permite mostrar un enlace a nuestro material y su nombre en la página de la red social que se abre, por ejemplo:

Coloque los botones de las redes sociales en la plantilla de WordPress sin complementos y servicios - Profit Hunter

En la etiqueta . img se especifica la ruta de acceso al botón de imagen que desea colocar, así como sus parámetros (longitud, ancho, título, atributo alt).

Por lo tanto, obtenemos el esquema general de compilar el código del botón de la red social:


. span style = "display: scroll; position: fixed; bottom: {value}; left: {value};".
. noindex . a target = "blank" rel = "nofollow" href = "{enlace a la red social} =.? php the_permalink ();?.". . img src = "{enlace a la imagen del botón}" width = "{value}" height = "{value}" title = "{Share, tell on ...}" alt = "{Share, tell on ...}". . / a . / noindex. . / lapso

En cuanto al significado de los enlaces para diferentes redes sociales, deberían ser así:

  • Para Facebook: onclick = " ventana abrir ('https: // plusone. google. com / _ / + 1 / confirmar? hl = ru. url = http: // www. facebook. com / sharer. php? u =.? php the_permalink () ;? . "
  • Para Twitter: http: // twitter. Com / intent / tweet? Text = RT @ Su nombre de usuario en Twitter .? Php the_permalink ();
  • Para suscribirse al blog: http: // feeds. Feedburner.com/ Nombre de su feed
  • Para correo. Ru: http: // connect. mail. es / share? share_url =.? php the_permalink ();?.
  • Para Vkontakte: https: // vk.com / compartir. php? url =. ? php the_permalink (); ?
  • Para los marcadores de Yandex: http: // zakladki. yandex. com / newlink. xml? url =. ? php the_permalink ()? . nombre =. ? php the_title (); ? . descr =. ? php the_excerpt (); ?
  • Para Odnoklassniki: http: // www. Odnoklassniki. ru / dk? st. cmd = addShare. st. s = 1. st. _surl =. ? php the_permalink (); ? . título =. ? php the_title (); ?

Dónde colocar los botones de redes sociales en la plantilla de WordPress

Como regla general, el bloque se coloca en páginas con publicaciones separadas, noticias. Puedes ponerlo en páginas estáticas. No debe colocar enlaces externos adicionales en las secciones o en la principal, aunque puede intentar ver el efecto. Sólo las pruebas y los experimentos pueden mostrar la situación real.

Un solo archivo es responsable de una publicación separada. php, ubicado en la carpeta con tu tema. En ella deberás colocar el código que creaste. Dónde colocarlo: su negocio, de todos modos, los botones se ubicarán en el lugar que especificó en los atributos inferior e izquierdo. Es deseable, por supuesto, poner este código al final, en algún lugar después de la salida del pie de página. Es necesario que los botones de la red social se muestren más tarde que el contenido principal, si el usuario tiene una Internet lenta. El primer material siempre debe cargarse con material fácil de usar, y solo entonces, el botón de compartir y así sucesivamente.

¿Por qué es mejor incrustar el código de su botón en el sitio?

Como dijimos anteriormente, los complementos son la forma más fácil de hacer un bloqueo de botón. Sin embargo, valoramos la velocidad de carga del sitio e intentamos minimizar el número de complementos. Entonces, si tomas dos sitios, entonces todas las otras cosas son iguales, su calidad, una destacará sobre la otra. Y por que Porque una descarga es más rápida que la otra.

Otra forma es servicios de terceros. Sin embargo, al colocarlos de manera muy fácil y rápida, a veces estos servicios se "cuelgan" y el sitio muestra algo incomprensible en lugar de botones.

Además, en los servicios y complementos puede haber enlaces adicionales para los desarrolladores que no necesitamos.
Por lo tanto, su código es la mejor manera de salir. Lo principal: hacerlo limpio, ordenado, sin residuos y errores innecesarios.

¿Te gustan los artículos? ¡Suscríbete al boletín!

Buscar

Artículos relacionados