Agregar iconos de redes sociales a WordPress con sprites CSS

Aunque hay muchos complementos que pueden ayudarlo a agregar iconos de redes sociales a su sitio, no todos son iguales. Algunos de ellos podrían ser un drenaje para su servidor, sin mencionar y menos personalizable. Afortunadamente, hay una alternativa que puede ayudarlo a mantener su sitio rápido: CSS Sprite. Por lo general, se agregan imágenes separadas a un sitio para cada enlace de redes sociales. Aunque esto se consideraría una codificación de sonido, significa solicitudes adicionales del servidor para cada imagen cuando un visitante carga la página. Y, por supuesto, cuantas más solicitudes de servidor tengan una página, más tiempo será el tiempo de carga.
La belleza de CSS Sprites es que pueden contener todas las imágenes para sus redes sociales, mientras mapean correctamente todos los enlaces apropiados. Esto se traduce en menos solicitudes de servidor, guardando el ancho de la cinta y la carga rápida de páginas. ¡Una situación de ganar-ganar! En este tutorial, le mostraré cómo usar CSS para crear sus propias redes sociales completamente personalizables para su sitio de WordPress, incluido el código para ahorrarle algo de tiempo y hacer que este proyecto sea más fácil de completar.
Continúe leyendo o pasando hacia adelante usando estos enlaces:
Creando tu imagen
Agregar enlaces e imagen a su sitio web
Agregue sus iconos y estilos
Creación de su imagen El primer paso para crear sus propios Sprites CSS es crear una imagen con los iconos de las redes sociales que desea usar. Debería tener dos capas apretadas apiladas:
Capa superior: los iconos que serán visibles en la página inferior: los iconos que serán visibles al pasar el mouse
Aquí hay un ejemplo de cómo deberían ver sus iconos:
Puede personalizar sus propios íconos para que se ajusten perfectamente con su plantilla y diseño. Tenga en cuenta que no hemos utilizado un fondo transparente para esta imagen para mostrarlos claramente para este tutorial. Idealmente, el fondo de su imagen debe ser transparente, por lo que puede usar los iconos incluso si cambia el tema y el color de fondo.

Además, no debe agregar espacio entre cada imagen, ya que se puede agregar a CSS más adelante. Depende completamente de ti. En este ejemplo, los íconos aparecerán grises en el sitio, pero cuando el mouse pase sobre él, se mostrarán sus coloridas versiones. Una vez que haya creado su propio conjunto de iconos para las redes sociales, está listo para pasar al siguiente paso. Deberá conocer el ancho y la altura de cada símbolo en píxeles antes de continuar, así que asegúrese de anotarlo. Un programa de edición de imágenes puede ayudarlo a identificar esta información.
Agregar enlaces e imagen a su sitio Cargue la imagen en su sitio y tenga en cuenta el lugar donde está la imagen, para que pueda llamarlo en su código más adelante. Luego, debe agregar los enlaces de la red social a su sitio para hacer estos íconos para hacer su trabajo. Puedes hacer esto con HTML:
La idea se carga 2C6787171ACCA2FD230E1AC42F3ED025
Esta es la estructura básica que necesitará para sus enlaces, agregue el nombre real del sitio al que desea conectarse reemplazando los tribunales de redes sociales y el ejemplo anterior. Además, asegúrese de reemplazar la URL. Repita los dos del código anterior para cada icono en la línea superior de la imagen que creó, reemplazando el texto falso. También puede optar por cambiar el nombre de DID ID con algo más adecuado para sus necesidades. El mejor lugar para poner este código está directamente en los archivos de su tema, donde desea que aparezcan los iconos. Por ejemplo, puede agregar enlaces a su barra lateral.php, footer.php, header.php o plantilla de página. Tampoco es tímido. Siéntase libre de agregar el texto del encabezado con un título descriptivo o cualquier otro código deseado. No olvides ahorrar cuando hayas terminado.
No se preocupe si sus enlaces no salen así. No parece bueno ahora, pero será pronto. Cuando haya terminado, no verá ninguna diferencia para su sitio, pero está bien porque agregaremos las imágenes. Puede preocuparse por el estilo, el relleno y el espacio más tarde.
Agregué títulos a los enlaces en mi sitio de prueba para mostrarle dónde estarían los enlaces de otra manera. Agregue sus iconos y los estilos es hora de agregar sus iconos CSS. Puede agregar el código al archivo de archivo style.css o mediante un complemento CSS personalizado si lo desea.

