Hay más de una forma de agregar código CSS personalizado a un blog de WordPress.

Hoy, explicaré las fortalezas y debilidades de los dos métodos diferentes que le propongo, para que pueda elegir el que más le convenga.

Pero antes, si nunca has instalado WordPress, descubre ¿Cómo instalar un blog de WordPress pasos 7 et ¿Cómo encontrar, instalar y activar un tema de WordPress en tu blog 

Luego de vuelta a por qué estamos aquí.

Cómo encontrar los artículos que desea personalizar

Una vez que haya aislado la parte de el tema de WordPress que quieres cambiar (por ejemplo el título de un artículo), necesitarás determinar las propiedades CSS aplicado para que pueda hacer los cambios apropiados. Afortunadamente, este proceso no es complicado.

El CSS utiliza selectores para determinar qué elementos experimentarán los diferentes cambios específicos. Por lo general, esto se hace especificando un " clase "De un elemento (o elemento DOM). Sin embargo, CSS también se puede utilizar para definir el diseño de un elemento completo (por ejemplo, la etiqueta " ") o utilizando el identificador de la etiqueta.

Afortunadamente, los navegadores populares nos permiten ver los diferentes selectores y declaraciones que se aplican a los elementos de la página con solo unos pocos clics. En Google Chrome, por ejemplo, solo necesita resaltar una parte específica del documento y luego hacer clic derecho, como en el siguiente ejemplo.

blogpascher-inspección

Al hacer clic en " Inspeccionar el elemento En el menú desplegable que aparece, verá el código HTML de la página en una nueva ventana con el elemento inspeccionado resaltado en la ventana de la derecha (o por debajo). Se puede ver un ejemplo a continuación.

blogpascher-logo

Los textos de estos elementos (o atributos) Resaltado en rojo, muestra los diferentes estilos específicos aplicables al elemento que había resaltado al inspeccionar el código.

Lea también: Cómo agregar un menú desplegable con CSS en su Editor de Visual

Por ejemplo, el elemento " tamaño de fuente Le indica que la fuente que se muestra en el elemento resaltado tiene un tamaño de 13 píxeles. Los descriptores están rodeados por llaves y precedidos por selectores. El nombre del archivo de hoja de estilo correspondiente se muestra a la derecha de los selectores.

