Los mejores códigos CSS para personalizar sitios web de WordPress

Publicado: 2022-03-15

¿Estás viendo algunos de los mejores códigos CSS para personalizar WordPress ? Si es así, le mostraremos algunos de los scripts CSS más utilizados que puede usar para editar su sitio web de WordPress.

Sabemos que hay muchas opciones para personalizar WordPress con complementos, opciones de temas y configuraciones predeterminadas. Pero también puede editar varias áreas de su sitio web usando códigos CSS. Entonces, veamos por qué podría necesitarlos para personalizar su sitio web primero.

¿Por qué se utilizan códigos CSS en WordPress para personalizar sitios web?

Los scripts o códigos CSS se utilizan en WordPress para cambiar la apariencia visual de un sitio web. Si desea realizar algunos cambios de diseño específicos que no están incluidos en las opciones del tema o en la configuración predeterminada de WordPress, los scripts CSS pueden resultarle muy útiles.

Puede instalar un complemento de WordPress para las personalizaciones, pero los complementos agregan cierto peso al marco de su sitio web que podría ralentizarlo. El uso de un complemento para realizar un pequeño cambio en la apariencia del sitio web no compensa la caída del rendimiento. Entonces, si tiene conocimientos básicos en codificación, usar códigos CSS es la mejor opción.

Para asegurarse de no perder la velocidad del sitio web mientras realiza las modificaciones visuales, le recomendamos que utilice códigos CSS para personalizar su sitio web de WordPress. Además, a veces puede haber algunos diseños únicos que desee implementar en su sitio web. Y si no hay complementos personalizados creados para él, los scripts CSS son su única opción.

Los mejores códigos CSS para personalizar un sitio web de WordPress

Si bien hay muchos códigos CSS para personalizar un sitio web de WordPress, le presentaremos los mejores scripts CSS que hemos encontrado. Son algunos de los códigos más utilizados para ordenar todo tipo de problemas y lograr diseños sobresalientes cuando se trabaja en el front end de un sitio web de WordPress.

Sin embargo, la siguiente lista de secuencias de comandos tiene fines de demostración; es posible que no funcionen en su sitio web porque los selectores utilizados son relativos a un sitio web de muestra. En la mayoría de los casos, deberá editar los selectores, por lo que necesitará un conocimiento básico de CSS para poder aplicar estos scripts a su sitio web. Consulte esta publicación si desea obtener más información sobre cómo aplicar scripts CSS a un sitio web de WP utilizando la herramienta para desarrolladores.

Además, encontrará una sección adicional al final, donde aprenderá a aplicar sus scripts CSS a WordPress de tres maneras diferentes. Ahora, repasemos los guiones.

1. Ocultar elementos

Esta es probablemente la regla CSS más utilizada. Es bastante útil cuando necesita eliminar cualquier elemento en la parte delantera o trasera.

1.1. Ocultar encabezado:

 encabezamiento{
    pantalla: ninguno;
}

1.2. Ocultar el botón "añadir al carrito"

 .single_add_to_cart_button.button{
    pantalla: ninguno;
}

1.3. Ocultar migas de pan

 .woocommerce-breadcrumb{
    pantalla: ninguno;
}

Nota: esto no se recomienda en algunos casos, ya que un elemento oculto se puede volver visible con una comprensión básica de la consola del navegador. Por ejemplo, es posible que deba eliminar un formulario para que los usuarios no puedan completarlo. Entonces, no desea hacer esto con un script CSS porque cualquier persona con conocimientos básicos puede hacerlo visible y enviar el formulario de todos modos.

Sin embargo, brinda una solución rápida y fácil para problemas de estilo o diseño y aún podemos usarlo sin ningún problema.

Si desea obtener más ayuda sobre cómo ocultar y eliminar el botón Agregar al carrito, también tenemos una guía detallada. Del mismo modo, también puede encontrar más información sobre cómo editar encabezados y migas de pan en WordPress si lo requiere en nuestros blogs.

2. Mover elementos

Si necesita mover algún elemento para ajustar el diseño de una página, puede moverlo fácilmente en cualquier dirección usando algo como esto:

 #qlwapp{
    inferior: 45px;
    izquierda: 25px;
    posición: relativa;
}

Es posible que deba establecer position:relative en algunos casos, si el elemento se ha colocado antes.

Nota: Esto es útil solo para ajustes menores, los elementos no deben moverse fuera de sus contenedores. Puede usar arriba, derecha, abajo, izquierda y darle un valor a cada uno.

3. Códigos CSS para modo móvil