Aquí está el código que necesita agregar:

Cargue la idea 25468eb49defe2319b9ee3b6de35ddbf
Reemplace las clases con las suyas, junto con las rutas de imagen. Los hashtags se pueden reemplazar con los valores correctos dependiendo de su archivo, pero no cambien los ceros; debe permanecer intacto para que los iconos se muestren correctamente. También puede copiar y pegar la clase social para cada icono de socialización adicional que desea agregar. También puede cambiar la posición, el borde, el relleno y la parte superior para adaptarse a sus necesidades de estilo específicas. Aquí hay un detalle de este ejemplo de CSS para referencia rápida:
#Social a.social {altura: #px;}-reemplaza el hashtag con la altura de cada icono y no con la altura total de la imagen.
#Social a.socialsiteone {izquierda: 0px;} – Aquí comienza el primer símbolo en el lado izquierdo de la imagen.
#Social a.socialsiteone {ancho: #px;} – Este es el ancho del primer icono de red social. Este número debería ser el mismo para todos los demás iconos.
#Social a.socialsiteone {fondo: url (‘your-image.png’) 0 0;}-La imagen se llama y la posición se establece en cero píxeles para ambas posiciones en la izquierda y arriba.
#Social a.socialsitetwo {izquierda: #px;}-Reemplace el hashtag con el valor del píxel en el que comienza el segundo icono en la imagen. Si el primer icono tiene un ancho de 50 píxeles, entonces este valor sería de 51 píxeles.
#Social A.SocialSitetWo {Background: url (‘Your-Image.png’)-#PX 0;}-Reemplaza el hashtag con el número de píxeles en el que el segundo símbolo comienza a contar desde la extrema izquierda de la imagen.
Si ha incluido el espacio entre los iconos en la imagen que creó, los selectores de posición en la izquierda y el fondo serán los mismos. Si no ha agregado el espacio inicial, los selectores de mano izquierda deben ser más grandes que los selectores de posición de fondo, ya que tendrá que tener en cuenta el espacio adicional que desea agregar en los píxeles. Ahora puede agregar las imágenes que lo harán se exhibirá en Hover. Puede agregar el siguiente código en el ejemplo anterior, como hice aquí, en aras de la simplicidad, o puede mezclarlos:
La idea F4E57224F380B8FDE98DE81286E4594A está cargada.
Reemplace los hashtags con el valor correcto como lo hicimos en el ejemplo anterior. El primer valor es el número de píxeles en los que se coloca el icono a la izquierda, y el segundo número es importante desde arriba. Después de haber terminado de guardar el archivo y ver los resultados.
La conclusión puede ser necesaria para hacer algunos cambios adicionales de la hoja de estilo CSS para obtener el aspecto deseado, pero comenzó excelente con el código presentado aquí.
Si desea saber más sobre CSS para ayudarlo a atacar sus íconos, consulte una de nuestras publicaciones de inicio con WordPress: más de 200 recursos para estimular la carrera y más de 35 recursos para convertirse en un desarrollador de WordPress de patada. Si está interesado en mejorar el intercambio social del sitio o la red, consulte algunas de nuestras otras publicaciones: aumente sus cuotas con estos 5 complementos gratuitos para las redes sociales de WordPress, 50 mejores complementos para redes sociales WordPress (2020). Nota del editor: Esta publicación se ha actualizado para obtener precisión y relevancia. [Publicado originalmente: mayo de 2015 / revisado: abril de 2022] ¿Cómo se integran las redes sociales en su sitio o red? Siéntase libre de unirse a la conversación e intercambiar consejos y compartir su valiosa experiencia en los comentarios a continuación.
Etiquetas:
CSS

Redes sociales