Guía de introducción al CSS personalizado de WordPress: 5 fragmentos de código que debe aprender

En un sitio WordPress, ¿cuándo quiere acicalar la página pero no quiere utilizar plugins engorrosos? CSS personalizado es una forma potente y eficaz deNo es necesario modificar el archivo del temaPodrá ajustar con precisión las fuentes, los colores, los botones, el espaciado y otros estilos.

Esta guía es adecuada para usuario novatoLa última incorporación a la lista es una nueva, que le pondrá al día sobre la 5 fragmentos de código CSS que debe aprenderEs muy sencillo y le ayudará a optimizar el aspecto de su sitio web WordPress.

1. Ajuste de los estilos de título (fuente, tamaño, color)

Es posible que el tema predeterminado de WordPress no pueda satisfacer su necesidad de contar con encabezados estéticamente agradables.Pero con CSS, puede personalizar fácilmente H1-H6 TítuloEl estilo.

segmento de código

/* Ajuste la fuente, el tamaño y el color de los encabezados H1-H6 */<br>h1 {<br>    tamaño de fuente: 36px;<br>    color: #ff6600; /* naranja brillante */<br>    font-weight: bold;<br>    text-transform: uppercase; /* convertir a mayúsculas */<br>}<br><br>h2 {<br>    tamaño de fuente: 30px;<br>    color: #0073aa; /* WordPress Classic Blue */<br>    font-weight: bold;<br>    border-bottom: 2px solid #0073aa; /* Añadir borde inferior */<br>}<br><br>h3 {<br>    tamaño de fuente: 26px;<br>    color: #333.<br>    font-weight: normal;<br>}<br>
/* Ajuste la fuente, el tamaño y el color de los encabezados H1-H6 */<br>h1 {<br>    tamaño de fuente: 36px;<br>    color: #ff6600; /* naranja brillante */<br>    font-weight: bold;<br>    text-transform: uppercase; /* convertir a mayúsculas */<br>}<br><br>h2 {<br>    tamaño de fuente: 30px;<br>    color: #0073aa; /* WordPress Classic Blue */<br>    font-weight: bold;<br>    border-bottom: 2px solid #0073aa; /* Añadir borde inferior */<br>}<br><br>h3 {<br>    tamaño de fuente: 26px;<br>    color: #333.<br>    font-weight: normal;<br>}<br>
/* Ajuste la fuente, el tamaño y el color de los encabezados H1-H6 */
h1 {
    tamaño de fuente: 36px;
    color: #ff6600; /* naranja brillante */
    font-weight: bold;
    text-transform: uppercase; /* convertir a mayúsculas */
}

h2 {
    tamaño de fuente: 30px;
    color: #0073aa; /* WordPress Classic Blue */
    font-weight: bold;
    border-bottom: 2px solid #0073aa; /* Añadir borde inferior */
}

h3 {
    tamaño de fuente: 26px;
    color: #333.
    font-weight: normal;
}

Vista previa del efecto

• H1: Título grande en naranja, todo en mayúsculas
• H2: Título azul en negrita con borde inferior
• H3: Titular oscuro de tamaño normal, adecuado para el cuerpo del texto

Escenarios aplicables::

Aplicar a los títulos de las entradas del blog, embellecer la estructura jerárquica del contenido

pertainpágina de productosMejorar la legibilidad

2. Embellecer los estilos de los botones

Botones predeterminados de WordPress (por ejemplo Botón de envío de formulario, botón de compra, botón CTA) puedeEstilo únicoPuede utilizar el CSS Personalizar la apariencia de los botonesque las hacen más atractivas.

segmento de código

/* Armonización de los estilos de botones */<br>button, .button, input[type="submit"] {<br>    color de fondo: #C0007A; /* Magenta */<br>    color: blanco;<br>    font-size: 16px;<br>    acolchado: 12px 24px;<br>    borde: ninguno;<br>    border-radius: 5px; /* esquinas redondeadas */<br>    cursor: puntero;<br>    transición: todos los 0,3s ease-in-out;<br>}<br><br>/* Efecto hover del botón */<br>button:hover, .button:hover, input[type="submit"]:hover {<br>    color de fondo: #007ACC; /* azul cielo */<br>    transformar: scale(1.05); /* ligero zoom */<br>}
/* Armonización de los estilos de botones */<br>button, .button, input[type="submit"] {<br>    color de fondo: #C0007A; /* Magenta */<br>    color: blanco;<br>    font-size: 16px;<br>    acolchado: 12px 24px;<br>    borde: ninguno;<br>    border-radius: 5px; /* esquinas redondeadas */<br>    cursor: puntero;<br>    transición: todos los 0,3s ease-in-out;<br>}<br><br>/* Efecto hover del botón */<br>button:hover, .button:hover, input[type="submit"]:hover {<br>    color de fondo: #007ACC; /* azul cielo */<br>    transformar: scale(1.05); /* ligero zoom */<br>}
/* Armonización de los estilos de botones */
button, .button, input[type="submit"] {
    color de fondo: #C0007A; /* Magenta */
    color: blanco;
    font-size: 16px;
    acolchado: 12px 24px;
    borde: ninguno;
    border-radius: 5px; /* esquinas redondeadas */
    cursor: puntero;
    transición: todos los 0,3s ease-in-out;
}

/* Efecto hover del botón */
button:hover, .button:hover, input[type="submit"]:hover {
    color de fondo: #007ACC; /* azul cielo */
    transformar: scale(1.05); /* ligero zoom */
}

Vista previa del efecto

Estado por defecto:Fondo magenta + Texto blanco
Pase el ratón por encima:Azul cielo + ligero zoom

Escenarios aplicablesAplicable aBotón de envío del formulario de contacto
pertainBotones "Comprar" en sitios de comercio electrónico
pertainBotones CTA (llamada a la acción) para aumentar el porcentaje de clics

3. Personalizar la altura del párrafo, el tamaño de la fuente y el espaciado

deseabletipográficoPara mejorar la legibilidad de su sitio web, los temas predeterminados de WordPress suelen tener un interlineado más estrecho, por lo que podemos utilizar CSS para mejorar la legibilidad de su sitio web. Optimización del texto de los párrafos.

segmento de código

/* Ajuste el espaciado y la altura de línea del texto del párrafo */<br>p {<br>    font-size: 18px; /* tamaño del texto */<br>    altura de línea: 1,8; /* altura de línea */<br>    color: #333; /* color oscuro, contraste mejorado */<br>    margin-bottom: 20px; /* aumente el espaciado entre párrafos */<br>}<br>
/* Ajuste el espaciado y la altura de línea del texto del párrafo */<br>p {<br>    font-size: 18px; /* tamaño del texto */<br>    altura de línea: 1,8; /* altura de línea */<br>    color: #333; /* color oscuro, contraste mejorado */<br>    margin-bottom: 20px; /* aumente el espaciado entre párrafos */<br>}<br>
/* Ajuste el espaciado y la altura de línea del texto del párrafo */
p {
    font-size: 18px; /* tamaño del texto */
    altura de línea: 1,8; /* altura de línea */
    color: #333; /* color oscuro, contraste mejorado */
    margin-bottom: 20px; /* aumente el espaciado entre párrafos */
}

Vista previa del efecto

• Texto más grande para una lectura más cómoda
• Párrafos moderadamente espaciados para reducir la fatiga visual

Escenarios aplicables: Aplicar a las entradas del blog para mejorar la legibilidad
Para que los sitios de noticias mejoren la estética tipográfica

4. Ajuste el espaciado de los elementos de la página (márgenes y márgenes interiores)

En los temas de WordPress, algunos elementos pueden estar demasiado apretados o poco espaciados. CSS Ajuste fácilmente los márgenes exteriores (margin) e interiores (padding).

segmento de código

/* Armonización de los márgenes en todas las secciones */<br>.section {<br>    margin: 40px 0; /* 40px de espacio entre la parte superior e inferior */<br>    padding: 20px; /* margen interior */<br>}<br><br>/* Ajuste del espaciado de los menús de navegación */<br>.nav-menu li {<br>    margin-right: 15px; /* Espacio entre los elementos del menú */<br>}<br><br>/* Ajuste el espaciado entre el área de contenido y la barra lateral */<br>.content {<br>    margen derecho: 30px;<br>}<br>.sidebar {<br>    acolchado-izquierdo: 20px;<br>}<br>
/* Armonización de los márgenes en todas las secciones */<br>.section {<br>    margin: 40px 0; /* 40px de espacio entre la parte superior e inferior */<br>    padding: 20px; /* margen interior */<br>}<br><br>/* Ajuste del espaciado de los menús de navegación */<br>.nav-menu li {<br>    margin-right: 15px; /* Espacio entre los elementos del menú */<br>}<br><br>/* Ajuste el espaciado entre el área de contenido y la barra lateral */<br>.content {<br>    margen derecho: 30px;<br>}<br>.sidebar {<br>    acolchado-izquierdo: 20px;<br>}<br>
/* Armonización de los márgenes en todas las secciones */
.section {
    margin: 40px 0; /* 40px de espacio entre la parte superior e inferior */
    padding: 20px; /* margen interior */
}

/* Ajuste del espaciado de los menús de navegación */
.nav-menu li {
    margin-right: 15px; /* Espacio entre los elementos del menú */
}

/* Ajuste el espaciado entre el área de contenido y la barra lateral */
.content {
    margen derecho: 30px;
}
.sidebar {
    acolchado-izquierdo: 20px;
}

Vista previa del efecto

• Mejorar la jerarquía de las páginasEsto hará que las secciones sean más claras.
• Aumente el espaciado del menú de navegaciónpara evitar que los elementos del menú sean demasiado compactos
• Optimizar la tipografía de la barra lateralFacilite la lectura de los contenidos

Escenarios aplicables: para todos los sitios WordPressOptimización tipográfica
Adecuado para retocar blogs, páginas de productos, páginas de servicios deespaciado

5. Configurar el redondeo de la imagen y los efectos de sombra

Si lo deseaDar a las fotos un aire más modernoPuede utilizar el CSS añade esquinas redondeadas y sombras a las imágenesy mejorar el atractivo visual.

segmento de código

/* Haga que todas las imágenes tengan esquinas redondeadas y sombras por defecto */<br>img {<br>    border-radius: 10px; /* esquinas redondeadas */<br>    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0, 0.2); /* añadir sombra */<br>    transición: transformación 0,3s ease-in-out;<br>}<br><br>/* Zoom de la imagen al pasar el ratón por encima */<br>img:hover {<br>    transformar: escala(1,05);<br>}<br>
/* Haga que todas las imágenes tengan esquinas redondeadas y sombras por defecto */<br>img {<br>    border-radius: 10px; /* esquinas redondeadas */<br>    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0, 0.2); /* añadir sombra */<br>    transición: transformación 0,3s ease-in-out;<br>}<br><br>/* Zoom de la imagen al pasar el ratón por encima */<br>img:hover {<br>    transformar: escala(1,05);<br>}<br>
/* Haga que todas las imágenes tengan esquinas redondeadas y sombras por defecto */
img {
    border-radius: 10px; /* esquinas redondeadas */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0, 0.2); /* añadir sombra */
    transición: transformación 0,3s ease-in-out;
}

/* Zoom de la imagen al pasar el ratón por encima */
img:hover {
    transformar: escala(1,05);
}

Vista previa del efecto

estado por defecto::Imágenes con esquinas redondeadas de 10px + sombreado
al pasar el ratón::Las imágenes están ligeramente ampliadas para aumentar la sensación de interacción

Escenarios aplicables: Aplicar a las imágenes que acompañan a las entradas del blog para mejorar la experiencia visual
Aplíquelo a las imágenes de los productos para aumentar su atractivo
Adecuado para la presentación de equipos, exposición de vitrinas y otros contenidos de imagen

Cómo añadir CSS personalizado en WordPress

Método 1: Utilizar el propio "CSS personalizado" de WordPress

1. Inicie sesión en el backend de WordPress
2. entrar en Apariencia → Personalización → CSS extra

3. Pegue el código CSS anterior y haga clic en escriba a

Método 2: Utilice "CSS personalizado sencillo" Plug-ins Si su tema no admite la adición directa de CSS, puede instalar el archivo CSS personalizado sencillo Complementos:

1. Instalación de plug-ins → Búsqueda de fondo en WordPress CSS personalizado sencillo

2. Activación de plug-ins
3. Pegue el código CSS en la interfaz del plugin y guarde los cambios.

Resumen: 5 códigos CSS para mejorar el aspecto de WordPress

La adopción de esta guía para la 5 fragmentos de código CSS que debe aprenderPuede encontrar fácilmente más información al respecto en el Sitio web de WordPressPersonalice su diseño sin depender de engorrosos plugins ni modificar los archivos del tema. Ya sea Ajustar el estilo del títuloyBotón EmbelleceryOptimizar la disposición de los párrafoso Ajuste del espaciado entre páginas responder cantando Ajuste del efecto de imagenTodos estos sencillos códigos pueden ayudarle a mejorar rápidamente el aspecto y la experiencia de usuario de su sitio web.

Pulse para saber más sobre WordPress Métodos de jardinería.