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

¿Se mira 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 predeterminados y configuraciones. Pero puede editar varias áreas de su sitio utilizando códigos CSS. Así que veamos por qué podría necesitarlos para personalizar su sitio primero. ¿Por qué se usan los códigos CSS en WordPress para personalizar los sitios web? Las Escrituras o los códigos CSS se utilizan en WordPress para cambiar el aspecto visual de un sitio web. Si desea realizar algunos cambios de diseño específicos que no están incluidos en las opciones de tema o en la configuración predeterminada de WordPress, los scripts CSS pueden ser de gran ayuda.
Puede instalar un complemento de WordPress para personalizaciones, pero los complementos agregan un cierto peso a su sitio que puede disminuir. No vale la pena disminuir el uso de un complemento para hacer un pequeño cambio en la apariencia del sitio web. Entonces, si tiene conocimientos básicos en la codificación, el uso de códigos CSS es la mejor opción. Para asegurarse de no perder la velocidad del sitio mientras realiza cambios visuales, recomendamos usar códigos CSS para personalizar su sitio de WordPress. Además, puede haber algunos modelos únicos que a veces desea implementar en su sitio web. Y si no hay complementos personalizados creados para ello, los scripts CSS son su única opción.
Los mejores códigos CSS para personalizar un sitio web de WordPress Aunque hay muchos códigos CSS para personalizar un sitio web de WordPress, presentaremos los mejores scripts CSS que hemos encontrado. Estos son algunos de los códigos más utilizados para clasificar todo tipo de problemas y hacer diseños notables cuando se trabaja en el front-end de un sitio web de WordPress. Sin embargo, la siguiente lista de scripts está destinada a fines demostrativos, es posible que no funcionen en su sitio, porque los selectores utilizados son relativos a un sitio web de ejemplo. En la mayoría de los casos, deberá editar los selectores, por lo que necesitará que CSS Basic Knoins aplique estos scripts a su sitio web. Vea esta publicación si desea obtener más información sobre cómo aplicar los scripts CSS en un sitio web de WP utilizando la herramienta de desarrollador. Además, encontrará una sección adicional al final, donde aprenderá a aplicar scripts CSS de tres maneras diferentes. Ahora, pasemos por las Escrituras 1. Ocultar elementos Esta es probablemente la regla CSS más utilizada. Es bastante útil cuando tiene que eliminar cualquier elemento de la parte delantera o posterior. 1.1. Ocultar el encabezado: encabezado {
Pantalla: ninguno;
} 1.2. Oculta el botón “Agregar en el carrito”. .single_add_to_cart_button.button {
Pantalla: ninguno;
} 1.3. Esconde las migas de pan .wooCommerce-Breadcrumb {
Pantalla: ninguno;
} Nota: Esto no se recomienda en algunos casos, porque un elemento oculto puede visible con una comprensión básica de la consola del navegador. Por ejemplo, puede ser necesario eliminar un formulario para que los usuarios no puedan completarlo. Entonces no desea hacer esto con un script CSS, porque cualquiera que tenga conocimiento básico al respecto puede hacerlos visibles y enviar el formulario de todos modos. Todo esto, ofrece una solución rápida y fácil para problemas de estilo o diseño y aún podemos usar sin ningún problema. Si desea más ayuda sobre cómo ocultar y eliminar el botón Agregar en el carrito, también tenemos una guía detallada al respecto. Del mismo modo, también puede encontrar más información sobre cómo editar el encabezado y las migas de pan en WordPress, si es necesario, en nuestros blogs. 2. Mueva elementos Si tiene que mover un elemento para ajustar el diseño de una página, puede moverlo fácilmente en cualquier dirección usando algo como esto:
#qlwapp {
Abajo: 45px;
Izquierda: 25px;
Posición: relativo;
} Es posible que deba establecer la posición: relativo 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 usarlo, derecha, abajo, a la izquierda y puede dar cada uno. 3. Códigos CSS para modo móvil También, solo podemos aplicar CSS para dispositivos móviles. Esto se puede hacer utilizando consultas de medios. Funcionan como una declaración condicional. Todas las reglas CSS en la consulta de medios solo se aplicarán si el tamaño de la pantalla está por debajo de 768px.
El ancho de la pantalla se toma del estándar aceptado para dispositivos móviles, que es 768 PX. Puede editar este valor para aplicarlo en dimensiones de pantalla más grandes o más pequeñas. Pantalla solo @Media y (ancho máximo: 768 px) {div.mmasthead {
Pantalla: bloque en línea;
Ancho: 50%;
margen: coche;
}
} 4. Editar pseudo-selectores CSS son excelentes recursos para personalizar un sitio web de WordPress. Y a través de su uso sabio, podemos hacer muchos cambios en su sitio. Por lo tanto, también podemos usar estos códigos CSS para personalizar el texto de su sitio de WordPress.
Pseudo-selectores: Antes y: después de permitirnos insertar un “pseudo-elemento” justo antes o después de cualquier otro elemento HTML. De esta manera podemos ocultar un texto y reemplazarlo con cualquier otro: P.Text {
Visibilidad: oculto;
}
P.text :: antes {
Visibilidad: visible;
Contenido: “Nuevo texto aquí”;
Bloqueo de pantalla;
} 5. Traducciones utilizando códigos CSS: Lang () nos permite aplicar reglas CSS de acuerdo con el 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 de la salida HTML.
Entonces, si usamos el pseudo-selector: antes, como se muestra en el ejemplo de script anterior, en combinación con pseudo-claasa: lang (), podremos traducir cualquier cadena desde un sitio web. Esto también funcionará en sitios web en varios idiomas. P.text: lang (en) {
Visibilidad: oculto;
}

