WordPress Directo
  • Tutoriales
  • Plugins
  • Plantillas
  • Optimización
  • SEO
  • WordPress Hosting
No Result
View All Result
WordPress Directo
  • Tutoriales
  • Plugins
  • Plantillas
  • Optimización
  • SEO
  • WordPress Hosting
No Result
View All Result
WordPress Directo
No Result
View All Result

Cómo añadir estilos personalizados en el editor de WordPress

Jorge López by Jorge López
27 enero 2018
in Optimización
Reading Time: 3 mins read
0

El hecho de poder añadir estilos personalizados te permitirá aplicar formatos sin tener que cambiar al editor HTML constantemente. En este artículo veremos como añadir estilos personalizados en el editor visual de WordPress.

Antes de empezar, deciros que este tutorial requiere de un mínimo conocimiento sobre CSS.

Por defecto, el editor visual de WordPress viene con unas cuantas opciones de estilo básicas y con distintos formatos. Sin embargo, es muy posible que en ciertos momentos quieras añadir tus propios estilos personalizados para poder insertar botones, bloques de contenido, taglines…

Artículos relacionados

Limpieza de la base de datos de WordPress para un rendimiento óptimo

18 diciembre 2024

Cómo optimizar imágenes para subirlas a WordPress

29 octubre 2016

10 consejos para mejorar la seguridad de WordPress

28 junio 2016

¿Cómo banear una IP en mi Wordpress?

23 noviembre 2016

Siempre puedes cambiar al editor HTML para añadir el código HTML y CSS necesario. Pero si por norma general sueles utilizar esto para añadir estilos a tus contenidos, lo suyo sería añadirlos al editor visual para tenerlos más a mano.

Puedes ahorrarte mucho tiempo en el hecho de estar cambiando entre el editor visual y el editor HTML. Además, tus contenidos ganarán consistencia puesto que utilizarás los mismos estilos en toda la web.

Y lo más importante, podrás modificar o actualizar estilos sin tener que andar editando posts uno a uno.

Habiendo dicho esto, vamos a echar un vistazo a cómo añadir estilos personalizados en el editor visual de WordPress.

Añadir estilos personalizados mediante TinyMCE Custom Styles

Lo primero que necesitas hacer es instalar y activar el plugin TinyMCE Custom Styles. Para ello, ve a la sección Plugins del backoffice de tu WordPress y selecciona la opción de Añadir Nuevo. En la página de Añadir Nuevo Plugin, busca el plugin que queremos instalar haciendo uso del campo de búsqueda que se sitúa en la parte superior derecha de la página.

Teclea el nombre del plugin (que como te hemos indicado es «TinyMCE Custom Styles») y presiona ENTER para iniciar la búsqueda. Si has seguido los pasos al pie de la letra, este plugin te debería aparecer como el primer resultado de la búsqueda. Instálalo y actívalo para poder utilizarlo.

Una vez activado, ve a Ajustes >> TinyMCE Custom Styles para configurar el plugin.

estilos personalizados

El plugin te permite escoger la ubicación de las hojas de estilo. Puedes utilizar las hojas de estilo de tu theme, o bien puedes escoger un archivo a parte para añadir ahí estos estilos personalizados.

Después de haber configurado la ubicación, debes hacer clic en el botón Save All Settings para guardar los cambios.

Ahora puedes añadir tus estilos personalizados. Desplázate hacia abajo en esta misma página, hacia la sección de estilos, y haz clic en el botón «Agregar Nuevo Estilo».

Lo primero de todo es ponerle un nombre a dicho estilo. Este nombre se mostrará en el desplegable del editor visual. Después, debes escoger el tipo, el nombre de la clase y agregarle las distintas reglas CSS que desees que lleve el estilo personalizado.

estilos personalizados

Una vez que hayas añadido el estilo CSS, haz clic en el botón Save All Settings para guardar los cambios.

Ahora, al editar un post existente o crear uno nuevo, verás un nuevo desplegable en el editor visual llamado «Formatos». Si todo ha salido bien, dentro estará el estilo que has creado anteriormente.

estilos personalizados

Y hasta aquí nuestro artículo sobre cómo añadir estilos personalizados en el editor de WordPress. Espero que te haya gustado y, si te ha resultado útil, no dudes en compartirlo en redes sociales.

Icono: Mohamed Mbarki

 

Guardar

Tags: cssestilosestilos personalizadosformatoformatos en WordPress
ShareTweetSendSharePin
Jorge López

Jorge López

Soy programador web y me gusta mucho el diseño gráfico, la fotografía y todo lo relacionado con las nuevas tecnologías. En mis ratos libres me encanta dibujar y escuchar música. ¡No podría vivir sin ella! Aparte soy un friki de las series...las devoro

Te puede interesar...

Optimización

Migración segura de versiones importantes de PHP (ej. 7.4 a 8.4) en WordPress

1 julio 2025

Actualizar la versión de PHP en un sitio WordPress no es solo una recomendación...

Optimización

Comparativa de motores de caché y optimización de rendimiento en WordPress

30 junio 2025

El rendimiento web sigue siendo una prioridad para administradores y desarrolladores WordPress en 2025....

Noticias

¿Qué diferencia hay entre la caché del servidor, la caché del navegador y la caché del sitio web? Guía completa para acelerar tu página

27 junio 2025

La velocidad lo es todo en internet. Si un sitio tarda más de unos...

Optimización

Mejores prácticas para configuración de xmlrpc.php y REST API

27 junio 2025

La seguridad y el rendimiento en WordPress han evolucionado significativamente en los últimos años,...

No Result
View All Result
Plugin Imagify, optimizar imágenes
wordpress hosting NVME
Elegant Themes WordPress
elementor editor plugin




Últimos artículos

Cómo corregir el error ERR_SSL_VERSION_OR_CIPHER_MISMATCH

8 agosto 2017

Cómo instalar Google Analytics en WordPress

1 marzo 2017

Productos tecnológicos, los grandes protagonistas de los regalos de los Reyes Magos

20 enero 2022

9 plugins de WordPress para hacer mucho más con tus fuentes

12 marzo 2016

Cómo añadir gifs animados de Giphy en WordPress

21 noviembre 2017
WordPress Directo

WPDirecto.com es una revista especializada en WordPress y WooCommerce que ofrece una amplia gama de recursos, incluyendo tutoriales, análisis de plugins y plantillas, consejos de optimización y estrategias de SEO, para ayudar a los usuarios a mejorar y personalizar sus sitios web, manteniéndolos informados sobre las últimas novedades y tendencias en el mundo de WordPress.

Menu

  • Tutoriales
  • Plugins
  • Plantillas
  • Optimización
  • SEO
  • WordPress Hosting

Información

WPDirecto es un medio de Medios y Redes:
  • Artículos patrocinados
  • Servicio de diseño web
  • Contacto
  • Acerca de MyR
  • Política de privacidad y cookies
  • Aviso Legal

© 1995-2025 Color Vivo Internet, SLU (Medios y Redes Online).. Otros contenidos se cita fuente. Infraestructura cloud servidores dedicados de Stackscale.

No Result
View All Result
  • Tutoriales
  • Plugins
  • Plantillas
  • Optimización
  • SEO
  • WordPress Hosting

© 1995-2025 Color Vivo Internet, SLU (Medios y Redes Online).. Otros contenidos se cita fuente. Infraestructura cloud servidores dedicados de Stackscale.