También podemos aplicar CSS solo para dispositivos móviles. Se puede hacer mediante consultas de medios.

Funcionan como una declaración condicional. Todas las reglas de CSS dentro de la consulta de medios se aplicarán solo si el tamaño de la pantalla es inferior a 768 px.

El ancho de pantalla dado se toma del estándar aceptado para dispositivos móviles, que es 768px. Puede editar este valor para aplicarlo en dispositivos con pantallas más grandes o más pequeñas.

 @media solo pantalla y (ancho máximo: 768 px){
    div.masthead{
        pantalla: bloque en línea;
        ancho: 50%;
        margen: automático;
    }
}

4. Editar texto

Los pseudoselectores de CSS son excelentes recursos para personalizar un sitio web de WordPress. Y con el uso inteligente de ellos, también podemos lograr muchas modificaciones en su sitio web. Por tanto, también podemos utilizar estos códigos CSS para personalizar el texto de tu web de WordPress.

Los :before y :after nos permiten insertar un “pseudo-elemento” justo antes o después de cualquier otro elemento HTML. De esta forma, podemos ocultar un texto y sustituirlo por cualquier otro:

 p.texto{
    visibilidad: oculto;
}
p.texto::antes{
    visibilidad:visible;
    content:'nuevo texto aquí';
    bloqueo de pantalla;
}

5. Traducciones usando códigos CSS

La :lang() nos permite aplicar reglas CSS dependiendo del idioma de la página. Incluso si se traduce con uno de los complementos de traducción como WPML o Polylang, el atributo lang actual siempre estará en la etiqueta principal <html> de la salida HTML del sitio web.

Los mejores scripts CSS para WordPress

Entonces, si usamos el pseudoselector :before como se ve en el script de muestra anterior, en combinación con la :lang() , podremos traducir cualquier cadena en un sitio web.

Esto también funcionará en sitios web en varios idiomas.

 p.text:lang(es){
    visibilidad: oculto; 
} 
p.text:lang(en)::before{ 
    visibilidad:visible;
    content:'texto traducido';
    bloqueo de pantalla; 
}

6. Agregue una barra de desplazamiento

Una barra de desplazamiento puede mejorar la experiencia del usuario en un sitio web cuando tiene contenido grande como listas, galerías de imágenes o secciones. También ayudan a mantener publicaciones y páginas sin una extensión excesiva.

Esto es especialmente útil para usar en una barra lateral o en cualquier otra área de widgets. Además, puede ayudar a solucionar problemas de widgets faltantes o cortados cuando la altura también excede el tamaño disponible.

También podemos insertar una barra de desplazamiento dentro de las publicaciones y páginas:

Este script agregará una barra de desplazamiento a la lista, haciendo que todos los documentos sean mucho más cortos.

 ul {
    altura: 370px;
    desbordamiento-y:desplazamiento;
}

Los mejores scripts CSS para WordPress

7. Códigos CSS para usar imágenes como íconos

Puede agregar cualquier tipo de imagen con un script CSS y se puede lograr de varias maneras. Pero usando el pseudoselector :before , podemos agregar una imagen y hacer que se vea como un ícono también.
Asegúrese de cargar una imagen en la biblioteca de medios y use el enlace permanente de la imagen como la url('image-link-here')

 .entry-content > p:nth-child(3)::before{
    content:url('http://localhost/Sampler/wp-content/uploads/2022/03/fish-icon.png');
}

O podemos usar iconos reales, también usando el mismo selector:

 .entry-content > p:nth-child(3)::before{
	familia de fuentes: "Fuente Awesome 5 Gratis"; 
        peso de fuente: 400; 
        contenido: "\f0f3";
}

Para usar íconos reales, la etiqueta HTML del vínculo del ícono se establece en fuente impresionante 5 Gratis en nuestro ejemplo. Debe cargarse en la sección <head> de la página web.

8. Cambiar fuentes

También puede personalizar las fuentes de un sitio web de WordPress con códigos CSS. Similar a los íconos, las fuentes también deben cargarse en el encabezado del tema para que podamos usarlas. Podemos verificar si el conjunto de fuentes está disponible echando un vistazo a la sección <head> de la página.

Aquí, el enlace de Google Fonts ya se ha agregado con la ayuda de un script PHP.

mejores scripts CSS para WordPress

Después de confirmar que el conjunto de iconos o fuentes que desea usar ya está cargado en la sección HTML <head> , puede usarlo libremente en el sitio web en general

 h1,h2,h3,p,a,li{
    familia tipográfica: 'Hubballi', cursiva;
}