Una vez que tenga esta información en mente, cambiar el estilo se vuelve fácil. Por ejemplo, si desea cambiar la fuente de 13px a 14px, simplemente busque su archivo de hoja de estilo, el selector que corresponde al elemento resaltado. Generalmente es de esta forma: (« # Información .block-plugin-contenido"). A continuación, puede modificar los diferentes valores de los atributos.

Puedes hacer lo mismo en Firefox, solo resalta una parte específica de la página, haz clic derecho en el elemento, luego selecciona " Inspeccionar el elemento En el menú que aparece.

Cómo WordPress y el trabajo en conjunto CSS

Es un hecho que el Temas de WordPress se crean de manera diferente. Así que tenga en cuenta que su tema de WordPress podría no cumplir al 100% con lo que lee en las siguientes secciones.

Dicho esto, es más que probable que el CSS utilizado en tu blog de WordPress se encuentre en un archivo llamado " style.css " Este es el nombre común de una hoja de estilo para cualquier tipo de sitio web, no solo WordPress.

Ver tambien Cómo cambiar el tamaño de las imágenes Gravatar en WordPress

Ahora es el momento de pasar por los diferentes procesos de edición.

Método # 1: Edición del archivo de estilo de su tema de WordPress

Hay dos formas de acceder al archivo style.css de su tema.

Lo primero es hacerlo desde tu panel de WordPress. En el menú del lado izquierdo, seleccione el menú " Apparence "Y luego" Editorial ".

menu-editor-en-imagen de última generación

Una vez que esté en la página del editor, verá una lista de archivos en una barra vertical en el lado derecho de la página. Desplácese por la lista de archivos. Verá un archivo llamado " style.css hoja de estilo Al final de la página.

Si hace clic en el nombre de este archivo, se cargará y se mostrará en el editor en el medio. Puede usar esta pantalla para editar el archivo.

menu-wordpress-editor en código

La otra forma de encontrar la hoja de estilo es navegar a través del sistema operativo de su proveedor de alojamiento y ubicar el archivo en el tema de WordPress (usando un cliente FTP). La ubicación exacta variará según su proveedor de alojamiento. En el ejemplo que se muestra a continuación, el nombre del sitio web (en nuestro caso thecare) Es una carpeta dentro de la carpeta public_html.

Dado que WordPress está instalado, puede ver la carpeta wp-content en "thecare". La subcarpeta wp-content es otra carpeta llamada " wp-temas", que es donde se encuentran todas las Temas de WordPress están instalados.

Desde este sitio web se utiliza un tema llamado " Boletin Informativo », El archivo de estilo« style.css Se encuentra en la carpeta " Boletín de padres ".

Boletín de padres-carpeta-800x401

Método # 2: usar un complemento para modificar CSS

Quizás la forma más conveniente de editar el CSS de su blog de WordPress es el uso de un complemento.

Una de las principales ventajas de usar un complemento es similar a la de los temas secundarios. si actualizas el tema de WordPress, sus cambios no se sobrescribirán, ya que se almacenarán por separado y no entre los archivos del tema. La otra ventaja, por supuesto, es que no tiene que crear un tema hijo.

Aquí hay algunos complementos premium que también puedes usar para modificar el código CSS de tu tema de WordPress :

1. Lápiz amarillo: Visual CSS Style Editor

Yellow Pencil es un editor de estilo visual que puedes usar con cualquier tema para personalizar tu sitio web en minutos (fuentes, colores, animaciones y más…).Plugin de wordpress del editor de estilo CSS visual YellowPencil

Ce Plugin de WordPress premium creará estilos CSS por fondo mientras juegas con los colores como si fuera un juego, fue diseñado tanto para principiantes como para usuarios experimentados.

Descubre también nuestro Complementos 5 WordPress para mostrar notificaciones

No se requieren conocimientos de codificación. sin embargo, el Plugin de WordPress tiene un buen editor de CSS para aquellos a los que les gusta codificar. Puede codificar en vivo con este editor y personalizar su CSS.

Descargar | Demo | alojamiento web

2. JS y CSS personalizados para Gutenberg

Le Plugin de WordPress JS y CSS personalizados premium para Gutenberg le permitirá agregar un número ilimitado de estilos personalizados al editor WYSIWYG para sus publicaciones y páginas de WordPress. Es totalmente compatible con la versión Gutenberg de WordPress.

JS y CSS personalizados para el complemento de WordPress de Gutenberg

Simplemente puede crear un nuevo estilo con un editor CSS fácil de usar. Este complemento de WordPress amplía las características de campos personalizados de su sitio web y le brinda la posibilidad de modificar sus campos personalizados con un módulo de personalización dinámico y potente. y la funcionalidad de vista previa en tiempo real de este complemento de WordPress lo hace muy cómodo y fácil de usar.

Descargar | Demo | alojamiento web

3. SiteOrigin CSS

Es, con mucho, el complemento de WordPress que ofrece la mayor cantidad de opciones en esta lista. Lo sorprendente de este último es que es gratis. Este complemento de WordPress es el único que no se puede encontrar en el personalizador.

SiteOrigin CSS - Complemento de WordPress

Después de instalar y activar el complemento, debe navegar a la siguiente ubicación " Apariencia> CSS personalizado Para acceder a la edición CSS del complemento. En esta página, puede ver un editor de texto que no ofrece una vista previa en vivo. 

Lea también nuestro artículo sobre Complementos de 10 WordPress para aumentar las ventas de su sitio web

Para acceder a este último, debes hacer clic en uno de los dos botones que aparecen a la izquierda, justo encima del editor. El botón con el icono de un ojo mostrará un editor de CSS visual que los aficionados apreciarán. El icono con las flechas de extensión mostrará un editor de texto que implicará un dominio de los códigos CSS.

Descargar | Demo | alojamiento web

4. Simple CSS personalizado

Simple CSS personalizado Es uno de los complementos más populares.

CSS personalizado simple - Complemento de WordPress WordPress.org

Descubre también nuestro Cómo hacer que tu blog sea rápido: administrar archivos CSS y JS.

Se ha instalado más de 100 veces y ha recibido una calificación de cinco estrellas.

Descargar | Demo | alojamiento web

5. WP Añadir CSS personalizado

WP Agregar CSS personalizado es un complemento que te permite cambiar el diseño de un blog de WordPress artículos completos o solo individuales. Esta es una gran opción si está buscando flexibilidad para personalizar artículos.

wp-add-personalizada

El complemento se ha descargado más de 10.000 veces y actualmente disfruta de una calificación de 4,3 estrellas.

Descargar | Demo | alojamiento web

6. Drogadicto del tema de CSS personalizado

Si está buscando una solución que ofrezca una vista previa en vivo de sus cambios, puede considerar usar Tema Junkie CSS personalizado

es el tema de CSS-junkie

Esta solución agrega un administrador de CSS personalizado a su tablero, donde puede agregar sus propios estilos. También ofrece una alternativa a usando un tema hijo.

Descargar | Demo | alojamiento web

Otros recursos recomendados

También lo invitamos a consultar los recursos a continuación para avanzar en el control y agarre de su sitio web y blog.

Conclusión

¡Listo! Eso es todo por este tutorial, espero que pueda agregar código CSS personalizado a su blog de WordPress en 2 métodos, si tiene alguno comentarios o sugerencias, no dude en contarnos en la sección reservada para estos.

Sin embargo, también podrá consultar nuestra Recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.

Si te gustó este artículo, nno dudes en comparte en tus redes sociales favoritas

...