P.text: lang (en) :: antes {
Visibilidad: visible;
Contenido: “Texto traducido”;
Bloqueo de pantalla;
} 6. Agregue una barra de desfile Una barra de desfile puede mejorar la experiencia del usuario en un sitio web cuando tiene un contenido alto, como listas, galerías de imágenes o secciones. También ayuda a mantener postes y páginas sin una longitud excesiva. Esto es especialmente útil para usarse en una barra lateral o en cualquier otro área de widgets. También puede ayudar a resolver problemas con los widgets faltantes o de corte cuando la altura excede el tamaño disponible.
También podemos ingresar a una barra de desfile en publicaciones y páginas:
Este script agregará una barra de desfile a la lista, haciendo que todos los documentos sean mucho más cortos. ul {
Altura: 370px;
Desbordamiento-y: desplazarse;

}

7. Los códigos CSS para usar imágenes como iconos, puede agregar cualquier tipo de imagen con un script CSS y se puede hacer de algunas maneras. Pero usando el pseudo-selector: antes, podemos agregar una imagen y hacer que parezca un icono. Asegúrese de cargar una imagen en la biblioteca de medios y use la imagen permanente como URL (‘Image-Link-here’)
.Entry-Account> P: nth-child (3) :: antes {
Contenido: url (‘http: //localhost/sampler/wp-content/uploads/2022/03/fish-icon.png’);
} O podemos usar iconos reales, usando el mismo selector: .entry-Contentnt> P: nth-child (3) :: antes {

Font-Family: “Font Awesome 5 Free”;
Peso de fuente: 400;
Contenido: “0f3”;
} Para usar iconos reales, la etiqueta del enlace HTML del icono se establece en Font Awesome 5 gratis en nuestro ejemplo. Debe cargarse en la sección de la página web.
8. Cambie las fuentes que puede personalizar las fuentes de un sitio de WordPress y con códigos CSS. Similar a los íconos, las fuentes deben cargarse en el encabezado de la cabeza, para que podamos usarlas. Podemos verificar si el conjunto de fuentes está disponible echando un vistazo a la sección de la página. Aquí, el enlace de Google Fonts ya se ha agregado con un script PHP. Después de confirmar que el icono o el conjunto de fuentes que desea usar ya está cargado en la sección HTML , puede usarlo libremente en todo el sitio web de H1, H2, H3, P, A, Li {
Familia de fuentes: ‘Hubballi’, cursiva;
}
Bonificación: 3 formas de aplicar CSS en un sitio web de WordPress. Le he ofrecido algunos de los códigos CSS más utilizados para personalizar su sitio web de WordPress. Pero debe saber cómo agregarlos a su sitio web. Para hacer esto, le mostraremos un breve tutorial como un bono en este artículo. Así que aquí están las 3 formas comunes de aplicar CSS en un sitio web de WordPress. 1. Temas de personalización Para agregar el script CSS personalizando el tema, todo lo que tiene que hacer es insertar los scripts CSS para personalizar el tema. Se puede aplicar generalmente para personalización o pequeños remedios. Vaya al aspecto> Personalización> CSS extra para abrir el editor de estilo. Luego pegue sus scripts CSS aquí.

Los scripts aquí se guardarán en la base de datos después de presionar el botón “Publicación”. Podrá ver los cambios en su sitio después de obtener una vista previa. 2. Archivo CSS con tema infantil para este paso, deberá crear un tema secundario para su sitio web programáticamente o usar uno de los complementos de tema secundario antes de comenzar. Luego, asegúrese de que su sitio tenga un segundo tema activo y agregue códigos CSS al archivo style.css. Es mejor si también realiza una copia de seguridad de todo el sitio, porque cambiaremos los delicados archivos básicos de su sitio. Abra el editor de códigos para pegar los scripts o usar los temas de archivo del editor WP incorporado. Ahora, abra la hoja de estilo o el archivo de estilo.css del niño. Aquí es donde debe pegar todos los scripts personalizados. Después de haber agregado códigos CSS, haga clic en Actualizar el archivo. Pero si se convierte en un archivo grande, podría ser una buena idea crear un archivo nuevo o más. 3. El archivo Functions.php de un tema infantil también puede insertar estilos CSS utilizando una función PHP. Todos los estilos aplicados de esta manera se insertarán como estilos en línea. Al igual que el enfoque anterior, asegúrese de que el tema infantil esté activo para su sitio. Abra el archivo Functions.php desde el editor de temas e inserte los siguientes códigos aquí. add_action (‘wp_head’, ‘quadlayers_headlink’);

Función quadlayers_headlink () {
Echou ‘
.Entry-Account> P: nth-child (3) :: antes {

Font-Family: “Font Awesome 5 Free”;

Peso de fuente: 400;

Contenido: “0f3”;
}
H1, H2, H3, P, A, Li {
Font-Family: “Hubballli”, cursiva;
} ‘;} La gran ventaja de usar este modo es que puede aplicar PHP condicional, aprovechando toda la potencia de los ganchos y funciones WP. Si desea obtener más información sobre la aplicación CSS en su sitio, eche un vistazo a nuestra guía sobre cómo aplicar CSS y WordPress. Conclusión Estos son todos los códigos CSS más comunes para personalizar un sitio web de WordPress. Le he mostrado todos los scripts populares con los que puede cambiar el aspecto visual de su sitio web y agregar modelos únicos. Para resumir, cubrimos los siguientes cambios usando scripts CSS:
Oculta elementos
Mover elementos
CSS para dispositivos móviles
Editar el texto
Traducciones
Agregar una barra de desfile
Use imágenes como iconos
Cambiar las fuentes
Puede usar fácilmente códigos CSS para personalizar estos elementos de su sitio de WordPress. Para ayudarlo con esto, le mostré algunas formas de aplicar CSS en WordPress. Además, si desea aprender sobre CSS en WordPress, también abordamos la aplicación CSS en ciertas páginas o publicaciones. Del mismo modo, los scripts CSS se pueden usar incluso con generadores de página. Uno de los ejemplos más comunes es personalizar el menú CSS CSS. Entonces, ¿qué piensas sobre 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 más artículos que pueden interesarle:
Cómo crear un complemento de WordPress personalizado
Solucione el problema con el que el tablero de WordPress no cobra
Cómo crear un campo de WordPress personalizado de manera programática