Bonificación: 3 formas de aplicar CSS a un sitio web de WordPress

Le proporcionamos algunos de los códigos CSS más utilizados para personalizar su sitio web de WordPress. Pero también necesita saber cómo agregarlos a su sitio web. Para eso, también le mostraremos un breve tutorial como bonificación en este artículo.

Entonces, aquí están las 3 formas comunes de aplicar CSS a un sitio web de WordPress.

1. Personalizador de temas

Para agregar el script CSS a través del personalizador de temas, todo lo que tiene que hacer es pegar sus scripts CSS en el personalizador de temas. Generalmente se puede aplicar para pequeñas personalizaciones o correcciones.

Ve a Apariencia > Personalizar > CSS adicional para abrir el editor de estilo. Luego pegue sus scripts CSS aquí.

mejores scripts css para wordpress

Los scripts aquí se guardarán en la base de datos después de presionar el botón " Publicar ". Podrá ver los cambios en su sitio web después de obtener una vista previa.

2. Archivo CSS de tema secundario

Para este paso, deberá crear un tema secundario para su sitio web mediante programación o utilizando uno de los complementos de tema secundario antes de comenzar. Luego, asegúrese de que su sitio web tenga un tema secundario activo y agregue los códigos CSS en el archivo style.css . Es mejor si también realiza una copia de seguridad de todo su sitio web, ya que modificaremos los delicados archivos centrales de su sitio web.

Abra su editor de código para pegar sus scripts allí, o use el editor incorporado de WP en Apariencia > Editor de archivos de temas . Ahora, abra la hoja de estilo o el archivo style.css del tema secundario.

Este es el lugar donde debe pegar todos sus scripts personalizados. Después de haber agregado los códigos CSS, haga clic en Actualizar archivo . Pero si se convierte en un archivo grande, puede ser una buena idea crear uno nuevo o varios.

3. archivo functions.php de un tema infantil

También puede insertar estilos CSS usando una función de PHP. Todos los estilos aplicados de esta manera se insertarán como estilos en línea en el anverso.

Al igual que en el enfoque anterior, asegúrese de que el tema secundario esté activo para su sitio web. Luego, abra el archivo functions.php desde el editor de temas y pegue los siguientes códigos aquí.

 add_action('wp_head','QuadLayers_headlink');
función QuadLayers_headlink(){
	echo '<estilo>
    .entry-content > p:nth-child(3)::before{
	    familia de fuentes: "Fuente Awesome 5 Gratis"; 
	    peso de fuente: 400; 
	    contenido: "\f0f3";
    }
    h1,h2,h3,p,a,li{
	    familia de fuentes: "Hubballi", cursiva;
    }</estilo>';
}

La gran ventaja de usar esta forma es que puede aplicar condicionales de PHP, aprovechando todo el poder de los ganchos y funciones de WP.

Si desea obtener más información sobre cómo aplicar CSS a su sitio web, consulte nuestra guía sobre cómo aplicar CSS a WordPress también.

Conclusión

Estos son todos los códigos CSS más utilizados para personalizar un sitio web de WordPress . Le mostramos todos los scripts populares con los que puede cambiar la apariencia visual de su sitio web y agregarle diseños únicos. Para resumir, hemos cubierto las siguientes modificaciones usando scripts CSS:

  1. Ocultar elementos
  2. Mover elementos
  3. CSS para dispositivos móviles
  4. Editar texto
  5. Traducciones
  6. Añadir una barra de desplazamiento
  7. Usar imágenes como íconos
  8. Cambiar fuentes

Puede usar fácilmente códigos CSS para personalizar estos elementos de su sitio web de WordPress. Para ayudarlo con eso, incluso le mostramos algunas formas de aplicar CSS en WordPress.

Además, si desea aprender sobre CSS en WordPress, también hemos cubierto la aplicación de CSS en páginas o publicaciones específicas. Del mismo modo, los scripts CSS incluso se pueden usar con creadores de páginas. Uno de los ejemplos más comunes es personalizar el menú Divi con CSS.

Entonces, ¿qué piensas sobre el CSS para editar un sitio web de WP? ¿Alguna vez los has usado? ¿Fueron útiles? Por favor, háganos saber en los comentarios.

Mientras tanto, aquí hay algunos artículos más que podrían interesarle:

  • Cómo crear un complemento de WordPress personalizado
  • Solucionar el problema de no carga del panel de WordPress
  • Cómo crear un campo personalizado de WordPress programáticamente