Página principal » WordPress » Optimización de la velocidad de WordPress con iconos personalizados para compartir redes sociales
Optimización de la velocidad de WordPress con iconos personalizados para compartir redes sociales
Puede parecer una tarea fácil, pero agregar botones de intercambio social con buen comportamiento a un sitio de WordPress puede ser una molestia. Cuando digo comportarme bien, me refiero a que los complementos para compartir en redes sociales son simples, ligeros, amigables con los recursos, rápidos, no son así. Tienden a consumir recursos como locos, y ¿Por qué alguien querría aumentar el tiempo de carga del complemento en un 25-35% solo para mostrar algunos iconos? en su sitio?
La buena noticia es que no necesariamente necesita un complemento para realizar esta tarea. En este tutorial, te mostraré cómo puedes fácilmente agregar botones personalizados para compartir redes sociales hasta el final de las publicaciones en su sitio de WordPress con sólo unas pocas líneas de código.
Paso 1: Generar los botones de compartir en redes sociales
Usaremos Simple Sharing Buttons Generator, una herramienta web práctica y fácil de usar para generar los íconos para compartir. La principal ventaja de esta aplicación es que los botones que genera se ejecutan en la interfaz, por lo tanto no cargarán su servidor y también puedes mantener en privado las actividades de tus usuarios..
Para generar sus botones personalizados, vaya aquí y presione Empezar. Elija 1 de los 6 estilos de botones diferentes. Hacer clic siguiente y marca el redes sociales desea agregar a su sitio Cuando hayas terminado, deberás completar la información de tu sitio web.
En esta pantalla (abajo), encontrarás dos opciones: 'No JavaScript' y 'JavaScript'. garrapata JavaScript, ya que permitirá que el navegador detecte la URL de forma dinámica, sus visitantes podrán compartir cada publicación individualmente, no solo la URL de la página de inicio.
Finalmente, eche un vistazo a la vista previa en vivo, descargue el conjunto de iconos elegido y tome el código que generó.
Paso 2: Crear un tema infantil
Ahora tendrá que agregar los íconos y el código generados a su sitio. En primer lugar deberás crear un tema hijo.
Puede crear fácilmente un tema WP hijo con la ayuda de nuestro tutorial, o puede seguir los pasos de este artículo de WP Codex. Si ya tienes uno, puedes saltar al Paso 3.
El tema del niño se relaciona con el tema que usted usa actualmente, de manera similar a como un niño se relaciona con sus padres. Eso Hereda todo (estilo y funcionalidad) del tema principal. pero puedes añadir funcionalidad extra lo.
En nuestro caso la funcionalidad extra serán los botones personalizados de intercambio social..
Paso 3: crear una función personalizada que muestra los iconos
Agregaremos una función personalizada al archivo functions.php del tema secundario..
Con la ayuda de esta función, podrá agregar los íconos sociales donde desee en su sitio mediante un enlace de acción personalizado. Si el tema de su hijo aún no tiene un archivo functions.php, cree un archivo de texto en blanco en la carpeta raíz del tema de su hijo con las funciones de nombre y cambie su extensión a .php.
Inserte la siguiente línea de código en este archivo en blanco:
Cuando tu funciones.php el archivo está configurado agregue el siguiente fragmento de código:
/ * * Agrega los iconos personalizados para compartir redes sociales * / function add_social_sharing () ?>
Compartir esta publicacion
Finalmente Eliminar la línea del comentario HTML. del fragmento de código de arriba y Reemplázalo con el código HTML. usted generó en el Paso 1 con el Generador de Botones para Compartir en las Redes Sociales.
Paso 4: Copie el archivo de plantilla correspondiente a la carpeta de temas secundarios
De forma predeterminada, las publicaciones individuales se rigen por un archivo de plantilla denominado single.php. A veces, especialmente en temas más modernos, la estructura de single.php Es más complicado, ya que también carga archivos de plantillas adicionales. En este paso, necesitamos encontrar el archivo de plantilla adecuado donde podamos agregar los íconos más adelante..
Para ubicar el lugar correcto para los botones sociales necesitamos encontrar el archivo de plantilla que Contiene la función que carga el contenido de las publicaciones individuales..
Vamos a abrir el editor de temas en el panel de administración de WordPress bajo Apariencia> Editor. En la esquina superior derecha, encontrará una lista desplegable donde puede seleccionar su tema principal. Debajo del menú desplegable puede ver todos los archivos de plantilla que contiene su tema principal. Desplácese hacia abajo hasta que encuentre el Plantilla de publicación única (llamado single.php) y ábrelo.
Si el tema padre usa el get_template_part () Función WP en el single.php archivo que significa que utiliza un archivo de plantilla adicional para cargar el contenido de la publicación única.
Primero tienes que descubrir cuál es este. El nombre del archivo de plantilla adicional es el primer parámetro de la get_template_part () función.
El primer parámetro es 'contenido' lo que significa que buscamos el archivo de plantilla llamado content.php. Debe copiar este archivo de la carpeta raíz del tema principal a la carpeta raíz del tema secundario para modificarlo.
Paso 5: Agregue el enlace de acción al archivo de plantilla correcto
Creamos una función llamada add_social_sharing () en el Paso 3, y lo adjuntamos a un gancho de acción personalizado llamado custom_social_share. Ahora tendremos que agregar este gancho al lugar donde queremos que se ejecute la función..
Aquí está el fragmento de código que deberá insertar en el lugar correcto:
A continuación, encontremos el lugar correcto..
Abra el archivo de plantilla que agregó a su tema secundario en el Paso 4 en un editor de código o dentro del editor de temas del tablero de administración de WordPress, y busque el el contenido() función.
Compruebe si hay un wp_link_pages () funciona justo después de la el contenido() función. Si hay, entonces el fragmento de código anterior viene después de eso; de lo contrario sigue el el contenido() función.
Paso 6: Agregue el código CSS al tema hijo
Abre el style.css archivo del tema de su hijo, ya sea en su editor de código o en el editor de temas del tablero de administración de WordPress, copie el código CSS que generó en el Paso 1, péguelo al final del archivo y guárdelo.
Agregaremos dos líneas adicionales al archivo CSS para que los iconos de compartir en redes sociales se muestren correctamente en cada tema. Copie y pegue el siguiente fragmento de código al final de la style.css expediente:
ul.share-buttons li a border: 0; ul.share-buttons li img display: inline;
Paso 7: Cargar el conjunto de iconos de redes sociales en el servidor
Cargue el conjunto de iconos de redes sociales que ha descargado en el Paso 1 a la carpeta de temas de su hijo. Conecte su servidor a través de FTP, cree una nueva carpeta llamada imagenes dentro de la raíz de la carpeta de temas de su hijo (/ wp-content / themes / your-child-theme / images) y cargue el icono establecido aquí.
Nombramos la carpeta imagenes porque este es el nombre predeterminado de la carpeta de imágenes que utiliza Simple Sharing Buttons Generator.
Paso 8: Comprueba la ruta de los archivos de iconos
Después de cargar los íconos de redes sociales a su servidor en el Paso 7, es importante que revise la ruta de los archivos de íconos para asegurarse de que estén cargados.
La ruta de un archivo de imagen da una pista al navegador sobre su ubicación en el servidor. Vamos a comprobar los caminos de imagen dentro de la funciones.php Archivo del tema infantil. Abra el archivo en su editor de código y navegue hasta el add_social_sharing () función en la que necesita verificar el código HTML que generó con el generador de botones de uso compartido simple.
En el código HTML encontrarás una etiqueta con un src atributo para cada icono Comprobar si cada src los atributos apuntan a la ubicación exacta donde se cargó el conjunto de iconos en el Paso 7.
El generador de botones para compartir simple agrega rutas relativas al archivos. Algunas veces los navegadores no pueden mostrar las imágenes si utiliza una ruta relativa, así que es una buena idea usa caminos absolutos en su lugar. De esta manera, cada navegador potencialmente utilizado por sus visitantes puede estar completamente seguro de la ubicación de los archivos de iconos requeridos.
La ruta de imagen relativa agregada por el generador se ve algo como esto:
Vamos a cambiar el src atributo de cada icono a una ruta absoluta, lo que significa que incluirá la URL completa del archivo.
La ruta URL anterior se verá así:
Paso 9: cargue los archivos modificados y active el tema secundario
Conecte su servidor a través de FTP y cargue todos los archivos que creamos en este tutorial que aún no ha cargado: el funciones.php, la style.css, y el archivo de plantilla apropiado (en este tutorial, ya sea el single.php o la content.php).
Finalmente, active el tema secundario en el panel de administración de WP bajo el Apariencia> Temas menú.
Ahora está listo con sus íconos para compartir en las redes sociales, súper ligeros, que ahorran recursos y personalizan. Puedes ir en línea y verificarlo en vivo en tu sitio..
Conclusión
En este tutorial, te mostré cómo agregar los botones personalizados para compartir redes sociales al final de las publicaciones individuales. Puede agregar los íconos para compartir en cualquier otra ubicación de su sitio web con la ayuda del gancho de acción que creamos..
Simplemente agregue el código que usamos en el Paso 5 al lugar donde desea que se muestren los botones:
También tendrá que encontrar el archivo de plantilla correcto si desea colocar los íconos en otro lugar. Las páginas individuales están regidas por un archivo de plantilla llamado page.php, mientras que los archivos adjuntos como imágenes se cargan por attachment.php.
Si desea mostrar los botones de redes sociales en un lugar diferente de su sitio web, puede usar la Jerarquía de plantillas de WordPress para encontrarlo..
